23.4.12

Cara Membuat Elemen Witget baru di Samping Judul Blog

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:


  1. Login Bloggger,
  2. Masuk template. Backup dulu template yang ada, sebagai antisipasi kemungkinan terjadi kesalahan. Caranya, tekan tombol backup/restore di bagian kanan atas. 
  3. Jika sudah selesai, klik edit html. Kalaupun ada peringatan, tekan saja Proceed,
  4. 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(http://1.bp.blogspot.com/-ZQGiGdDNVss/TmWDF9SidsI/AAAAAAAABnk/2g2kUFSpE4U/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}
  5. 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 -->
  6. Setelah selesai, priview/pratayang terlebih dahulu, untuk menghindari kesalahan.
  7. Selesai dan lihat hasilnya.
Lihatlah hasilnya. Iklan ini juga terdapat pada website besar semisal okezone, vivanews, detik dll. Selamat mencoba dan semoga berhasil.

8 komentar

EKO mengatakan...

terus menambahkan bannernya gimana kak ??

Mas Gawok mengatakan...

wah terimaksih banyak infonya kak dan sukses saya terapkan di blog saya

kapan-kapan kunjunginlapak saya kak di : free4all-cyber.blogspot.com

Tutorial Baru mengatakan...

Mas Eko. Untuk menambahkan bannernya Anda tinggal mencari elemen pada Layout blog yang barusan Anda buat, kemudian letakkan link banner di sana. Mudah, kan?

husada tp mengatakan...

mantabs..

KuliSEO mengatakan...

assekkkk bisa jugta ternyata mas

YUEZHA32.com mengatakan...

Keren tampilannya

Ratu Wisata mengatakan...

wah saya semakin mengerti dengan editing dengn penjelasan ini, terimakasih ya mas buat ilmunya :)

Lirik Dan Artinya mengatakan...

berhasil... makasih mas