Template Blogger sangat tidak fleksibel dalam menyesuaikan header tetapi dengan sedikit usaha yang pintar, anda bisa mendapatkan header terlihat sangat keren, efektif dan profesional. Trik ini sangat sederhana, anda akan berpikir bahwa kenapa tidak berpikir melakukannya dari dulu. Oke sekarang mari saya ceritakan bagaimana melakukannya. Sebelum anda ingin menyesuaikan header pada dasarnya memerlukan dua gambar:
gambar yang dapat anda gunakan sebagai Banner (ukuran ideal 500 X 100 pixel)
gambar akan menjadi ukuran 1 x 1 pixel (untuk menyembunyikan header).
Anda tidak perlu khawatir tentang gambar kedua saya yang akan mengurus. Dalam tutorial ini saya akan memberitahu bagaimana anda dapat memiliki banner kecil dan kotak pencarian di bagian header blogger blog Anda dan juga tab di bawah banner. Sekarang ini adalah apa yang perlu anda lakukan. Maaf karena blog saya berbahasa Inggris.
1. pertama menyembunyikan header yang ada
Pergilah ke Layout/Tata Letak >> Edit Header Image << Select From The Web dan letakkan di bawah url. Ini akan menyembunyikan header yang ada dengan gambar yang sangat kecil memberikan kesan bahwa ada tidak ada header. Saya yakin sudah ada orang lain yang telah mencoba trik ini.
2. sekarang kita menambahkan kode Header untuk Banner, Cari Box(atau AdSense) dan tab.
Sekarang kembali lagi ke Layout >>Add HTML/Javascript dan tambahkan kode di widget di bawah ini dan menempatkannya di bawah bagian header Anda. Sebelum Anda menempatkan kode ini di widget pastikan anda melakukan perubahan pada Blog anda yaitu menambahkan image path Banner yang tepat, link untuk tab anda dll.
saya juga menambahkan komentar untuk menjelaskan setiap bagian dari kode. Tapi untuk kenyamanan lebih lanjut bagian pertama adalah tabel yang akan memiliki Banner di kiri dan kotak pencarian di bagian kanan dan kemudian berisi kode untuk tab yang tercantum dibawahnya.
Jika anda tidak ingin menambahkan tab, anda dapat menghapus bagian kode dan semuanya akan siap.
<ul>
<table align="" width="" style="border-collapse: collapse; width: 100%;background:#35549E">
<tbody>
<tr>
<td>
<!-- Put your Banner image path in the src-->
<img src="YourBannerImageURL" />
</td>
<td>
<!-- Below is the search Box code no need to modify it-->
<!-- Or you code simply remove the search code and place your ad sense code in here-->
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="35" height="15" type="text" onfocus="this.value = '';" value="Search"/>
<input id="search-btn" value="Search" type="image" src="http://dryicons.com/images/icon_sets/stickers_icon_set/png/16x16/search_magnifier.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>
</td>
</tr>
</tbody>
</table>
<!-- Dibawah ini code untuk menambahkan tab, href sebagai link, title sebagai judul dan Value adalah tulisan tab baris kedua adalah contoh-->
<li><a href="Tab Link here" title="Tool Tip Text here">Title Here</a></li>
<li><a href="http://danisteve.blogspot.com/search/label/adsense" title="Blog Adsense">Adsense</a></li>
</ul>
Setelah anda selesai langsung lihat preview melakukan penyesuaian yang diperlukan jika ingin. Tapi saya tidak berpikir anda akan memerlukannya. Dan Blog anda akhirnya benar-benar siap.
Jika beberapa hal tidak terlihat sesuai rencana anda jangan khawatir. Anda dapat dengan mudah kembali ke blog tampak seperti semula yang harus dilakukan adalah hanya menghapus widget HTML/Javascript dan menempatkan gambar Banner anda kembali di Header dan selesai.
Jika anda memerlukan bantuan, anda dapat meninggalkan komentar. Jadi nikmati blog baru anda terlihat profesional tanpa harus membayar apapun kepada web desainer.
Boleh dicoba
BalasHapus