Modifikasi Blog: Cara Membuat JQuery Tabbed Sidebar

Cara Membuat JQuery Tabbed SidebarCara Membuat JQuery Tabbed Sidebar Widget di Blogger. Setelah saya mengunjungi situs mybloggerlab, saya tertarik dengan salah satu artikel tutorial cara membuat JQuery Tabbed Sidebar yang dipasang pada Platform Blogger. Sangat menarik untuk menambahkan postingan di Blog saya ini.

Supaya tambah keren seperti kebanyakan Blog profesional, Widget ini bermanfaat untuk anda yang tidak suka dengan tampilan sidebar yang terlalu panjang kebawah. Kita langsung bahas saja.

Berikut Cara Membuat JQuery Tabbed Sidebar:

#1. Log In Blogger >> Dasbor >>Template >> Edit HTML. Kemudian Anda mencari kode ]]></b:skin> untuk mempermudah pencarian gunakan Ctrl+F. Tambahkan kode CSS ini diatas kode ]]></b:skin>
/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 33%;
text-align: center;
}
.about_tab {
width: 33%;
text-align: center;
}
li.laster {
border: 0px;
width: 33%;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}
#2. Setelah Anda klik Simpan, maka langkah selanjutnya Anda mencari kode <div id='sidebar-wrapper'> Letakkan Kode-kode ini dibawahnya.
<!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
  jQuery(document).ready(function($){
             $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
                $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
     
                $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
                    $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
                    $(this).addClass("tabs-widget-current");
                    $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
                    var activeTab = $(this).attr("href");
                    $(activeTab).fadeIn();
                    return false;
                });
            });      
 </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
  <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
  <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
  <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li>
</ul>
<!-- Tab Widget 1 -->
<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>
                       
<!-- Tab Widget 2 -->              
<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'>
<!-- Tab Widget 3 -->
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>                                      
</div>
</div>
<!-- Tab Widget [endt] -->
Demikian tutorial menambahkan JQuery Tabbed Sidebar yang 
singkat, semoga bisa bermanfaat! Apabila ada kendala, tanyakan saja langsung dikomentar ini. 

Refrensi: http://www.mybloggerlab.com/2014/04/how-to-add-jquery-tabbed-sidbar-widget-in-blogger.html
Bookmark and Share it:

9 Comments

terimakasih informasinya, ijin share gan
http://apotekacemaxs.com/pengobatan-alami-paru-paru-basah/

Makasih gan informasinya :)
Ijin share http://apotekherbalkita.com/obat-tradisional-varises/

thanks infonya gan
http://tokoobatherbal23.com/

Terimakasih atas informasinya sangat bermanfaat :)

http://kedaijellygamatgoldg.com/

terimakasih infonya sob, sukses terus
http://ramuantradisionalkita.com/pengobatan-tradisional-diabetes-melitus/

keren banget artikelnya gan
http://apotekacemaxs.com/

Manteep sob untuk informasi artikelnya :)
http://goo.gl/9UzkHw

mantap dah artikelnya kawan
http://bit.ly/1ya21OC

keren banget sob, artikelnya sangat membantu sekali
Izin nyimaks aja sob :)
http://goo.gl/VWOqxm

Jangan sakiti perasaan Admin dengan tautan link hidup dan komentar liar.

Konversi Kode Emoticon

Copyright © 2014. Bani Fahmi - All Rights Reserved | Designed by Fahmi Muhammad Back to Top