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:&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 {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
Mempercantik Featured Post atau Entri yang Diunggulkan
  • 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.

Related Posts

5 komentar:

  1. Hamsul Basri22 September, 2019

    Ini baru mantap... Sayang kalau gak dicoba. Terutam di blog2 sybyg lain... Terima kasih tutorial featured postnya. Sempat kepikiran tp blm nyari panduannya. Eh nongol di fb. Sehat selalu

    BalasHapus
  2. Ini baru mantap... Sayang kalau gak dicoba. Terutam di blog2 sybyg lain... Terima kasih tutorial featured postnya. Sempat kepikiran tp blm nyari panduannya. Eh nongol di fb. Sehat selalu

    BalasHapus
  3. Udah lama gak maen html, udah lupaa... :D

    BalasHapus
  4. Duh pusing liat kode htmlnya, selama ini belum pernah sih dapat content placement/sponsor post yang briefing biar di post diletakkan paling atas terus tapi emang mereka mintanya PV setelah sebulan, jdi saya sering sharing aja di medsos

    BalasHapus
  5. Mantap tipsnya mas.
    Tapi saya udah lama nggak main html, udah mulai lupa-lupa.

    BalasHapus

 
Back To Top