Salam. Tutorial hari ini adalah membuat menu tab.
1. Klik menu tab Layout > Edit submenu HTML
2. Sebelum tu klik pada kotak kecil expand widget
3. Masukkan kode CSS ke dalam template, dan letakkan di atas kode ]]></b:skin>
#navigation{font-size:110%;
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}
4. Selanjutnya cari kod ini
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
Kalau tak jumpa cari section dengan class="header". Kemudian ubah kepada
<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">
Perkara di atas dilakukan bagi memudahkan element di bawah di masukkan di bahagian header blog u all.
5. Sebelum tu Save dulu setelah perkara di atas di lakukan. Kemudian klik pada menu layout > submenu Page Elements. Di bawah bahagian header, klik Add a Gadget pilih HTML/Jvascript.
6. Masukkan kod-kod ini di dalamnya
<div style="text-align: center;">
<div id="navigation">
<ul>
<li class="selected">
<a href="http://blogkamu.blogspot.com/">Home</a></li>
<li><a href="http://blogkamu.blogspot.com/search/label/LABEL" >Link Label</a></li>
<li><a href="http://blogkamu.blogspot.com/">Blogroll Links</a></li>
</ul>
</div>
</div>
7. Klik Save.
Via: Blogger-Holic
0 si comel rama-rama:
Post a Comment
Sila berhemah dalam memberi setiap komen atau cadangan. Terima kasih kerana menghargai blog ini.
Setiap ilmu yang dikongsikan ada manfaatnya.
Boleh menggunakan tag HTML seperti:
<b>, <i>, <a>