Widget Tab Menu Sandi Style

Unknown

Trik Blog

8 Nov 2013

Belum ada komentar

Sebelumnya saya pernah memposting cara membuatwidget tab menu sederhana pada artikel cara mudah membuat tab menu. Kali ini saya akan share cara pasang widget tab menu blogonol style yang mana tampilannya seperti desain tab menu pada wordpress. Tampilannya cukup menarik dan dapat dijadikan daya tarik tersendiri bagi tampilan blog anda. Sekarang mari kita bahas cara pasang widget tab menu sandi style. Ikuti langkah berikut.

Log in ke blogger
Klik Template
Masukkan kode berikut di atas kode ]]></b:skin>

.blogonol-tabs{width:100%;list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.blogonol-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.blogonol-tabs li:first-child{margin:0}
.blogonol-tabs li a{color:#fff;background:#254779;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.blogonol-tabs li a:hover,.blogonol-tabs li a.blogonol-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.blogonol-tabs-content{background:#212121}
.blogonol-tabviewsection{margin-top:10px;margin-bottom:10px;}
Selanjutnya masukkan kode berikut di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/32097163011/jquerymenuwidget.js' type='text/javascript'/>
<script src='http://yourjavascript.com/73101222339/jquerytransition.js' type='text/javascript'/>
Selanjutnya cari kode <div id='sidebar-wrapper'> danletakkan kode berikut di bawahnya
<div class='blogonol-tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.blogonol-tabs-content-widget-blogonol-id&quot;).hide();
$(&quot;ul.blogonol-tabs-widget-blogonol-id li:first a&quot;).addClass(&quot;blogonol-tabs-current&quot;).show();
$(&quot;.blogonol-tabs-content-widget-blogonol-id:first&quot;).show();
$(&quot;ul.blogonol-tabs-widget-blogonol-id li a&quot;).click(function() {
$(&quot;ul.blogonol-tabs-widget-blogonol-id li a&quot;).removeClass(&quot;blogonol-tabs-current a&quot;);
$(this).addClass(&quot;blogonol-tabs-current&quot;);
$(&quot;.blogonol-tabs-content-widget-blogonol-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>

<ul class='blogonol-tabs blogonol-tabs-widget-blogonol-id'>
<li><a href='#widget-blogonol-id1'>Populer</a></li>
<li><a href='#widget-blogonol-id2'>Kategori</a></li>
<li><a href='#widget-blogonol-id3'>Arsip</a></li>
</ul>

<div class='blogonol-tabs-content blogonol-tabs-content-widget-blogonol-id' id='widget-blogonol-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>                                     
</div>  

<div style='clear:both;'/>                      
<div class='blogonol-tabs-content blogonol-tabs-content-widget-blogonol-id' id='widget-blogonol-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>                                       
</div>  
                          
<div style='clear:both;'/>
<div class='blogonol-tabs-content blogonol-tabs-content-widget-blogonol-id' id='widget-blogonol-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>                                      
</div>

</div>
<div style='clear:both;'/>

Silahkan edit kode merah dengan cetak tebal sesuai keinginan anda. Selanjutnya anda msuk pada halaman rancangan, kemudian tambahkan kode widget sesuai kode merah tadi.
Demikian tutorial cara pasang widget tab menu sandi style. Semoga bermanfaat bagi semua, Selamat mencoba dan sukses selalu.