Untuk daftar Google Adsense adalah wajib memiliki menu navigasi atau bisa disebut top menu, Jika anda memkai blog asli bawaan blogger pasti belum di sediakan menu seprti contoh Privacy Policy, Disclaimer, About me dan menu Contact. Pada kesempatan kali ini saya akan berbagi tentang cara membuat menu navigasi di atas header, guna untuk mempermudah para pembaca untuk menjelajahi blog kita,
Bagi yang belum memiliki menu navigasi di atas Header Blog dan ingin memasannya, silahkan ikuti langka berikut :
1. Silahkan masuk ke blogger sobat masing-masing
2. Klik Menu Template > Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode di bawa ini dan letakkan tepat di atas kode ]]></b:skin>
5. Selanjutnya cari kode <div id='header-wrapper'> atau <header id='header-wrapper'> setelah ketemu, copy kode di bawa ini dan letakkan tepat di bawa kode tersebut.
Catatan : Ganti tulisan berwarna sesuai dengan <URL> anda.
Selamat Mencoba.
Bagi yang belum memiliki menu navigasi di atas Header Blog dan ingin memasannya, silahkan ikuti langka berikut :
1. Silahkan masuk ke blogger sobat masing-masing
2. Klik Menu Template > Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode di bawa ini dan letakkan tepat di atas kode ]]></b:skin>
SCRIPT CODE </>
/* SEARCH BAR */
#search{width:330px; border:none;background:transparent;height:20px;padding:0;text-align:left;overflow:hidden;border-left:1px solid #BBB}
#search #s{width:70%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:0}
/* MENU BAR */
.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 980px;
background-color: #eeeded; -webkit-box-shadow: 0 3px 3px #666;
}
.shadowblockmenu ul{
border: 1px dotted #BBB;
border-width: 0px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: none;
color: black;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
}
.shadowblockmenu li:nth-of-type(1) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(2) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(3) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(4) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(5) a{
padding-left:25px;
}
.shadowblockmenu ul li a:hover{
color: #dcdcdc;
}
#search{width:330px; border:none;background:transparent;height:20px;padding:0;text-align:left;overflow:hidden;border-left:1px solid #BBB}
#search #s{width:70%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:0}
/* MENU BAR */
.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 980px;
background-color: #eeeded; -webkit-box-shadow: 0 3px 3px #666;
}
.shadowblockmenu ul{
border: 1px dotted #BBB;
border-width: 0px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: none;
color: black;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
}
.shadowblockmenu li:nth-of-type(1) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(2) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(3) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(4) a{
padding-left:25px;
}
.shadowblockmenu li:nth-of-type(5) a{
padding-left:25px;
}
.shadowblockmenu ul li a:hover{
color: #dcdcdc;
}
5. Selanjutnya cari kode <div id='header-wrapper'> atau <header id='header-wrapper'> setelah ketemu, copy kode di bawa ini dan letakkan tepat di bawa kode tersebut.
SCRIPT CODE </>
<div class='shadowblockmenu'>
<ul>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Home</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>About</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Contact</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Disclaimer</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Privacy Policy</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Sitemap</a></li>
<li><div class='topsearch' style='float: right'>
<div class='clerfix' id='search'>
<form action='/search' id='search' method='get'> <input name='q' placeholder='Cari .' size='50' type='text'/><input id='search-button' type='submit' value='Cari'/>
</form>
</div>
</div>
<div style='clear:both;'/></li>
</ul>
</div>
<ul>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Home</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>About</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Contact</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Disclaimer</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Privacy Policy</a></li>
<li><a href='http://berbagiitrick.blogspot.co.id/'>Sitemap</a></li>
<li><div class='topsearch' style='float: right'>
<div class='clerfix' id='search'>
<form action='/search' id='search' method='get'> <input name='q' placeholder='Cari .' size='50' type='text'/><input id='search-button' type='submit' value='Cari'/>
</form>
</div>
</div>
<div style='clear:both;'/></li>
</ul>
</div>
Catatan : Ganti tulisan berwarna sesuai dengan <URL> anda.
Selamat Mencoba.
