Memasang 'Smart Navigation Bar'.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. Backup Template anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

Tricks Dan Panduan Percuma Untuk Blogspot

5. Cari kod di bawah.


<div id='content-wrapper'>

Perhatian !!! Gantikan text yang berwarna biru.

6. Tambahkan kod ini di atas kod tadi.

<div id="newnavbar"> <ul> <li><a href="URL Halaman Utama Anda">Home</a></li> <li><a href=" URL Halaman Yang Berkaitan">About</a></li> <li><a href="mailto: Alamat Email Anda">Contact</a></li> </ul></div>

7. Sekarang cari kod ini.

]]></b:skin>

8. Pilih salah satu kod di bawah dan tambahkan di atas kod tadi.

Tricks Untuk Blogger Baru

#newnavbar ul li{

background: #eeeeee;



}



#newnavbar ul li{

font-size:100%;

font-style:italic;

font-family:Verdana, "BitStream vera Sans",

font-weight:bold;

list-style-type:none;

display:inline;

padding:10px;

margin:50px;

border:3px solid #FF99CC;



}



#newnavbar li a{

color:#7E587E;



}



#newnavbar li a:visited {

color: #7E587E;



}



#newnavbar li a:hover {

color: #B93B8F;

background: #FF99CC;



}



body#layout #main,

body#layout #sidebar {

padding: 0;



}


Tips Blogspot Percuma

#newnavbar ul li{

background: #e9ffd9;



}



#newnavbar ul li{

font-size:100%;

font-style:italic;

font-family:Verdana, "BitStream vera Sans",

font-weight:bold;

list-style-type:none;

display:inline;

padding:10px;

margin:50px;

border:3px solid #CAF99B;



}



#newnavbar li a{

color:#7E587E;



}



#newnavbar li a:visited {

color: #7E587E;



}



#newnavbar li a:hover {

color: #B93B8F;

background: #CAF99B;



}



body#layout #main,

body#layout #sidebar {

padding: 0;



}


Tutorial Blogspot Dalam BM Percuma

#newnavbar ul li{

background: #eeeeee;



}



#newnavbar ul li{

font-size:100%;

font-style:italic;

font-family:Verdana, "BitStream vera Sans",

font-weight:bold;

list-style-type:none;

display:inline;

padding:10px;

margin:50px;

border:3px solid #99FFFF;



}



#newnavbar li a{

color:#7E587E;



}



#newnavbar li a:visited {

color: #7E587E;



}



#newnavbar li a:hover {

color: #B93B8F;

background: #99FFFF;



}



body#layout #main,

body#layout #sidebar {

padding: 0;



}


9. Setelah selesai pilih PREVIEW untuk melihat hasilnya.

10. Sekiranya anda berpuas hati SAVE TEMPLATE.

Selamat Mencuba.

2 comments:

Shairazi Saidin said...

blog ko memudahkan aku berblogging..!!! caiyok!!! trimas bro..!!!!

SyamZone™ said...

Ok bro !!! Happy blogging.

Post a Comment