Cara Mudah Dan simple Membuat Menu Tab pada Blog

Jumat, Mei 4, 2012  Tips Bloger 

Cara Membuat Tab Menu Unik, mungkin sebuah bahasa berlebihan. Sebenarnya ini adalah tab menu sederhana dan saya hanya menambahkan fungsi daftar isi otomatis berdasarkan tanggal, Popular post, recent comment yang langsung tampa harus anda pasang lagi. Jadi sebenarnya tab menu ini merupakan tab menu satu pake yang biasa digunakan dalam blog. Untuk pemasangan juga jangan khawatir karena tab menu ini juga dapat menyesuaikan dengan sidebar atau tempat lain di blog anda secara otomatis. Di samping itu dilengkapi dengan fungsi scroll otomatis biar kalian gak repot lagi. Begitu gan uniknya....heheheeeee.....Anda Tertarik? silahkan ikuti langkah berikut ini.

Log In ke blog anda
Klik Rancangan
Klik Edit HTML
Letakkan Kode berikut di atas ]]></b:skin>

ul.tabs{margin:0; padding:0; float:left; list-style:none; height:32px; border-bottom:1px solid #999; border-left:1px solid #999; width:100%}
ul.tabs li{float:left; margin:0; padding:0; height:31px; line-height:31px; border:1px solid #999; border-left:none; margin-bottom:-1px; overflow:hidden; position:relative; background:#e0e0e0}
ul.tabs li a{text-decoration:none; color:#000; display:block; font-size:1.2em; padding:0 20px; border:1px solid #fff; outline:none}
ul.tabs li a:hover{background:#ccc}
html ul.tabs li.active, html ul.tabs li.active a:hover{background:#fff; border-bottom:1px solid #fff}
.tab_container{border:1px solid #000; border-top:none; overflow:hidden; clear:both; float:left; width:100%; background:#fff}
.tab_content{padding:20px; font-size:1.2em}

Cari Kode </head> dan letakkan kode berikut di atasnya

<script type='text/javascript'>

$(document).ready(function() {

//When page loads...
$(&quot;.tab_content&quot;).hide(); //Hide all content
$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show(); //Activate first tab
$(&quot;.tab_content:first&quot;).show(); //Show first tab content

//On Click Event
$(&quot;ul.tabs li&quot;).click(function() {

$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;); //Remove any &quot;active&quot; class
$(this).addClass(&quot;active&quot;); //Add &quot;active&quot; class to selected tab
$(&quot;.tab_content&quot;).hide(); //Hide all tab content

var activeTab = $(this).find(&quot;a&quot;).attr(&quot;href&quot;); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});

});

</script>

Simpan Template
Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan Kode kerikut ke dalamnya

<ul class="tabs">
<li><a href="#tab1">Daftar Isi</a></li>
<li><a href="#tab2">Komentar</a></li>
<li><a href="#tab3">Sahabat</a></li>

<li><a href="#tab4">Populer Post</a></li>
</ul>

<div style="width: 100%; height: 300px; overflow: auto;">

<div class="tab_container">
<div id="tab1" class="tab_content">

<script style="text/javascript"
src="http://bloekoetoek-blogonol.googlecode.com/
files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/ /* ganti dengan alamat blog anda */
feeds/posts/default?max-results=9999&alt=
json-in-script&callback=loadtoc"></script>
</div>
<div id="tab2" class="tab_content">
<div style="background:FFFFFF; border: 0px solid #000;
overflow: auto; width: 100%; height: 280px;
text-align: center;"><div style="text-align: center;" class="imgblock200">
<script src="http://anasmcguire.googlepages.com/recentcomment_indo.js">
</script><script>var numcomments = 25;var showcommentdate
= true;var showposttitle = true;var numchars = 150;var standardstyling
= true;</script><script src="http://blogonol.blogspot.com/
feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments">
</script></div></div>
</div>
<div id="tab3" class="tab_content">
<ul>
<li><a href="http://blogonol.blogspot.com/" target="_blank">blogonol</a></li>
/*

tambahkan alamat link sahabat anda di sini, caranya copy paste kode di atas
dan ganti kode Biru dengan alamat link sahabat anda, kalau anda bersedia jadikan
blogonol salah satu sahabat anda. terima kasih */

</div>
<div id="tab3" class="tab_content">
<!-- Popular posts with comment count Start -->
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style="">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " (" + feed.value.items[i].commentcount + ")";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //to remove comment count delete this line
document.write('</a></li>');
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://blogonol.blogspot.com /* ganti dengan alamat blog anda */
&ShowHowMany=10 /* ganti angka 10 untuk mengatur jumlah tampilan */

&_id=390e906036f48772b2ed4b5d837af4cd
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
<!-- Popular posts with comment count End -->
</div>
</div>

</div>

Klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu........