Bagaimana-Nak-Buat-Menu-Bar-Attractive

Bagaimana cara untuk membuat Menu Bar dibawah header blog tuan-tuan,ianya dibina menggunakan CSS dan BB namakan ia sebagai Attractive Css3 atau menu bar drop down menu, anda boleh rujuk disini. Menu bar ini simple dan kelihatan menarik dan sesuai dipadankan dengan 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>

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

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

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.