Related Post with Thumline Blogger

Many ways to display recent post or new post. In this blog there are many tutorials or lessons that discuss recent post. Try the search box just type in "recent post".

Now we will learn to display the more interesting recent post. We make slides recent post, which will be accompanied by a thumbnail, the latest title, date published and the number of comments. Yes because the slides, and alternate means keep moving. Recent post widget is suitable slides mounted in the sidebar. Demo can be viewed here

How to Create a Slide Recent Post
1. Login to blogger
2. The draft then select Add Gadget
3. Select the HTML / JavaScript

4. Enter the following HTML code:
<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:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#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://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";
imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";
imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://downlod-for-free.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>
Before we Save, following which we can change:

  • 220 and 208 is the width of the widget.
  • numposts = 10; is the number of posts we want to show
  • Replace http://downlod-for-free.blogspot.com/ with our own blog's URL.

5. Save when done.
Label: ,

Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )