Ok... Postingan ini saya buat untuk menjawab pertanyaan-pertanyaan temen yang masih belum bisa membuat sidebar 2 kolom. Karena slogan blog ini "Tempat berbagi Pengalaman dan Pengetahuan". kebetulan saya punya sedikit kemampuan untuk meng-utak atik scrip.. ya walo masih dibilang tahap engering sich, tapi tidak apa2lah yang penting bisa... ya ga... .
Ok mari kita mulai.. kayaknya capek juga untuk basa basi
1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode
Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.
Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing2 kolom akan kita beri margin sebesar 10px agar terdapat ruang spasi. Sehingga sekarang lebar masing2 sidebar menjadi 117px.
Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css
5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini
9. Copy kode yang berwarna biru diatas lalu letakkan dibawahnya. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.
11. Selesai. Klik Page Element untuk melihat hasilnya.
Selamat mencoba..
Ok mari kita mulai.. kayaknya capek juga untuk basa basi
1. Login ke Blogger. Klik Design -> Edit HTML
2. Backup template anda dengan cara klik "Download Full Template".
3. Beri tanda centang pada "Expand Widget Template"
4. Cari kode
#sidebar-wrapper {Agar mudah untuk mencarinya ketik sidebar-wrapper atau sidebar-wrap dalam kotak Find.
background:$sidebarBgColor url("http://www2.blogblog.com/no897 /corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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 */
}
Catatan:
Setiap template mempunyai susunan kode yang berbeda-beda. Jadi yang perlu anda perhatikan adalah nilai widthnya.
Sebagai contoh nilai width diatas adalah 254px. Karena kita ingin membagi kolom sidebarnya menjadi 2 bagian maka kita bagi nilai width dengan 2. Sehingga masing kolom mempunyai lebar sebesar 127px. Agar tidak berdempetan maka masing2 kolom akan kita beri margin sebesar 10px agar terdapat ruang spasi. Sehingga sekarang lebar masing2 sidebar menjadi 117px.
Setelah kita menentukan lebar sidebar kiri dan kanan. Langkah selanjutnya adalah membuatkannya kedalam kode css
5. Copy kode css diatas lalu letakkan dibawahnya dan ganti sidebar-wrapper pada kode css ke2 menjadi menjadi sidebar-wrapper2 jadi hasilnya seperti ini
6. Ganti nilai width masing-masing kolom menjadi 117px. Lalu tambahkan margin:0px 20px 0px 0px; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini
#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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-wrapper2 {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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 */
}
7. Setelah itu, cari kode
#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:117px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
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-wrapper2 {
background:$sidebarBgColor url("http://www2.blogblog.com/no897/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:117px;
float:$endSide;
padding:0;
margin:0px 20px 0px 0px;
color: $sidebarTextColor;
font-size: 83%;
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 */
}
<div id='sidebar-wrapper'>8. Yang harus anda perhatikan adalah kode berwarna biru sedangkan kode berwarna merah setiap template berbeda-beda.
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Gang Tutorial Blog's' type='Feed'/>
</b:section></div>
9. Copy kode yang berwarna biru diatas lalu letakkan dibawahnya. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper2 dan id='sidebar' menjadi id='sidebar2'. Jadi hasilnya menjadi seperti ini.
<div id='sidebar-wrapper'>10. Jika sudah klik Save Template.
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='kategori' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Gang Tutorial Blog's' type='Feed'/>
</b:section>
</div>
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
11. Selesai. Klik Page Element untuk melihat hasilnya.
Selamat mencoba..
salam kenal dulu baru salam sahabat
ReplyDeleteehm gitu yach..lebih prktis mas...oh iya dah saya follow di tunggu konfirmasinya yach
salam dari BOS SULAP..
ReplyDeletemantap artikelnya..
praktis dan tidak ribet..
bos, tukeran link ya ?
link nya sudah saya pasang tuh dg nama SANDY..
tolong konfirmasi
Bolehh triknya mas.. seep. lam kenal yak!
ReplyDeleteinfo yang menarik.......
ReplyDeletesalam knl kawanku.......
skalian follow di no urut 10...
jika berkenan silahkan follow balik saya...
This comment has been removed by a blog administrator.
ReplyDelete