Cara Cepat dan Mudah 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? oke maka kali ini saya akan membagikan tentang Cara Cepat dan Mudah 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 adalah agar lebih mempercantik blog Anda, dan agar web/blog Anda terlihat lebih profesional lagi. Bahkan dengan memasang widget ini, berarti Anda telah berupaya untuk meningkatkan page view blog Anda. karena ketika pengunjung membuka artikel lama anda, maka artikel terbaru anda akan muncul dan membuat 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 saat mereka di halaman artikel Anda, di sinilah peran 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, karena bisa 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. Jadi inilah alasan mengapa widget ini bisa menambah page view atau jumlah tampilan halaman pada sebuah blog. maka dari itu saya disini akan membahas tentang Cara Cepat dan Mudah Membuat, Memasang atau Menampilkan Widget Artikel Terbaru / Recent Posts Otomatis Bergambar ( Gambar / Image ) di Blogger Blogspot dengan daftar / Kumpulan Versi Terlengkap dan Terbaru.


Oke langsung saja ini dia Cara Cepat dan Mudah 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 lalu pilih "Tambahkan Gadget / Add Gadget"

3. Lalu pilih "HTML/JavaScript" dan masukan kode 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="http://www.dreamsfiles.com/2015/02/cara-membuat-widget-artikel-terbaru-di.html" 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="http://www.dreamsfiles.com/2015/02/cara-membuat-widget-artikel-terbaru-di.html" 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="http://www.dreamsfiles.com/2015/02/cara-membuat-widget-artikel-terbaru-di.html" 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 bisa mengubah dan mengaturnya sesuai dan sesuka hati anda, dan jangan lupa sesuaikan juga dengan ukuran dan gaya template anda, itu saja tentang Cara Cepat dan Mudah Membuat, Memasang atau Menampilkan Widget Artikel Terbaru / Recent Posts Otomatis Bergambar ( Gambar / Image ) di Blogger Blogspot dengan daftar / Kumpulan Versi Terlengkap dan Terbaru, semogga dapat membantu anda dan terimakasih telah berkunjung.

Post a Comment

Jika ada kesalahah dalam menulis mohon untuk di maklumi dan di maafkan, karena tiada manusia yang sempurna, begitu juga admin yang sedang belajar dalam menulis, keritik dan saran yang membangun selalu di nanti....
Terima Kasih....

[blogger][disqus][facebook][spotim]

ivythemes

{facebook#https://www.facebook.com/irsanal.ihsan} {twitter#http://twitter.com/irsan_alihsan} {google-plus#https://plus.google.com/+IrsanAlIhsan} {instagram#http://instagram.com/irsan_alihsan}

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget