Cara Memasang Widget Recent Post Jilid 3 Pada Blog

Cara Memasang Widget Recent Post - Entah kenapa jari-jari saya tidak pernah bosan-bosannya mengetik artikel setiap hari. Mungkin karena efek jomblo yang kurang kerjaan atau libur yang berkepanjangan kali ya hehe. Baiklah sembari ditemani kopi hangat dipagi yang cerah ini saya akan kembali berbagi mengenai cara pemasangan widget recent post jilid ke tiga. Saya katakan jilid ke tiga karena sebelumnya saya telah membuat 2 postingan tentang recent post dengan tampilan yang berbeda-beda.

   Berhubung arti serta pengertian dari recent post telah saya jelaskan pada postingan saya sebelumnya jadi kali ini kita bawa santai saja ya tutorialnya. Sepintas recent post yang akan kita pasang hampir sama dengan recent post yang ada diblog saya, perbedaanya adalah letak thumbnailnya berada disebelah kanan dan bentuk bingkai thumbnailnya berbentuk lingkaran. Untuk lebih jelasnya silahkan lihat contoh tampilannya dibawah ini.

Cara Memasang Widget Recent Post Jilid 3 Pada Blog

1. Login ke akun Dasbor Blogger anda.

2. Masuk ke laman Tata Letak.

3. Pilih tambahkan widget "Add Gadget"

4. Klik HTML/ Javascript.

5. Letakkan kode berikut.

<script style="text/javascript" src="https://sites.google.com/site/jquerymargop/jquery-js/margoppers.js"></script> <script style="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = false; var posts_date = true; var post_summary = true; var summary_chars = 70; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> <a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://margopblogger.blogspot.co.id/">Recent Posts Widget</a> <noscript>Your browser does not support JavaScript!</noscript> <link href='https://sites.google.com/site/jquerymargop/jquery-js/margopblogs.css?attredirects=0&d=1' rel='stylesheet' type='text/css' /> <style type="text/css"> img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff} .recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;} ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; width: 100%} ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A;} ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092;} ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E;} ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0;} ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF;} ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;} .recent-posts-container a { text-decoration:none; } .recent-posts-container a:hover { color: #222;} .post-date {color:#e0c0c6; font-size: 11px; } .recent-post-title a {font-size: 14px;color: #444; font-weight: bold;} .recent-post-title {padding: 6px 0px;} .recent-posts-details a{ color: #222;} .recent-posts-details {padding: 5px 0px 5px; } </style>

6. Simpan setelan dan lihat hasilnya.

Apabila terjadi kendala bisa anda tanyakan langsung dikolom komentar, mudah-mudahan saya akan membantu semampunya. 

"Semoga Bermanfaat"

Tweet

Postingan terkait:

Ditulis Unknown — Friday, April 29, 2016 — Add Comment — Tutorial Blog