MEMBUAT MULTI TAB WIDGET ANIMATED BLOG

Cara Membuat Widget Multi Tab Keren Di Blog Dengan Mudah

Halo spoter, kemarin saya sudah membahas tentang beberpa tutorial dan trik komputer, hari ini lanjut ke blogger lagi. Mutil tab, seperti terlihat di gambar atas tutorial blogger kali ini masih seputaran widget. Widget yang satu ini bagus dan tidak berat, dengan 3 tab membuat ruang sidebar blog anda menjadi hemat dan rapi. Widget ini di lengkapi jquery smooth animated (maaf belum bisa kasih demo).

Buat spoter yang ingin menggunakan widget ini, cara memasang nya cukup mudah. Terlebih jika sudah sering berurusan dengan kode HTML, oke lagsung ke langkah nya di bawah ini.

Animated Multi Tab Widget

1. Seperti biasa buka Blogger dan login.
2. Lalu pilih TEMPLATE
3. Setelahnya pilih EDIT HTML
4. Di dalam editor HTML cari kode  ]]></b:skin>
5. Jika sudah ketemu, copy kode di bawah ini dan paste tepat di bawah kode ]]></b:skin>

<style>
.b, .c{ display:none;}
.buttons{
    border-bottom:solid #d1c8b8 4px;
    display:block;
    padding:8px;
    width:80px;-moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;
    text-align:center;
    margin:1px;
    background:#4b7975;
    text-decoration:none; color:#FFFFFF;
    float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
#multitab {
    background:#919b9d;
    text-align:justify;
    overflow:hidden;
    color:#fff;
    padding:20px;
    -moz-border-radius: 1em 4em 1em 4em;
    border-radius: 1em 4em 1em 4em;    height:200px;
    width:272px;
}
#multwrap{
    text-align:left;
    overflow:hidden;
    width:350px;
    height:380px;
}
  </style>

<script type='text/javascript'>
// <![CDATA[
$(document).ready(function() {
    $("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab)
{ 
    $(".b").css('display' , 'none');
    $(".c").css('display' , 'none');
    $(".a").css('display' , 'none');
 
    $("#first-tab").removeClass('buttonHover');
    $("#second-tab").removeClass('buttonHover');
    $("#third-tab").removeClass('buttonHover');
 
    $("#"+tab).addClass('buttonHover');
    $("."+container).show('slow');
}
// ]]>
</script>
<script charset='utf-8' src='https://bloggertrixcode.googlecode.com/files/jquery1.2.6.js' type='text/javascript'/>

6. Jika sudah simpan template.
7. Setelah itu buka tata letak / layout.
8. Pilih add gadget / tambahkan gadget dan pilih HTML/Javascript.
9. Copy kode di bawah ini dan paste pada kolom yang ada.

<div id="multwrap">
 <a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">spot 1</a>
<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">spot 2</a>
<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">spot 3</a>
   <br clear="all" />
      <div id="multitab" align="center">
          <div class="a">
                <em>B</em>logger is a blog-publishing service that allows private or multi-user blogs with time-stamped entries. It was developed by Pyra Labs, which was bought by Google in 2003. Generally, the blogs are hosted by Google at a subdomain of blogspot.com.  <br />  <br /> Thanks!

                </div>
                <div class="b"><em>L</em>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

                </div>
                <div class="c"><em>S</em>tarting in February 2013 Blogger began integrating user blogs with multiple country specific URL addresses i.e. exampleuserblogname.blogspot.com would be automatically redirected to exampleuserblogname.blogspot.ca in Canada, exampleuserblogname.blogspot.co.uk in the United Kingdom etc. </div>
</div> </div>
</div>

NB :
- Ganti tulisan yang di blok warna merah terserah anda.
- Ganti tulisan yang di blok biru tersrah anda, atau bisa juga di isi dengan kode HTML lain seperti random post, post terbaru DLL.

10. Terakhir simpan template dan selesai.

Oke sekian dulu artikel tentang cara membuat muti tab widget animated blog dengan mudah. Semoga dapat bermanfaat, jika ada pertanyaan jangan sungkan tinggalkan komentar di bawah. Terima kasih.