Dalam membuat blog, kita perlu juga menempatkan posisi artikel di tempat yang tepat. Pada umumnya artikel bersebelahan dengan sidebar. Contoh dari artikel bersebelahan dengan widget sidebar adalah tampilan blog
All In Wish ini.
Jika anda sudah mengikuti tutorial pembuatan template dari awal, maka akan lebih mudah untuk melanjutkan tutorial berikut ini. Pada tutorial awal tentang
membuat template blog sendiri telah ditulis kode html untuk tempat posting blog. Lalu pada tutorial ini akan dilanjutkan untuk meletakkan tag article, dan kode html posting blog dipindah ke dalam tag article tersebut. Lalu untuk sidebar digunakan tag aside. Daripada bingung, langsung saja berikut penjelasan cara membuatnya.
Buat kode html untuk tempat posting blog seperti ini
<article id='article-content'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</article>
Lalu, di bawahnya buat kode html untuk tempat widget sidebar
<aside id='sidebar-content'>
<b:section id='sidebar' class='sidebar' showaddelement='yes' />
</aside>
Lalu untuk kode css untuk posting blog adalah seperti ini
#article-content{
width:69%;
float:left;
overflow:hidden;
}@media screen and (max-width:800px) {#article-content{width:100%; border-bottom:5px solid #E3F2FD; padding-bottom:20px;}}
Dan kode css untuk widget sidebar
#sidebar-content{
width:29%;
float:right;
}@media screen and (max-width:800px) {#sidebar-content{width:100%; padding-top:20px; padding-bottom:20px;}}
Letakkan kedua kode css di atas tepat berada di atas kode
<b:skin><![CDATA[
Lalu simpan dan lihat perubahan yang terjadi.
Demikian cara membuat post artikel bersebelahan dengan widget sidebar. Jika ada yang ingin ditanyakan dapat melalui kolom komentar di bawah.
Related Posts