Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Minggu, 11 April 2010

Membuat 2 Kolom sidebar (2)

Kategori :
Pada postingan sebelumnya saya menjelaskan tentang membuat 2 kolom sidebar dengan cara membaginya namun kalau sekarang saya akan menjelaskan cara Membuat 2 kolom sidebar (2). Apa maksudnya? jadi kita akan menambahkan 2 kolom lagi tepatnya di bawah sidebar utama yang satu kolom begitu maksud saya Joget, gimana sudah mengerti belum? apa...!!! belum? oke deh saya kasih srceenshoutnya y lihat ke bawah :

Membuat 2 Kolom sidebar (2)
nah sekarang sudah mengertikan? sekarang kita lihat yuk cara pemasangannya, oiya sebaiknya sobat perhatikan caranya dengan seksama dan teliti ok biar tidak terjadi kesalahan
  1. Login ke blogger
  2. masuk ke Tata Letak => Edit HTML
  3. setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya


    .lsidebar {
    line-height: 1.5em;
    }
    .lsidebar .widget {
    background: #FFFFFF; /* -- bisa sobat ganti dengan kode warna yang lain -- */
    float:left;
    width: 125px; /* -- bisa sobat ganti membesarkan atau mengecilkannya (Panjang) -- */
    margin: 0 0 10px 0;

    }
    #lsidebar h2 {
    height: 20px;
    text-align: center;
    padding:4px 0px 0px 0px;
    font: verdana;
    background:url('http://oketrik.googlecode.com/files/1.jpg'); /* -- bisa sobat ganti dengan kode warna yang lainnya (warna background Judul) -- */
    font-size:12px;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#fff; /* -- bisa sobat ganti dengan kode warna yang lainnya (warna teks Judul) -- */
    -moz-border-radius: 10px;
    }

    .rsidebar {
    line-height: 1.5em;
    }
    .rsidebar .widget {
    background: #FFFFFF; /* -- bisa sobat ganti dengan kode warna yang lain -- */
    float:right;
    width: 245px; /* -- bisa sobat ganti membesarkan atau mengecilkannya (Panjang) -- */
    margin: 0 0 10px 0;
    }

    #rsidebar h2 {
    height: 20px;
    text-align: center;
    padding:4px 0px 0px 0px;
    font: verdana;
    background:url('http://oketrik.googlecode.com/files/1.jpg'); /* -- bisa sobat ganti dengan kode warna yang lainnya (warna background Judul) -- */
    font-size:12px;
    line-height: 1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#fff; /* -- bisa sobat ganti dengan kode warna yang lainnya (warna teks Judul) -- */
    -moz-border-radius: 10px;
    }


  4. setelah itu cari kode <div id='sidebar-wrapper'> dan taruh kode di bawah ini ke dalamnya

    Membuat 2 Kolom sidebar (2)

    <div id='lsidebar-wrapper'>
    <b:section class='lsidebar' id='lsidebar' preferred='yes'>
    </b:section>
    </div>
    <div id='rsidebar-wrapper'>
    <b:section class='rsidebar' id='rsidebar' preferred='yes'>
    </b:section>
    </div>


    Bingung y tau? oke saya kasih contohnya, kode Sidebar yang bersih seperti

    <div id='sidebar-wrapper'>
    <b:section class='lsidebar' id='lsidebar' preferred='yes'>
    </b:section>
    </div>

    dan kalau ada widgetnya kurang lebih seperti

    <div id='sidebar-wrapper'>
    <b:section class='lsidebar' id='lsidebar' preferred='yes'>
    <b:widget id='HTML4' locked='false' title='' type='HTML'/>
    </b:section>
    </div>

    nah sekarang maksud dari menaruh ke dalamnya adalah sobat taruh kode yang tadi saya kasih tepat di atasnya </div> penutup sidebar-wrapper begitu loh sob

    Membuat 2 Kolom sidebar (2)
  5. Setelah itu simpan deh dan lihat hasilnya
  6. Selesai
Mudah bukan Membuat Sidebar 2 kolom (2) ( padahal :pusing:opo iki), jadi saya mempunyai 2 trik tentang membuat 2 kolom sidebar sekarang tinggal sobat pilih saja mana yang lebih baik oke, sekarang saya mau pamit dulu. Terima kasih dan Happy Blogging :)).
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

14 Komentar untuk Membuat 2 Kolom sidebar (2)

Kalo di blog saya cuma ada 2 kolom. Yt: posting dan sidebar. Tp dibawah posting saya tambahin 2 kolom buat naro recent posts, recent comment, dll.

BTW, Good post.

Hmm... menarik nih... Tx oketrik!

Sob low mw nempatin diatas posting, disebelah mana seh sob nempatinya???

terima kasih sharing ilmunya...

Sob ada award neg bt km.. diambl ya..

wah terima kasih triknya kawan..cuma blog saya sudah dua juga kolomnya.

Mantap Kang uraiannya, saya c0ba dulu ya mudah2an tidak ada kesulitan dan berhasil :)

makasih sob. suksees. tapi,. tampilan di elemen halaman saya jadi Begini
buat ngedit HTML nya susah sob, karena widget yg kirinya ketindih gitu dgn yang kanan. ada solusinya nggak sob? misalnya memper-panjang widget, tapi hanya di elemen halaman aja, seperti punya mu sob diatas yang Ini
bantuin ya sob. tolong..w baru blajar nih. thxs

saya dah coba, tapi tdak muncul di elemen halamannya, ada yang salah yah?.sekalian laporan sya jadi follower no 256 sahabat

punya tutorial membuat template yang lengkap gag bos..???hehe

Saya coba nggak berhasil, entah saya yang kurang benar settingnya atau tutorialnya kurang mantab,

kalo nyoba sendiri kok masih gagal ya....???

footer
---------------------------------------------------------
----------- ------------------------- ----------------

pengennya mbagi yang tengah tp jadinya

----------------------------------------------------------
----------------------------------------------------------
----------------------------------------------------------
========= ========================= ===================


www.asianadesun.com

waw blognya keren banget om..