10 Widget Recent Post Keren Untuk Blog

Postingan tentang 10 Widget Recent Post Keren Untuk Blog. Widget ini saya dapatkan dari berbagai sumber di google. Tampilan yang keren dan m...

Postingan tentang 10 Widget Recent Post Keren Untuk Blog. Widget ini saya dapatkan dari berbagai sumber di google. Tampilan yang keren dan multicoloured sangat cocok untuk mempercantik blog sobat. Beberapa Widget recent post ada yang bergambar dan bergerak menurut saya tampilan widget ini sangat keren. Widget ini bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.

Cara Pasang di Blog

Log in ke akun blog sobat.
Klik rancangan --> Elemen laman/Tata Letak --> Tambah gadget --> HTML/Javascript
Masukkan salah satu kode di bawah ini (Pilih Mode Tampilan Yang Sobat Suka)
Klik save dan lihat hasilnya.

<script style="text/javascript" src="https://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="https://masdabang.blogspot.com/2015/02/10-widget-recent-post-keren-untuk-blog.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://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>

<div class="recentpoststyle">
    <script src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.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&amp;alt=json-in-script&amp;callback=showlatestposts">
    </script>
    <a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="https://masdabang.blogspot.com/2015/02/10-widget-recent-post-keren-untuk-blog.html" rel="nofollow">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>

<script style="text/javascript" src="https://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 = 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="https://masdabang.blogspot.com/2015/02/10-widget-recent-post-keren-untuk-blog.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://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>

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</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="https://masdabang.blogspot.com/2015/02/10-widget-recent-post-keren-untuk-blog.html">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
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>

<script style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.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="https://masdabang.blogspot.com/2015/02/10-widget-recent-post-keren-untuk-blog.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='https://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>

Postingan tentan cara memasang Widget recent post bergambar dan bergerak. Widget ini bisa sobat pasang di blog dengan tujuan memberikan informasi tentang postingan terbaru atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak animasi.

Cara Pasang di Blog

Log in ke akun blog sobat.

Klik rancangan --> Elemen laman/Tata Letak --> Tambah gadget --> HTML/Javascript

Masukkan salah satu kode di bawah ini (Pilih Mode Tampilan Yang Sobat Suka)

Klik save dan lihat hasilnya

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 1px #000000;}
    #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 1px #00000;width:55px;height:55px;}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });

</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;

</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="https://masdabang.blogspot.com/2015/01/membuat-recent-post-bergambar-dan.html" target="_blank">get this widget here</a></small>

<right><style> img.recent_thumb
{padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs
{float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;}
ul.recent_posts_with_thumbs li
{padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a
{text-decoration:none;}
.recent_posts_with_thumbs normal
{font-size:13px;}
</style> <script style="text/javascript" src="https://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"

type="text/javascript"></script>

<style type="text/css" media="screen">

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:355px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:326px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6K309YATnGnz-ulXSovxmyYiqjliCQaNYNIygeEVntPpTdpM1MmD_GuXdY0WLBl2TlatxYvT81dnZBVYEAshYtZbNGO5pBa1ODZxRaeZKtXQQDyJQYDLM4TGYzBP38XxKfemrzKqV02t/s1600/post-hienzo48.jpg) repeat-x;

border:1px solid #cdcdcd;

}

#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

    <script language='javascript'>

imgr = new Array();

imgr[0] = "https://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "https://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "https://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "https://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "https://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;

boxwidth = 294;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 61;

thumbheight = 62;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "Komentar";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 8;

home_page = "https://masdabang.blogspot.com/";

limitspy=4

intervalspy=6000

</script>

<div id="spylist">

<script src='https://hienzo.googlecode.com/files/recentpost-thumbnail%2Bspy.js'

type='text/javascript'></script>

</div>

<div id='bp_recent'></div>

<script style='text/javascript' src='https://yourjavascript.com/02415211738/artikel-terkait.js'></script>

<script style='text/javascript'>

var numberOfPosts = 12;

var showPostDate = false;

var showSummary = false;

var titleLength = 0;

var showCommentCount = false;

var showThumbs = true;

var showNoImage = true;

var imgDim = 55;

var imgFloat = 'left';

var myMargin = 5;

var mediaThumbsOnly = true;

var showReadMore = false;

</script>

<script src='https://masdabang.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

<marquee loop="100" scrollamount="2" direction="left" bgcolor="transparent" height="15" width="100%">

<center>

<a href="https://masdabang.blogspot.com/2015/01/membuat-recent-post-bergambar-dan.html" target="_blank" title="Dapatkan Widget Seperti Ini"><b>Dapatkan Widget Seperti Ini</b></a>

<div class="clear"></div></center></marquee>

 <script style="text/javascript" src="https://sites.google.com/site/tipstrikblogging/js-amatullah/RecentPost-List.js"></script>

<script style="text/javascript">

var numposts = 5;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

var standardstyling = true;

</script>

<script src=https://masdabang.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts></script>

Sekian dulu tutorial kali ini tentang cara pasang Widget Recent Pos.

Assalamu'alaikum Wr. Wb.  

Muhammad Iqbal adalah nama lengkap saya, namun biasa dipanggil Iqbal. Saya adalah anak kedua dari tiga bersaudara. Usia saya sekarang 23 tahun (2014)dan alhamdullilah belum punya istri (nggak penting ya??) langsung saja.

Welcome To My Home

Nama saya muhammad iqbal saya hanya seorang blogger biasa yang mencoba berbagi apa yang saya tahu. tampilan blog ini mungkin tidak semenarik blog para master, namun saya berusaha mengisi content sebagus mungkin walaupun belum maksimal. Belajar dan terus belajar, semoga suatu saat blog sederhana ini menjadi blog inspirasi.

Blog ini membahas tentang Tutorial Blog, Wdget, SEO, Social Media dan Internet(mudah-mudahan sobat suka dengan topic yang saya bahas)

Welcome To My Blog

Tujuan saya Nge-Blog adalah ingin berbagi kepada sobat sekalian  tentang apa yang saya tahu dan yang sedang saya pelajari. 

(tentunya hal itu bersifat positif dan bermanfaat)

Hal itu di buktikan dengan hadirnya beberapa Blog di bawah ini: 

Mas Da Bang 'Blog ini' adalah salah satu blog yang patut di perhitungkan. Kenapa? Ya karena tutorial yang di sajikan oleh penulis (I'm Muhammad IQBAL is the Author)

sangat menarik untuk disimak dan diterapkan di blog sobat sekalian. Berikut ini cuplikan content yang di sajikan
Blog Tentang Tutorial Blog, Seo, Internet, Widget dan Media Sosial

Click Here 

Ceeplux 'Blog sebelah' Menyediakan beragam macam dan beragam keunikan Blogger Template dari beragam negara yang di sajikan oleh beragam author/designer yang sangat ahli di bidangnya.

(Silahkan di Download "it's FREE")

Click Here

Paja Tapuih 'Blog Keren' Keren...? Apa iya??

Saya orangnya tidak suka bohong kalo tidak percaya silahkan saja klik link di bawah ini.

Click Here

Masih Ada lagi? Sabar sob.!!! cuma dua lagi kok. Yang Satu ini saya kasih nama 'MR.Simbalo'.., tidak banyak deskripsi yang bisa saya sajikan lansung saja menuju blog tersebut.

Click Here

Sedangkan yang satu lagi bertemakan Image Uploader, Blog yang menyediakan berbagai macam Cool Icon, Awesome Background and The best Photo or Image. Nama blog ini adalah 'Mak Udik'

 Click Here

Terakhir dan sekaligus penutup dari deskripsi Blog Muhammad Iqbal ini, silahkan follow saya di beberapa akun di bawah ini

Lihat Profil Lengkap saya

Follow me on

Tweet oleh @02IQb4L  

Like me on

 

Yang ini juga ya...

• 
• 
• 
• 
• 

Join this Awesome Blog and receive free email updates!

Get Email Updates

We never encourage SPAM
You can Unsubscribe any time

Twitter 1.150+ Facebook 1.650+ Google+ 1.400+

• 
• 
• 
• 
• 

Jika ada Perihal yang ingin di tanyakan jangan sungkan-sungkan untuk langsung mengirim pertanyaan anda melalui Contact form di bawah ini.

foxyform

 

1 2 3