Cara Menambah Elemen Baru di Header, Sidebar, Main-Wrapper dan Footer BlogSPOT

Desain blog yang kita gunakan baik di BlogSPOT atau BloGGeR, WordPRESS dan BlogDETIK serta Blog-blogyang lain sebenarnya tersusun atas beberapa elemen blog yang pada intinya terdiri atas :

1. Header-Wrapper/Header : Bagian teratas blog di bawah Navbar).
2. Main-Wrapper : Terletak di bagian tengah (tempat posting). Pada Main Wrapper.
3. Crosscoll-Wrapper : Tidak semua desain blog menggunakan crosscoll-wrapper. Posisinya terletak di antara header dan Content-Wrapper, dimana content-wrapper sendiri melingkupi (wadah dari) Main-Wrapper dan sekaligus Sidebar-Wrapper.
4. Sidebar-Wrapper atau Sidebar : Terletak di samping kanan atau kiri blog (template 2 kolom)  atau di kedua sisi kanan dan kiri (template 3 kolom).
5. Footer : Terletak di bagian terbawah blog.

Pada setiap elemen blog sebenarnya mempunyai fungsi tersendiri, namun meskipun demikian elemen tersebut dapat juga digunakan untuk membangun sebuah fungsi/fasilitas pelengkap blog yang sama. Fungsi  elemen sendiri adalah sebagai tempat untuk menambahkan sebuah widget baru yang di lakukan melalui “Page Elemen/Elemen Laman“. Widget ini sangat variatif sekali dan terbagi menjadi dua :

1. Widget bawaan blog yang secara langsung bisa kita tambahkan di blog tanpa kita perlu melakukan perubahan apaun terhadap widget tersebut (perubahan kode HTML, javascript atau kode CSS). Widget seperti ini antara situs penyedia blog yang satu dengan yang lain tidak terlalu banyak berbeda. Beberapa widget yang umumnya tersedia misalnya : Categories, Label, Follower, Image, Gallery dan beberapa widget yang lain.
2. Widget baru yang ditambahkan dengan menggunakan kode html, javascript  dan kode CSS yang berasal dari luar. Widget seperti ini tersedia dibanyak situs penyedia widget (gratis dan berbayar) atau bisa dibuat sendiri dengan membuat desain menggunakan kode html dan javascript serta kode CSS. Contoh widget : Menu, Image Effects, Tooltip Animasi, Visitor Counter, Tag Cloud dan banyak lagi yang lain.

Elemen baru yang ditambahkan di BlogSPOT sebenarnya sudah tersedia dan kita tinggal membuat supaya elemen tersebut diperlihatkan sehingga bisa digunakan sebagai sarana penambahan widget. Dari beberapa elemen yang ada, yang perlu ditambahkan adalah elemen di bagian header dan main wrapper yang memang belum diperlihatkan ketika kita membuka “Page Element/Elemen Laman” (ditandai dengan kolom bergaris putus-putus dengan tulisan Add Gadget atau Tambah Gadget). Meskipun demikian, kita akan membahas secara keseluruhan cara membuat penambahan elemen tersebut.

Cara membuat Elemen Baru di Eelemen Laman (Page Element) BlogSPOT-BloGGER

1. Login to BloGGeR (Login ke BloGGeR) : Tuliskan “User Name/Email Address” kemudian tuliskan “Password (Sandi)”.
2. Dasboard (Dasbor) : Merupakan halaman pertama kita jumpai setelah login. Pada halaman Dasbor terdapat beberapa link  seperti Tata Letak/Rancangan (Layout), Posting, Pengaturan (Editting), Edit Entri dan Entri Baru (New Entry). KLIK link Tata Letak (Layout).
3. Layout (Tata Letak/Rancangan) : Yang kita jumpai di bagian kita jumpai stelah langkah di atas adalah “Page Elemen atau Elemen Laman” yang merupakan sebuah bagian dari “Tata Letak (Layout)”. KLIK link “Edit HTML“
4. Setelah sampai tahap ini akan terlihat kode HTML penyusun blog (Desain dasar blog). Amankan (Back-up) template terlebih dahulu supaya seandainya ada kesalahan atau kerusakan desain blog yang disebabkan kesalahan pemasangan kode atau penulisan kode, template sebelum perubahan bisa kembali digunakan. Untuk mengetahui cara back-up template silahkan . Selanjutnya kita akan masuk per bagian yang akan ditambahkan elemen baru dengan mencari terlebih dahulu satu-persatu kode HTML yang akan di rubah untuk menciptakan pertambahan/memunculkan elemen. Untuk memudahkan saat mencari kode, silahkan lihat panduannya dengan cara .

Elemen Baru di Header Blog (bagian blog teratas):

1. Cari Kode :

   <b:section class='header' id='header'

2. Pada kode di atas setelah id=’header’ biasanya terdapat kode lain yang mengikuti seperti : “maxwidgets=’1′ showaddelement=’no’>“. Jika tidak ada tidak menjadi masalah, yang penting seluruh bagian kode html pada point pertama di atas, gantilah dengan kode html baru sebagai berikut :

   <b:section class='header' id='header'  showaddelement='yes'>

3. Catatan : Seandainya di template sampeyan kode ditulis dalam bentuk berbeda, misalnya ada penambahan “wrapper“, sesuaikan juga kode yang digunakan sebagai pengganti sehingga akan pas buat templatenya.

Elemen Baru di Main-Wrapper (di atas halaman posting):

1. Cari Kode :

   <b:section class='main' id='main'

2. Pada kode di atas setelah id=’main’ biasanya terdapat kode lain yang mengikuti seperti : “ showaddelement=’no’>“. Jika ada sedikit perbedaan kode html seperti contoh di bagian atas (header), sesuaikan juga penulisan kodenya. Ganti kode html-nya dengan kode html di bawah ini :

   <b:section class='main' id='main' showaddelement='yes'>

Elemen Baru di footer (di bagian terbawah blog/template):

1. Cari Kode :

   <b:section class='footer' id='footer'

2. Pada kode di atas setelah id=’main’ Biasanya pada bagian footer sudah ditampilkan sebuah elemen dengan tanda detelah kode di atas tidak ada penambahan kode html yang lain. Biasanya kode di atas langsung ditutup dengan kode ” > “ (kurung tutup). Jika memang belum ada elemennya gunakan kode baru sebagai berikut :

   <b:section class='footer' id='footer'>

Sidebar (di samping kanan atau kiri atau kedua sisi kanan-kiri) :

Di sidebar biasanya pasti sudah ada elemennya sehingga tidak perlu dilakukan perubahan dalam bentuk apapun.

Crosscol Wrapper (di antara header dan ruang posting) :

1. Tidak semua blog menggunakan Crosscol Wrapper. Bila ingin menambahkan elemen baru Crosscol, harus dilakukan penambahan kode baru sebagai berikut :

   <div id='crosscol-wrapper'>
   <b:section class='crosscol' id='crosscol'/>
   </div>

2. Letakkan kode di atas di bawah kode html seperti terlihat di bawah ini :

   <div id='content-wrapper'>

3. Apabila kode di atas tidak ada dan sampeyan tetap ingin menambahkan elemen baru di posisi tersebut, maka tambahkan kode html secara lengkap seperti di bawah ini :

   <div id='content-wrapper'>
   <div id='crosscol-wrapper'>
   <b:section class='crosscol' id='crosscol'/>
   </div>

4. Lanjutkan dengan menambah tag penutup </div> di atas kode :

   <div id='footer-wrapper'>