Welcome to my blog, hope you enjoy reading :)
RSS

Sunday, October 3, 2010

Cara Membuat Gedget Atau Sidebar Kanan Dan Kiri

Cara membuat gadget atau sidebar pada blog gak susah kok,emang shi saya gak pakai sidebar kiri kanan,tp kalian mencoba mngkin malah lebih bagus hasilnya.
Nah kali ini impian relugais12 akan memberikan sebuah trik,atau disebut cara membuat sidebar dua kolom.
mari sekarang saya tambahkan kode ul / ul li agar terdapat icon.
Bagi yang pernah menggunakan trick ini bisa diperbarui dengan menambahkan kode yang tersedia.
Perlu dicatat pada blog mempunyai variasi tersendiri dalam peletakkan kode HTML. Jadi harap diperhatikan.Langsung saja yah,,,nhe saya berikan cara dan langkah-langkahnya:

1. Login ke account blog anda.

2. Pilih Tata Letak atau rancangan kemudian pilih Edit HTML.

3. Beri tanda centang pada Expand Widget Templates.

4. Cari kode berikut ini atau sejenisnya. (yang penting tulisan bewarna merah)

#sidebar-wrapper {
float: right;
width: 350px;
margin: 20px 15px auto 0;
padding: 0 0 10px;
display: inline;
text-align:justify;
border:1px dashed #ceceae;
}

5. Kemudian kopi paste kode dibawah ini tepat diatas kode  #sidebar-wrapper {

#newsidebar-wrapper {
width: 200px;
float: left;
padding-left:8px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
border:1px dashed #ceceae;
padding-left:10px;
padding-right:10px;
}

#newsidebar-wrapper ul{padding:0; margin:0; color:#333}

#newsidebar-wrapper ul li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

#newsidebar-wrapper li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

#newsidebar-wrapper ul li a:hover {
background: #B1ACB1;}

Keterangan kode :
width untuk ukuran lebar sidebar
float untuk letak sidebar
padding untuk jarak sidebar    
border untuk garis
tulisan bewarna orange mudah adalah update yang telah saya tambahkan untuk variasi icon

6. Cari kode (Fokus yang bewarna merah)

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
.....................................
.....................................
.....................................
</b:section>
</div>

titik-titik adalah isi pada lanjutan kodenya. Tidak begitu penting

7. Copy paste kode dibawah ini tepat diatas kode <div id='main-wrapper'>

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

8. Simpan Templates. Lihat hasilnya. Akan muncul tambahan Widget bila dilihat di Tata Letak>>Elemen Laman

Bagi yang pertama kali mengikuti trick ini, untuk tulisan bewarna orange mudah diabaikan
Lihatlah perbedaannya,selamat mencoba
kalau anda kurang mengerti boleh kok koment agar saya bisa memperbaruhinya..
key,,,,jgan lpa follow

14 comments:

  1. Pertama nih gan.....

    salam kenal. wah keren nih blognya gan... patut dicontoh nih...

    Posting triknya dong gan...

    ditunggu kunjungan baliknya gan.

    ReplyDelete
  2. kok di blog sy g ketemu kode #sidebar-wrapper{
    gimana tuh....! tks

    ReplyDelete
  3. Gimana sih mas? maaf saya masih kurang ngerti

    ReplyDelete
  4. gan gimana cara menambaghkan ym pd blog kita agar terliat online atw off line,,tolong ak gan please email ke astr_g25@ymail.com

    ReplyDelete
  5. Assalamualaikum wr wb. browwwwww edit html itu ada di sebelah manasihh?????

    ReplyDelete
  6. gimana gan buat 1 youtube aja karna gw kgk ngerti

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. membantu banget trins gan
    http://contohptkheru.blogspot.com/

    ReplyDelete
  9. Nice artikel ..
    http://www.kutugaptek.blogspot.com

    ReplyDelete
  10. Kami adalah distributor voucher pulsa elektronik yang menyediakan produk voucher pulsa All Operator terlengkap kunjungi presta tronik

    ReplyDelete
  11. Sukses gan.
    http://polesan-mobil-motor.blogspot.com/

    ReplyDelete

Maaf Bukan Bermaksud apa,impian relugais12 hanya ingin memberi tahukan,setiap anda yang membaca artikel di atas tersebut,wajib mengisi post komentar anda di bawah ini,karna itu lbih memudahkan saya untuk mencoba apa yang kalian komentar,,,,
pliiiizzzzsssss NO SPAM,^_^,NO PORN

Add 'Q y Sobat Sxli'n

SmSan Yukxs

Make Widget

Link Keren

free web site traffic and promotion membuat blog terlihat berarti Free Link Exchange membuat blog terlihat berarti

Ayo Kita nonton TV live

Photobucket