Tutorial Memasang Horizontal MenuBar Dengan Shoutbox

selamat pagi murid-murid(hehehe),hari ini cikgu krole nak bagi tuition kat korang semua~!!!nak tak???apa!!!tak dengar,sekali lagi...nak tak??hah bagus~(masuk air ke dia ni,ngeee),ok,tutorial ini krole tujukan khas buat member-member semua dan terutamanya yang bertanya kepada krole berkenaan tutorial ni iaitu seperti blogger naz,blogger cik qiqi,dan blogger matdin...krole akan cuba buat tutorial ini sesimple yang mungkin agar mudah difahami dan sekiranya ada yang kurang paham dengan tutorial krole,jangan malu jangan segan~just ask krole ye.

okai apa yang korang perlu lakukan hanyalah mengikuti langkah-langkah yang krole sediakan,jom kita mulakan.

langkah pertama :
-Log in blog>>>Dashboard >>>Design >>>Edit HTML.

langkah kedua :


/*** menubar1 css mula ***/



#menubar1 {

margin: 0;

height:33px;

padding: 3px 6px 2px;

background: #72587F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSft_h7RxqKWCOxCBXGNRGnu6dzUhappS-J7yP0shF6pUl5JhilyODplNPwxWI2jrE6K5905UEhLUaTr51mrpsOwRzEG2EOdJzacyKL9WqlWsF4yxh9qlQLh0w8gmy-TIw7hlK76bWVzpN/s320/gradient.png) repeat-x 0 -110px;

line-height: 100%;

border-radius: 0em;

-webkit-border-radius: 0em;

-moz-border-radius: 4px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);

}

#menubar1 li {

margin: 0 5px;

padding: 0 0 8px;

float: left;

position: relative;

list-style: none;

}



/* main level link */

#menubar1 a {

font: bold 12px Arial;

color: #fff;

text-decoration: none;

display: block;

padding: 8px 20px;

margin: 0;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

text-shadow: 0 1px 1px rgba(0,0,0, .3);

}

#menubar1 a:hover {

background: #000;

color: #000;

}



/* main level link hover */

#menubar1 .current a, #menubar1 li:hover > a {

background: #EE82EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSft_h7RxqKWCOxCBXGNRGnu6dzUhappS-J7yP0shF6pUl5JhilyODplNPwxWI2jrE6K5905UEhLUaTr51mrpsOwRzEG2EOdJzacyKL9WqlWsF4yxh9qlQLh0w8gmy-TIw7hlK76bWVzpN/s320/gradient.png) repeat-x 0 -40px;

color: #404040;

border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);

-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);

}



/* dropdown */

#menubar1 li:hover > ul {

display: block;

}



/* level 2 list */

#menubar1 ul {

font: normal 12px Arial;

color:#000000;

text-align:left;

display: none;

margin: 0;

padding: 2px 2px 2px 2px;

width: 185px;

position: absolute;

top: 35px;

left: 0;

background: #9EDEFA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSft_h7RxqKWCOxCBXGNRGnu6dzUhappS-J7yP0shF6pUl5JhilyODplNPwxWI2jrE6K5905UEhLUaTr51mrpsOwRzEG2EOdJzacyKL9WqlWsF4yxh9qlQLh0w8gmy-TIw7hlK76bWVzpN/s320/gradient.png) repeat-x 0 0;

border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);

box-shadow: 0 1px 3px rgba(0,0,0, .3);

}



/*** menubar1 css tamat ***/


penting :
background: #72587F (Warna background menu bar)
background: #EE82EE (Warna button menu bar)
background: #9EDEFA (Warna background shout box)
width: 185px; (Lebar kotak shout box)
langkah ketiga :
-cari kod ini (]]></b:skin>)dengan menekan kekunci F3(pastekan dikotak find)

langkah keempat :
-setelah jumpa,copy kod yang telah siap diedit tadi dan pastekan diatas atau sebelum kod ]]></b:skin> pada script template.

langkah kelima :
-Salin dan edit kod HTML berwarna merah di bawah dengan menggantikan URL dan tajuk. Kemudian, masukkan kod Shout box anda pada teks Masukkan kod shout box di sini.




<!-- menubar1 mula -->



<ul id='menubar1'>

<li class='current'><a href='http://www.krolezone.com'>Home</a></li>

<li><a href='http://www.krolezone.com/search/label/Tutorial'>Tutorial</a></li>

<li><a href='http://wwww.krolezone.com/search/label/info'>Blogger Info</a></li>

<li><a href='http://www.blogger.com/profile/01115549849119467408'>About Me</a></li>

<li class='current'><a href='#'>Shout Box</a>

<ul>



<li>Masukkan kod shout box di sini.</li>



</ul>

</li>

</ul>



<!-- Menubar1 tamat -->


langkah keenam :
-Sekali lagi, dengan menggunakan keyboard, tekan kekunci F3. Taip atau paste kod:
<body>jika anda ingin meletakkan menu bar di bahagian atas blog.

<div id='header-wrapper'>jika anda ingin meletakkan menu bar di bahagian atas header.

<div id='main-wrapper'>jika anda ingin meletakkan menu bar di bahagian bawah header.
Paste pada kotak Find dan seterusnya tekan Enter.

langkah ketujuh :
-Salin kod yang telah siap di edit (rujuk langkah 5) dan paste:
*Di bawah atau selepas kod<body>jika anda ingin meletakkan menu bar di bahagian atas blog.
*Di atas atau sebelum kod<div id='header-wrapper'>jika anda ingin meletakkan menu bar di bahagian atas header.

*Di atas atau sebelum kod<div id='main-wrapper'>jika anda ingin meletakkan menu bar di bahagian bawah header.

kemudian save~dan anda berjaya...yeahhhh!!!tq.


p/s : wuahhh susah juga wat tuto ni..hrp korang phm ngee~