Learning Blogger - memposting Cara Membuat Menu Full CSS Blog,
haii kawan blogger sudah lama tidak berjumpa kembali lagi dengan saya
admin yang paling baik hati hehe ... saya disini akan berbagi tentang
bagaimana membuat Menu Full CSS Blog, nah kalian semua tau kan Menu di
blog hemm kalo di blog engga ada sentuhan css nya kaya kurang gimana
gitu hehe langsung ajah deh cekidot :p
1. Login Ke Blogger
2. Lalu ke Template > Edit HTML
3. Cari Kode ]]></b:skin> tekan ctrl+f agar lebih cepat
4. Letakkan Kode berikut Tepat diatas kode ]]></b:skin>
.spotlightmenu{
width:100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 12px Kristen ITC; /* http://aldenherdiana.binushacker.net */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
border-top: 5px solid darkred;
border-bottom: 5px solid darkred;
border-right: 10px solid darkred;
border-left: 10px solid darkred;
border-radius: 50px 50px 50px 50px;
background: #111;
margin-top: 5px;
margin-right: 5px;
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 2px;
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:70px; /* http://aldenherdiana.binushacker.net */
height:70px /* http://aldenherdiana.binushacker.net */
text-decoration: none;
color: white;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: black;
background: #a71b15;
-webkit-border-radius: 35%;
-moz-border-radius: 35%;
border-radius: 35%;
}
.spotlightmenu li a span{
position:relative;
top:35%;
}
5. Sekarang! Cari Kode <div id='cwrapper'> atua <div id='content-wrapper'>
6. Letakkan Kode berikut tepat dibawah kode diatas
<div class='spotlightmenu'><br />
<ul><br />
<li><a href='#'><span>Home</span></a></li><br />
<li><a href='#'><span>Link Exchange</span></a></li><br />
<li><a href='#'><span>Desclaimer</span></a></li><br />
<li><a href='#'><span>About Me</span></a></li><br />
<li><a href='#'><span>fhall_rastafara</span></a></li><br />
<li><a href='http://fhallblogger.blogspot.com//'><span>click here</span></a></li><br />
</ul><br />
</div><br />
7. Ganti tanda # dengan link yang anda inginkan
8. Bila semua sudah siap tinggal save template