Cara Membuat Menu Tab View Pada Blog

Tweet

Banyak kalangan blogger yang menggunakan menu tab view pada sidebarnya, ini bertujuan untuk meringkaskan blog dari banyaknya gadget yang dipasang di blog. Untuk itu, jika temen-temn ingin memasang banyak sidebar sebaiknya membuat tab menu view.

Sebenarnya ini banyak kita kunjungi di blog yang didukung oleh wordpress. akan tetapi pada saat sekarang mulai ngetren dengan tab menu view seperti ini.


Live Demo

• Langkahnya gak terlalu ribet.....
• Login Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode tags  ]]></b:skin>
• Copy paste kode CSS dibawah ini

#slick_area{border:1px solid #dedede;background-color:transparent;line-height:18px;margin:10px 0 4px;padding:8px}
#slick_area a{color:#585858;text-decoration:none}
.slick_area a:hover{color:#c02506}
ul.slick{margin:5px 5px 8px 0;padding:0}
ul.slick li{list-style:none;display:inline;background:#000;color:#fff;text-decoration:none;font-size:11px;font-weight:700;text-transform:uppercase;cursor:pointer;border:0 solid #585858;padding:7px 12px}
ul.slick li:hover{color:#red}
ul.slick li.active{background-color:#fff;border:1px solid #585858;color:#222}
.content-slick{background-color:transparent;border:1px solid #585858;color:#222;min-height:40px;margin-top:3px;text-align:left;padding:7px 13px 5px}
.content-slick ul{margin:2px;padding:0}
.content-slick ul li{background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvqz3heWfD6smfyEmVJt2ZcQwR7IhfHgTOmlzuukAGSxiCELHoDc4bwee7h8jj1D-cc7lsAInF9FGv_Y1Gib060D3JA0oC6xVot10t8zRR1Fqvx60T6ourb8MTY29-aio8EfYmGKqSnYY/s400/0111_arrow.png) no-repeat scroll 0 5px;list-style-type:none;padding-left:20px;margin:0 0 5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:#ffff}
.content-slick ul li a{text-decoration:inline;color:#000;display:block}

• Lalu cari kode </head>
• Dan pasang Java Script berikut sebelum </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>

• Simpan Template

• Langsung pilih tab Rancangan;
• Tambahkan Gadget;
• Pilih HTML dan paste kode dibawah ini;

<div class='widget-content'>
<ul class="slick">
<li title="tabsatu" class="slick active"><strong>Recents Post</strong></li>
<li title="tabdua" class="slick active"><strong>Comments</strong></li>
<li title="tabtiga" class="slick active"><strong><blink>Guest Book</blink></strong></li>

</ul>
<div id="tabsatu" class="content-slick">
<script src="http://feeds.feedburner.com/blogspot/ZVDfG?format=sigpro" type="text/javascript" ></script>
</div>

<div id="tabdua" class="content-slick">
<script src="http://feeds.feedburner.com/blogspot/zonaonline?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/blogspot/portalinformasionline"></a><br/>Powered by FeedBurner</p> </noscript>
</div>

<div id="tabtiga" class="content-slick">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="portalonline" src="http://www.shoutmix.com/?portalonline" width="275" height="400" frameborder="0" scrolling="auto">
<a href="http://www.shoutmix.com/?portalonline">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix --></div></

div>

• Simpan

Semoga berhasil... Good Luck

Jika Anda menikmati posting ini dan ingin dihubungi setiap kali posting baru diterbitkan, maka pastikan Anda subscribe to our regular Email Updates!

Please...!!! Bookmark artikel ini melalui layanan Bookmarking favorit Anda: