CSS Menu Elegan untuk Blogger

Kali ini Blog Gado Gado akan menampilkan artikel berjudul CSS Menu Elegan untuk Blogger. Dengan artikel CSS Menu Elegan untuk Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci CSS Menu Elegan untuk Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel CSS Menu Elegan untuk Blogger selengkapnya:

D-Copy Blog's | Menu elegan memang menjadi tampilan yang menarik sendiri bagi sebuah blog. Menu elegan ini mungkin menjadi jarang Anda temui karena tampilannya yang simple dan modren. Langsung saja Anda ikuti langkah-langkahnya dibawah.

Lagkah :

1. Buka akun Blogger Anda
2. Masuk ke Menu Template > edit HTML > centang Expand Template Widget 
3. Cari kode dibawah ini :

]]></b:skin>

     4. Pastekan kode dibawah ini, diatas pada kode diatas :

/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilmMytWFG7O7r3b5BEC0ABu35rmb3d09c9k3uCRLhkMSNjZgS-VZI4asWJ0qmTI35AhA9E0y9XSsRTNfG4w51-nV02m6szwAuZ4n0aULP09-HWzyS97Xhfq1w_pqvAxFWoZfMILSfUzxY/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/AVvXsEhboQot9W9r8kEoaBGdihMoMEJvqMObKTtG3zl_9FsBRbbQPWCaLXuWDD0G-yFyP-mfiupVsodVd6LqOIdSXmrX7Bmv1D2SWqWg5Rrlcii_-WCvus-A1kX7PauOsAiq4izZuX1JriIk_pU/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/AVvXsEiuEWV_3wPz6vVi-JgFZfQuiWvDTpMWsoEq6Qy7BCA8YihhyHnV6JLhNqbVmltxmsxEUjEx8r7upc6GCAuqpeyAOhEdtUlPxt-a8jVwqTEV0kwZoz6TOPW9FJDknGZJ-XAD-HEexR4ODIs/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/AVvXsEgNYhUldNjBmcCL66rYsXGyp4gg8HaFGcNaqG3fP23pqABNaKUe444l-ni5AIsBbZwE2CQBATNs-6-ofYk5msGlOyB10P6kuUmrB12fiaHOqBPhUHKTtCMzSdJmFqZCiGwcEo1F3g-zZ5M/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/AVvXsEils82pv-fsDWS6Oau2j51yw9kCiR5KSitgy5doCN86CBv77pVyBO2yppvrkaDsfN9ZtLw4oapic7BSGxB2yFukA3Xn4Ohio4aufkrdrjioz2xLXFRb-zF9qg29KM72ISI7d4XeGm2bw8o/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/AVvXsEjV3nb-aqBa5FzEBzZAO0_4dicxWjNHmB01lk2iyWRJRMqe-PEumRGEvauCAauw_d02G7d9dutufohFSNJLL3VnMFZ7j_aa6HfEAqqtUiEO2yQMagmz98OXsP387lHG0q72mBNm-NlD90k/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/AVvXsEiN0arDEhvHRSj65PXsPDoggFwGYjuU2A6LI-_GGLWJaGD6fHDA6Lc8KVb_V0ByrUOVF260dc2ipST8iFINsRKO1vH93JXIrenX1a5oFZy4C9yiX-NxVXPX9vNIvTLLsL0yTVHo1MVSZvE/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/AVvXsEhJN7g-oDUgfYYKTBAVkgUo190pP0ihW_d_H_KGvRTaFXpENCZ_EYfx0SdfTvUgd7d0j0raqGflPam1ldd07kcWvUEAaQA5zmzYSRcFiK6S_p6qWGK-QrDtFI-HdxbTZRHiiTm10FgEJ_4/s1600/redslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Purpleslate nav ---------------------- */

     5.  Cari kode dibawah ini :

<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.

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul CSS Menu Elegan untuk Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.