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:
<b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='false' title='' type='FeaturedPost' version='1'>.......
Keterangan: kode berwarna merah adalah tag kondisional yang ditambahkan.
Silahkan simpan kembali template anda dan lihat hasilnya.
Kini blog anda pun telah dilengkapi dengan widget Featured Post yang keren dan menarik. Salah satu kekurangan dari widget ini yaitu hanya bisa menampilkan satu artikel saja. Meski begitu, kita bisa mengganti artikel unggulan tersebut kapan saja pada menu layout. Jika anda ingin yang lebih keren dan bisa menampilkan lebih dari satu artikel, silahkan baca artikel saya berikut ini: Cara Mudah Membuat Slider Keren (Cukup Satu Langkah) atau yang ini: Cara Membuat Slide Show Keren di Blog.
Demikianlah tutorial cara modifikasi tampilan widget Featured Post menjadi lebih keren dan menarik. Semoga bermanfaat. Sumber: Djangkaru Bumi
Labels:
Blogging
Thanks for reading Modifikasi Tampilan Featured Post Menjadi Lebih Keren. Please share...!
0 Komentar untuk "Modifikasi Tampilan Featured Post Menjadi Lebih Keren"
Terima kasih telah berkunjung ke blog saya, silahkan berkomentar dengan sopan. Maaf, Komentar berisi Link Aktif, Promosi Produk Tertentu, J*di, P*rn*, Komentar berbau SARA dan Permusuhan, tidak akan dipublish.