Cara Cepat Dan Gampang Membuat, Memasang Atau Menampilkan Widget Artikel Terbaru / Recent Posts Otomatis Bergambar ( Gambar / Image ) Di Blogger Blogspot

 Ingin Membuat Gadget / Widget Artikel Terbaru atau Recent Posts Otomatis di blog? baiklah maka kali ini saya akan membagikan wacana Cara Cepat dan Praktis Membuat, Memasang atau Menampilkan Widget Artikel Terbaru / Recent Posts Otomatis Bergambar ( Gambar / Image ) di Blogger Blogspot dengan daftar / Kumpulan Versi Terlengkap dan Terbaru.

Artikel terbaru / Recent Posts Otomatis merupakan sebuah widget yang membantu di dalam blog, yang berfungsi untuk menampilkan artikel-artikel terbaru milik Anda. Maka dari itu, recent post ini juga disebut widget artikel terbaru. Keuntungan memasang widget ini ialah semoga lebih mempercantik blog Anda, dan semoga web/blog Anda terlihat lebih profesional lagi. Bahkan dengan memasang widget ini, berarti Anda telah berupaya untuk meningkatkan page view blog Anda. alasannya ialah ketika pengunjung membuka artikel usang anda, maka artikel terbaru anda akan muncul dan menciptakan pengunjung tertarik untuk membukanya

Perlu Anda ketahui, tidak semua pengunjung masuk di blog Anda melalui home page/halaman utama. Banyak juga di antara mereka yang menemukan blog Anda, melalui artikel Anda di mesin pencari. Nah dikala mereka di halaman artikel Anda, di sinilah tugas widget artikel terbaru ini, untuk memperomosikan tulisan-tulisan terbaru Anda.

Dengan begitu, akan mengundang ketertarikan mereka untuk mengklik dan membaca artikel-artikel terbaru Anda tersebut. Widget ini baik sekali, alasannya ialah sanggup menyuguhkan artikel fresh kepada pengunjung, tanpa harus membuka home page Anda. Semakin banyak yang tertarik, tentunya semakin banyak halaman yang mereka buka di blog Anda. Kaprikornus inilah alasan mengapa widget ini sanggup menambah page view atau jumlah tampilan halaman pada sebuah blog. maka dari itu saya disini akan membahas wacana Cara Cepat dan Praktis Membuat, Memasang atau Menampilkan Widget Artikel Terbaru / Recent Posts Otomatis Bergambar ( Gambar / Image ) di Blogger Blogspot dengan daftar / Kumpulan Versi Terlengkap dan Terbaru.

Oke eksklusif saja ini beliau Cara Cepat dan Praktis Membuat, Memasang atau Menampilkan Widget Artikel Terbaru / Recent Posts Otomatis Bergambar ( Gambar / Image ) di Blogger Blogspot dengan daftar / Kumpulan Versi Terlengkap dan Terbaru.

1. Masuk Kehalaman akun Blogger anda dan menuju "Tata Letak / Layout"

2. Tentukan dimana Widget Recent Posts akan anda letakan kemudian pilih "Tambahkan Gadget / Add Gadget"

3. Lalu pilih "HTML/JavaScript" dan masukan instruksi Script dibawah ini:

VERSI 1
 #######

<script style="text/javascript"
src="https://googledrive.com/host/0B-baFfew9mGPfkhFY1VwZHJvSUQyMkVQQ0FfMm9TTzNLWXRoQXhLdTlzUVZra0QwZjRySFU/DreamsRecentPertama.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=" " 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>

 


VERSI 2 
#######

<script style="text/javascript" src="https://googledrive.com/host/0B-baFfew9mGPfkhFY1VwZHJvSUQyMkVQQ0FfMm9TTzNLWXRoQXhLdTlzUVZra0QwZjRySFU/DreamsRecentKetiga.js"></script>
<script style="text/javascript">
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>
<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=" " rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
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>

 VERSI 3
########

<script style="text/javascript" src="https://googledrive.com/host/0B-baFfew9mGPfkhFY1VwZHJvSUQyMkVQQ0FfMm9TTzNLWXRoQXhLdTlzUVZra0QwZjRySFU/DreamsRecentKelima.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href=" " rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />
<style type="text/css">
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>

VERSI 4
########

<span style="font-weight:bold;"></span><div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 450;
var pause = 3600;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 6;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>

Oke itu saja ada 4 Versi anda sanggup mengubah dan mengaturnya sesuai dan sesuka hati anda, dan jangan lupa sesuaikan juga dengan ukuran dan gaya template anda, itu saja wacana Cara Cepat dan Praktis Membuat, Memasang atau Menampilkan Widget Artikel Terbaru / Recent Posts Otomatis Bergambar ( Gambar / Image ) di Blogger Blogspot dengan daftar / Kumpulan Versi Terlengkap dan Terbaru, semogga sanggup membantu anda dan terimakasih telah berkunjung.