1News Online:
Home » » Tutorial Blog - Cara pasang menu bar versi 2

Tutorial Blog - Cara pasang menu bar versi 2

Wednesday, October 31, 2012 | 3:08 AM


Untuk memasang menu bar dibawah header, seperti yang boleh anda lihat pada blog ini ataupun di template classic(sila klik), sila ikut beberapa langkah yang di tunjukkan di bawah.

p/s: Sila save script template anda.

Langkah 1

Log in blog => Dashboard => Layout => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, taip atau paste kod ]]></b:skin> pada ruang Find. Seterusnya tekan Enter.

Langkah 3

Salin kod berwarna biru di bawah dan paste di atas atau sebelum kod ]]></b:skin> ( rujuk langkah 2)

p/s: Anda boleh edit kod warna yang di bold mengikut keseuaian blog anda jika perlu.
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #000;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.invertedshiftdown ul{
margin:0;
margin-left: 40px;
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0;
padding: 5px 10px 9px 10px;
background-color: white;

-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

.invertedshiftdown a:hover{
background-color: #000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

.invertedshiftdown .current a{
background-color: #D10000;
padding-top: 9px;
padding-bottom: 5px;
color: white;
}

Langkah 4

Salin kod merah di bawah dan edit pada notepad. Gantikan kod merah yang di bold dengan URL dan teks pilihan anda.

<div class='invertedshiftdown'>
<ul>
<li><a href='masukkan URL di sini'>Link 1</a></li>
<li class='current'><a href='masukkan URL di sini'>Link 2</a></li>
<li><a href='masukkan URL di sini'>Link 3</a></li>
<li><a href='masukkan URL di sini'>Link 4</a></li>
<li><a href='masukkan URL di sini'>Link 5</a></li>
<li><a href='masukkan URL di sini'>Link 6</a></li>
</ul>
</div>
<br style='clear: both;'/>

Langkah 5

Dengan menggunakan keyboard, taip atau paste kod <div id='content-wrapper'> pada ruang Find dan seterusnya tekan Enter.

Langkah 6 

Salin kod berwarna merah yang telah di edit (rujuk langkah 4) dan paste kod tersebut di bawah atau selepas kod <div id='content-wrapper'> (rujuk langkah 5)


Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.

Kongsi artikel ini : :

Post a Comment

 
Copyright © 2012. 1News Online - All Rights Reserved
Proudly powered by Blogger