Cara Membuat 2 Kolom Widget Di Postingan/Sidebar

cara membuat 2 widget diatas postingan

Postingan kali ini sesuai dengan judul elemen diatas "Cara Membuat Dua Buah Kolom Gadget / Widget di atas Postingan atau Sidebar Blog". Beberapa template pada umumnya memiliki susunan Add A Gadget atau Tambah Widget yang berbeda-beda. Untuk membuat 2 buah widget di dalam sebuah elemen, tentu mudah dan simple.

Mempercantik blog dengan susunan gadget yang sesuai, rapih , teratus, dan professional adalah hal yang diinginkan setiap pengguna blog. Maka dari itu, kita harus membuat beberapa kolom elemen baru yang cocok untuk Anda dimanapun tempatnya. Sebenarnya tidak harus di atas postingan, bisa saja di bawah posting, di bawah header, di dalam sidebar, di bagian footer dan lainnya. Mari ikuti panduannya berikut ini dengan terlebih dahulu melihat contoh foto panduan mengenai cara membuat dua buah kolom gadget baru ini.
cara membuat dua buah gadget kolom di atas postingan

Cara Membuat 2 Buah Elemen Colomn Gadget/Widget Baru :
1. Login Blogger, Pilih Template lalu Edit HTML.
2. Ceklis / Centang Expand Widget Template ( hal ini dimaksudkan agar semua kode HTML pada tampilan widget di Tata Letak / Layout Anda dapat terlihat semua ) .
3. Cari kode ]]></b:skin> dengan menekan tombol CTRL+F
4. Copy Paste script CSS berikut ini diatas ]]></b:skin> :

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
  Anda dapat mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya adalah Jarak ( Atas, Kanan, Bawah, Kiri ) . Anda juga dapat merubah border ( garis tepi widget ) dengan warna. Caranya hapus $bordercolor dan ganti dengan kode warna yang Anda inginkan. Contoh : Kode warna hitam = #000000

5. Kemudian carilah bro kode

  •   <div id='main-wrapper'>
  •   <div id='content-wrapper'>
  •   <div id='header'>
  •   <div id='sidebar-wrapper'>
  •   <div id='bottom'>

     jika sudah ketemu dan didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini di Atas  atau di bawah salah satu kode tadi. Itu sesuai dengan penempatan Anda mau diatas atau dibawah. Contoh diatas <div id='main-wrapper'>

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='Mediablogger1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='Mediablogger2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Penjelasan :
<div id='main-wrapper'> adalah posisi halaman utama anda biasanya berukuran lebar 950px. Biasanya dipakai untuk penempatan menu horizontall atau daftar isi sebuah blog.
<div id='content-wrapper'> adalah posisi postingan.
<div id='header'> adalah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog. Bisa juga diberi space iklan.
<div id='sidebar-wrapper'> adalah posisi sidebar blog.
<div id='bottom'> adalah posisi paling bawah. Atau Footer Blog Anda.

Pilih salah satu, mau menempatkannya dimana. Apabila mau menempatkan 2 kolom widget tersebut dibanyak tempat tinggal copy saja kode yang kedua diatas yg ada 50% nya itu, tetapi tidak perlu copy kode yang pertama karena kan sudah ada kode CSS sebelumnya. Anda juga bisa membuat beberapa gadget hanya tampil dihomepage  atau hanya tampil dihalaman posting. Terimakasih telah membaca artikel berkategori Tutorial Blogger ini. Semoga artikel Cara Membuat 2 Kolom Widget di Postingan/Sidebar Blog dapat bermanfaat.


28 comments:

  1. gan ane mau tanya, gimana cara bikin gadget widget seperti no 1 lagi supaya berada di bawah gadget no 2 seperti gambar ini http://2.bp.blogspot.com/-FVozmU4DbeQ/UReG6glQITI/AAAAAAAAAQs/eJ-hfTlufpg/s1600/12.jpg

    mohon pencerahannya :)

    ReplyDelete
    Replies
    1. nih gan, caranya telah saya rangkum dan dapat anda download di http://rapidshare.com/files/1806886538/tata%20cara%20merubah%20widget%20sesuai%20permintaan.txt

      Delete
  2. nice sob, thanks...cm klo dipasang dibawah postingan, scripnya di taruh dmn ya?(yg di atas uda dicoba smua n gak berhasil)

    ReplyDelete
    Replies
    1. di taruh diantara 3 kode ini, tiap template pada umumnya memiliki nama yg berbeda sih.

      div id='outter-wrapper'

      atau main-wrapper atau content-wrapper atau main

      slmt mencobanya.

      Delete
  3. malam bro.. nice article:D..
    tapi saya mau minta pencerahannya nih..
    mungkin gak kalo kita bikin 2 kolom widget yang baru tersebut dibawah judul postingan? jika itu mungkin untuk di implementasikan, script yang mana yang harus kita simpan dan dimana letaknya..

    Thanks b4:D

    ReplyDelete
    Replies
    1. pertanyaan yg sama dengan yg diatas. silahkan dibaca sob.
      langkah 1-4 sama. pada langkah ke 5 lihat komentar diatas.

      semoga membantu.

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. masbro mohon pencerahan, punya saya kok masih gak bisa dibawah judul postingan?
    alias masih di atas judul postingan

    ReplyDelete
    Replies
    1. kalau mau ditaruh dibawah postingan, cari penutup < / div> yg berhubungan dengan salah satu kode dinomor.5 diatas. nah jika sudah ketemu kode </ div nya terus taruh dibawahnya.

      Delete
  6. lanjutkan.!!!

    prasetya-computer.blogspot.com

    ReplyDelete
  7. gan tanya dikit, gmn ya kalau mau menampilkan pstingan di halaman sidebar yang baru kita buat?
    #mf2 kalau pertanyaannya tidak nyambung dengan artikel di atas :)

    ReplyDelete
    Replies
    1. mungkin maksud sob itu popular post yg ada judul,gambar,dan deskripsi (thumbnail) isinya ya, tapi kalau memang mas ingin postingannya diletakkan disidebar terus di postingan diisi apa?

      Delete
  8. bisa bantu gak gan cara buat template 1 kolom jadi 2 kolom ???

    kontak anegan..

    ReplyDelete
    Replies
    1. hampir sama seperti diatas mas.
      tinggal dikurangi lebarnya, lalu buat lagi elemen css lebarnya sesuai dengan jumlah yg dikurangin tadi.

      Delete
  9. Thanks... Kunjungi blog saya ya,..: zlfs-1995.blogspot.com

    ReplyDelete
  10. nice info gan'....
    http://blogzets.blogspot.com

    ReplyDelete
  11. Cara memasang widget di Footer gmana brohh ?? kaya punya mu..!!

    ReplyDelete
  12. mantap sob kunjungi balik ya http://prediksibola888.blogspot.com/

    ReplyDelete
  13. makasih atas infonya gan sngat brmanfaat skalii...

    ReplyDelete
  14. ♠ Obat Kuat Pria Perkasa " AFRICA BLACK ANT "
    Obat ini diramu dari bahan alami, untuk memberikan kekuatan, daya tahan yang luar biasa saat berhubungan sex (pasutri) dan memaksimalkan kinerja alat vital agar berfungsi dengan baik dan normal. Sehingga bisa kembali kuat di ranjang, serta bisa menyembuhkan gejala penyakit ejakulasi dini dan lemah syahwat.

    ♠ VIMAX CANADA ORIGINAL
    Vimax adalah obat herbal yang berkhasiat sangat bagus dan ampuh untuk membesarkan dan memperpanjang penis pria dengan cepat (100% GARANSI UANG KEMBALI).

    ♠ OBAT PENINGGI BADAN
    Grow up super usa, untuk merangsang pertumbuhan anda tambah tinggi hingga 175cm dalam jangka 7hr-1bln.

    SEDIA PRODUK : .........
    ★ Obat Kuat Perkasa Pria
    ..... → Viagra usa, Cialis, Africa Black Ant, Maximum Powerful
    ★ Obat Kesehatan Herbal
    ..... → Penghilang Bekas Luka, Hernia, Mata Katarak
    ★ Obat Perangsang Sex Wanita/Pria
    ..... → Perangsang serbuk, Cair, cream, Semprot
    ★ Aneka Macam Kondom Silikon
    ..... → Kondom Berurat, Berduri, Getar/Vibrator
    ★ Aneka Macam Ring silikon
    ..... → Ring Duri, Ring Getar/Vibrator
    ★ Aneka Macam Kosmetik Import
    ..... → Pemutih Ketiak, Muka, Badan, Obat Jerawat
    ★ Alat Bantu Sex / Sex toys P/W
    ..... → Boneka Full Body, Penis Getar Goyang, Vagina Empot2
    ★ Dan Masih Banyak Produk Lainnya.....

    ♥ KAMILAH SOLUSI TEPAT KEMBALIKAN KEHARMONISAN RUMAH TANGGA ANDA ♥

    ⇒ Jangan ragu atau sungkan berbelanja di toko kami.
    ⇒ Proses mudah, cepat dan harga bersaing
    ⇒ BONUS : Beli 3 Produk Dapat 1 Produk
    ⇒ Rahasia Konsumen Terjamin (Privacy)
    ⇒ Bagi anda yang berminat hubungi customer service kami.
    ⇒ Melayani pemesanan via paket jne _ tiki _ pos, keseluruh indonesia.
    ⇒ Info Lebih Lengkap Segera Kunjungi Website Kami : http://hokimarket.com

    By Marketing : HOKIMARKET.COM™


    ♥ TOKO ONLINE TERPERCAYA SEJAK 2010 ♥

    ReplyDelete
  15. terima kasih atas informasi yang bermanfaat ini..
    http://www.reseper.com/pumpkin-labu-dengan-saus-kayu-manis-apel-cokelat/

    ReplyDelete

Web Design Blogs W3 Directory - the World Wide Web Directory DMCA.com

Copyright © 2013 IMPOINT Blog . All rights reserved.| Blogger.com File Storage Created by Blogger Tuts | Template