Terkadang bingung melihat Blog teman-teman lainnya memiliki menu dibawah Pooter dan susunannya Horizontal dan sangat jarang tersedia dari Tema yang kita Download. dan ternyata setelah browshing sana-sini saya ketemu cara pembuatannya hal ini mulai pada saat pembuatan blogspot atau setelah blog kita sudah ada.
Dan berikut cara pembuatannya :
1. Pertama-tama buka akun blogspot teman-teman dan kemudian masuk ke Template. dan Pilih Edit HTML
2. Carilah kode ini ]]></b:skin>
Pakai CTRL F untuk menemukannya.
3. Letakkan kode berikut diatas ]]></b:skin> ini.
.usup-breadcrumb{position:relative; height:30px; width:100%;}
.usup-breadcrumb ul{position:relative; margin:0 5px 0 5px; padding:0; height:30px; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKseJlrdpGNyGkVNNATh8bXS5ZZzCuIXXErq8riJ6aqhfbALCO5BlbQtRHsThyhT3ZzoyR1Pu9-dQ4K4PPHjKfof541tK5oSIlfxbYU4i0a_BbDN5QvyzpCcchKLTpO7VkK1PalsRBHCI/s320/breadcrumbImage.png') 0px -30px repeat-x; }
.usup-breadcrumb ul li{padding:0; margin:0; list-style:none; float:left; height:30px display:inline;}
.usup-breadcrumb ul li a{font:12px Arial, Helvetica, sans-serif; color:rgb(255,255,255); text-decoration:none; line-height:30px; display:block;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKseJlrdpGNyGkVNNATh8bXS5ZZzCuIXXErq8riJ6aqhfbALCO5BlbQtRHsThyhT3ZzoyR1Pu9-dQ4K4PPHjKfof541tK5oSIlfxbYU4i0a_BbDN5QvyzpCcchKLTpO7VkK1PalsRBHCI/s320/breadcrumbImage.png') 100% -60px no-repeat; padding:0 17px 0 15px; }
.usup-breadcrumb ul li a:hover {text-decoration:underline; color:rbg(255,255,255);}
.usup-breadcrumb ul li a.active{background:none; color:rgb(255,255,255);}
.usup-breadcrumb ul li a.active:hover {text-decoration:none;}
.usup-breadcrumb .left{position:absolute; top:0px; left:0px; width:10px; height:30px; display:block; z-index:1; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKseJlrdpGNyGkVNNATh8bXS5ZZzCuIXXErq8riJ6aqhfbALCO5BlbQtRHsThyhT3ZzoyR1Pu9-dQ4K4PPHjKfof541tK5oSIlfxbYU4i0a_BbDN5QvyzpCcchKLTpO7VkK1PalsRBHCI/s320/breadcrumbImage.png') 0% 0px no-repeat;}
.usup-breadcrumb .right{position:absolute; top:0px; right:0px; width:10px; height:30px; display:block; z-index:1; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKseJlrdpGNyGkVNNATh8bXS5ZZzCuIXXErq8riJ6aqhfbALCO5BlbQtRHsThyhT3ZzoyR1Pu9-dQ4K4PPHjKfof541tK5oSIlfxbYU4i0a_BbDN5QvyzpCcchKLTpO7VkK1PalsRBHCI/s320/breadcrumbImage.png') 100% -90px no-repeat; }
4. Kemudian, cari kode ini </body>
5. Lalu paste-kan kode berikut di bawah kode tadi.
<div class='usup-breadcrumb'>
<span class='left'/>
<ul>
<li><a href='URL'>About Us</a></li>
<li><a href='URL'>Dasboard</a></li>
<li><a href='URL'>Facebook</a></li>
<li><a href='URL'>My Twitter</a></li>
<li><a href='URL'>Google +</a></li>
</ul>
<span class='right'/>
</div>
6. Silahkan ganti masing-masing URL dan Judul Menu sesuai kehendak Agan.
7. Simpan Template. Dan lihat hasilnya.
Semoga bermanfaat bagi rekan2...Selamat Mencoba..
0 Comments