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.

Posting Yang Berkaitan Berdasarkan Kategori :




8 komentar

  1. EKO  

    August 2, 2012 at 12:35 PM

    terus menambahkan bannernya gimana kak ??

  2. Mas Gawok  

    August 2, 2012 at 12:50 PM

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

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

  3. Tutorial Baru  

    September 7, 2012 at 2:10 PM

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

  4. husada tp  

    September 18, 2012 at 9:49 AM

    mantabs..

  5. KuliSEO  

    October 14, 2012 at 5:41 PM

    assekkkk bisa jugta ternyata mas

  6. YUEZHA32.com  

    January 5, 2013 at 9:43 AM

    Keren tampilannya

  7. Ratu Wisata  

    March 10, 2013 at 9:05 AM

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

  8. Lirik Dan Artinya  

    January 16, 2014 at 7:59 AM

    berhasil... makasih mas