1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HML.
2. Centang Expand Template Widget.
3. Anda juga perlu untuk membackup template asli anda terlebih dahulu dengan Download Template Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.
4. Cari kode ]]></b:skin>
Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.
5. Letakkan kode dibawah ini diatas kode tersebut.
Jangan lupa edit yang ditunjukkan kode yang berwarna merah sepaya sesuai dengan blog Anda Ok./* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 89px; /* ukuran lebar menu */
text-align: center; /* rata tengah */
height: 30px; /* ukuran tinggi menu */
padding-top: 10px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:verdana,Helvetica,sans-serif; /* font */
font-size:12px; /* ukuran font */
font-weight:bold; /* besar hurup menu */
background-color: #D8D8D8; /* warna latar menu */
color: #424242; /* warna huruf menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: gray; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #D8D8D8; /* warna background menu hover */
color: #424242;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#D8D8D8; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
/* tabview css end */
6. Kemudian Anda cari kode </head> dan letak kode dibawah ini diatas kode tersebut.
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type='text/javascript'/>
7. Jangan lupa Simpan Template.
8. Kemudian Anda masuk ke menu Rancangan.
9. Klik Elemen Laman.
10. Klik Tambah Gedget.
11. Pilih HTML/JavaScript dan masukkan kode dibawah ini ke dalam content HTML tersebut.
Anda bisa ganti warna merah dengan link Anda.<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 273px;">
<a>Komputer</a>
<a>Internet</a>
<a>Traffic</a>
</div>
<div class="Pages" style="width: 271px; height: 275px;">
<div class="Page">
<div class="Pad">
<li><a href="http://mas-debby.blogspot.com/2011/01/cara-agar-file-komputer-tidak-bisa-di.html">1. Cara Agar File Komputer Tidak Bisa Di Pindah Ke Flashdisk</a></li>
<li><a href="http://mas-debby.blogspot.com/2011/01/software-penghemat-baterai-laptop.html">2. Software Penghemat Baterai Laptop</a></li>
</div>
</div>
<div class="Page">
<div class="Pad">
<li><a href='http://mas-debby.blogspot.com/2011/01/google-adsense.html'>1. Google Adsense</a></li>
<li><a href='http://mas-debby.blogspot.com/2011/01/internet-gratis.html'>2. Internet Gratis</a></li>
</div>
</div>
<div class="Page">
<div class="Pad">
<li><a href="http:/mas-debby.blogspot.com/2011/01/cara-download-video-di-youtube.html">1. Cara Download Video di Youtube</a></li>
<li><a href="http:/mas-debby.blogspot.com/2011/02/mempercepat-internet-download-manager.html#more">2. Mempercepat Internet Download Manager</a></li>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initializeundefined'TabView');
</script><noscript><a href="http://www.centro.web.id" title="Centro Indonesia"><strong>software, tips blog, ebook, bisnis online
</strong></a></noscript>
12. Lalu Save dan selesai semoga berhasil.
1 komentar:
thanks for tutor, so usefull!
Posting Komentar