Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi & Responsive.
SETELAH
berbagi
, kali ini saya
share
cara memasang Featured Post Widget Bawaan Blogger yang sudah dimodifikasi.
Desain tampilannya seperti ini:
Featured Post yaitu widget Blogger untuk menampilkan posting, artikel, atau konten unggulan. Widget ini dirilis Blogger 10 December 2015: .
Cara memasangny mudah, tinggal klik Layout > Add a Gadget > pilih Featured Pos t. Setelah itu geser (pindahkan) posisinya ke atas widget Blog Post.
Kode Featured Post Bawaan Blogger yang Sudah Dimodifikasi
Jika ingin desain Featured Post Bawaan Blogger yang Sudah Dimodifikasi, pasang kode berikut ini di template blog Anda setelah Featured Post dipasang.1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.FeaturedPost .post-summary{background:#f7f7f7;position:relative;padding:0;height:auto;max-height:330px;overflow:hidden;margin-bottom:10px}
.FeaturedPost .post-summary h3{font:500 20px Oswald,serif;bottom:0;font-size:20px;margin:0;z-index:10;position:absolute;top:0;left:0;height:100%;width:36%;background:#1F1C1B;opacity:0.7;filter:alpha(opacity = 70);padding:10px}
.FeaturedPost .post-summary h3:after{content:"";position:absolute;top:-0.25em;right:100%;bottom:-0.25em;width:0.25em}
.FeaturedPost .post-summary h3 a{color:#fff;background:transparent}
.FeaturedPost .post-summary h3 a:hover{color:#ff6}
.FeaturedPost .post-summary p{color:#ff6;bottom:10px;overflow:hidden;text-overflow:ellipsis;margin:0;z-index:10;position:absolute;top:55%;left:0;max-height:100px;width:36%;opacity: 0.8;filter: alpha(opacity = 70);padding: 10px;line-height: normal;}
.FeaturedPost .image{display:block;max-height:330px}
.FeaturedPost h2{display:none}
@media only screen and (max-width:480px){
.FeaturedPost .post-summary h3{font-size:18px;margin:0;width:50%}
.FeaturedPost .post-summary p{margin:0;height:auto;max-height:72px;width:50%}
}
@media only screen and (max-width:320px) {
.FeaturedPost .post-summary p {display: none;}
}
</style>
</b:if>
3. Agar tampil hanya di halaman depn, tambahkan kode tag kondisional. Caranya, cari kode widget Featured Post seperti ini:
<b:widget id='FeaturedPost1' locked='false' title='Featured Post' type='FeaturedPost'>
Nah, di bawahnya ada kode seperti ini:
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:include name='content'/>
</b:if>
</b:includable>
Ubah sehingga seperti kode di atas dengan menambahkan kode warna merah .
Save!
Itu dia Cara Memasang Featured Post Bawaan Blogger yang Sudah Dimodifikasi . (blogromeltea.blogspot.com).*
