1.2. Membuat Sidebar dan Post di Blogspot

Ditulis oleh: -
Huff, yang atas sudah sekarang giliran yang tengah nih. Kita akan buat sidebar berapa di kiri dari post yang 2 column. Tahapannya hampir sama seperti membuat header, yaitu buat css untuk sidebar di kiri dan post yang berada di kananya.

Dalam pembuatan element ini, kita akan menggunakan tag <aside> sebagai pembatas antara sidebar dengan kotak post.

Kita akan membuat sidebar berukuran 30% dan kotak post 68%.

Membuat Sidebar di kiri
seperti header yang di kiri, akan gunakan CSS float:left
seperti biasa CSS harus diletakkan di atas */ ]]></b:skin>
#sidebar-wrapper{
width:30%;
float:left;
overflow:hidden;
}
#sidebar{padding:5px;}
.sidebar h2, .sidebar h3{
color: #fff;
padding: 4px 8px;
background: #3384cc;
background: linear-gradient(top, #3384cc , #2a79bf);
background: -webkit-linear-gradient(top, #3384cc , #2a79bf);
background: -moz-linear-gradient(top, #3384cc , #2a79bf);
background: -o-linear-gradient(top, #3384cc , #2a79bf);
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
border-bottom: 2px solid #ccc;
text-shadow: 1px 1px 0px #283744;
margin: 0px;
margin-bottom: 5px;} 

Letakkan kode HTML berikut tepat di atas <b:section class='main' id='main'>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
Membuat Artikel di kanan Sidebar
Letakkan CSS berikut tepat di atas */ ]]</b:skin>
#artikel-wrapper{
width:68%;
float:right;
}
Kemudian letakkan kode HTML berikut tepat di atas <b:section class='main' id='main'>
<aside id='artikel-wrapper'>
Dan letakkan kode HTML penutupnya tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir
</aside>
Hasilnya akan seperti ini
</b:section>
</aside>
</div>
Penutupnya hattrick wkwk

Jadikan Post 2 Column
Anda hanya perlu mencantumkan CSS berikut tepat di atas */ ]]></b:skin>
.gambar-home{float:left;padding: 4px;}
.post{
width:46%;
margin-left: 10px;
margin-bottom: 10px;
overflow: hidden;
text-align: justify;
border:1px solid #ECE3E3;
padding:5px;
float:left;
}
.plus{float:left;}
.post h2 a {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Kemudian simpan template dan lihat hasilnya :)


0 komentar "1.2. Membuat Sidebar dan Post di Blogspot", Baca atau Masukkan Komentar

Post a Comment