Saya penasaran ingin tahu bagaimana cara membuat border-radius pada sidebar template Simple. Dan ternyata pada forum Googlepun tidak memberikan solusi pada masalah ini. Setelah bongkar-pasang disana-sini memang tidak dapat dilakukan. Kalaupun ada yang tahu, tolong informasikan. Pada template yang lain ini dapat dibuat. Ini mungkin yang dimaksud Google setiap template memiliki karakternya masing-masing. Tadinya saya berniat membuat setiap widget-widget yang ada di sidebar saling terpisah. Tapi pada akhirnya saya membuat untuk seluruh isi sidebar.
Ok, sekarang saatnya membuat lengkungan pada sidebar.
Pertama masuk ke dashboard blogger anda > Template > Edit Html.
Pada layout edit html, klik, lalu ketik ctrl+f dan masukkan kode berikut:
.fauxcolumn-right-outer .fauxcolumn-inner
Lalu masukkan kode css ini menjadi:
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
background:yellow;
border: 2px solid green;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;
-o-border-top-radius:10px;
margin-left:15px;
height:200px;
}
Dan ini hasil akhir yang telah dibuat.
Pada kode saya menambahkan margin-left untuk membuat agar sisi kiri sidebar tidak menempel pada post-body. Sedangkan height adalah tinggi dari sidebar itu sendiri. Edit valuenya dan sesuaikan dengan tinggi post-bodynya.
No comments:
Post a Comment