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 !

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Không có nhận xét nào

Một số lưu ý khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!

» Cảm ơn bạn đã ghé thăm websitemika.com
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một góp ý !
» Vui lòng đăng những góp ý lịch sự và gõ tiếng Việt có dấu nếu có thể
HƯỚNG DẪN ĐĂNG THÔNG TIN GÓP Ý :
Bước 1 – Gõ nội dung bạn cần góp ý tới chúng tôi.
Bước 2 - Xử lý mục " Nhận xét với tư cách "
Cách 1 : - Chọn Tên/URL: Gõ tên và địa chỉ blog bạn vào.Nếu không có tài khoản, bạn vẫn có thể nhận xét bằng cách Chọn hồ sơ là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống để cho chúng tôi biết bạn là ai. Bạn vui lòng gõ tiếng Việt có dấu để mọi người không hiểu nhầm so thành sờ, mo thành mò.
Cách 2 : - Chọn Ẩn danh.
Bước 3 - Xem trước: Tuỳ, Bạn là người cẩn thận cần xem lại nội dung Bạn đã gõ (rất cần nếu Bạn có nhập mã, để xem nó hiển thị có đúng không).
Bước 4 - Nên nháy chuột vào nội dung, bấm phím Ctrol + A rồi Ctrol + C nhằm copy nội dung - Đề phòng lỡ hệ thống đăng góp ý trục trặt hoặc mạng rớt, ta có thể Ctrol + V dán đăng lại góp ý để khỏi tốn thời gian!
Bước 5 – Lick vào Button : Đăng nhận xét . Vậy là xong,góp ý của các bạn sẽ được Admin kiểm duyệt và cho đăng trong vòng 12h.Cảm ơn các bạn đã góp ý !

GIỚI THIỆU ĐẾN QUÝ KHÁCH MỘT SỐ DỰ ÁN SẼ THỰC HIỆN TRONG NĂM 2018


DANH MỤC BÀI ĐĂNG - KHÁCH MUỐN XEM NỘI DUNG GÌ LICK VÀO TIÊU ĐỀ ẤY


WEBSITEMIKA - THƯƠNG HIỆU UY TÍN BỞI HƠN 300 DOANH NGHIỆP VÀ CÁC THƯƠNG HIỆU VỪA VÀ NHỎ LỰA CHỌN
Điểm giao dịch: Online 24h
-Email: Setup247@gmail.com - Website: https://thietkeweb.mikalaza.com