Bagaimana Buat Menu Bar Attractive Untuk Blog

Menu Bar atau menu tab untuk blogger/blogspot? 

Bagaimana cara untuk menambah dan menampal menu bar ini dibawah header blog tuan-tuan,ianya dibina menggunakan CSS dan BB namakan ia sebagai menu bar attractive Css3  atau drop down menu bar. 

Anda boleh rujuk disini. Menu bar ini simple dan kelihatan menarik dan sesuai dipadankan dengan template blogger (New Template Designer) yang berwajah baru oleh www.blogger.com

Berikut dibawah adalah langkah-langkah yang saya ingin kongsi dengan anda :

1. Log masuk ke akaun  blogger,selepas tu klik dan scroll ke bawah drop down menu,

2. Selepas tu sila pilih " Template",

3. Sekarang pilih " EDIT HTML",

4. Kemudian klik butang " Proceed ",
   
5. Cari code html dengan menekan Ctrl+F    ]]></b:skin>

6. Paste kod html di bawah sebelum tag ini ]]></b:skin> 

***Sila abaikan bahagian ini sekiranya tak faham.....(Terus ke step 7-10 dan save)

/* The CSS Code for the menu starts here for belajarblogging.com */
#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam1] li a{background:#606060;}
ul[rel=sam1] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}

7. Pergi ke blogger dan klik "Layout",

8. Klik "Add Gadget" dan pilih "HTML/Javascript",

9. Copy & Paste semua kod dibawah ini :

<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://www.belajarblogging.com">Home</a></li>
<li><a href="http://www.belajarblogging.com">Tentang Kami</a></li>
<li><a href="http://www.belajarblogging.com">Perkhidmatan Kami</a></li>
<li><a href="http://www.belajarblogging.com">Pertanyaan</a></li>
<li><a href="http://www.belajarblogging.com">Produk Kami</a></li>
<li><a href="http://www.belajarblogging.com">Tips Jualan</a></li>
<li><a href="http://www.belajarblogging.com">Hubungi Kami</a></li>
</ul>
</div>

Nota: Ubah URL  www.belajarblogging.com dengan link URL blog anda. 
Contohnya : www.niagaonline.com/

10. klik save.
    You are done...selesai.

Nota : Selamat Mencuba.......sekiranya anda mendapati tutorial widget ini berfungsi...sila share dengan rakan-rakan yang lain....jangan lupa komen ye!......klik di tabung BB untuk membantu BB terus relevan di alam siber untuk manfaat bersama.....terima kasih.