Untuk memasang menu bar dengan auto-hide shout box,sila ikut beberapa langkah di bawah:
p/s: Sila save template anda terlebih dahulu.
Langkah 1
Salin kod css berwarna biru di bawah. Edit kod warna dan width yang telah di bold di bawah. Anda boleh gunakan kod di bawah sebagai rujukan.
background: #72587F (Warna background menu bar)
background: #EE82EE (Warna button menu bar)
background: #9EDEFA (Warna background shout box)
width: 185px; (Lebar kotak shout box)
/*** menubar1 css mula ***/
#menubar1 {
margin: 0;
height:33px;
padding: 3px 6px 2px;
background: #72587Furl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1F5x0FH5WlB-ADO2iXUZT3eGwR83HEUUpplul0K8jk8SKMt3LKtrFktTa0onjCSeEbXrOIWbmMm_-KQcGDdomreuL4y1s79SiHzSCWoQhyUWcopOL-f4vpWE461yVO8hmFlQoluAlkdGL/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: #EE82EEurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1F5x0FH5WlB-ADO2iXUZT3eGwR83HEUUpplul0K8jk8SKMt3LKtrFktTa0onjCSeEbXrOIWbmMm_-KQcGDdomreuL4y1s79SiHzSCWoQhyUWcopOL-f4vpWE461yVO8hmFlQoluAlkdGL/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: #9EDEFAurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1F5x0FH5WlB-ADO2iXUZT3eGwR83HEUUpplul0K8jk8SKMt3LKtrFktTa0onjCSeEbXrOIWbmMm_-KQcGDdomreuL4y1s79SiHzSCWoQhyUWcopOL-f4vpWE461yVO8hmFlQoluAlkdGL/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 ***/
Langkah 2
Log in blog => Dashboard => Design => Edit HTML.
Langkah 3
Dengan menggunakan keyboard, tekan kekunci F3. Salin atau paste kod ]]></b:skin> pada kotak Find dan seterusnya tekan Enter.
Langkah 4
Salin kod css yang telah siap di edit(rujuk langkah 1) dan paste kod tersebut di atas atau sebelum kod]]></b:skin> pada script template.
Langkah 5
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://maribinablog.blogspot.com'>Home</a></li>
<li><a href='http://maribinablog.blogspot.com/search/label/Tutorial'>Tutorial</a></li>
<li><a href='http://maribinablog.blogspot.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 6
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 7
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.
Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik Save
Sumber...http://maribinablog.blogspot.com
Sobat Blogger sedang berada di halaman Cara pasang horizontal menu bar dengan shout box dan Sedang membaca artikel Cara pasang horizontal menu bar dengan shout box ini dengan url http://arafcreativity.blogspot.com/2012/04/cara-pasang-horizontal-menu-bar-dengan.html. Dan Sobat Blogger juga boleh COPAS artikel Cara pasang horizontal menu bar dengan shout box ini jika bermanfaat dan jangan lupa untuk meletakkan link Cara pasang horizontal menu bar dengan shout box sebagai sumbernya.
0 komentar:
Posting Komentar