cara modifikasi featured post

Jika anda memiliki artikel tertentu yang layak untuk diunggulkan dan ditampilkan di beranda blog anda, maka tidak ada salahnya untuk memasang widget Featured Post di blog anda. Widget ini memang dalam bahasa Indonesia biasa diartikan sebagai Entri yang Diunggulkan sehingga dapat anda fungsikan sebagai tempat untuk menampilkan postingan tertentu yang berpotensi menarik perhatian pengunjung.

Widget Featured Post sebetulnya sudah tersedia di fitur bawaan blogspot sejak tahun 2015 lalu. Selain ukurannya yang ringan, widget ini juga efektif untuk mendongkrak jumlah pengunjung blog yang mengunjungi artikel unggulan tersebut lewat tampilan widget ini. Tentunya ini sangat diharapkan agar trafik blog anda semakin melimpah dan ramai akan kunjungan pengunjung.

Tidak hanya itu saja, widget ini juga bisa anda manfaatkan untuk mempromosikan produk-produk tertentu agar semakin dikenal orang. Misalnya untuk mengenalkan desain template buatan anda atau mempromosikan produk-produk tertentu yang ingin anda promosikan. Atau bisa juga anda gunakan widget ini untuk menaruh artikel berisi ulasan produk tertentu bagi anda yang membuka jasa content placement.

Namun sayangnya, widget bawaan blogspot ini memiliki tampilan standar sehingga mungkin perlu dimodifikasi lagi agar tampilannya lebih menarik. Nah, pada kesempatan kali ini, saya ingin berbagai cara untuk memodifikasi tampilan widget Featured Post menjadi lebih menarik seperti yang akan saya ulas di bawah ini. Sebelum itu, untuk tampilan yang akan kita buat hasilnya seperti screenshot berikut ini:

Anda tertarik untuk membuatnya?, silahkan ikuti langkah-langkah di bawah ini.

Cara Memodifikasi Widget Featured Post Agar Lebih Menarik

Sebelum memodifikasinya, terlebih dulu kita mesti memasang widget ini melalui fitur tata letak (layout) pada dashboard blogger.

1. Buka akun blogger anda.

2. Pilih menu layout (tata letak) dan pilih lokasi untuk penempatan widget (biasanya di atas postingan/ Blog Post).

3. Klik pada tambahkan gadget (add gadget) dan pilih Featured Post atau Entri yang Diunggulkan.

Setelah ditambahkan, maka langkah selanjutnya kita akan mengatur tampilan widget tersebut. Untuk judul widget bisa anda ganti atau kosongkan saja. Pada cuplikan entri silahkan beri centang kecuali pada tampilkan cuplikan teks.

Pada bagian bawahnya lagi, silahkan pilih entri unggulan untuk artikel yang ingin anda tampilkan. Anda juga bisa gunakan kolom pencarian untuk mencari artikel pilihan anda. Jika sudah ketemu, silahkan pilih dan hasilnya akan seperti berikut ini:

4. Silahkan klik simpan.

Langkah berikutnya yaitu tinggal memodifikasinya agar tampilannya menjadi lebih keren seperti yang kita inginkan. Pada dashboard blogger, silahkan pilih menu tema dan klik edit html. Cari kode ]]></b:skin> atau kode </style>

Jika sudah ketemu, salin kode berikut ini dan letakkan di atas kode ]]></b:skin> atau </style> tersebut.

/*----- 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:100%; 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 {height:250px; max-height:300px} } @media screen and (max-width:580px) { .FeaturedPost .post-summary {max-height:250px} }

Agar widget tersebut hanya muncul di tampilan beranda (home), tambahkan tag kondisional pada html widget featured post yang anda pasang tadi. Sisipkan menjadi seperti berikut ini: