CSS Menu Elegan untuk Blogger

Tweet

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/AVvXsEjvP7HYc6eoPZdRLw0dD_pqIYw6rWsCJJExALNZmbV5ChKiCAFjfZxHXwLq2isPBa-bfgPpdlwFAZJtciKt7PqmTd9DzvMw1-Xgf8o2j-h4qJMjGgG37fmV384x-FQbH90Dy4lFTIpWxIo/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/AVvXsEiBM0NriFrYHNI3tCu7ixx9x9qhmrO4RBsdvETphJ7-wCpCnsEaczpjIOnykecRYbW83ePyZDS78zoUwM75aaIHhj7mkNl-cVJm64PjTwRA9wojRbjV-hPYCOKXPdh4nvoLRqPuu-3jFeA/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/AVvXsEhR19EuCr5xW-s3g0jjM5mGNg4R821-ab5RrJL4PGhmPGdQiSQze-ActBABAot2KGiDsDrbn3AOYiETT5yGL2YUeSevlBrw0BKS7dqhkk1asCos78ilb3ENK-4sx6bOLcRPwQlTdmw-wII/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/AVvXsEiEqBvHDgp5LKZ81sVOJCcOO5OQYmNlxZ0EXUuAFkmc9cjVl6A8KmOnvmqeKRc8AkuXz2HiVQPILNE7vCjOc9o5lODFaXE3IE2-C7Xk3nE9rFp1ITVcTs5f4oLyPMefR8Nz5wXLukZLyng/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/AVvXsEiFspSwQgx2X8vSHcWf9Og8KsJSOax52KJecTAii6fmL90-FFvKg3FvfMgRItIDxfByia5uknbaPfXEjNIviQcKUNx5jDUvWBjiFjI0Q0POzRmSLVyT8_t0hxHVYi2Qp4Otw9DJOrXVozc/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/AVvXsEh21n3Tfho5U6g81EiQ3MpKEe0lvySijO7bxUsu_Qcis1OlF_bDXpX-tqfwtMbhkyMa6eBmzv0EfW1EG5Ey4v7xa98MiFwC6GqJ_HyG1pDGOyWbCJpkr6Gp7Xvr-mVLN63HwkEr2MAGNck/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/AVvXsEhG_PSfxy23AjQWx8ZVR8drSTdzhZCFBTyUa0p4b5-mH0dYk7GNKpTixDM4aj7HSjT2fGTSqCN4ILIL0XszudL1328smc3rQhWC3AC-IzxG84WrXyiL202dOX0J-Xgpo342w2qnSgwfxmo/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/AVvXsEgL6PEdhP7u_3Eo9vOuRNzWfVbrFTJFHTSMe4M9yVzaORNC3VzjAYs5aIN9ZAZd-S-vcV0rCupMfZDvnTxy7UUeDnVS69uHQyjhp63t_9-VF-IDwYuG5EHkdhueO5QDGbanIBcYQ2j0otk/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.