Menambah Kolom Elemen Widget di Luar Konten Blog

1/28/2011 Blogger Dsain Template dsign template Tips Trik Blog Tutorial Blogger
Pada postingan sebelumnya saya pernah membahas tentang Tiga Kolom/Elemen Halaman Widget di Bawah Header dan Cara Menambah Dua Elemen di Bawah Header, tapi kali ini kita akan coba membahas tentang Menambah Kolom di Luar Content Blog.

Menambah kolom diluar content blog maksudnya adalah menambah kolom pada elemen template akan tetapi penempatannya diluar template aslinya. Contohnya adalah pada gambar berikut :


Pada tambahan kolom tersebut, anda dapat menggunakannya untuk berbagai hal. seperti menaruh script iklan atau yang lainnya.

Cara Membuat Kolom Diluar Content Blog adalah sebagai berikut :

  1. Setelah anda login di blogger, langsung menuju ke "Rancangan >> Edit HTML".
  2. Cari code #outer-wrapper, perhatikan berapa width code tersebut.
  3. Tambahkan code CSS berikut dan letakkan di atas code #outer-wrapper :

    /* Luar-Wrapper */
    #luar-wrapper {
    background:#ccc;
    width:1350px;
    }

    /* Luar-Kiri */
    #luar-kiri {
    margin-left:10px;
    width:180px;
    float:left;
    }
    /* Luar-Kanan */
    #luar-kanan {
    margin-right:10px;
    width:180px;
    float:right;
    }



  4. Kemudian cari code </body> , letakkan code berikut dibawahnya :

    <div id='luar-wrapper'>

  5. Letakkan code penutup berikut diatas </body> :

    </div>

  6. Cari lagi code <div id='luar-wrapper'> dan letakkan code berikut tepat dibawahnya :

    <b:section class='luar' id='luar-kiri' preferred='yes'>
    <b:section class='luar' id='luar-kanan' preferred='yes'>

  7. Simpan Template


Silahkan sesuaikan nilai width untuk #luar-wrapper, #luar-kiri dan #luar-kanan agar sesuai dengan lebar template yang anda gunakan.



Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

32 comments

Gan.. keren Banget Blog nya.. main juga ke van-explore.blogspot.com
Mohon saran nya gan

Balas

salam kenal gan, blognya oke punya. gimana gan caranya buat blog kaya gitu ?

Balas

@LinkLunk Pingins seperti inimah gampang gan tinggal utak atik aja :D. saya juga masih belajar

Balas

gan linknya ane jadiin link brogroll ane ya....
kunjungi jg ya gan http://www.masardiyuono.co.cc
thx gan

Balas

Om..
kyknya ngk bsa deh...

emang code penutupnya harus di atas code utama ?

Balas

x( akibat copas sana sini atau sengaja biar pengunjung datang lagi untuk berkomentar..parah wahahahha

Balas

klo mau download Eyeshield
-21 subtitle indonesia
-The law Of ueki subtitle indonesia
-Cardcaptor Sakura Subtitle Indonesia
-Gintama Subtitle indonesia
-Gundam Wing Subtitle Indonesia
dan anime subtitle indonesia lainnya datang aja ke http://www.AFEsub.com

Balas

Belajare neng endi to gawe blognya keren banget. Aku masih taraf belajar nih.kunjungi aku gan di http://pelabuhancanggu.blogspot.com

Balas
This comment has been removed by the author.

izin membookmarknya dulu, siapa tahu nanti tutorialnya saya perlukan
terima kasih

Balas

masih belum ngerti gan maksudnya diluar konten blog itu gimana ya?

Balas

Gan, template ane gak ada "#outer-wrapper :" nya nih.. gmana dong? http://www.ug49ps.blogspot.com

Balas

klw widgetnya di atas dan bawah bisa ga gan

Balas

Ok makasih infonya, saya mau coba dulu

Balas

wahh membantu banget nihh icip praktekin yah mas :D
http://1technobee.com

Balas
This comment has been removed by the author.
This comment has been removed by the author.

buat yg ngalamin masalah

copy CODE
<div id='luar-wrapper'>
<b:section class='luar' id='luar-kiri' preferred='yes'/>
<b:section class='luar' id='luar-kanan' preferred='yes'/>

letakan di bawah <body>

lalu copy code </div>
letakan di atas </body>

semoga membantu

Balas

gan, apakah tidak salah peletakan kode div diatas body nya? ana coba salah terus

Balas
This comment has been removed by the author.

Good guys infonya :) Thanks
http://obatacemaxsid.com/obat-tradisional-kanker-paru-paru/

Balas

makasih banyak buat tutornya gan,, nice post..

http://goo.gl/XqR6Y0 - obat gondok

Balas

keren kalo mau daftar agen pulsa www.xcessreload.com

Balas

Keren sob artikelnya, Ditunggu artikel yang lainnya :)
Izin menyimak saja

Balas

Artikel ini memberikan wawasan terbaru buat saya, wacana pembahasan ini sangat bermanfaat.

Balas

ilmu yang sangat bermanfaat nih, terimakasih gan :)

Balas

Adakah anda memerlukan pinjaman kredit kewangan yang mendesak?
* Pemindahan Sangat cepat dan serta-merta ke akaun bank anda
* Bayaran balik bermula lapan bulan selepas anda mendapatkan wang
akaun bank
* Kadar faedah yang rendah sebanyak 2%
* Bayaran balik jangka panjang (1-30 tahun) Panjang
* Terma pinjaman yang fleksibel dan bayaran bulanan
*. Berapa lama masa yang diambil untuk membiayai? Selepas mengemukakan permohonan pinjaman
Anda boleh mengharapkan jawapan awal kurang dari 24 jam
pembiayaan dalam 72-96 jam selepas menerima maklumat yang mereka perlukan
dari awak.

Hubungi sah dan syarikat amanah berlesen yang dibenarkan
bahawa bantuan kewangan kepada negara-negara lain.
Untuk maklumat dan pinjaman lebih permohonan membentuk perniagaan bersama, melalui

e-mel: cashfirmarena@gmail.com

SIR EVA DEMETER
Ketua Pengara

Balas