Lagkah :
- Buka akun Blogger Anda
- Masuk ke Menu Template > edit HTML > centang Expand Template Widget
- Cari kode dibawah ini :
]]></b:skin>4. Pastekan kode dibawah ini, diatas pada kode diatas :
/* ---------------------- Blueslate nav ---------------------- */5. Cari kode dibawah ini :
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwe1N9gffYoUGp3rV5I3S-DGzfhdeHirkAQ8Q5ISM1OJnr5ISuNkg37m_DtsxFmtOJ8y2FXQNCwFh5XaTZVNVjcdeM1lchE8VnLyxOVKWvxvqzSq8s6bHUdlLSMHV21y262KoP71SEvcg/s1600/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJGoB2mlIkx0PIR_B7bhzYZcRcNeZCxRsScRSQH-AEVTTF3S0n3Lm6p3nytFRsvTkrCJ_8p2DR6qs-licEsmnFxbSrM9Gtti9Dt36u1UKZcf3qvpnZSLq1s9eOr3NZ5Ha3QnMLL_ElosA/s1600/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Blueslate nav ---------------------- */
/* ---------------------- Greenslate nav ---------------------- */
.green #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ANgVqcjDYp73CHaciVz4perVfiaaIzr_JKhCTgPwbIcgn4FhSvUN2CkqNwp1y5XJ_aUGEVzQntkIQQtKOhML8DED0TaJz2ECojlADbYwAXyPZAj25D4rcRncC65FkFykFEi_ccpedT0/s1600/greenslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.green #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7q02UTlbaHP90YxfanfFBIGF2xOTKWF6NzJV1VcqgHlUvTREkypFQuAiUPxB5pib0lXi1nRF7PAZOrPz_MXuwIulfWzPukvZcJ2XBzpea7u6a5K4O9nfOHX3OVeQ07qFVKbgAROAi_0M/s1600/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Greenslate nav ---------------------- */
/* ---------------------- Redslate nav ---------------------- */
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZxfjcE6BNectXYjMbREOLZ808ZPJRy9qrGKEjKHD_M-S9ONHk4S7X4NtZZ3hyphenhyphenBqa1hd2xu_hKernS1tGD64t3uzk4vqxXAGvE3DwpPFEbtQr0qysYo3ZcvueUNMz5wB6k6Ehs36A-76Y/s1600/purpleslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmkWSPjO-CE_UMxOhCwGfk8iILuZcIt6F0izu38OggIR5A2-W18ED_6uRv5JcvR95_UMb3ZwOVf_8BqH6ea_wYK03iAThsiBk_SJb7CEqgJzghCdU4lNoiozo3InDltH9Q_XsMm0ESdk/s1600/purpleslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Redslate nav ---------------------- */
/* ---------------------- Purpleslate nav ---------------------- */
.purple #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgraZvNXZqXDWJfKNzzp6a-aN6MA9dlZVRbNT0Df9lYqcFJZ1l1FOd7mi8ueI6QwoecNyVy3Mj3ukcEh4mpy_0CzH3Vbm50-4NKqFzfpdgOZmrlzx6KaKrePg0a6B-TSaADS65z9CufWPU/s1600/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#FBDAFA;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.purple #slatenav ul li a:hover,.purple #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRPmwOGMUrTMsYFvQ3GWZmYwitpIOQMbKcOMhFMUvbplTPAZwV-CKeg8K1DNeMBJNxyxPWp-iKMPzB8dP2MYgvLu0QdqMv7Rcepo7iuYc1G8owo4IKJobsBsPBHF3ULUqTI8RuYAuRQMY/s1600/redslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Purpleslate nav ---------------------- */
<div id='content-wrapper'>6. Pastekan kode dibawah ini, diatas pada kode diatas :
<div class="blue">
<div id="slatenav">
<ul>
<li><a href="http://www.bloggertrix.com/" title="css menus" class="current">Home</a></li>
<li><a href="http://www.bloggertrix.com/" title="css menus">About Us</a></li>
<li><a href="http://www.bloggertrix.com/" title="css menus">Services</a></li>
<li><a href="http://www.bloggertrix.com/" title="css menus">Our Work</a></li>
<li><a href="http://www.bloggertrix.com/" title="css menus">Contact Us</a></li>
<li><a href="http://www.bloggertrix.com/" title="css menus">Add This</a></li>
</ul>
</div>
</div>
Keterangan :
- Ganti kode <div class="blue"> dengan kode-kode yang menu yang Anda inginkan dibawah ini :
<div class="blue">
<div class="green">
<div class="red">
<div class="purple">7. Save Template Anda.
Judul: Cara Membuat Menu Keren di Blogspot dengan CSS
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 06.39
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 06.39
0 komentar:
Posting Komentar