Asslamualaikum Wr. Wb
Salam blogger mania!!!
Tentunya kita ingin membuat tampilan blog kita semenarik mungkin, disamping menggali ilmu dan belajar kita akan semakin kaya akan pengetahun, nah tema kali ini membahas bagaimana cara membuat tab menu atas dari blog kita khususnya blog dari blogspot.com. Perhatikan gambar dibawah yang di lingkari merah, kita akan membuat yang seperti itu dengan memodifikasi source kode template blog kita, karena memang di izinkan tapi hati-hati kalau salah meletakan kode-kode ini bisa merusak template defaultnya...ok sudah siap kopi sama rokoknya kalau cowok..ok kita mulai :
- Kita off kan dulu navbar yang ada melalui menu TATA LETAK kita offkan
- Kalau sudah kita buka kode sumber blog kita itu ada di menu Template - Edit HTML
- Minum dulu kopinya.....ok lanjut lalu sisipkan kode berikut ini tepat di atas tanda . ]]></b:skin>
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}
.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}
.kolom-menu ul li ul,
.kolom-menu ul li:hover li ul,
.kolom-menu ul li:active li ul,
.kolom-menu ul li:focus li ul {
z-index: 100;
position: absolute;
left: -1800px;
height: auto;
margin: 0;
padding: 0;
background-color: #336699;
border: 1px solid rgba(255, 255, 255, 0.1);
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
}
.kolom-menu ul li ul li a,
.kolom-menu ul li ul li ul li a {
border-right: none;
box-shadow: none;
width: 100%;
}
.kolom-menu ul li ul li a:hover,
.kolom-menu ul li ul li a:focus,
.kolom-menu ul li ul li ul li a:hover,
.kolom-menu ul li ul li ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
width: 100%;
}
/* List Item Kolom Sub Menu Pertama
------------------------------------*/
.kolom-menu ul li ul li,
.kolom-menu ul li ul li:first-child {
border-left: none;
width: 100px;
}
.kolom-menu ul li:hover ul,
.kolom-menu ul li:active ul,
.kolom-menu ul li:focus ul {
left: auto;
top: 26px;
width: 120px;
}
/* List Item Kolom Sub Menu Kedua
------------------------------------*/
.kolom-menu ul li ul li ul li,
.kolom-menu ul li ul li ul li:first-child {
border-left: none;
width: 300px;
}
.kolom-menu ul li ul li:hover ul,
.kolom-menu ul li ul li:active ul,
.kolom-menu ul li ul li:focus ul {
top: -1px;
white-space: normal;
text-align: justify;
left: 120px;
width: 320px;
}
----------------------------------------------------------------------------------------------------------
4. Kalau sudah, siap siap kita menyisipkan kode lainnya pada
bagian bawah <Body..
5. Ini kodenya :
----------------------------------------------------------------------------------------------------------
<div class='bilah-menu-atas' id='bilahmenuatas' style='top: 0px;'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://akzara.homenet.org' target='_blank'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2_uQUQY9BCSxsGc_WOeR31Vg2vHyV7xMqVodoAddQ_nOSiiCr_TA9sy3jX3Cf56w7sS3BSeLccMoutKcH7gv6x9RIpQWVFNhedwSoj6KaMY-k2oTgeGZtzjCbzPDtsHfwAlwzEI3FXw/s800/Beranda.png' width='20px'/></a></li>
<li><a href='URL'>Sosial Network</a>
<ul>
<li><a href='http://facebook.com' target='_blank'>facebook</a></li>
<li><a href='http://twitter.com' target='_blank'>Twitter</a></li>
<li><a href='http://youtube.com' target='_blank'>Youtube</a></li>
<li><a href='http://wordpress.com' target='_blank'>Wordpress</a></li>
</ul>
</li>
<li><a href='URL'>Berita Teknologi</a>
<ul>
<li><a href='http://www.beritateknologi.com/seputar/ponsel/' target='_blank'>Ponsel</a></li>
<li><a href='http://www.beritateknologi.com/seputar/hardware-komputer/' target='_blank'>Hardware</a></li>
<li><a href='http://www.beritateknologi.com/seputar/software/' target='_blank'>Software</a></li>
<li><a href='http://www.beritateknologi.com/seputar/gadget/' target='_blank'>Gadget</a></li>
<li><a href='http://www.beritateknologi.com/seputar/game/' target='_blank'>Game</a></li>
<li><a href='http://www.beritateknologi.com/seputar/robot/' target='_blank'>Robot</a></li>
<li><a href='http://www.beritateknologi.com/seputar/lain-lain/' target='_blank'>Lainnya</a></li>
</ul>
</li>
<li><a href='URL'>Email Service</a>
<ul>
<li><a href='https://mail.yahoo.com' target='_blank'>Yahoo! Mail</a></li>
<li><a href='https://gmail.com' target='_blank'>Gmail</a></li>
<li><a href='https://login.live.com/' target='_blank'>Hotmail</a></li>
<li><a href='https://www.mail.lycos.com/' target='_blank'>Lycos Mail</a></li>
</ul>
</li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='http://akzara.homenet.org' target='_blank'>Akzara website</a></li>
<li><a href='http://blogspot.com' target='_blank'>Login</a></li>
</ul>
</div>
</div>
</div>
----------------------------------------------------------------------------------------------------------
Sebagai catatan, kode ini berjalan baik pada model blog template lama, bukan yang dinamis ya...ok segitu aja dari saya, kurang lebih mohon maaf.. wassalamualaikum warahmatullahi wabarakatu...
Tidak ada komentar:
Posting Komentar