Menu dropdown CSS3 cho Blogger- Cải thiện tốc độ load,không ảnh,không JS

Tốc độ load trang là một vấn đề khá nhức đầu của các Blogger,nếu trang của bạn rất nhiều javascript,nó sẽ load ì ạch và tất nhiên sẽ gây khó chịu cho người xem,không ai muốn quay lại đọc một trang như thế.Hình ảnh và các Javascript chính là những nguyên nhân chính gây ảnh hưởng đến tốc độ load của trang bạn,Cấu trúc một menu thường được viết bằng các hiệu ứng từ js hay hiệu ứng hình ảnh,sẽ làm giảm tốc độ load trang của bạn rất nhiều,.Menu này được viết hoàn toàn bằng CSS3 và có sổ dọc,khá đẹp mắt(Bachkhoamedia cũng sử dụng menu này) Sau đây là các bước thực hiện :
Xem thêm...

Read More

Multi tab widget kiểu mới cho Blogger

Multi Tabbed Widget là tiện ích được sử dụng khi trên Blog bạn có chứa khá nhiều widget. Một giải pháp thường được các Blogger áp dụng là chia footer-wrapper làm nhiều cột để chứa các widget này.

Tuy nhiên, điều này không phải ai cũng thích, nhất là các blog được thiết kế mang phong cách báo chí. Từ đó mới xuất hiện tiện ích gọi là Multi Tabbed Widget.

Tiện ích này xuất hiện từ khá lâu, mà bắt nguồn từ các Blog sử dụng nền tảng Wordpress, sau đó được các Pro Blogger “bào chế” để áp dụng cho Blogspot.

Sử dụng Multi Tabbed Widget không những giúp tiết kiệm không gian trên Blog, làm cho Blog của bạn trông gọn gàng hơn, mà còn có thể giúp tăng thời gian tải trang cho Blog của bạn do nó kết hợp hai hay nhiều widget làm một.

Demo

Các bước thực hiện như sau:

1. Đăng nhập Blogger >Thiết kế >Chỉnh sửa HTML
2. Tải xuống mẫu cũ của bạn đề phòng rủi ro
3. Tìm kiếm ]]></b:skin>
4. Chèn đoạn code trong file dưới đây (Bạn tải về file TXT và cop đoạn code trong đó dán vào dưới ]]></b:skin>) : Download 
5. Chèn trên ]]></b:skin> đoạn code dưới đây:

/*----- MBT Multi Tabbed Widget ----*/ 
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px} 
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left} 
.tabs-widget li:first-child{margin:0} 
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL2ZtJg6yJtSPJNGVjvPeED5pzDn_VGQ9au9IUUYdq7PgMZX0MBFVK7WTQvrmY28DdYNlzl3B7BkSB9p-Rp2h4oNw4QtYzVmbZTyzViUUuZmv07m292jkphytKEpzbsWWAoBE0S_eyS5M/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase} 
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL2ZtJg6yJtSPJNGVjvPeED5pzDn_VGQ9au9IUUYdq7PgMZX0MBFVK7WTQvrmY28DdYNlzl3B7BkSB9p-Rp2h4oNw4QtYzVmbZTyzViUUuZmv07m292jkphytKEpzbsWWAoBE0S_eyS5M/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none} 
.tabs-widget-content{} 
.tabviewsection{margin-top:10px;margin-bottom:10px;}

6.Tìm kiếm   <div class='column-right-inner'> hoặc  <div id='sidebar-wrapper'>

7.Sau đó chèn đoạn code sau đây vào bên dưới chúng:

<div class='tabviewsection'>
<script type='text/javascript'> 
            jQuery(document).ready(function($){ 
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); 
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show(); 
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show(); 
       
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { 
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;); 
                    $(this).addClass(&quot;tabs-widget-current&quot;); 
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); 
                    var activeTab = $(this).attr(&quot;href&quot;); 
                    $(activeTab).fadeIn(); 
                    return false; 
                }); 
            }); 
        </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'> 
<li><a href='#widget-themater_tabs-1432447472-id1'>Phần mềm</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id2'>Tài liệu</a></li> 
<li><a href='#widget-themater_tabs-1432447472-id3'>Tag Cloud</a></li> 
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'> 
<b:section class='sidebar' id='sidebartab1' preferred='yes'> 
</b:section>                                       
</div>                            
                                
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'> 
<b:section class='sidebar' id='sidebartab2' preferred='yes'> 
</b:section>                                         
</div>                            
                                
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'> 
<b:section class='sidebar' id='sidebartab3' preferred='yes'> 
</b:section>                                        
</div>
</div>
<div style='height:5px;clear:both;'/>

Sửa Phần mềm,Tài liệu,Tag cloud thành tên các Tab  theo ý bạn


7.Vào phần tử trang :Các bạn sẽ thấy

Và các bạn có thể thêm các widget vào theo ý muốn!

Chúc các bạn thành công!

Dịch từ My Blogger tricks

Bachkhoamedia

Read More

Tạo menu đa cấp dùng CSS3 cho Blogger và Wordpress

Menu là một phần không thể thiếu đối với trang web,Blog cũng không ngoại lệ,Blogger không trang bị hệ thống menu cho Blog ,việc trang bị menu ưng ý cho Blog cũng không phải việc đơn giản,Bachkhoamedia xin giới thiệu với các bạn một dạng menu,Đây mà menu đa cấp sử dụng CSS3 và hiệu ứng ảnh,các bạn  có thể tham khảo cách làm dưới đây :




Xem thêm...

Read More

[Thông báo]Nguyên nhân tình trạng hỏng link file download trên Bachkhoamedia

Bộ Tư pháp Mỹ vừa cho biết, một trong những địa chỉ chia sẻ tài liệu trực tuyến lớn nhất thế giới là Megaupload.com đã bị đóng cửa, đồng thời 7 người liên quan tới website này đã bị truy tố vì vi phạm bản quyền nghiêm trọng. Trong một thông cáo phát đi ngày 19/1, Bộ Tư pháp Mỹ cáo buộc Megaupload.com là “một âm mưu lớn” và là một “tổ chức tội phạm toàn cầu”, trong đó các thành viên của trang web này đã vi phạm bản quyền và rửa tiền với quy mô lớn.

Xem thêm...

Read More

[Thủ thuật] Tạo widget Box liên kết cho Blogger

Một vài bạn đã hỏi mình về code Box liên kết của Bachkhoamedia,mình chưa có điều kiện trả lời,nay mình xin post bài này để trả lời các bạn,hi vọng cộng động blogger Việt sẽ ngày càng lớn mạnh(Code này do mình tham khảo trên trang ItechPlus) :

Chắc hẳn bạn đã từng thấy tiện ích Friend Connect – Kết nối bạn bè trên một blog nào đó. Đây là một khung chứa liên kết đến các trang blog cá nhân của những người bạn của chủ Blog.

Tiện ích này không những có thể giúp chủ blog liên kết dễ dàng đến các Blog khác, mà đây còn là một hình thức để quảng bá lẫn nhau giúp tăng Pageview cho những blog được liên kết.

Dĩ nhiên Google cũng đã cung cấp cho các Blogger một tiện ích tương tự là Google Friend Connect hay Followers, nhưng tiện ích này có một vài nhược điểm như :

• Phải sử dụng 1 file JavaScript để thực thi. Điều này xem ra không ổn vì sẽ ảnh hưởng đôi chút đến tốc độ tải trang của Blog, cho nên nó thường được các Blogger đặt ở Footer ( bên ngoài content-wrapper ).
• Đoạn code để tạo nên tiện ích không hợp chuẩn W3C Validator - Điều này sẽ ảnh hưởng đến nhiều thứ khác.

Xem thêm...

Read More