Monday, March 29, 2010
Tampilan sangat mempengaruhi ketertarikan pembaca untuk lebih lama
menikmati segala hal yang termuat di dalam sebuah blog. Selain
keindahan, fasilitas yang memberikan kemudahan untuk menjelajah isi
blog juga memberikan andil yang besar bagi betahnya pengunjung blog.
Menambah "Menu Horizontal" sudah merupakan hal yang wajib bagi seorang
blogger. Cuma satu hal yang perlu diperhatikan ; bagaimana mendapatkan
sebuah menu horizontal yang memenuhi syarat untuk ditambahkan dalam
blog. Di bawah ini kami sediakan sebuah menu horizontal yang sangat
menarik, yang bila anda telaten bisa di modifikasi baik bentuk maupun
warna serta besarnya. Silahkan dicoba untuk membuat blog anda menjadi
lebih nyaman dilihat dan lebih mudah ditelusuri semua posting yang
sudah anda buat dengan susah payah.
Langkah-langkahnya sebagai berikut :
1. Lakukan Login terlebih dahulu untuk masuk ke menu pengeditan HTML.
2. Lanjutkan masuk ke menu "Tata Letak".
3. 'Klik' "Edit HTML".
4. Lakukan pengamanan template anda terlebih dahulu dengan meng'klik' "Download Template Lengkap" dan simpan dalam folder anda.
5. Setelah yakin template orisinil tersimpan dengan baik, cari kode :
]] ></b:skin>
6. Copy paste kode HTML di bawah ini dan letakkan persis di atas kode : ]] ></b:skin>
/* top navbarblack
----------------------------------------------- */
#navbarblack {
height:27px;
background:#fff url(http://i36.tinypic.com/11t7ok1/BGS1.jpg)top repeat-x;
padding:5px;
}
#nav {
font-size:1.1em;
float:left;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav li {
float:left;
background: url(http://i38.tinypic.com/2v0lb92/BGS1.jpg) right repeat-y;
padding: 0 10px;
}
#nav a, #nav a:visited {
display:block;
color: #eabe64;
padding-bottom:6px;
border-bottom:2px solid #eae8d1;
}
#nav a:hover, #nav a:active,
#nav li.current-cat a, #nav li.current-cat a:visited {
display:block;
padding-bottom:2px;
color: #0c00fd;
border-bottom:12px solid #ea3131;
}
.shift:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content:".";
}
.shift {
margin:0px auto;
display:inline-block
}
.shift {
display:block
}
7. Supaya tidak bikin pusing simpan terlebih dahulu dengan 'klik' "Simpan Template".
Saya kira setelah menarik nafas cukup panjang, mari lanjutkan pekerjaan kita dengan langkah berikut.
8. Kembali temukan : </head>
9. Letakkan kode berikut di bawahnya :
<div class='shift' id='navbarblack'>
<ul class='shift' id='nav'>
<li><a href='faiswahid.blogspot.com'>Home</a></li>
<li><a href='belajar-bersama-pemula.blogspot.com'>Tutorial Blogger</a></li>
<li><a href='smp3lembang.blogspot.com'>Renungan</a></li>
<li><a href='http://centricle.com/tools/html-entities/'>Memposting HTML</a></li>
<li><a href='http://belajar-bersama-pemula.blogspot.com/2009/11/sekilas-mengenai-saya.html'>About Me</a></li>
</ul>
</div>
Kode dengan warna merah dan biru silahkan diganti sesuai dengan kebutuhan anda berkaitan dengan "Menu" yang akan di isikan beserta "Link Menu"-nya.
Selamat mencoba ! Semoga blog anda tampil lebih cantik!!!!
Langkah-langkahnya sebagai berikut :
1. Lakukan Login terlebih dahulu untuk masuk ke menu pengeditan HTML.
2. Lanjutkan masuk ke menu "Tata Letak".
3. 'Klik' "Edit HTML".
4. Lakukan pengamanan template anda terlebih dahulu dengan meng'klik' "Download Template Lengkap" dan simpan dalam folder anda.
5. Setelah yakin template orisinil tersimpan dengan baik, cari kode :
]] ></b:skin>
6. Copy paste kode HTML di bawah ini dan letakkan persis di atas kode : ]] ></b:skin>
/* top navbarblack
----------------------------------------------- */
#navbarblack {
height:27px;
background:#fff url(http://i36.tinypic.com/11t7ok1/BGS1.jpg)top repeat-x;
padding:5px;
}
#nav {
font-size:1.1em;
float:left;
}
#nav, #nav ul {
list-style: none;
line-height: 1;
}
#nav li {
float:left;
background: url(http://i38.tinypic.com/2v0lb92/BGS1.jpg) right repeat-y;
padding: 0 10px;
}
#nav a, #nav a:visited {
display:block;
color: #eabe64;
padding-bottom:6px;
border-bottom:2px solid #eae8d1;
}
#nav a:hover, #nav a:active,
#nav li.current-cat a, #nav li.current-cat a:visited {
display:block;
padding-bottom:2px;
color: #0c00fd;
border-bottom:12px solid #ea3131;
}
.shift:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content:".";
}
.shift {
margin:0px auto;
display:inline-block
}
.shift {
display:block
}
7. Supaya tidak bikin pusing simpan terlebih dahulu dengan 'klik' "Simpan Template".
Saya kira setelah menarik nafas cukup panjang, mari lanjutkan pekerjaan kita dengan langkah berikut.
8. Kembali temukan : </head>
9. Letakkan kode berikut di bawahnya :
<div class='shift' id='navbarblack'>
<ul class='shift' id='nav'>
<li><a href='faiswahid.blogspot.com'>Home</a></li>
<li><a href='belajar-bersama-pemula.blogspot.com'>Tutorial Blogger</a></li>
<li><a href='smp3lembang.blogspot.com'>Renungan</a></li>
<li><a href='http://centricle.com/tools/html-entities/'>Memposting HTML</a></li>
<li><a href='http://belajar-bersama-pemula.blogspot.com/2009/11/sekilas-mengenai-saya.html'>About Me</a></li>
</ul>
</div>
Kode dengan warna merah dan biru silahkan diganti sesuai dengan kebutuhan anda berkaitan dengan "Menu" yang akan di isikan beserta "Link Menu"-nya.
Selamat mencoba ! Semoga blog anda tampil lebih cantik!!!!
Label: Seo, Tutorial Blog
0 Comments:
Subscribe to:
Post Comments (Atom)