Kamis, 09 Agustus 2012
Hallo para pengunjung AndzZ-Blog'z !! Apa kabar..??
Nahh.... Mulai hari ini Saya akan Posting'kan tentang Tutorial Blogger !
Posting kali ini adalah : "Cara Membuat Menu Tab View Di Blog"
Apa itu Menu Tab View ?? Nih, Liat ajj gambarnya !
Oke, Berikut caranya :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3. Copy script dibawah ini dan paste pada gadget.
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a><p>Get this <a href="http://kamu-klik.blogspot.com/2011/12/widget-menu-tab-view-termudah.html" target="_blank"><blink>widget</blink></a></p></div>
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a><p>Get this <a href="http://kamu-klik.blogspot.com/2011/12/widget-menu-tab-view-termudah.html" target="_blank"><blink>widget</blink></a></p></div>
4. Apabila sudah di paste, kamu klik SIMPAN
Apabila kalian sudah menambahkan kode Menu Tab View di atas, Maka kamu cukup mengatur widget2 mana yang ingin kamu masukan, cara penambahannya cukup simple dan mudah, taruh atau geser widget yang ingin kamu tambahkan ke bawah widget Menu Tab View tersebut.
Apabila kalian sudah menambahkan kode Menu Tab View di atas, Maka kamu cukup mengatur widget2 mana yang ingin kamu masukan, cara penambahannya cukup simple dan mudah, taruh atau geser widget yang ingin kamu tambahkan ke bawah widget Menu Tab View tersebut.
silakan lihat gambar di bawah ini:
Simpan, dan lihat hasilnya :D
Simpan, dan lihat hasilnya :D
