Menambahkan Elemen Baru di Bawah Header

Pertama-tama, sebelum kita mempelajari lebih jauh tentang menambahkan elemen baru di bawah header, kita harus tahu dulu apa sih header itu? Header adalah informasi awal atau data yang berguna untuk kategorisasi atau transmisi tujuan utama sebuah blog. Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Contohnya bisa sobat lihat pada gambar berikut ini ...

Untuk membuat kolom baru tidaklah sesulit yang anda bayangkan, anda hanya cukup menambahkan sedikit kode css serta HTML kedalam kode template anda. Mau tahu caranya? silahkan ikuti langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Klik tab Edit HTML.
4. Klik Tulisan Download Template Lengkap (baca: Cara Backup Templates) untuk berjaga-jaga.
5. Copy kode berikut, lalu paste di atas kode ]]></b:skin>
   
   %23under_header%7B%0Amargin%3A10px%200%3B%0Apadding%3A1%25%3B%0Awidth%3A98%25%3B%0A%7D
   
6. Cari kode yang mirip dengan kode di bawah ini :
   
   <div id='header-wrapper'> 
   <b:section class='header' id='header' maxwidget="1" showaddelement="no">
   <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
   </b:section>
       </div>
7. Copy kode berikut lalu paste persis di bawah kode tadi :
   
   %23under_header%7B%0Amargin%3A10px%200%3B%0Apadding%3A1%25%3B%0Awidth%3A98%25%3B%0A%7D
   
8. Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda tersimpan.
9. Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.
   
   
10. Sekarang sobat sudah mempunyai elemen yang langsung persis di bawah header, silahkan tambahkan elemen yang  inginkan.
11. Selesai.

Kode-kode di atas Saya encrypt. Walaupun sedikit membingungkan dan aneh di mata sobat tetapi tetap berhasil jika dicoba. Silahkan dicoba ...

Modifikasi Followers

Sudah hampir sebulan saya tidak update blog ini, di samping kesibukkan saya di luar saya juga cukup kelelahan mengurus blog-blog saya yang lain. Muncul lagi dengan tutorial blog yang ringan, tapi mungkin bermanfaat, kita coba memodifikasi followers blogger.

 

Biasanya followers dipasang langsung pada widget yang sudah tersedia di blogger, tapi kali ini kita akan memasangnya di widget HTML/Javascript. Abaikan tutorial ini jika sobat menggunakan template minima atau template bawaan blogger.

 

Jika sobat menggunakan custom template, maka untuk mengedit link, warna text dan border akan mengalami kesulitan. Untuk itu kita coba menambahkan border dan mengedit sedikit warna pada followers, link color, text color, background color dan border color. untuk memulainya, silahkan sobat login ke blogger.

• Masuk ke Rancangan
• Klik Elemen Laman
• Pilih Tambah Gadget
• Klik yang HTML/JavaScript
• Kemudian masukkan kode followers dibawah ini :

  <script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>

  <!-- Define the div tag where the gadget will be inserted. -->
  <div id="div-eknxr14kfzlq" style="width:280px;border:1px solid #cccccc;"></div>
  <!-- Render the gadget into a div. -->
  <script type="text/javascript">
  var skin = {};
  skin['BORDER_COLOR'] = '#dedede';
  skin['ENDCAP_BG_COLOR'] = '#f0f0f0';
  skin['ENDCAP_TEXT_COLOR'] = '#444';
  skin['ENDCAP_LINK_COLOR'] = '#444';
  skin['ALTERNATE_BG_COLOR'] = '#fff';
  skin['CONTENT_BG_COLOR'] = '#f9f9f9';
  skin['CONTENT_LINK_COLOR'] = '#444';
  skin['CONTENT_TEXT_COLOR'] = '#444';
  skin['CONTENT_SECONDARY_LINK_COLOR'] = '#444';
  skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#444';
  skin['CONTENT_HEADLINE_COLOR'] = '#444';
  skin['NUMBER_ROWS'] = '3';
  google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
  google.friendconnect.container.renderMembersGadget(
  { id: 'div-eknxr14kfzlq',
     site: '06215030860304111239' },
    skin);
  </script>

• Ganti kode yang berwarna merah dan ungu dengan kode id blog sobat
• Simpan.

 

Keterangan :

1. untuk kode yang saya tebalkan bisa sobat ganti sesuai dengan warna dan lebar widget blog sobat.
2. Kode yang berwarna biru sesuaikan dengan lebar widget template sobat.
3. Untuk mencari kode yang berwarna merah dan ungu, jika sebelumnya sobat sudah memasang widget followers, maka sobat bisa klik kanan pada halaman blog kemudian klik �view page source� lalu klik CTRL+F dan ketik saja followers. Dari situ sobat dapat melihat kode id dan site dari blog sobat.