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 !

18 Nhận xét on "Tạo widget SlideShow Tab View cho Blogger"

NAD on 13 May 2009 at 13:34 said...

Bóc tem bài mới :D

NAD on 13 May 2009 at 13:38 said...

Trước mình có dùng template dạng tab thế này nhưng load khá chậm (đặc biệt là với IE), ko biết cái này sao nhỉ :|

vuluganck on 13 May 2009 at 14:50 said...
This comment has been removed by the author.
vuluganck on 13 May 2009 at 14:50 said...

DX mấy cái code dấu
< thành & l t ;
> thành &g t ;

vậy mấy cái dấu & thì đổi thành gì bạn biết tool nào hay web nào có thể convert dc tại chỗ ko ?Cám ơn

boyproDX on 13 May 2009 at 16:15 said...

@NAD : Mình test thử thì thấy cái này load khá tốt, không chậm lắm đâu :D. Bạn NAD cứ chèn thử vào xem thế nào , tại cái widget này bản chất là dùng CSS thôi, chứ ko phải Flash hay JS.

@vuluganck : Cách tốt nhất là vuluganck tạo bài viết trong BloggerinDraft , chỉnh Cài đặt Soạn thảoHiển thị HTML , điền code gốc vào tab Viết rồi qua tab Chỉnh sửa HTML để lấy code đã qua hiệu chỉnh. Chúc vui ^^!

vuluganck on 14 May 2009 at 05:54 said...

la sao minh ko hieu dx ? con may cai &quote nua, minh chang biet bloggerindraft o dau ca

boyproDX on 14 May 2009 at 13:37 said...

@vuluganck : Bạn xem cái hình này cho dễ hiểu nhé http://img2.pict.com/28/c4/6c/3ca369b779e79fb1631394da81/YaFXc/code.png.
Mình có từng giới thiệu 1 trang web giúp convert kí tự này, nhưng hiện tại thì nó bị die rùi. Đành phải xài đỡ Blogger in Draft thôi :|

NAD on 15 May 2009 at 12:08 said...

Mình đã copy và làm y hệt như bài viết, ko thay đổi chút j nhưng vẫn ko hiện ra nội dung của các tab 1 2 3 4

boyproDX on 15 May 2009 at 21:42 said...

@NAD : Có lỗi ở bước 3, đã khắc phục. NAD thử lại dùm nhé ^^!

NAD on 16 May 2009 at 02:15 said...

Ok, mình sẽ thử lại xem sao, thanks :D

HUYNH TRƯỞNG GIÁO XỨ THÁNH LINH on 30 June 2009 at 08:19 said...

cam on

Vũ Duy Quốc on 21 November 2009 at 09:38 said...

có cách nào chỉnh để cho thời gian chuyển lâu hơn ko nhỉ

coldboy on 18 September 2010 at 09:07 said...

Có cách nào để bo viền không, và cách tahy đổi giữa các hình làm sao để trông cho đẹp hơn!

Anonymous said...

thế này mà cũng đem ra post,yêu cầu chọn lọc bài viết 1 tý

DH on 16 August 2011 at 00:43 said...

mình có tạo môt cái widget slideshow tab view cho blog, mình làm y chang như hướng dẫn những không được. khi mình mở lên thì nó không chạy cho. Du khi trong rich text thì mình vẫn xem được đầy đủ hình ảnh và chữ. Nếu bạn biết hướng dẫn mình với nhé ! Không biết nguyên nhân là vì đâu !

thaithuan on 26 December 2011 at 21:32 said...

Tui làm được rồi . Hi Hi

Anonymous said...

bạn ơi sao mình nhấn vào số trong lúc đang slide thì nó đứng mất ko chạy nữa :(

Green Vietnam on 29 February 2012 at 06:51 said...

cái bài nay ko có demo nên cũng ko hiểu tab view là thế nào :D

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3