Tutorial Membuat Menu Tab Comel Di Tepi Blog

Screenshot Menu Tab Comel Di Tepi Blog

Tutorial

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada butang More Option dan klik Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari (CTRL+F) kod dibawah:

]]></b:skin>

6. Copy (CTRL+C) kod dibawah dan Paste (CTRL+V) sebelum kod " ]]></b:skin> "  :

/* Tab Menu Cute */
#tabmenucute { }
#tabmenucute ul { list-style:none;}
#tabmenucute ul li {
font-family:Georgia,serif,Times;
font-size:15px;margin:1px; }
#tabmenucute ul li a {
display:block;
width:80px;
height:28px;
background-color: #F03;
padding-left:20px;
border-radius: 1em 1em 1em 1em;
border: 1px solid #F00;
text-decoration:none;
color:#FFFFFF; }
#tabmenucute ul li a:hover {
-moz-transform:rotate(-5deg);
-moz-box-shadow:10px 10px 20px #FF0033;
-webkit-transform:rotate(-5deg);
-webkit-box-shadow:10px 10px 20px #FF0033;
transform:rotate(-5deg);
box-shadow:10px 10px 20px #FF0033; }
/* Tab Menu Cute */

7. Cari (CTRL+F) kod dibawah:

</body>

8. Copy (CTRL+C) kod dibawah

<div style='display:scroll; position:fixed; top:150px; left:-40px;'>
<div id='tabmenucute'>
<ul>
<li><a href='URL/LINK'>NAMA URL</a></li>
<li><a href='URL/LINK '>NAMA URL</a></li>
<li><a href='URL/LINK '>NAMA URL</a></li>
<li><a href='URL/LINK '>NAMA URL</a></li>
<li><a href='URL/LINK '>NAMA URL</a></li>
</ul>
</div>
</div>

Keterangan:

• background-color: #F03; - Gantikan #F03 dengan kod warna bagi background tab menu .
• padding-left:20px; - Gantikan nilai 20 untuk adjust posisi link anda.
• border: 1px solid #F00; - Gantikan #F00 dengan kod warna bagi border .
• URL/LINK - Gantikan dengan URL/LINK anda.
• NAMA URL - Gantikan dengan NAMA URL anda.

9. Preview Template dan jika tiada error , Klik Save Template

#Selesai :)