Cari
×

Daftarkan diri

Use your Facebook account for quick registration

OR

Create a Shvoong account from scratch

Already a Member? Masuk!
×

Masuk

Sign in using your Facebook account

OR

Not a Member? Daftarkan diri!
×

Daftarkan diri

Use your Facebook account for quick registration

OR

Masuk

Sign in using your Facebook account

Halaman Utama Shvoong>Teknologi & Internet>Blog>Cara membuat side bar kiri pada blogspot

Cara membuat side bar kiri pada blogspot

oleh: Ponosusanto     Pengarang : belajarblogspot
ª
 
Tidak semua template bawaan standart pada blogspot terdapat side bar sebelah kiri,selain berfungsi untuk menambah kapasitas ruang halaman home page pada blog juga berfungsi untuk menambah berbagai widget iklan pada halaman homepage blog kita.

Berikut CarA Membuat Sidebar Kiri Pada Blogspot.

(Jangan lupa back up template terlebih dahulu)Jika terjadi kegagalan tidak merusak template kalian.

Login di akun Blogger kalian==>dashboard==>klik rancangan==>lalu klik edit HTML==>jangan lupa centang expand widget..

Cari kode CSS Outer Wrapper.

Lalu COPY kode di bawah ini dan taruh tepat di bawah kode CSS #sidebar wrapper.

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

Keseluruhan kodenya jadi seperti ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 420px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;

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: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;

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 */
}

#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Keterangan:
Outer wrappernya yg tadinya 660px diubah jadi 840px; main wrapper tadinya 410px diubah jadi 420px; sidebar wrapper dari 220px jadi 200px.
bisa kalian sesuaikan ukuran nya sesuai template kalian.

Perhatikan juga float and padding yang warna merah,jangan kebalik right/leftnya.

Langkah berikut nya copy kode dibawah ini.
Kemudian letakan sebelum kode <div id='main-wrapper'>

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

Keseluruhan kodenya jadi seperti ini :

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

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

<div id='sidebar-wrapper'>
<b:section 'sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' 'Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archives' 'BlogArchive'/>
</b:section>
</div>

Langkah terakhir Save Template.
Diterbitkan di: 13 April, 2012   
Mohon dinilai : 1 2 3 4 5
Terjemahkan Kirim Link Cetak
X

.