Thursday, September 06, 2012
Horizontal Recent Post Widget With Thumbnail (Updated). Is this kinda new style of blogger recent post widget? Then all credit is given to my brother, mas kolis, where the widget originally i stole from. That guy is realy good enough in coding. He's not only created this horizontal recent post widget, but he's also created much enough blogger templates to download for free.

To my opinion, the templates are not too bad, but maybe not everybody have the same look and passion. Just take a look at the website if you wanna check his templates. Try this blogspot blog: creatingwebsite-maskolis.blogspot.com.

There is also a normal recent post widget with thumbnail that i stole from him, Recent Post Widget With Thumbnail. Or maybe you want a random post widget: Horizontal Random Post Widget With Thumbnail For Blogger

Well, back to the topic. The horizontal recent post widget that i'm going to share here doesn't take too many script code, cuz it's truly just a usual recent post widget, similar to the widgets that you have known already. The only difference here is that this horizontal recent post widget is styled with a different arrangement using a paragraph of css code, that's it.

At the time i write this article, you can find the demo just right on this blog. Take a look at the "slide" horizontal post list above this post, that is the recent post widget that i'm talking about.

Well, it is not something hard to add this widget to blogger, not at all. You only have to include two short paragraph of javascript code, and one paragraph of css code in your template and done. Even it's not realy complicated to customize the widget. Pay attention to the following instruction.

1. Find the closing tag ]]></b:skin> in your template and add the following css above it:

#carousel{width:970px;height:125px;position:relative;display:block;} --> Here is where you can modify the whole width and height of the widget. Not the contents inside
#carousel h5{color:#fff;margin:2px} --> Here is where you can modify the title color
#carousel .container{position:absolute;left:24px;width:950px;height:125px;overflow:hidden} --> Here is where you can modify the whole width and height of the contents inside
#carousel .thumb{float:left;margin-right:5px;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://4.bp.blogspot.com/-YqpmgfG-DEQ/UAflQYagXmI/AAAAAAAAHvo/U59OFOnIfBo/s1600/next.png) center;z-index:100;cursor:pointer;} --> Here is where you can modify the next button
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-9vbzapQKyCo/UAflQ9pobYI/AAAAAAAAHvw/h8S8wJedyGc/s1600/prev.png) center;z-index:100;cursor:pointer;} --> Here is where you can modify the previous button
#carousel .thumb:hover,#carousel #next_button:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7} --> Here is where you can modify the thumbnail and next-prev button hover
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#41ccff url(http://4.bp.blogspot.com/-IxwkfLDDUP8/UCqLLR1MlRI/AAAAAAAAIYQ/4KDKy9e1_7U/s1600/carousel.png) repeat-x top left;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:210px;height:90px;margin:0 2px 20px 6px;padding:6px} --> Here is where you can modify the background and the width and height for every single post
#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#fff;font:bold 13px Arial;}

Here to copy


2. Next step, find the closing tag </head> in your template and add the script in the text box below above it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> --> JQuery script
<script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/> --> Script to load the next-prev button (If it's dead, you may remove this line)

<script type='text/javascript'>

(function($) { $(document).ready(function(){ $(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 4,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</script>

<script type='text/javascript'> //<![CDATA[ imgr=new Array();imgr[0]="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";--> Image for posts that have no image/thumbnail
showRandomImg=true;aBold=true;
summaryPost=60; --> Here is where you can modify how many text will be taken for summary. If that is not this, then it must be the summaryPost1 below
summaryPost1=60;
summaryTitle=80; --> Here is where you can modify how may text for the title
numposts1=4;numposts2=4;numposts3=10;numposts6=3;numposts0=12;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts0(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts0;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","June","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'">
<img width="100" height="90" --> Here is where you can modify the width and height of the image/thumbnail shown on the widget
class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>

Here to copy


3. Add the below script where you want the widget to appear:

<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts0+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts0\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>

Here to copy


For example: if you want to place the widget above your main and sidebar column (this is where the widget is placed on this blog), what you have to do is to find the following html code in your template, and then put the code in the text box above before it:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

The code might be different in every templates ( <div id='main-wrapper'> ), but it shouldn't be realy much. The id='Blog1' may be the same in every templates.

That's it my friend.. Not hard at all right? Feel free to post your comment. If you face any trouble, maybe we can solve it together. Now have a nice day. :)

11 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Or maybe here, brother: http://johnytemplate.blogspot.com/2012/05/how-to-make-automatic-carousel-slider.html

      Delete
    2. For the problem, try to use the code just as i gave above. Don't modify it.. :)

      Delete
  2. Hi. Any way to modify this to randomize pick the posts of your blog instead of recent? I'm thinking of combination of regular "blog archive" with this widget but using it as "recent" function, this would be bit repetitive. With randomizing posts it would be more use for me, but I don't think I handle enough coding experience to change it. However I'll give this a shot just to see how it works, and if anyone care to help me let me know :)

    ReplyDelete
  3. I just read what I wrote, man I'm tired. First sentence -- I ment of course: "-- to modify this to randomly pick posts of your blog instead of recent" :-D

    ReplyDelete
  4. Weird thing, I can get it to show only "next-item" arrows on left and right side of the where-should-be-content, and while moving mouse over where the content (images) should be it changes mouse cursor (arrow->hand) but the content itself shows blanks. I just see the arrows. Hmm.

    ReplyDelete
    Replies
    1. Maybe i can refer you a website, but wait, currently i'm buzy. :)

      Delete
  5. Not working on my blog, posts doesnt show up.

    ReplyDelete
  6. Hi guys. I was really looking forward for this widget and it’s not working. But guys I found one which is working as charm. here is the link http://gadgeterror.blogspot.ie/2013/04/horizontal-recent-post-widget-for.html
    Ashton i hope it will help to fix yours also.

    ReplyDelete
  7. I've just updated the widget, i missed the Jquery file before, that's why it didn't work. Give it one more try..

    ReplyDelete