» » Blog Tutorial : Cara Menambah Kolom Sidebar Di Blogger

Blog Tutorial : Cara Menambah Kolom Sidebar Di Blogger

Masih dalam kategori "Blog Tutorial" dan memang sengaja saya buat untuk sobat barangkali ingin mengutak atik templatenya dan menambahkan kolom baru pada sidebarnya, saya buat Tutorial nya semudah mungkin agar dapat dimengerti dan mudah mudahan cara penyampaiannya bisa masuk akal  he.. he.. he... selanjutnya dari pada ngomong kesana sini langsung to the point saja.
Untuk langkah langkahnya seperti biasa silahkan sign in dulu kemudian cari kode di bawah ini terlebih dahulu

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



Silahkan sobat sesuaikan dulu Lebar Outer Wrapper, Main Wrapper dan sidebar Wrapper-Nya. Saya kasih tahu dulu pengertian dari :
  • Outer Wrapper adalah Halaman Blog
  • Main Wrapper adalah Halaman Posting
Ingat..usahakan lebar Main wrapper ditambah Side Wrapper sama dengan Outer Wrapper, agar supaya hasilnya maksimal sesuai keinginan sobat !
Langkah kedua copy kode script dibawah ini dan letakkan paling bawah kode warna biru di atas

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

kode script di atas ini adalah sidebar baru yang terletak di sebelah kanan bila sobat ingin merubahnya sebelah kiri hanya mengganti float: left;
Untuk dapat dimengerti cara menerapkannya saya kasih contohnya di bawah ini :

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

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

Selanjutnya cari kode script di bawah ini lagi :

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

Setelah ketemu sisipkan kode dibawah ini, dibawah kode script di atas

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

Sampai disini pekerjaan sobat telah selesai dan akhiri dengan mengklik SAVE TEMPLATE sobat.

Posted by Dadi Mulyadi
masterGOmaster