Unknown | 10:55 AM | 0 Komentar

Membuat Header Full Gambar dan Berlink

Beberapa waktu yang lalu saya pernah membca komentar di blog ini yang menanyakan, bagaimana caranya membuat header yang seperti punyanya BlogKepo. Yaitu header yang full gambar dan disertai link di header itu, ada gambar (icon) yang bisa diklik.


contoh header full gambar dan berlink
Caranya cukup ribet juga ya, yang pertama kita harus setidaknya bisa sedikit photoshop.Menyiapkan beberapa gambar yang dijadikan header dan pernak-pernak lainnya sebagai menu di header. Untuk belajar tutorialnya membuat header yang full gambar dan bisa ngelink bisa kamu baca di sini. Sudah sangat lengkap di paparkan caranya tahap demi tahap dengan gaya anak muda banget.

Memang biasanya header full gambar dengan berbagai pernak-pernik menu link >>

Membuat Menu Navigasi Horizontal

Membuat Menu Navigasi Horizontal
Blog yang bagus itu harus didukung oleh navigasi yang mudah dan tepat. Sekarang kita akan belajar membuat menu navigasi horizontal. Itu tu, menu yang biasanya ada di header blog, ada home, about me dan lain-lain. Dengan menu navigasi yang pas akan membuat pembaca mudah untuk melacak apa yang ada di blog kita.

Cara Membuat Menu Navigasi Horizontal
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin>
6. Jika sudah ketemu taruh kode berikut di atasnya:

/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

7. Kemudian cari kode  <div id='outer-wrapper'><div id='wrap2'>
8. Jika sudah ketemu taruh kode berikut di bawahnya:

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Cari artikel disini&apos;;}' onfocus='if (this.value == &apos;Cari artikel disini&apos;) {this.value = &apos;&apos;;}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

9. Kita dapat menganti kode warna sesuai dengan template blog kita, dan Simpan Template jika sudah selesai.
10. Untuk menambahkan menu yang ada di navigasi horintal, kita klik Elemen Halaman. Lihat gadget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan.


 ke tempat lain, semisal facebook, twitter, lalu halaman about me dan sebagainya ini lebih banyak dipakai oleh remaja. Nggak tahu apakah itu ikut-ikutan atau memang itulah yang disukai kalangan remaja. Silahkan kalau mau dicoba, semoga sukses :D

Category: ,

Blog-Kepo.Blogspot.Com:
Blog-Kepo.Blogspot.com adalah Tempatnya Blogger Template Gallery. Kami menyediakan template Blogger secara gratis. Anda dapat menemukan tentang tutorial, blogger hacks, SEO optimasi, tips dan trik lainya di sini!

0 Komentar

Luangkanlah Sedikit Waktu Sobat Untuk Memperindah Blog Ini Dengan Berkomentar,, (^_^)

TATA KRAMA KOMENTAR DI BlogKepo

- Jika Berkomentar , Berkomentarlah Dengan Sopan Dan Baik
- Pakai Pilihan Anonymous Jika Anda Tidak Mempunyai Akun Google
- Tidak Boleh Menautkan Link Secara Langsung ( Live Link )
- Di Larang Politics Dalam Bentuk Apapun
- Di Larang Spam
- Di Perbolehkan Meninggalkan Email Dikomentar Untuk Saya Kirim Pesan Ke Email Anda Dengan Cepat
- Tanpa Moderasi
- Apabila Untuk Blogwalking Gunakanlah NAME/URL


MOHON MAAF JIKA COMENT ANDA TIDAK SAYA JAWAB KARENA SAYA TIDAK ONLINE 24 JAM DIKARENAKAN BANYAK URUSAN DI DUNIA NYATA.