Buat Tempat Adsense, Banner di Header: Buat Elemen Baru di Header Blog

Membuat sebuah elemen baru yang berada di dalam header mempunyai fungsi yang sama dengan elemen-lemen lain dalam blog, dimana melalui sebuah elemen baru ini akan memungkinkan kita menambah sebuah widget baru. Menambah widget dalam "kolom header" terkadang memang amat diperlukan ketika seorang blogger ingin menempat sebuah "widget khusus" dimana widget spesial ini memang menjadi sebuah prioritas untuk ditonjolkan. Beberapa widget yang biasanya diletakkan di dalam kolom header selain title blog, image blog dan descriptions adalah tampilan gambar dan teks baik yang berkaitan dengan posting ataupun banner untuk kepentingan iklan. Menambahkan widget secara langsung melalui template memang dimungkinkan, akan tetapi sebuah persoalan baru akan muncul dimana widget tersebut akan tertampilkan di "Page Elements". Untuk mensiasati hal inilah maka sebuah "elemen baru" di dalam header amat diperlukan". Meskipun cara ini mengatasi persoalan yang muncul di "Page Elements" atau "Elemen Laman", tak dapat dipungkiri bahwa "persoalan ini" mengharuskan kita untuk membuat sebuah "elemen baru pengganti header" yang harus kita letakkan tepat di atas header. Pembuatan Eelemen baru pengganti header ini akan berlaku untuk blog sebelumnya memanfaatkan "penambahan elemen baru header" guna menempatkan widget di atas header. Widget di atas header ini bisanya berisi daftar menu atau search box (box pencarian). Kita akan coba bahas satu-persatu, dan untuk kali ini kita akan melakukannya pembuatan widget di dalam header ini di "New Blogger Templates" yang mungkin masih cukup menjadi persolan besar bagi beberapa sobat blogger karena kode HTML-nya memang sedikit lebih rumit dan berbeda dengan "Blogger Lama" atau "Template Tata Letak".

Membuat element baru di dalam header memang membutuhkan sedikit kecermatan dan ketelitian, oleh karena itu bagi sobat blogger yang akan mencoba melakukan hal ini aku harap untuk melakukan percobaan terlebih dahulu di "blog khusus percobaan", dimana sampeyan boleh melakukan berbagai experimen modifikasi blog. Setelah percobaan selesai dengan sempurna, dengan sekaligus melakukan beberapa penambahan dan perubahan desain seperti background, lebar, tinggi border dan beberapa yang lain, maka selanjutnya lakukanlah di "blog aktif". Itupun untuk melakukannya aku sarankan untuk melakukan "back-up (mengamankan)" template terlebih dahulu sebagai tindakan preventif apabila terjadi kesalahan yang tidak di harapkan. O ..., ya, perlu di catat bahwa pembuatan Elemen baru di dalam header ini, percobaannya aku lakukan di template "Mudah" (New Blogger Templates) by Josh Peterson.

Sebelum melanjutkan mengikuti tutorial ini, silahkan apabila ingin melihat bagaimana bentuk, posisi dan penempatan widget baru di header sebelah kanan, silahkan KLIK link demo di bawah ini.

D E M O

Sebagai langkah awal untuk melakukan proses penambahan elemen baru di dalam header seperti biasanya kita harus kita harus login terlebih dahulu untuk kemudian membuka "halaman Edit HTML". Silahkan ikuti langkah-langkah berikut.

Cara Membuat Elemen Baru di dalam Header

• Login : Login ke blogger.
  • Tuliskan "User Name" atau "Nama Pengguna" atau bisa juga gunakan "Email Address" jika diperlukan.
  • Tuliskan "Password" atau "Sandi".
  • KLIK "Login", kemudian tunggu beberapa saat hingga halaman "Dasboard" terbuka.
• Dasboard/Dasbor : Cari dan KLIK link "Design" atau "Rancangan". Tunggu kembali beberapa saat.
• Page Elements/Elemen Laman :
  Cari dan KLIK link "Edit HTML. Di halaman "Edit HTML inilah semua proses penambahan elemen baru di dalam header akan kita lakukan.
• Lakukan backup template terlebih dahulu. Buka panduan untuk backup template di Spesial Tutorials yang terletak di menu sebelah kiri.
• Cari kode ]]></b:skin> Gunakan Ctrl+F untuk mencari setiap kode di halaman "Edit HTML". Jika ingin mengetahui cara mencarinya, silahkan buka Special Tutorials (menu di sebelah kiri atas). Didalamnya terdapat tutorial tentang "Cara cepat mencari kode HTML serta beberapa tutorial penting dan mendasar yang lain.
  Copy paste kode CSS yang ada di bawah dan letakkan di atas kode tersebut.
  

  Kode CSS:

  #header{ 
         margin:0; 
         padding:0;
  }
  #header .widget{
         padding:20px;
  }        
  #GR_headerL{
         margin:0;
         padding:0;
  }
  #GR_headerL .widget h2.title, #GR_headerL .widget h2{
         font-size:12px;
         font-family:Verdana;
         font-weight:600;
         text-transform:uppercase;
         margin:6px 0;
  }
  #GR_headerL .widget{
         margin:3px;
         padding:6px 10px;
         background:rgba(0,0,0,0.2);
  }

• Cari kode:
  

  <div class='region-inner header-inner'>

• Di bawah kode ini terdapat kode seperti berikut:
  

  <div class='region-inner header-inner'>
          <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>
          </b:section>

• Tambahkan kode baru hingga bentuknya menjadi seperti ini:
  

  Kode Baru dengan penambahan elemen

  <div class='region-inner header-inner'>
  <div style='float:right;width:70%;'>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>
  </b:section>
  </div>
  <div style='float:left;width:30%;'>
  <b:section class='GR_headerLeft' id='GR_headerL' maxwidgets='1' showaddelement='yes'/>
  </div>
  <div style='clear:both;'/>

• KLIK "SAVE Templates" atau "Simpan Template".
• Klik Elemen Laman (Page Elements) untuk melihat elemen baru yang telah ditambahkan.
• Gunakan untuk menambah gadget/widget, kemudian buka halaman blog untuk melihat hasilnya!
• Selesai!!!

Catatan :

• Merubah ukuran width widget baru dilakukan dengan merubah persentase lebar (width) yang bernilai 70% dan 30%.
• Properti CSS baru bisa ditambahkan untuk mendapatkan tampilan widget terbaik.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Minggu KLIWON, February, 26, 2012

» Happy Blogging - gubhugreyot «