menu ini warna latarnya putih, tapi kalau ada menu disampingnya yang kalau di klik akan berubah menjadi ungu, screenshot di samping ini, dan demonya dibawah ini, sobat tertarik dengan menu navigasi ini ? kalau iya langsung saja kita langsung membuatnya seperti ini :
Demo
- Pertama kita haru login ke Blogger
- Setelah di dasbar, kita klik menu ''Template''
- Klik ''Edit HTML''
- Sekarang cari kode ]]></b:skin (CTRL+F untuk pencarian), setelah ketemu taruhlah kode dibawah ini di atas kode tersebut
/* The CSS Code for the menu starts here bloggertrix.com */
.btrix_glossymenu1{
position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbLTszby0L_14gVzFzX7NhN-JMGvBJ1JA0AyXyyJ3NZV6O8kC9xmXd9b3kIUDel4aZI2x0LYSMitTZ_Aiq2_RXyuAmL2R6eRAhuijciFsO3SeS9PP9zwbUhEKOMNnpSmk-bFDKPaSSY6s/s1600/btrix_menupu_bg.gif) repeat-x;
height: 46px;
list-style: none;
}
.btrix_glossymenu1 li{
float:left;
}
.btrix_glossymenu1 li a{
float: left;display: block;color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.btrix_glossymenu1 li a b{
float: left;display: block;padding: 0 24px 0 8px;
}
.btrix_glossymenu1 li.current a, .btrix_glossymenu1 li a:hover{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGm2v4aeN2EbN4HAF7geiCV4amcoZjMGwuaaYAv_yaRNWMfxEGAxwq-wL9CRbBU_xrGMEPR6JB-m5xE7T6BmCt4LO1-DvnwMtfIWdbVqGw4YjgeqxHnLnvz-dLHHr4XpUK-1CV-5oADU/s1600/btrix_menupu_hover_left.gif) no-repeat;
background-position: left;
}
.btrix_glossymenu1 li.current a b, .btrix_glossymenu1 li a:hover b{
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Y24e95EBIGsVPoangIXIDXSyuzPnGtxvnSDEQm-KDwmZYLNC7Cv2DK0eJAYS9a6IiS9LCi9xOZZMXF0Ozm0L_G8ZjYIYiYisSSqpun2udrJcA2KYCRtj4iq9U7vusQoQ14GN8KFSaag/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}
- Setelah selesai, sekarang simpan template
- Sekarang kita ke ''Tata Letak''
- Klik ''Tambah Gadget''
- Sekarang pilih gadget ''HTML/JavaScript
- Copy kode di bawah ini dan simpan si kotak yang tersedia
<ul class="btrix_glossymenu1">
<li class="current"><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>CSS</b></a></li>
<li><a href="#"><b>Forums</b></a></li>
<li><a href="#"><b>Webmaster Tools</b></a></li>
<li><a href="#"><b>JavaScript</b></a></li>
<li><a href="#"><b>Contact Us</b></a></li>
</ul>
- Setelah selesai, Sekarang klik simpan
Dan akhirnya selesailah artikel ini semoga artikel ini bermanfaat bagi sobat dan semuanya dan bagi sobat yang ingin bertanya dan pendapat tentang artikel ini di kolom komentar di bawah ini
