Oke blogger, kali ini Jog-Blogger akan memberikan kamu sedikit ilmu CSS tentang membuat menu header untuk blog yang simple tapi menarik, setelah saya membuat post tentang "Membuat Gambar Melayang di Blogger" saya sedikit tertarik untuk membuat header menu . oke langsung ke tutorial nya saja =))
1. Login ke blogger -> "Layout -> Edit HTML
2. Cari kode ]]></b:skin> (ctrl+f biar gampang) Copy Code Di bawah tepat di atasnya
*Note : Untuk menambahkan link/menu nya lagi copy paste kode </li><li class='navlinks'><a href='LINK Di Sini'>Bla Bla</a> tepat di atas code </ul> .
Oke sekian Tutorial dari saya ..
1. Login ke blogger -> "Layout -> Edit HTML
2. Cari kode ]]></b:skin> (ctrl+f biar gampang) Copy Code Di bawah tepat di atasnya
#Jogblogger_containermenu{
height:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7psEuw6CvzlnZCOg-XkVYWvD7kJN0-rx6LoHa0aI8JFY_a-QfAHq6uMePPFu0gs8fmrDXDdTJkx3W8NEVh8A3ahJ88PiKoHC6auVHcShfzSKJnfv6peDJmIQL6z50jue7H-5n9Hkye9zh/s1600/menu.jpg) ;
display:block;
padding:0px 0 0px 14px;
}
#Jogmenu{
position:relative;
display:block;
height:25px;
font-size:11px;
font-weight:bold;
font-family:Arial,Verdana,Helvitica,sans-serif;
}
#Jogmenu ul{
margin:0px;
padding:10px 20px 0 0;
list-style-type:none;
width:auto;
float:left;
}
#Jogmenu ul li{
display:block;
float:left;
margin:0 px 0 0;
width:105px;
}
#Jogmenu ul li a{
display:block;
float:left;
color:#fff;
text-align: center;
text-decoration:none;
padding:6px 0px 0 0px;
width: 105px;
height: 19px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top right;
}
#Jogmenu ul li a:hover,#Jogmenu ul li.current_page_item a{
color:#fff;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top left;
width: 105px; height: 19px;
text-align: center;
}
#Jogmenu ul li .current_page_item a,#Jogmenu ul li .current_page_item a:hover{
color:#ff9600;
width: 105px; height: 19px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top right;
}
2. Setelah itu, cari kode <body> Copy Kode di bawah tepat di bawah kode <body>height:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7psEuw6CvzlnZCOg-XkVYWvD7kJN0-rx6LoHa0aI8JFY_a-QfAHq6uMePPFu0gs8fmrDXDdTJkx3W8NEVh8A3ahJ88PiKoHC6auVHcShfzSKJnfv6peDJmIQL6z50jue7H-5n9Hkye9zh/s1600/menu.jpg) ;
display:block;
padding:0px 0 0px 14px;
}
#Jogmenu{
position:relative;
display:block;
height:25px;
font-size:11px;
font-weight:bold;
font-family:Arial,Verdana,Helvitica,sans-serif;
}
#Jogmenu ul{
margin:0px;
padding:10px 20px 0 0;
list-style-type:none;
width:auto;
float:left;
}
#Jogmenu ul li{
display:block;
float:left;
margin:0 px 0 0;
width:105px;
}
#Jogmenu ul li a{
display:block;
float:left;
color:#fff;
text-align: center;
text-decoration:none;
padding:6px 0px 0 0px;
width: 105px;
height: 19px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top right;
}
#Jogmenu ul li a:hover,#Jogmenu ul li.current_page_item a{
color:#fff;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top left;
width: 105px; height: 19px;
text-align: center;
}
#Jogmenu ul li .current_page_item a,#Jogmenu ul li .current_page_item a:hover{
color:#ff9600;
width: 105px; height: 19px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top right;
}
<div id='Jogblogger_containermenu'>
<div id='Jogmenu'>
<ul>
<li class='page_item current_page_item'><a href='LINK Di Sini'>Home</a></li>
<li class='navlinks'><a href='LINK Di Sini'>About</a></li>
<li class='navlinks'><a href='LINK Di Sini'>Pictures</a></li>
<li class='navlinks'><a href='LINK Di Sini'>Videos</a>
</li><li class='navlinks'><a href='LINK Di Sini'>Contact</a></li>
<li class='navlinks'><a href=''http://jog-blogger.blogspot.com/>Jog-Blogger</a></li></ul>
</div>
</div>
3. Klik dulu "PREVIEW" Jika Berhasil langsung simpan saja =))<div id='Jogmenu'>
<ul>
<li class='page_item current_page_item'><a href='LINK Di Sini'>Home</a></li>
<li class='navlinks'><a href='LINK Di Sini'>About</a></li>
<li class='navlinks'><a href='LINK Di Sini'>Pictures</a></li>
<li class='navlinks'><a href='LINK Di Sini'>Videos</a>
</li><li class='navlinks'><a href='LINK Di Sini'>Contact</a></li>
<li class='navlinks'><a href=''http://jog-blogger.blogspot.com/>Jog-Blogger</a></li></ul>
</div>
</div>
*Note : Untuk menambahkan link/menu nya lagi copy paste kode </li><li class='navlinks'><a href='LINK Di Sini'>Bla Bla</a> tepat di atas code </ul> .
Oke sekian Tutorial dari saya ..
Kesungguhan pemerintah dalam menyelesaikan kasus Century patut dipertanyakan oleh masyarakat.
Tuliskan teks di sini ...
Tuliskan teks di sini ...
Tuliskan teks di sini ... 
Tuliskan teks di sini ...