Memodifikasi Widget Featured Post Bawaan Blogger Menjadi Keren

Memodifikasi Widget Featured Post Bawaan Blogger Menjadi Keren
BENTENGSUMBAR. COM - Sejak Blogger meluncurkan fitur baru berupa Featured Post, banyak modifikasi yang dilakukan oleh para tutor di berbagai blog yang khusus membahas dunia blogging. Tujuanmya, agar fitur ini menambah kecantikan blog.

Fitur ini sendiri termasuk fitur yang bagus dan bermanfaat, agar pengunjung bisa melihat posting unggulan sebuah blog, atau tulisan yang ingin dibuka pembaca.

Masalahnya, tampilan Featured Post bawaan blogger ini menyesuaikan dengan CSS atau desain template yang ada. Jika kebetulan pas, cocok, dan bagus, maka bagus pula tampilan Featured Post ini.

Jika tidak pas, dan kebanyakan memang tidak pas, sehingga jadinya kurang bagus, maka perlu dilakukan memodifikasi setelah memasang widget Featured Post bawaan blogger itu.

Berikut adalah salah satu cara memodifikasinya dan bisa Anda pasang di template blog Anda:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.FeaturedPost .post-summary {width:100%;background:#fff;position:relative;padding:0px 20px 60px 0px;min-height:200px;max-height:330px;margin:0;border-bottom:20px solid #fff;}
.FeaturedPost .post-summary h3{font:normal bold 20px Georgia,Utopia,&#39;Palatino Linotype&#39;,Palatino,serif;position:absolute;bottom:0;z-index:1;font-size:25px;text-align: center;margin:0px 50px 0px 30px;padding:10px;text-shadow: 1px 1px 0 #000;line-height: normal;background: #fff;box-shadow: 0 0 1em #000;-webkit-border-radius:10px;-moz-border-radius:10px;}
.FeaturedPost .post-summary h3:after{content:&quot;&quot;;position:absolute;top:-0.25em;right:100%;bottom:-0.25em;width:0.25em;}
.FeaturedPost .post-summary h3 a{color:#1b3682;padding:2px 8px;-webkit-box-decoration-break:clone;-o-box-decoration-break:clone;box-decoration-break:clone;padding: 20px 15px;}
.FeaturedPost .post-summary h3 a:hover{color:#fed019;}
.FeaturedPost .post-summary p{position:absolute;background:#ffffff;color:#5a5a5a;padding:3px 8px;bottom:15px;margin:0 15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:90%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:none}
.FeaturedPost .image{display:block;}
.FeaturedPost h2.title {display:none}
@media only screen and (max-width:480px){
.FeaturedPost .post-summary h3{font-size:16px;bottom:0;margin:0px 30px 0px 10px;padding-bottom:20px;padding-right:20px;}
.FeaturedPost .post-summary p{margin:0 10px;}
}
</style>
</b:if> 

Caranya pemasangan:

1. Pasang dulu Widget Featured Post Bawaan Blogger: Layour > Add a Gadget > pilih Featured Post
2. Template > Edit HTML dan letakan kode di atas </head>. 

Penampakan dari modifikasi ini, bisa Anda lihat di sini

Demikian modifikasi Featured Post Bawaan Blogger kali ini, jika bermanfaat, silahkan bagikan.

(by)

Silakan baca konten menarik lainnya dari BentengSumbar.com di Google News
BERITA SEBELUMNYA
« Prev Post
BERITA BERIKUTNYA
Next Post »