All Tricks And Tips

Indonesia's one of the top tech bloggers "Abu-farhan" he made many more tutorials on blogger, wordpress, design, tech tricks, jquery, javascript, widgets and plugins, and he authorized all the posts on his blog among himself who claims the authorship of abu-farhan.com/ . He released great quality of blogger resources bundles including jquery slider, scrolling recent post widget, animated popular post, and stylish page navigations for blogger. Among these collections scrolling recent post widget is more easiest to install on blogger and it has a fading effect on any front view. I found a raw scrolling recent post widget from  "abu-farhan" and i got it's updated edition from "muhammad mustafa ahmedzai" and later i found its extreme edition from "rahul ipper" and finally i changed some where on this gadget including image effect and background image effect. You can even contrast this gadget from other publishers. Lets see how to install this edition and how many effects it has

Live Demo

Prepare Blogger Template

1. First of all go to blogger and log-in account

2. Now select your blog and go to template section (Download a copy)

3. Now click Edit HTML and tick Expand Widget Template

4. Now search for [Ctrl+F] </head> and above it page the jquery version

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

5. Now save your template and go to layout section

6. Now pick a HTML/JavaScript vacant box and inside it paste the following script

 <style type="text/css" media="screen">
<!--
/********Scrolling Recent Posts Widget By WildBloggerTricks.blogspot.com********8*/

#abufarhan-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#abufarhan-widget ul {
    width: 300px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#abufarhan-widget li {
    width: 290px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj2i2LQRbNVk6ENNh3QCIGREmHFf0cV5JO-y9uXmKFkCVrxd7ff8qiwI16JyQ03kY3l5N3XCpbAgFMRvwNrJb7UOjjal8rGKMLCGtznHHdDRyPBSeMjuG1VH9RSaUBx7im6sgT9SyIAXu/s1600/topeer.png) top no-repeat;
    border: 1px solid #ddd;
}

#abufarhan-widget li a {
    text-decoration: none;
    color: #0090ff;
    font:normal 13px Rockwell,Times,Arial;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#abufarhan-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#abufarhan-widget img {
    padding: 4px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817,  M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

#abufarhan-widget img:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

.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;
}

/******Scrolling Recent Posts Widget By Wildbloggertricks.blogspotcom********/-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFe2IchcSNQSzWS112UmK8kan2coBLWbdqhOM5CK1QU7k5kviEbh4tlK2UIjR5OOBa9eWp_6xMFRU5dBf_1hB3Uh7LC8zGPluyXeFDE0rTZfwaFeKAUh3RU3ih2p3QPouZZ5BXtZJsLA/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFe2IchcSNQSzWS112UmK8kan2coBLWbdqhOM5CK1QU7k5kviEbh4tlK2UIjR5OOBa9eWp_6xMFRU5dBf_1hB3Uh7LC8zGPluyXeFDE0rTZfwaFeKAUh3RU3ih2p3QPouZZ5BXtZJsLA/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFe2IchcSNQSzWS112UmK8kan2coBLWbdqhOM5CK1QU7k5kviEbh4tlK2UIjR5OOBa9eWp_6xMFRU5dBf_1hB3Uh7LC8zGPluyXeFDE0rTZfwaFeKAUh3RU3ih2p3QPouZZ5BXtZJsLA/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFe2IchcSNQSzWS112UmK8kan2coBLWbdqhOM5CK1QU7k5kviEbh4tlK2UIjR5OOBa9eWp_6xMFRU5dBf_1hB3Uh7LC8zGPluyXeFDE0rTZfwaFeKAUh3RU3ih2p3QPouZZ5BXtZJsLA/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFe2IchcSNQSzWS112UmK8kan2coBLWbdqhOM5CK1QU7k5kviEbh4tlK2UIjR5OOBa9eWp_6xMFRU5dBf_1hB3Uh7LC8zGPluyXeFDE0rTZfwaFeKAUh3RU3ih2p3QPouZZ5BXtZJsLA/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.abu-farhan.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="abufarhan-widget">
<script src='http://wbt.googlecode.com/svn/trunk/abufarhan-recent-post.js' type='text/javascript'></script>
</div>

7. Make sure to place this widget on sidebar and customize necessary changes before saving and placing

Customization Guidance

1. Change http://www.abu-farhan.com replacing your blog name

Need Help?

I think this widget should work for your blog as it works for my own, please let us know whether it doesn't work or your face any trouble during editing by comment...