2015 ~ My Learned Tricks

Explanation:

(Edit the values to fit your blog)

tablewidth - Width of the widget

cellspacing - Space between cells (default one is good)

borderColor - Border color (add the background color of your template to perfectly blend it in the template)

thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)

fntsize - Font size of the title

acolor - Color of the titleaBold - you want bold titles? (true or false)

numposts - How many posts you want to show?

home_page : http://24work.blogspot.com/ (change this to your blog url)

And now click Save

this widget was made by [ http://www.instantfundas.com ]

you might like the Recent Posts with Thumbnails Widget 2

This post explains how to add Recent Posts widget in Blogger with image thumbnails:

well they are many hacks up there on the net for RECENT POSTS BLOGGER !

and actually i have tried many of them ! and while i was surfing the net than i found this amazing hack !

finally i have got what i want ! this widget was made by the legend “bloggertricks” we thanks him for this amazing widget ,very simple recent posts …bravo for the great job !

So, let's see how to install this cool widget 2 in your blog..

1. Sign into Blogger dashboard
2. Go to Design » Add a gadget » html/javascript

3. Just copy and paste this code..

<div id="24work">
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script language="JavaScript">

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ADiev8Zxw-E8mhl6JxwEojpQErvrpsoyizyzqBKgtwlyU0QQQEJUL1gSaJ8zMX37yVAHpKqgua7UXPp5BPXFwbc1sMcxXzGC0VfOWkJqO-R70QFLTCbYoNEE3BBno8JwCpj3txeT1ng/s400/noimage.png";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ADiev8Zxw-E8mhl6JxwEojpQErvrpsoyizyzqBKgtwlyU0QQQEJUL1gSaJ8zMX37yVAHpKqgua7UXPp5BPXFwbc1sMcxXzGC0VfOWkJqO-R70QFLTCbYoNEE3BBno8JwCpj3txeT1ng/s400/noimage.png";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ADiev8Zxw-E8mhl6JxwEojpQErvrpsoyizyzqBKgtwlyU0QQQEJUL1gSaJ8zMX37yVAHpKqgua7UXPp5BPXFwbc1sMcxXzGC0VfOWkJqO-R70QFLTCbYoNEE3BBno8JwCpj3txeT1ng/s400/noimage.png";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ADiev8Zxw-E8mhl6JxwEojpQErvrpsoyizyzqBKgtwlyU0QQQEJUL1gSaJ8zMX37yVAHpKqgua7UXPp5BPXFwbc1sMcxXzGC0VfOWkJqO-R70QFLTCbYoNEE3BBno8JwCpj3txeT1ng/s400/noimage.png";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ADiev8Zxw-E8mhl6JxwEojpQErvrpsoyizyzqBKgtwlyU0QQQEJUL1gSaJ8zMX37yVAHpKqgua7UXPp5BPXFwbc1sMcxXzGC0VfOWkJqO-R70QFLTCbYoNEE3BBno8JwCpj3txeT1ng/s400/noimage.png";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 80;

thumbheight = 80;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://24work.blogspot.com/";

</script>

<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/rec-thumbnail/recentposts_thumbnail-2.js" type="text/javascript"></script>
</div>

There are many variables in this script that you need to adjust to blend the widget’s look with that of your blog template. Most of them are self explanatory.

4. In the code, look for the line…

home_page = "http://24works.blogspot.com/";

and replace the blog address with your own blog address

5. How to change the number of posts
By default, this widget is set to display a maximum of 5 recent posts. To change this number,

numposts = 5;

edit line in the code and replace the number 5 with the number of posts desired:

6. How to change thumbwidth & thumbheight

thumbwidth = 80;

thumbheight = 80;

Width and Height of the thumbnail (default are good)

And now click Save

Recent Posts Widget with Thumbnails for Blogger

You are surely familiar with the Recent posts widget for blogger and you can integrate easily into blogger in few steps.But now, Its time to show recent posts widget with image thumbnails in blogger as it will shows your post images with the recent posts in your blog sidebar.Its so easy to implement it into your blogger templates just like the typical recent posts widget.Thansk to Aneesh for this awesome widget! The main features of this widget are:

*It shows the latest posts with tiny thumbnails images (size 75 x 75).
*It shows a bold title of the posts with summary.
*It shows the number of comments, date and ofcourse, a Read more link.
*And its highly customizable (don't worry, i will tell you how to customize).

This widget can be seen live in my blog sidebar.Anyways step ahead to know how to add it in your blogspot blogs.

How to Add Recent Posts Widget with Thumbnails to blogger:

Step 1.Login to your blogger dashboard and go to layout.
Step 2.Now click "Add a Gadget" on your desired sidebar and select "HTML/ Javascript".
Step 3.Now copy the below code and paste it in the "HTML/ Javascript" box:

var numposts = 5;

var showpostthumbnails = true;

var displaymore = true;

var displayseparator = true;

var showcommentnum = true;

var showpostdate = true;

var showpostsummary = true;

var numchars = 100;</script>

Step 4.Now Replace YOURBLOGURL with you desired blog URL and save the widget and you are done.

Customization:

Now its easy to customize this widget, just have a glimpse on the above code and you will see some code colored in "Red".You can play with this code to customize it.You can change the number of posts to show or you can change other options to True/ False to customize it!

Recent Posts Widget Generator

1. Change the title of the widget if you want.

2. Change the number of posts links you want to display.

3. Change the number of words you want to include in the summary to display.

3. Click the “Reset” generate button to make the changes take effect, then click on the “Add to My Blog” button.

Many thanks to bloggerplugins for making this code and I just tested and modified to work on blogger

Add Falling Snowflakes / Yahoo Smiley Emoticons / colored stars / Snow to Your Blog

18:59:00 Blogger, Blogger tools, Blogger Widgets, HTML, Java Script No comments

What could be nicer than to welcome visitors to their blog with falling snow.It's time to play with the snow falling and celebrate the occasion with family and friends.If you own a Blogspot blog, why not give the effect of snow falling there to celebrate this occasion with your visitors and readers.How about falling snow in your Blog ? I have been working hard at creating some cool Christmas effects for your blogs.Its much simple than any other trick found on the net because you just have to add a simple single code to your blogger blogspot blog.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

make a Snowflakes effect on the blog

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">

//Configure below to change URL path to the snow image
var snowsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzZ4Pq1oh1_D9Msc1nG_ExH3VpcDr8LkZ4iE7p8tY0p-w4hY28hogxGcUPN3kbxNp-Xoftg5BkhOOld_NTTgb-s3sE8bsXR4hQtAx6qZW-JP9cJUVRgwO72vjMPABnR-iUrK3bl8SxFQ/s1600/snow-01.gif"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////Stop Config//////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzZ4Pq1oh1_D9Msc1nG_ExH3VpcDr8LkZ4iE7p8tY0p-w4hY28hogxGcUPN3kbxNp-Xoftg5BkhOOld_NTTgb-s3sE8bsXR4hQtAx6qZW-JP9cJUVRgwO72vjMPABnR-iUrK3bl8SxFQ/s1600/snow-01.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}
function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}
function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
<span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>

And now click Save

# you can change :

To set the number of snow balls edit the number 10
To change the snow image replace the picture link with yours

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzZ4Pq1oh1_D9Msc1nG_ExH3VpcDr8LkZ4iE7p8tY0p-w4hY28hogxGcUPN3kbxNp-Xoftg5BkhOOld_NTTgb-s3sE8bsXR4hQtAx6qZW-JP9cJUVRgwO72vjMPABnR-iUrK3bl8SxFQ/s1600/snow-01.gif

You can replace the image with anything you want. You can display falling hearts, falling the autumn leaves, falling New Year message and diamonds, Just play with the code and change the flavors.

make a color snow effect on the blog

you like color snow.if I could make the effect of snow with different colors.code that will allow you to add any snow fall color to your blog.To change the color of snow fall only change the highlight color blue in code.You can change basic colors (red, black, green etc) or Html hex colors.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type='text/javascript'>

//Snow - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&

window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 40; //Number of flakes

var timer = 30; //setTimeout speed. Varies on different comps

var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];

var x = [];

var fall = [];

var theFlakes = [];

var sfs = [];

var step = [];

var currStep = [];

var h,w,r;

var d = document;

var pix = "px";

var domWw = (typeof window.innerWidth == "number");

var domSy = (typeof window.pageYOffset == "number");

var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&

typeof d.documentElement.style.MozOpacity == "string")

num = 12;

for (i = 0; i < num; i++){

sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'

+sfs[i]+'px;height:'+sfs[2]+'px;background-color:blue;font-size:'+sfs[2]+'px"><\/div>');

currStep[i] = 0;

fall[i] = (sfs[i] == 1)?

Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);

step[i] = (sfs[i] == 1)?

0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;

}

if (domWw) r = window;

else{

if (d.documentElement &&

typeof d.documentElement.clientWidth == "number" &&

d.documentElement.clientWidth != 0)

r = d.documentElement;

else{

if (d.body &&

typeof d.body.clientWidth == "number")

r = d.body;

}

}

function winsize(){

var oh,sy,ow,sx,rh,rw;

if (domWw){

if (d.documentElement && d.defaultView &&

typeof d.defaultView.scrollMaxY == "number"){

oh = d.documentElement.offsetHeight;

sy = d.defaultView.scrollMaxY;

ow = d.documentElement.offsetWidth;

sx = d.defaultView.scrollMaxX;

rh = oh-sy;

rw = ow-sx;

}

else{

rh = r.innerHeight;

rw = r.innerWidth;

}

h = rh - 2;

w = rw - 2;

}

else{

h = r.clientHeight - 2;

w = r.clientWidth - 2;

}

}

function scrl(yx){

var y,x;

if (domSy){

y = r.pageYOffset;

x = r.pageXOffset;

}

else{

y = r.scrollTop;

x = r.scrollLeft;

}

return (yx == 0)?y:x;

}

function snow(){

var dy,dx;

for (i = 0; i < num; i++){

dy = fall[i];

dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;

x[i]+=dx;

if (x[i] >= w || y[i] >= h){

y[i] = -10;

x[i] = Math.round(Math.random() * w);

fall[i] = (sfs[i] == 1)?

Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);

step[i] = (sfs[i] == 1)?

0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;

}

theFlakes[i].top = y[i] + scrl(0) + pix;

theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];

}

setTimeout(snow,timer);

}

function init(){

winsize();

for (i = 0; i < num; i++){

theFlakes[i] = document.getElementById("flake"+(idx+i)).style;

y[i] = Math.round(Math.random()*h);

x[i] = Math.round(Math.random()*w);

}

snow();

}

if (window.addEventListener){

window.addEventListener("resize",winsize,false);

window.addEventListener("load",init,false);

}

else if (window.attachEvent){

window.attachEvent("onresize",winsize);

window.attachEvent("onload",init);

}

})();

}//End.

</script>
<span style="font-size:5px;position:absolute;"><a title='Blogger Widget' href="http://24work.blogspot.com" target='_blank'>Blogspot Tutorial</a></span>

And now click Save

Add Falling Snowflakes / Yahoo Smiley Emoticons / colored stars / Flowers / Leaves / stars / butterfly / heart to Your Blog

Special Thanks http://bdlab.blogspot.com
Picture From http://www.freesmileys.org

Falling yikes-01 :

Falling badday-01 :

Falling barmy-01 :

Falling cheer-01 :

Falling cupid2-01 :

Falling cupid-01 :

Falling diablo-01 :

Falling dog-01 :

Falling emoticon-cute-004-01 :

Falling emoticon-object-086-01 :

Falling emoticon-tv-013-01 :

Falling evil-01 :

Falling flowers-0-0-01 :

Falling groucho-01 :

Falling hatch-01 :

Falling heart-smiley-01 :

Falling idea-01 :

Falling jumpy-01 :

Falling lips-01 :

Falling loopy-01 :

Falling old-01 :

Falling rose-01 :

Falling santa-0-0-01 :

Falling smiley-alien006-01 :

Falling smiley-alien010-01 :

Falling smiley-angelic005-01 :

Falling smiley-angry030-01 :

Falling smiley-bounce002-01 :

Falling smiley-bounce008-01 :

Falling smiley-char018-01 :

Falling smiley-char023-01 :

Falling smiley-char026-01 :

Falling smiley-char055-01 :

Falling smiley-char056-01 :

Falling smiley-char078-01 :

Falling smiley-char102-01 :

Falling smiley-char103-01 :

Falling smiley-char124-01 :

Falling smiley-char128-01 :

Falling smiley-char136-01 :

Falling smiley-cool05-01 :

Falling smiley-dance009-01 :

Falling smiley-excited001-01 :

Falling smiley-greet008-01 :

Falling smiley-greet010-01 :

Falling smiley-happy005-01 :

Falling smiley-happy032-01 :

Falling smiley-love009-01 :

Falling smiley-rpg023-01 :

Falling smiley-rpg031-01 :

Falling smiley-sleep004-01 :

Falling smiley-stargate021-01 :

Falling smiley-sw022-01 :

Falling smiley-think007-01 :

Falling smiley-transport019-01 :

Falling smiley-transport026-01 :

Falling smiley-transport027-01 :

Falling tantrum-01 :

Falling wootrock-01 :

Falling Colored Stars :

Falling fire Stars :

Falling Stars :

Falling Snow flakes 1 :

Falling Snow flakes 2 :

Falling Snow flakes 3 :

Falling Snow flakes 4 :

Falling Snow flakes 5 :

Falling Snow flakes 6 :

Falling Leaves :

Falling Green Leaf :

Falling Yellow Leaf :

Falling Greenish :

Falling Tree Leaf :

Falling Heart 1 :

Falling Heart 2 :

Falling Heart 3 :

Falling Blue Heart :

Falling Red-1 Heart : Falling Red Heart

Falling Heart 4 :

Falling Flower :

Falling Love Heart :

Falling butterfly Orange 1 :

Falling butterfly Pink 1 :

Falling butterfly Blue 1 :

Falling butterfly Green 1 :

Falling butterfly ani 1 :

Falling Heart ani 1 :

Falling Heart ani 2 :

Falling red heart :

Falling orange heart :

Falling pink heart :

Falling blue heart :

Falling purple heart :

Falling yellow heart :

Falling objects-heart : Falling objects heart

Falling hrt2b heart :

Falling objects-snow : alling objects snow

Falling ani-ornament : Falling ani ornament

Falling red star :

Falling blue star :

Falling orange star :

Falling pink star :

Falling blinking star :

Falling colored cross :

Falling colored flake :

Falling green butterfly :

Falling yellow butterfly :

Falling objects-fish : Falling objects fish

Falling objects-bee : Falling objects bee

Falling objects-drip : Falling objects drip

Falling snow-01 :

Falling purple flower-01 :

Falling Yellow flower-01 :

Falling pink flower-01 :

falling christmas object ornament-01 :

Falling Christmas Wreath-01 :

Falling Christmas Candy-01 :

Falling Santa Cap-01 :

Falling Blue Snow-01 :

Falling Christmas Tree-01 :

Falling Presents-01 :

Falling Santa-01 :

Falling Animated Snowman-01 :

Falling Animated Snowflake-01 :

Falling snow : Falling SnowFlakes , Falling snow

Note: We are going to add more Falling colored stars / Snowflakes /stars /butterfly / heart / Flowers / Leaves, so keep visiting this page.

update Faling snow >>>>>>>

My Learned Tricks

Adsence

Tricks N Trolls

Blog Tools

Blogging

Internet Tips

Deals n Offers

Recent Posts with Thumbnails Widget for Blogger / Blogspot

Explanation:

Recent Posts Widget for Blogger / Blogspot with Summary And Read More

Add Falling Snowflakes / Yahoo Smiley Emoticons / colored stars / Snow to Your Blog

YouTube

Label

Popular Posts

My Another Website

Contributors

Contact Form

Hostinger

Followers

Labels

Adsence2

Blog Archive

Amazon

Flipkart

Total Pageviews

Adsence

Explanation:

Social Profiles

YouTube

Label

Popular Posts

My Another Website

Contributors

Contact Form

Hostinger

Followers

Labels

Adsence2

Blog Archive

Amazon

Flipkart

Total Pageviews