Apa kabar? Semoga kalian semua baik-baik saja diluar sana ya. Kali ini aku akan memposting cara membuat Tab Menu di dalam sebuah blog, khususnya pada blogspot.com. Cara berikut ini adalah cara yang aku terapkan pada blogku ini.
Langsung saja ya:
- Login ke Blogspot
- Pilih Dashboard >> Design >> Pilih Add a Gadget pada bagian di atas tempat Posting Blog
- Pilih HTML/Javascript
- Untuk bagian Tittle isi sesuka hati anda
- Ini nih yang penting, pada bagian Content, copas skrip dibawah ini:
<style type="text/css">
.h_mnu_01{
width: 200%;
font-family: Cherry Cream Soda, Cantarell, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
.h_mnu_01 ul{
margin: 0;
padding: 0;
float: center;
width: 45%;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000
}
.h_mnu_01 ul li{
display: inline;
}
.h_mnu_01 ul li a{
float: center;
color: #0b5394;
padding: 5px 11px;
text-decoration: none;
border-right-width: 0px;
border-right-style: solid;
}
.h_mnu_01 ul li a:visited{
color: #0b5394;
}
.h_mnu_01 ul li a:hover, .h_mnu_01 ul li .selected{
color: #0b5394 !important;
padding-top: 5px;
padding-bottom: 5px;
background: #0b5394;
}
</style>
<div class="h_mnu_01">
<ul>
<li><a href="http://YOUR.URL">HOME</a></li>
<li><a href="http://YOUR.URL">HOME</a></li>
<li><a href="http://YOUR.URL">HOME</a></li>
</ul>
</div>
Kalau teman men-copas semua skrip diatas, makanya hasilnya akan mirip dengan Tab Menu blog Come On Here! ini.
Catatan:
- Teks berwarna merah, silakan diganti sesuka hati sesuai lebar blog teman
- Teks berwarna ungu, silakan diganti dengan URL blog teman
- Teks berwarna biru, silakan diganti dengan nama Tab Menu blog teman
Silakan mencoba... :)
Tidak ada komentar:
Posting Komentar