Follow Google+

Part Of Blogger

Photobucket

Statistic

DMCA.com Protection Status

Popular Posts


Art dan Adhi adalah dua kata yang tidak akan pernah terpisahkan, dengan adanya dua kata tersebut terciptalah karya creative itulah awal mulanya artadhitive dilahirkan. Art Design memang luas kaitanya, tapi segala sesuatu itu bermula dari Art Design, Art Design bukan hanya coretan tinta, bukan hanya goresan garis dan bukan hanya gesturan mouse melainkan adalah kehidupan seni yang setiap orang memilikinya. Art Design adalah Seni yang berhak dimiliki setiap manusia karena goresan tangan yang bodoh sekalipun bisa menghasilkan karya seni yang luar biasa.
Art of Adhi Creative ...

Instagram

Instagram

Advertise 970x90

Panduan Design

Follow This Site

Google+ Followers

Butuh Apartment ?

Wednesday, 20 July 2016

Cara Membuat Multi Tab Widget pada Sidebar Blog


Blog design yang baik biasanya simple dan nyaman dilihatnya, widget yang terlalu panjang tidak baik untuk pengunjung karena akan terganggu dengan tampilan widget yang serba serbi apalagi hanya sebuah pajangan. Widget yang terlalu banyak pasti akan mempengaruhi kapasitas dari sidebar di blog kita. Untuk antisipasi menumpuknya widget, artikel kali ini akan sharing tentang bagaimana Cara Membuat Multi Tab widget pada Sidebar Blog yang tujuanya adalah agar tampilan widget terlihat tidak terlalu memanjang dan terlihat simple.

Multi Tab biasanya berisi widget artikel popular, label, archive, dan kategori lainnya. Kali ini kita akan bahas multi tab dengan jumlah kolom hanya tiga, jika kalian membuka kolom yang pertama, maka kolom yang kedua dan ketiga akan tersembunyi dibalik kolom yang pertama. Langsung saja kita perhatikan langkah langkah berikut ini :

Step 1. Login ke blog kalian

Step 2. Masuk ke pengaturan Tamplate dan pilih Edit HTML

Step 3. Cari kode ]]></b:skin> atau </style>

Step 4. Copy dan Pastekan kode script berikut diatas kode ]]></b:skin> atau </style>

/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}


Step 5. Copy dan Pastekan kode script berikut atas kode </body>


<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>


Step 6. Cari kode <div id='sidebar-wrapper'>

Step 7. Copy dan pastekan kode script berikut dibawah kode <div id='sidebar-wrapper'>


<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>


Step 8. Simpan Tamplate

Silahkan melakukan penambahan widget pada pengaturan Tata Letak blog kalian, silahkan mencoba dan semoga berhasil.


No comments:
Write comments

Interested for our works and services?
Get more of our update !