Membuat baner pada sudut blog

Membuat Banner di samping judul Blog

Bagi kalian yang sering menjelajahi dunia maya tentunya sering mendapati Situs-situs ataupun Blog yang menempatkan Baner di samping Judul, Selain dapat mempercantik Tampilan Blog atau Situs, Menempatkan Baner di samping Blog tentunya juga dapat menambah Pemasukan kantong di Blog sobat karena kalian dapat menambah Space Iklan baru yang tentunya akan Membayar ke Blog sobat, Eits tentunya kalau memasang baner yang berbayar lhooo.

Tetapi kelihatanya tidak semua Template Blog atau Situs di desain memiliki Widget yang terletak di samping Judul Blog sobat, " Tapi tenang saya akan kasih Tutor nya tentang bagaimana Memasang Baner di samping Judul Blog " Biasanya ukuran baner yang di pasang di samping judul Blok berukuran 729x90 pixel, tapi tenang bisa di ubah ukuranya sesuai kebutuhan yang anda inginkan, Ok.

Silakhan Kalian simak bagaimana Langkah - langkah menempatkan Baner di samping Judul Blog :

1. Login Bloggger,
2. Masuk template. Backup / Cadangkan dulu template yang ada, sebagai antisipasi kemungkinan terjadi kesalahan. Caranya, tekan tombol backup/cadangkan di bagian kanan atas. 
3. Jika sudah selesai, klik edit html pilih " Lanjutkan "
4. Cari kode #header dan hapus semuanya yang berhubungan dengan #header dan ganti dengan kode di bawah ini yang berwana Hijau : ( untuk memprmudah pencarian silakhan tekan tombol ctrl + f  )
   
   #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/AVvXsEhKI6QkyshZgrsuFAQPx259ILjlRVCOVVX7an19rsqlN7o0XDXQTjguhn7nLD0fTJCzLlQlp5U6g9wsgSJK13isLgry4fYVFPke6tgkp__MnrpzruWBlIr-aCv7mgAJxnOMnKMtdjx2_JQ/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: ( untuk memprmudah pencarian silakhan tekan tombol ctrl + f  )
   
   <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, Pratinjau terlebih dahulu, untuk menghindari kesalahan.
7. Selesai dan lihat hasilnya

Share this post