Cara Memasang Widget Recent Post Keren Pada Blog

Cara Memasang Widget Recent Post Keren Pada Blog

Kali ini saya akan share widget recent post keren ini. Seperti yang kita ketahui widget recent post berfungsi sebagai pemberitahuan seputar artikel terbaru yang ada pada blog atau web, jadi dapat di sebut juga widget New Post atau post terbaru. Silahkan lihat tampilannya pada demo yang telah di sediakan pada akhir artikel.

Widget Recent Post ini akan memunculkan artikel paling baru pada urutan pertama, sedangkan urutan ke-2 dan seterusnya adalah artikel lain yang memiliki label sama dengan artikel terbaru. Jadi, jika misalkan artikel terbaru anda berlabel News, maka artikel yang akan di tampilkan pada widget ini adalah post News Update atau semua artikel berlabel News terbaru. Kalau Anda belum paham bisa langsung coba memasangnya terlebih dahulu, berikut tahapan pemasangan widgetnya.

Cara Memasang Widget Recent Post

1. Pastikan FontAwesome telah terpasang di blog Anda.

Baca juga : Cara Memasang Kotak Pesan Dengan Efek Slide Pada Blog

2. Menuju ke Edit HTML, Silahkan copy CSS berikut dan tempatkan sebelum kode ]]></b:skin> atau </style>.

/* CSS Recent Post by wajahilmu.blogspot.com */
.recent-post-title{background:#fff;margin:0;padding:0;position:relative}
.recent-post-title h2{font:normal bold 14px Arial,sans-serif;height:26px;line-height:26px;margin:0 0;padding:0 10px;background:#0b944b;color:#ffffff;display:inline-block}
.recent-post-title h6{float:left;font:normal bold 10px Arial,sans-serif;height:26px;line-height:26px;margin:0 0;padding:0 10px;color:#ffffff;display:inline-block;border:1px solid #eee}
.recent-post-title h2 a{color:#ffffff}
.recent-post-title h2 a:after{content:"\f18e";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.recent-post-get{float:right;font:normal bold 10px Arial,sans-serif;margin-bottom:10px;line-height:26px;padding:0 10px;border:1px solid #eee}
.recent-post-one-thumb{float:left;width:50%;margin:0 0}
.recent-post-one-thumb .widget{padding:0 10px 10px 0}
.recent-post-one-thumb .widget-content{background:#ffffff;border:1px solid #e5e5e5;padding:15px}
.recent-post-one-thumb ul{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}
ul.rp_thumbs{margin:0 0 0 0}
ul.rp_thumbs li{font-size:12px;min-height:68px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #e5e5e5}
ul.rp_thumbs .rp_thumb{position:relative;background:#fbfbfb;margin:3px 0 10px 0;width:100%;height:0;padding-bottom:46%;overflow:hidden}
ul.rp_thumbs .rp_thumb img{height:auto;width:100%}
ul.rp_thumbs2{font-size:13px}
ul.rp_thumbs2 li{padding:0 0;min-height:66px;font-size:11px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #e5e5e5}
ul.rp_thumbs2 .rp_thumb2{background:#fbfbfb;float:left;margin:3px 8px 0 0;height:60px;width:60px}
ul.rp_thumbs2 .rp_thumb2 img{height:60px;width:60px}
span.rp_title{font:normal normal 16px Fjalla One,Helvetica,Arial,sans-serif;display:block;margin:0 0 5px;line-height:1.4em}
span.rp_title2{font-size:14px}
span.rp_summary{display:block;margin:6px 0 0;color:#666666}
span.rp_meta{background:transparent;display:block;font-size:11px;color:#666666}
span.rp_meta a{color:#666666!important;display:inline-block}
span.rp_meta_date,span.rp_meta_comment,span.rp_meta_more{display:inline-block;margin-right:8px}
span.rp_meta_date:before{content:"\f073";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}
span.rp_meta_comment:before{content:"\f086";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}
span.rp_meta_more:before{content:"\f0a9";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}
ul.rp_thumbs2 li a:hover,ul.rp_thumbs li a:hover{color:#0072C6}

3. Letakkan script berikut sebelum atau di atas kode </head>, lalu klik save.

<script src='https://googledrive.com/host/0B2oQSsObIa2lRUpzeDczczJ0V3M' type='text/javascript'/>
<script type='text/javascript'>
var numposts = 1;
var numposts2 = 5;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = false;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 300;
var thumb_height = 140;
var thumb_width2 = 60;
var thumb_height2 = 60;
var no_thumb = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinE0VAoK1Sj-gIF0HzIIIC-0eCHyE76NqsUr8bmpv9WxUFCrWDl_6LDYCyZYpaRdzxh9o-EIrZYaRDPz4H4Du5sjC6FvPID2mCs3gQ4lqRcYOTvVKV3ji_ZpVUwfwB_sEyE7NUojQxlTTI/w300-c-h140/no-image.png&#39;
var no_thumb2 = &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3HjXtF6uS4S8nete2bnOL4mftkGOWMd0VlEbRhGeFmYwVLYpcGjxX_M6EWMd66JWL4mDZfPPaa1ogEt4k2mZkieXmnlN5ltxEe2HaBEfyeEKkB0Lf9RCo2RhKmXPSXBIVPYK6Je_IHScm/s60-c/no-image.png&#39;
</script>

4. Selanjutnya silahkan menuju Tata Letak > Tambahkan Widget > HTML/JavaScript, lalu masukkan kode berikut.

<script>
document.write("<script src=\"/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs\"><\/script>");
document.write('<div class="recent-post-title"><h6><a href="/" title="Klik disini Untuk Melihat lebih Banyak Yang Baru ">Lihat Semua >></a></h6></div>');
document.write('<div class="recent-post-get"><a href="http://wajahilmu.blogspot.com/search/label/Widget" title="Get This Widget">Get Widget</a></div>');
</script>

5. Klik save/simpan dan selesai.

Demo

Sedikit saran buat Anda, bila ingin memfokuskan pada label tertentu, silahkan ganti kode widget
/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs\ dengan kode berikut
/feeds/posts/default/-/Nama%20Label?orderby=updated&alt=json-in-script&callback=labelthumbs\. Silahkan ganti tulisan Nama%20Label dengan nama label yang Anda inginkan.

Saya rasa cukup sekian artikel tentang Cara Memasang Widget Recent Post Keren Pada Blog ini, semoga dapat bermanfaat buat Anda. Sebelum memasang widget tersebut, ada baiknya bila Anda berkomentar terlebih dahulu sehingga dapat menjadi motivasi tersendiri bagi saya untuk terus mengupdate artikel di blog ini. Kritik dan saran juga dapat Anda tuliskan pada kolom komentar di bawah. Terima kasih banyak telah membaca artikel di Opick Weblog.

Bagikan Artikel ini