Tips Cara Mempercantik Blogger Dengan Widget Artikel Terbaru/Recent Post Warna-warni


Tips Cara Mempercantik Blogger Dengan Widget Artikel Terbaru/Recent Post Warna-warni - Widget artikel terbaru atau orang luar negeri biasa menyebutnya dengan nama widget recent post, merupakan sebuah widget yang dapat kita pergunakan pada blog kita. Widget ini jika saya bilang sangat berguna sekali dan sangat membantu sekali dan wajib kita letakkan pada seluruh blog yang kita miliki. Kenapa karena dengan mempergunakan widget artikel terbaru ini kita dapat memberitahukan kepada pengunjung blog kita kalau kita telah menerbitkan artikel terbaru pada blog kita dan yang pasti pengunjung kita ingin mengetahui artikel terbaru tersebut bukan.

Tips Cara Mempercantik Blogger Dengan Widget Artikel Terbaru/Recent Post Warna-warni

Pada kesempatan sebelumnya saya juga telah menjelaskan bagaimana Cara Membuat Widget Artikel Terbaru Yang Ringan Dan SEO Friendly namun Untuk itu pada kesempatan saya kali ini saya ingin membagikan sebuah tips dan trik cara untuk membuat sebuah widget artikel terbaru atau recent post dengan tampilan yang warna-warni. Tidak hanya widget ini dapat membantu blog kita dalam memperkenalkan artikel terbaru dari blog yang kita miliki namun dengan widget ini kita juga dapat mempercantik blog kita dengan tampilan nya yang sangat cantik dan menawan. Tidak hanya menawan namun dengan tampilan nya yang color full widget ini dapat memancing para pengunjung blog kita untuk membaca artikel terbaru yang ada pada blog kita.

Artikel terkait
Tips Blog Cara Membuat Random Post Yang SEO Friendly Beserta Gambar

Cara membuat artikel terbaru atau recent post

Untuk membuat widget ini sangatlah mudah dan gampang, tidak sampai 5 menit maka widget ini akan tampil pada blog anda dan mempercantik blog anda. Untuk langkah-langkahnya anda dapat mengikutinya sebagai berikut ini.

Silahkan masuk ke blogger anda
Masuk ke layout > Add a Gadget 
Pilih HTML/Javascript
Copy lalu pastekan kode dibawah ini ke form HTML/Javascript tadi

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.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://goo.gl/zAnmTu" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' 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; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
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>

Untuk merubah-rubah tampilan dari widget artikel terbaru yang kita miliki kita dapat merubah ada bagian dibawah ini.

var posts_no = 5;

Untuk menampilkan jumlah postingan terbaru yang akan ditampilkan pada widget artikel terbaru milik blog kita

var showpoststhumbs = true;
Untuk menampilkan gambar dari artikel yang ada pada blog kita

var readmorelink = true;
Link read more untuk membaca artikel terbaru pada blog kita 
var showcommentslink = false;
Untuk menampilkan link komentar pada artikel blog kita

var posts_date = true;
Untuk menampilkan tanggal artikel blog kita

var post_summary = true;
Menampilakan postingan pada blog kita hehehe


Setelah kita melakukan edit-edit dari kode widget artikel terbaru di atas maka tahap selanjutnya silahkan simpan kode diatas tersebut dan anda dapat melihat tampilan dari artikel terbaru tersebut pada sidebar blog anda.

Nah bagaimana mudah bukan Tips Cara Mempercantik Blogger Dengan Widget Artikel Terbaru/Recent Post Warna-warni ini. dengan tampilan yang warna warni maka widget artikel terbaru ini dapat kita pergunakan untuk mempercantik tampilan dari blog kita. Nah sekian dan terimakasih telah berkunjung di blog newbie code news ini

Subscribe to receive free email updates:

0 Response to "Tips Cara Mempercantik Blogger Dengan Widget Artikel Terbaru/Recent Post Warna-warni"

Post a Comment

Jika teman-teman merasa artikel saya ini bermanfaat, mohon untuk memberi komentar dibawah ini, saya pasti akan membalas komentar rekan-rekan sekalian. terimakasih enjoy