Tạo widget SlideShow Tab View cho Blogger

Lướt web thường xuyên, chắc các bạn cũng sẽ không ít lần gặp Slideshow Tab View . Widget này khá đẹp và có thể dùng để trang trí thêm cho blog, 1 blogger Indonesia - Kang Rohman có 1 bài viết hướng dẫn cách tạo widget này. Mời các bạn xem qua bài hướng dẫn đã được mình dịch lại bên dưới .

Để tạo widget, bạn làm theo các bước sau :

1. Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
2. Thêm đoạn code bên dưới vào ngày trên thẻ ]]></b:skin>
   
   .indentmenu{
   font: bold 11px Arial;
   width: 100%; /*leave this value as is in most cases*/
   }
   .indentmenu ul{
   margin: 2px;
   padding: 0;
   float: left;
   /* width: 80%; width of menu*/
   background: transparent;
   }
   .indentmenu ul li{
   display: inline;
   }
   .indentmenu ul li a{
   float: left;
   margin: 2px;
   color: #000; /*text color*/
   padding: 5px 11px;
   text-decoration: none;
   border: 1px solid #ccc;
   }
   .indentmenu ul li a:hover{
   background:#ddd;
   }
   .indentmenu ul li a:visited{
   color: white;
   }
   .indentmenu ul li a.selected{
   color: white !important;
   padding-top: 6px; /*shift text down 1px*/
   padding-bottom: 4px;
   border: 1px solid #000000;
   background:#000000;
   }
   .tabcontentstyle{ /*style of tab content container*/
   border: 1px solid gray;
   width: 450px;
   margin-bottom: 1em;
   padding: 10px;
   }
   .tabcontent{
   display:none;
   }
   @media print {
   .tabcontent {
   display:block !important;
   }
   }
3. Tiếp theo , bạn vào đây, copy toàn bộ đoạn code và dán vào trước thẻ </head>.
4. Save lại template, rồi chuyển sang tab Phần tử trang (Page Elements) . Tạo một widget HTML/Javascript với nội dung như sau :
   
   <div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
   
       <div id="pettabs" class="indentmenu">
   
       <ul>
       <li><a href="#" class="selected" rel="tab1">1</a></li>
       <li><a href="#" rel="tab2">2</a></li>
       <li><a href="#" rel="tab3">3</a></li>
       <li><a href="#" rel="tab4">4</a></li>
   
       </ul>
       <br style="clear: left"/>
       </div>
   
       <div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">
   
       <div id="tab1" class="tabcontent">
       <a href="http://boyprodx.blogspot.com/2009/05/mot-so-hinh-anime-13.html">
       <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="http://farm4.static.flickr.com/3645/3475475585_9defa0c71a_o.jpg" height="152"/></a>
   
       <p><h3><a href="http://boyprodx.blogspot.com/2009/05/mot-so-hinh-anime-13.html">Một số hình anime (13)</a></h3></p>
   
       </div>
   
       <div id="tab2" class="tabcontent">
       <a href="http://boyprodx.blogspot.com/2009/04/convert-video-truc-tuyen-mien-phi-voi.html">
       <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="http://1.bp.blogspot.com/_K1kfqOH2Mmc/Se8vp2QwrWI/AAAAAAAAA-o/8XAECSV8-ck/s320/logo.jpg" height="152"/></a>
       <p><h3><a href="http://boyprodx.blogspot.com/2009/04/convert-video-truc-tuyen-mien-phi-voi.html">Convert video trực tuyến miễn phí với CatchVideo</a></h3></p>
   
   Thông thường, các video-clips được đăng tải trên các trang chia sẻ video trực tuyến luôn mang định dạng .flv . Định dạng này không hợp với nhiều phần mềm , thiết bị nên vì thế người dùng hay convert (đổi định dạng) chúng khi download về.[...]
       </div>
   
       <div id="tab3" class="tabcontent">
       <a href="http://boyprodx.blogspot.com/2009/04/10-thu-thuat-voi-link-youtube-ma-ban.html">
       <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="http://www.makeuseof.com/wp-content/uploads/2009/04/youtube_logo1.jpg" height="152"/></a>
       <p><h3><a href="http://boyprodx.blogspot.com/2009/04/10-thu-thuat-voi-link-youtube-ma-ban.html">10 thủ thuật với link Youtube mà bạn nên biết</a></h3></p>
   
   Youtube là 1 dịch vụ chia sẻ video trực tuyến hàng đầu thế giới với số lượng video và thành viên rất đông. Để việc xem các clips trên Youtube 1 cách tiện lợi hơn, thì bên dưới đây là 10 thủ thuật về Youtube mà bạn nên biết.
   [...]
       </div>
   
       <div id="tab4" class="tabcontent">
       <a href="http://boyprodx.blogspot.com/2009/04/mot-so-hieu-ung-cho-anh-trong-blogger.html">
       <img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="http://1.bp.blogspot.com/_K1kfqOH2Mmc/SYV7uK09uFI/AAAAAAAAA2U/L-dEPIROfE0/s320/blogger.png" height="152"/></a>
       <p><h3><a href="http://boyprodx.blogspot.com/2009/04/mot-so-hieu-ung-cho-anh-trong-blogger.html">Một số hiệu ứng cho ảnh trong Blogger (cập nhật)</a></h3></p>
   
   Như các bạn đều biết, để 1 bài đăng thật sự hiệu quả, gây sự chú ý của người đọc thì hình ảnh minh họa là không thể thiếu. Vì thế, hôm nay mình xin hướng dẫn cách tạo 1 số hiệu ứng lạ mắt cho ảnh minh họa, góp phần làm sinh động cho bài viết.[...]
       </div> </div>
   
       <script type="text/javascript">
   
       var mypets=new ddtabcontent("pettabs")
       mypets.setpersist(true)
       mypets.setselectedClassTarget("link")
       mypets.init(2000)
   
       </script></div>
5. Chỉnh sửa lại nội dung của widget trên theo ý thích rồi save lại.

Hiệu chỉnh widget SlideShow Tab View

- Đầu tiên, bạn cần thay những vùng text được tô màu đỏ thành những nội dung từ Blog bạn.
- Tiếp đến , bạn lưu ý các đoạn <div style ...> , hiệu chỉnh các yếu tố như float ; margin ; padding ; height ; width ; text-align ; padding ; margin-bottom theo ý thích sao cho phù hợp.
- Đồng thời, để thêm tab, bạn chỉ việc copy các đoạn code liên quan đến tab và sửa lại các số thứ tự của tab cho phù hợp (bạn xem kĩ code sẽ hiểu được cơ cấu).

P/s : Nếu còn thắc mắc, hãy để lại comment cho mình. Mình sẽ cố gắng trả lời nhanh nhất. Hy vọng bạn thích thủ thuật này. Chúc thành công !