Cara Membuat Widget Artikel Terbaru di Blog keren dan Unik

Cara Membuat Widget Artikel Terbaru di Blog keren dan Unik. Pada mulanya sebuah arsive postingan pada blog sangat penting karena supaya pengunjung dapat betah berada di blog kita dan mampu memperbesar blog kita untuk mendapatkan trafik yang bagus. nah pada kesempatan kali saya akan share cara Membuat widget Artikel Terbaru Bergerak dengan Gambar Keren di Blog. karena dengna kita membuat widget artikel terbaru di blog maka akan mudah pengunjung untuk melihat artikel yang baru saja kita buat dan dengan membuat widget artikel terbaru di blog akan membuat pengunjung betah berada di blog kita, blog kita akan cepat mendapatkan banyak terafik dan langsung saja caranya sudah saya buat secara terprinci.

Masuk more option /opsi lainnya

Pilih menu layout/ tata letak

pilih tambeh edit gadget / a gadget

pilih Html java/scrip

Lalu masukan code berikut

#rp_plus_img{height:377px;}

#rp_plus_img li {height:60px;padding:5px;list-style:none;

background-color:#ffffff;

border:solid 1px #8E858A;}

#rp_plus_img a{color:#00000;}

#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;

text-align:justify;

-moz-border-radius: 5px;}

#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #00000;width:55px;height:55px;}

</style>

</script>

</script>

var speed = 1500;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

var numposts = 5;

var numchars = 0;

</script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">

</script> </ul>

<center><a href="http://zootodays.blogspot.com/2012/05/membuat-widget-artikel-terbaru-bergerak.html"><img alt="News-Article"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAcoN8cXtoA0mTD9X5GhW2U1yPxXAoMulf7B07buiwE0NNAq_Cnqj-UiEUw21llE258GsrMEZSM3NGrzaCxiC8D5QUso9cNtD1oTe4HrMfDL8y7u9gzChK5E8YYuj10PWk2wkGfnR_1pJi/s1600/munch_2012_07_23_133144.png"/></a></center>

Lalu beri nama widget sesuai ke inginan anda
Lalu save java/scrip dna lihat hasilnya. dan jika anda kurang puas dengan tampilan wideget artikel terbaru di atas anda bisa coba gaya artikel terbaru di bawah ini silhakan tinggal copy code html lalu pasang.

gaya widget 1

gaya widget2

<div class="recentpoststyle">
<script src="https://googledrive.com/host/0B-baFfew9mGPfkhFY1VwZHJvSUQyMkVQQ0FfMm9TTzNLWXRoQXhLdTlzUVZra0QwZjRySFU/DreamsRecentKedua.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.dreamsfiles.com/2015/02/cara-membuat-widget-artikel-terbaru-di.html>Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

gaya widget 3

var posts_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

var post_summary = true;

var summary_chars = 70;</script>

<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.dreamsfiles.com/2015/02/cara-membuat-widget-artikel-terbaru-di.html" rel="nofollow">Recent Posts Widget</a>

img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}

.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}

.recent-posts-container a { text-decoration:none; }

.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}

.recent-posts-details {margin: 5px 0px 0px 92px; }

.recent-posts-details a{ color: #777;}

</style>

gaya widget 4

var posts_no = 5;

var showpoststhumbs = false;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

</script>

<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.dreamsfiles.com/2015/02/cara-membuat-widget-artikel-terbaru-di.html">Recent Posts Widget</a>

img.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}

.recent-posts-container {font-family: 'Oswald', sans-serif; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}

.recent-posts-container a { text-decoration:none; }

.recent-posts-container a:hover{color: #4DACE3;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}

.recent-post-title { margin: 5px 0px; }

.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}

.recent-posts-details a{ color: #888;}

a.readmorelink {color: #4DACE3;}

</style>

gaya widget 5

var posts_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

</script>

<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://www.dreamsfiles.com/2015/02/cara-membuat-widget-artikel-terbaru-di.html" rel="nofollow">Recent Posts Widget</a>

img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}

.recent-posts-container {font-family: 'Gloria Hallelujah', cursive; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}

ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid #FCD6CB;}

ul.recent-posts-container {border: 2px solid #FCD6CB; }

.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: #616662;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #888;}

.recent-posts-details {padding-bottom: 5px;}

a.readmorelink {color: #4DACE3;}

</style>

Lalu lihat widget apakah sudah benar atau masih ada kesalah dan kalau masih ada kesalahan mungkin anda perlu teliti atau saja anda salah mengcopykan code Html tersebut. dan jika widget tidak tampil biasanya dukungan template tidak tersedia. coba ganti template atau anda bisa mencoba di blog lain pada template berbeda apakah tampil. jika tampil pada template lain maka template yang anda gunakan pada blog kurang mendukung. anda juga bisa baca Cara Gampang Membuat Tabel Pada Postingan Blog Dengan Tableizer.

ADS HERE !!!