Membuat Sidebar Diantara Posting
Selasa, 24 April 2012
Sering saya jumpai situs-situs yang mempunyai sidebar di sebelah kanan dan kiri .Atau lebih gampang nyebutnya Posting terletak diantara sidebar ,berarti posting berada di tengah-tengah.
Sedangkan dari blogger tak menyediakan template yang seperti itu.Untuk memodifikasi template anda,cobalah langkah-langkah seperti di bawah ini :
Pergi ke Dashboard------>Tata Letak----->Edit Html .
Cari kode / yang hampir sama dengan kode di bawah ini :
#sidebar-wrapper {
width: 220px;
float: right;
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 */
Jika sudah ketemu,letakkan kode di bawah ini tepat dibawah kode tersebut :
#newsidebar-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Selanjutnya,cari kode seperti di bawah 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>
Jika sudah ketemu,letakkan kode di bawah ini,tepat diatas kode tersebut :
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
Simpan Template .Lihat Hasilnya!!! Kode yang berwarna hijau,menunjukkan ukuran lebar sidebar nantinya,anda bisa merubahnya sendiri,sampai anda mendapatkan ukuran yang anda inginkan.
Untuk lebih jelasnya baca artikel Kang rohman di sini
Sedangkan dari blogger tak menyediakan template yang seperti itu.Untuk memodifikasi template anda,cobalah langkah-langkah seperti di bawah ini :
Pergi ke Dashboard------>Tata Letak----->Edit Html .
Cari kode / yang hampir sama dengan kode di bawah ini :
#sidebar-wrapper {
width: 220px;
float: right;
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 */
Jika sudah ketemu,letakkan kode di bawah ini tepat dibawah kode tersebut :
#newsidebar-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Selanjutnya,cari kode seperti di bawah 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>
Jika sudah ketemu,letakkan kode di bawah ini,tepat diatas kode tersebut :
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
Simpan Template .Lihat Hasilnya!!! Kode yang berwarna hijau,menunjukkan ukuran lebar sidebar nantinya,anda bisa merubahnya sendiri,sampai anda mendapatkan ukuran yang anda inginkan.
Untuk lebih jelasnya baca artikel Kang rohman di sini