Membuat Menubar Dengan CSS Slate

Sore sobat blogger semuanya setelah membahas Tentang Cara Membuat Widget Social Media Dengan Rss Subscribe Box Selanjutnya kita akan berbicara tentang cara Membuat Menubar Dengan CSS Slate, untuk freview gambarnya kurang lebih seperti ini :

VIEW A DEMO

Untuk penerapannya sangat mudah sekali,

1. Seperti biasa Login dulu ke akun Blogger sobat

2. Kemudian klik "TEMPLATE" Klik "Edit HTML"

3. Jangan Lupa Cetang "Expand Template Widget"

4. Cari Kode ]]></b:skin> Gunakan Ctrl+F untuk mempercepat pencarian
5. Kopi Paste Kode CSS Dibawah ini Tepat diatas kode  ]]></b:skin>

/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(http://3.bp.blogspot.com/-i7suevcugHA/UFG3IZkry_I/AAAAAAAABIY/ouwHMsmbyeA/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(http://2.bp.blogspot.com/-KMsYnyuey34/UFG3I9EhMkI/AAAAAAAABIc/0iEmfsvgfok/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(http://1.bp.blogspot.com/-1iO1Pf7MloE/UFG3JnJXGwI/AAAAAAAABIk/Z7rduD4Gvq0/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(http://1.bp.blogspot.com/-LU8ioa0uB78/UFG3Ka9COhI/AAAAAAAABIs/34PC3xn_vBM/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(http://2.bp.blogspot.com/-QMHW4t8rQq4/UFG3LDPa1lI/AAAAAAAABI0/8xkm2Dqg9gU/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(http://1.bp.blogspot.com/-36XG3pin0JU/UFG3MIbY5AI/AAAAAAAABI8/e36ibk1DGJs/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(http://1.bp.blogspot.com/-52wLrPtH4Qc/UFG3NImLZuI/AAAAAAAABJE/XTbTwKzJONE/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(http://2.bp.blogspot.com/-5AjVkRrjKEs/UFG3OEDwwwI/AAAAAAAABJI/I1NpQLOFmbs/s1600/redslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Purpleslate nav ---------------------- */

6. Save Template

7. Kemudian Kopi paste Kode HTML dibawah ini, Caranya ;
    1.  Klik Tata Letak
    2.  Klik Add Widget
    3.  Klik HTML/Java Scrift dan taruh Kode dibawah ini :
<div class="blue">
 <div id="slatenav">
 <ul>
 <li><a href="http://joens-tutorial.blogspot.com" title="css menus" class="current">Home</a></li>
 <li><a href="http://joens-tutorial.blogspot.com" title="css menus">About Us</a></li>
 <li><a href="http://joens-tutorial.blogspot.com" title="css menus">Services</a></li>
 <li><a href="http://joens-tutorial.blogspot.com" title="css menus">Our Work</a></li>
 <li><a href="http://joens-tutorial.blogspot.com" title="css menus">Contact Us</a></li>
 <li><a href="http://joens-tutorial.blogspot.com" title="css menus">Add This</a></li>
 </ul>
 </div>
 </div>



8. Klik Save, dan lihat hasilnya.

Note :
Untuk penyesuaian kode HTML silakan sobat blogger sesuaikan kode HTML diatas dengan kode dibawah ini :
 1. <div class="blue">
 2. <div class="green">
 3. <div class="red">
 4. <div class="purple">

Demikian artikel kali ini semoga bermanfaat, happy blogging my friend.....!!!

Berlangganan update artikel terbaru via email:

5 Responses to "Membuat Menubar Dengan CSS Slate"

  1. Bukan "Buat Entri Baru" tetapi mungkin "Template" yang anda maksud

    ReplyDelete
    Replies
    1. Betul banget masbro, waduh ane sampe bisa salah ketik kaya gini yah, pokonya thank banget ya masbro.

      Delete
  2. Banyak Info Bag Disni Sangat Bermanfaat

    ReplyDelete
    Replies
    1. Terimakasih banyak gan atas kunjungannya, salam kenal gan masih newbie...........
      perlu bimbingan dari agan

      Delete
  3. thanks buat tutornya gan,, sangat memabantu sekali..

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel