Home » , » Cara Membuat Sidebar Berada Di Kiri Dan Kanan Blog

Cara Membuat Sidebar Berada Di Kiri Dan Kanan Blog

halo sobat warung tutorial bertemu agi dengan saya artikel saya sebelumnya saya ngeposts tentang template yang baru saya buat nah ceritanya gini pas saya mau bikin template saya berpikir buat 2 sidebar jangan ya nah saya berpikir untuk memakai satu sidebar saja pada template toko online premium buatan saya mau liat? Click Disini nah bagi yang mau dibuat 2 sidebar silahkan ikut tutorial kali ini ini tutorial bebas buat template apa aja dan siapa aja haha oke langsung aja ini preview dari 2 sidebar yang warung tutorial maksud


1. Masuk ke Akun Blog anda
2. Klik Rancangan => Edit HTML
3. Cari kode yang mirip dengan kode dibawah ini karena tiap template kode berbeda beda :

/* 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: 220px;
float: right;
padding-left:10px;
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 */


Kemudian taruh kode dibawah ini tepat dibawah kode tadi :

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


4. Cari kode yang mirip dengan kode dibawah ini :

<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>


Lalu letakan kode dibawah ini tepat diatas kode tadi :

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


5. Simpan Template

Gimana udah bisa? kalo belum komen aja warung tutorial siap membantu haha

Share this article :

2 comments:

 
Edited By : Jasa Pembuatan Blog
Copyright © 2013. Warung Tutorial - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger