Mempercantik Featured Post atau Entri yang Diunggulkan agar Tampil Keren dan Responsive

Mempercantik Featured Post atau Artikel yang Diunggulkan

Saya sering sekali mendapat job artikel placement yang menginginkan artikelnya itu nangkring diatas untuk beberapa minggu dan bahkan ada yang minta beberapa bulan. Wow, lama juga kan ya? Biar kayak artikel Headline gitulah. Dengan artikel selalu menempati posisi diatas, dengan harapan semakin banyak orang yang berkunjung. Pastinya pemasang artikel itu memberikan tambahan bonus. Lumayan bukan?

Pada artikel sebelumnya saya pernah membahas cara membuat Featured Post atau Entri yang diunggulkan secara sederhana. Judul artikel masih berada di atas photo atau image. Pada kesempatan kali saya ingin membuat artikel kelanjutannya dengan judul Mempercantik Featured Post atau Entri yang Diunggulkan agar Tampil Keren dan Responsive. Yang hasilnya, judul artikel berada dibawah, masih satu area dengan photo atau image.

Wow, judulnya saja bikin tidak kukut. Sangat menarik sekali ya? Semenarik hasil Gedget Featured Post nantinya. Mari kita simak langkah atau tahapannya.

Masuk ke Dasboard pengaturan blog
Pilih Tema kemudian copy-paste kode CSS dibawah ini dan letakkan diatas kode ]]></b:skin> atau </style>

/*----- Featured Post by DjB-----*/
#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:95%;
text-align: center;
}
.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;
-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 {max-height:300px}
}
@media screen and (max-width:580px) {
.FeaturedPost .post-summary {max-height:250px}
}

Supaya nanti Gadget atau Widget Featured Post hanya tampil di halaman utama atau home page. Masih di menu Tema, Pilih tool Lompat ke Widget dan pilih FeaturedPost1

Mempercantik Featured Post atau Entri yang Diunggulkan

Nah nanti langsung diarahkan ke bagian kode FeaturedPost1

Selanjutnya tambahkan kode tag kondisional cond='data:view.isHomepage'. Cara meletakannya lihat kode yang berwarna merah.

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

Dan tahap terakhir adalah Klik Simpan Tema

Untuk kode CSS-nya, silakan edit sendiri. Entah itu ukuran padding, ukuran font, tinggi gambar, max-width atau mungkin soal warna sesuai dengan selera yang diinginkan. Silakan berkreasi sendiri. Jika kode CSS tersebut tidak berfungsi, rubah h3 menjadi h2. Atau kemungkinan judul artikel tidak muncul, hapus kode #FeaturedPost1. Semua tergantung dari model struktur coding yang ada di tema blog anda.

Nanti akan saya buat artikel lagi masih mengenai Featured Post atau Entri yang Diunggulkan agar lebih SEO. Dan dengan gambar atau image berubah menjadi link aktif. Saat kursor diarahkan ke link tersebut akan muncul tittle linknya. Silakan kunjungi atau baca arikelnya, Menambahkan Tag Tittle pada Featured Post atau Entri yang Diunggulkan agar Lebih SEO.

Bagaimana, jadi tertarik ingin pasang widget Featured Post kan? Dijamin deh, Blog anda lebih keren. Semoga artikel ini bermanfaat. Jika ada pertanyaan, silakan tinggalkan komentar. Salam ngeblog dan semangat terus untuk berkarya.