Cara Membuat Menu Tab View diBlog Dengan JQUERY

Sebelumnya saya sudah pernah posting tentang cara membuat menu tab view tanpa editHTML diblog, untuk postingan kali ini hampir sama yaitu membuat menu tab view Dengan JQUERY.

Langkah pertama Login ke Blogger,  kemudian pilih Rancangan setelah itu  EditHTML jangan lupa untuk centang expand template widget agar jika terjadi kesalahan dapat dikembalikan.
Kemudian cari kode </head> kemudian copy pastekan kode di bawah ini tepat di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

 setelah itu Simpan Template.
Langkah selanjutnya Klik Design/Rancangan, kemudian  Page Element terus Add a Gadget  klik HTML/Javascript
copy pastekan kode di bawah ini di dalam box atau kotak HTML/Javascript  diatas/ paling atas daripada widget yang lain, seperti category, populer post, dan lain sebagainya.

 <style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

kemudian Simpan.
Sekian dulu postingan kali ini, semoga bermanfa'at.

Artikel Terkait: