Membuat Recent Post Bergambar dan Bergerak

Postingan tentan cara memasang Widget recent post bergambar dan bergerak. Widget ini bisa sobat pasang di blog dengan tujuan memberikan inf...

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="http://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="http://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="http://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="http://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] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://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 = "http://masdabang.blogspot.com/";
limitspy=4
intervalspy=6000
</script>
<div id="spylist">
    <script src='http://hienzo.googlecode.com/files/recentpost-thumbnail%2Bspy.js' type='text/javascript'></script>
</div>

<div id='bp_recent'></div>
<script style='text/javascript' src='http://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='http://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="http://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='http://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. Silahkan tinggalkan komentar nya di blog ini.