Membuat Menu seperti di Wordpress

Selain blogger.com, ada satu lagi konsep blog yang sama terkenal dan banyak digunakan. blog tersebut adalah wordpress.com.

Wordpress merupakan konsep blog yang saat ini banyak digunakan oleh  kebanyakan blogger dan internet marketer dalam memposting artikel-artikel, Wordpress  tidak bisa dipandang sebelah mata oleh competitor karena Wordpress memiliki tingkat  keamanan yang tinggi dengan berbagai macam plugin yang memiliki fungsi yang  bermacam-macam mulai dari yang sederhana sampai dengan yang rumit sekalipun.

Namun kali ini kita tidak membahas mengenai wordpress tersebut, tetapi lebih mengedepankan tentang tampilan style menu dari wordpress yang digunakan di ruang blogspot.

contoh tampilan dapat dilihat dengan cara klik gambar ini!

 

Jika anda telah melihat ruang contoh sebagaimana diatas, sekarang kita membahas mengenai cara pembuatan serta pemasangannya.



Langkah pertama adalah

• Masuk ke design / rancangan
• Click di bagian edit HTML

Carilah kode ini ]]></b:skin> 

kemudian taruhlah script dibawah ini sebelum kode ]]></b:skin>

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

kemudian carilah kode berikut <div id='sidebar-wrapper'>, selanjutnya pasang script dibawah ini sesudah kode <div id='sidebar-wrapper'>

<div class='MBT-tabviewsection'>

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

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>

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

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


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

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

Sekarang lihatlah hasil pekerjaan yang telah dilakukan dengan cara meng-klik bagian saving template