Kali ini saya akan berbagi tutorial blog, dengan judul Cara Membuat Kolom Witget di Samping Judul Blog.
Pasti kalian sudah pernah mendapati iklan/banner di samping logo
sebuah blog berukuran 729 pixel x 90 pixel. Penempatan itu sangat strategis karena pembaca hampir pasti melihat setiap berkunjung seperti dalam gambar yang saya beri kotak merah di bawah. Sayang, tidak semua template menyediakan kolom witget di samping judul blog/header itu. Tertarik membuat? Berikut caranya:
- Login Bloggger,
- Masuk template. Backup dulu template yang ada, sebagai antisipasi kemungkinan terjadi kesalahan. Caranya, tekan tombol backup/restore di bagian kanan atas.
- Jika sudah selesai, klik edit html. Kalaupun ada peringatan, tekan saja Proceed,
- Cari kode #header dan hapus semuanya yang berhubungan dengan #header dan ganti dengan kode di bawah ini:
#header{background:transparant;float:left;width:179px;padding-top:15px;margin-left:7px;text-align:left;color:#f2f2f2}
#header2{float:right;margin-right:7px;width:728px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIaBZLmX3npRfPGo49VRf7qOmBuhCe3eD1eNuih7nxh-wL9JG7VkH1MtY_6c3dUlOUldRWE8ibc3TmjzXJgpABjlpCIyeFho0kqt_ZAv03wLS-7y_j-m2v358RCzFK1xVIl0b-hNR9ww0/s1600/Advertisement+728x90.jpg) no-repeat;height:90px;margin-bottom:4px;margin-top:4px;}
#header h1{line-height:1em;text-transform:uppercase;letter-spacing:.01em;font:bold 30px Georgia, Serif;margin:0 auto;padding:0 auto}
#header a{color:#666;text-decoration:none}
#header a:hover{color:#666}
#header .description{max-width:100%;text-transform:none;letter-spacing:.01em;line-height:1.2em;font:normal 13px Arial;color:#999;margin:0 auto;padding:0 1px 5px}
#header img{margin:auto} - Kemudian cari kode <div id='header-wrapper'> dan rubah seperti sususan di bawah ini. Jika sudah ada susunannya kalian tinggal
mengganti kode di bawah ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
</div><!-- end header-wrapper --> - Setelah selesai, priview/pratayang terlebih dahulu, untuk menghindari kesalahan.
- Selesai dan lihat hasilnya.
8 komentar
terus menambahkan bannernya gimana kak ??
wah terimaksih banyak infonya kak dan sukses saya terapkan di blog saya
kapan-kapan kunjunginlapak saya kak di : free4all-cyber.blogspot.com
Mas Eko. Untuk menambahkan bannernya Anda tinggal mencari elemen pada Layout blog yang barusan Anda buat, kemudian letakkan link banner di sana. Mudah, kan?
mantabs..
assekkkk bisa jugta ternyata mas
Keren tampilannya
wah saya semakin mengerti dengan editing dengn penjelasan ini, terimakasih ya mas buat ilmunya :)
berhasil... makasih mas
EmoticonEmoticon