Saturday, November 10, 2012

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

Desain Blog 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.
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'>

19 Komentar "Cara Menambah Elemen Baru di Header, Sidebar, Main-Wrapper dan Footer Blogspot"

yosep cyber4rt November 10, 2012 at 6:19 PM WIB Permalink

keren bang , ijin copas code nya untuk praktek di blog aku , kunjungannya yah ? hehe :)

Aries_Bro November 11, 2012 at 11:03 AM WIB Permalink

ok Bang...
Jgn Lupa Link Sumber nya...
Thanks Kunjungan nya...

Unknown November 19, 2012 at 7:20 PM WIB Permalink

bagus bang,artikelnya... kalo misalnya di bawah postingan, trus addelement-nya bisa di bagi 2 kolom ga?
jadi biar waktu nambah gadget (misal ada 2 gadget), biar ga numpuk di bawahnya,tapi bersandingan/sejajar (di bawah postingan)

kalo d footer sy sudah sukses ngebagi 3 kolom,tapi di bawah postingan belum ngerti...
kali aja tau,kayaknya situ mahir coding html ini....mohon pencerahan

Aries_Bro November 22, 2012 at 8:45 AM WIB Permalink

segera saya posting bang...
Please Wait...

Aries_Bro November 24, 2012 at 7:42 AM WIB Permalink

sudah saya post bang...
http://mengutipilmu.blogspot.com/2012/11/cara-membuat-2-kolom-di-bawah-kolom.html

Fzon December 27, 2012 at 2:43 PM WIB Permalink

Bg kq di template saya ga ada div id='content-wrapper'> nya??
gimana tu bg??

Klik Lowongan Pekerjaan December 27, 2012 at 8:35 PM WIB Permalink

bagus nihh broo..
buat yang baru belajar blogging
:D

Kunjungannya yaa
http://klik-lowonganpekerjaan.blogspot.com/

Aries_Bro December 29, 2012 at 7:03 AM WIB Permalink

(Expand Template Widget) udah di centang kawan?

Unknown January 2, 2013 at 4:34 AM WIB Permalink

saya sudah centang (Expand Template Widget) tetap saja ('content-wrapper')dan(Main-Wrapper)...
mohon pencerahanya gang???

Aries_Bro January 2, 2013 at 8:38 AM WIB Permalink

Boleh tau website anda?

Aries_Bro January 2, 2013 at 8:47 AM WIB Permalink

kalau (div id='content-wrapper') tidak ada anda bisa membuatnya sendiri....
sama sperti cara menambah Crosscol Wrapper pada artikel di atas...

rewinsatria February 2, 2013 at 5:58 PM WIB Permalink

thanks infonya sangat berguna

Aries_Bro February 4, 2013 at 5:45 AM WIB Permalink

sama2 Gan...

Hendri Prastio February 8, 2013 at 11:44 AM WIB Permalink

blogkuu gak ada element sidebarnya mas,,,mau tak tambahkan ,,,gmn ini mas.

Aries_Bro February 8, 2013 at 2:29 PM WIB Permalink

http://problogiz.blogspot.com/2012/09/membuat-kolom-sidebar-baru-sebelah-kiri_2.html
belum sempat saya post Mas tapi mungkin ini membantu....

BG April 14, 2013 at 4:20 PM WIB Permalink

agak mumet juga ya, kang. Perlu di pelajari dulu buat newbie seperti saya. Oh ya.. Mksh atas info nya.. Izin praktek ya kang..
http://bobotohgeulis.blogspot.com

Aries_Bro April 25, 2013 at 5:14 PM WIB Permalink

He he...
emang gitu gan...
sukses..

psdink April 29, 2013 at 4:14 PM WIB Permalink

mas kalo mau taro elemenya persis di sebelah header gmn

putri June 1, 2013 at 11:17 PM WIB Permalink

keren mas, sangat membantu, oh ya saya ada pertanyaan sdkit, sy kesal salah satu template blog ana ga bisa di edit html nya, itu knp mas, ada solusi? jd gini setiap sy kasih script ads misalnya ato facebook like button, pas di save berhasil ke save tp gak ada perubahan, setelh di cek lg terxta script yg tadi sdh hilang.
thxs