>

Guestbook Rolling Widget

Bahasa

Adsense Indonesia

Support Center

--------------------------

Contact via Mobile

--------------------------

Handphone
1

Arie

+6285664488566

CBC On Facebook

Sedang Online

Blog Up

Official Web Submission

Free Blog Promotion


Kamis, 25 Maret 2010

Menambah sidebar menjadi dua

MENAMBAH SIDEBAR MENJADI DUA
Penampilan sebuah blog akan semakin cantik jika memiliki 2 buah sidebar. Disamping itu kita akan lebih leluasa dalam menempatkan elemen halaman baik berupa tulisan ataupun widget
Tidak sulit membuatnya, anda tinggal mengikuti langkah-langkah dibawah ini.
Ingat...jangan diberi tanda centang pada Expand widget Template karena akan muncul kode-kode yang rumit sehingga dapat membingungkan

Langkah pertama

Cari Kode dibawah ini (biasanya berada dibagian atas)


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 200px;
float: right;
padding-left:10px; (tambahkan kode ini biar tampak ada jarak sela)
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 */

Sesuaikan dulu lebar outer wrapper, main wrapper dan sidebar wrapper dengan contoh diatas. Ini agar hasilnya sesuai dengan harapan anda.
Jika udah sesuai, Copy kode dibawah ini kemudian paste tepat dibawah kode-kode tadi

#sidebarbaru-wrapper {
width: 200px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}


Kode diatas menunjukan sidebar baru terletak disebelah kanan. Ubahlah kode tersebut menjadi kode seperti dibawah jika sidebar ingin diletakan di sebelah kiri.


#sidebarbaru-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}

Langkah Kedua

Cari kode HTML dibawah ini pada bagian body

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>


Copy kode dibawah ini kemudian paste tepat diatas kode tadi jika sidebar ingin berada di sebelah kiri dan paste tepat dibawahmya jika ingin berada di sebelah kanan. Jangan lupa kode yang diatas ( #sidebarbaru-wrapper...dst ) harus disesuaikan, dimana akan meletakkannya..?

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

Apabila sudah selesai menempatkan kode sidebar baru, silahkan akhiri dengan menekan tombol Simpan Template, selesai. Silahkan lihat hasilnya !

Tidak ada komentar:

Posting Komentar

demi perkembangan blog ini kami butuh komentar dari anda...

Donasi

Terima Kasih Atas Donasi Yang sobat berikan..

semoga Donasi Sobat sangat bermanfa'at bagi saya..

Thank you for the buddy give Donation ..

Friend Donate hopefully very helpful for me ..

Harga & Rank blog

Ketahui Harga dan rangking Blog Anda..

silakan klik gambar-gambar di bawah

Tukaran Link Yuk

Temukan Saya Di Facebook

Comment This Blog

Hamster

 
Design By Arie Aldyno | Template @2010
Big Red Mouse Pointer
mohon maaf pada sobat-sobat semua jika akhir-akhiran ini komentar sobat tidak terbalas dan belum terdapat postingan-postingan terbaru dikarenakan saya belum sempat mengupdatenya untuk sementara waktu.. dan karenakan juga keterbarasan media dalam pengolahan blog saya.. ,,Sekali lagi saya mohon maaf kepada sobat-sobat semua,,; .....Terima Kasih.....