Featured Post Blogger Custom

Featured Post adalah widget blog di Blogger untuk menampilkan postingan unggulan. Bisa berisi posting pilihan atau artikel terbaru.

Featured Post bawaan Blogger memiliki tampilan standar. Kita bisa custom dengan desain tampilan seperti dalam gambar di atas atau seperti di halaman depan blog ini.

Kode Featured Post Blogger Custom

Berikut ini kode Kode Featured Post Blogger Custom.

1. Kode CSS

Kode ini dipasang di atas kode </b:skin>

Baca Juga

• Template Blog Mirip Situs Berita Populer Detik, Liputan6, dan Tribunnews
• Sample Multipage Blogger, Contoh Postingan Multiple Pages
• Featured Post Blogger Custom
• Cara Memasang Widget Recent Posts Simple Daftar Judul
• Apa Itu Pingomatic dan Apakan Ia Benar-Benar Membantu SEO?

#FeaturedPost1 {width:100%;padding:0 0 15px!important;list-style-type:none} .FeaturedPost .post-summary{background:#fff;position:relative;padding:0;min-height:200px;max-height:350px;overflow:hidden;clear:both;margin:0 0 0px 0} .FeaturedPost .post-summary h3 { width:98%; font:normal bold 20px Roboto, Arial, sans-serif; position: absolute; bottom:0; z-index: 1; font-size: 25px; margin:0; text-shadow: 1px 1px 0 #000; line-height: normal; background: rgba(34, 34, 34, 0.35); padding:15px; width:100%; text-align: center; } .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: #fff; -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone; } .FeaturedPost .post-summary h3 a:hover { color: #328bdd; } .FeaturedPost .post-summary p{position:absolute;background:#fff;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} .image {width:100%;height:100%;max-height:350px} .FeaturedPost h2.title { display: none; } @media screen and (max-width:580px) { .FeaturedPost .post-summary h3 {font-size:22px} } @media screen and (max-width:580px) { .FeaturedPost .post-summary h3 {font-size:16px} .FeaturedPost .post-summary {height:250px; max-height:300px} } @media screen and (max-width:580px) { .FeaturedPost .post-summary {max-height:250px} }

2. Kode HTML

Kode ini yang menjadi fokus adalag warna merah. Setelah Anda save kode CSS di atas, lalu tampilkan Featured Post, maka kembali Edit HTML dan tambahkan kode merah seperti kode di bawah ini.

Kode merah ini agar Featured Post Custom itu hanya tampil di homepage atau halaman depan saja.

<b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'/>

Sumber