Jumat, 28 Juni 2013

Cara Membuat Menu Keren di Blogspot dengan CSS

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/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 ---------------------- */
     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.
thumbnail
Judul: Cara Membuat Menu Keren di Blogspot dengan CSS
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh

Artikel Terkait Internet :

0 komentar:

Posting Komentar

 
Copyright © 2013. About - Sitemap - Contact - Privacy
Template Seo Elite oleh Bamz