Auto Read More Thumbnail for Blogger/Blogspot

I hope many of Bloggers or Blogspot users having trouble with adjusting Readmore snippet or using auto jump break problem either because of the Template or any other reasons. So, without wasting time I'll start the process.

Auto Read More Thumbnail for Blogger/Blogspot

• Log-in to your Blogger account. 


• Goto Theme tab and select Backup/Restore to Backup template.


• Now select Download Theme. 


• Close that pop-up and select Edit HTML button


• Click anywhere on the code and press Ctrl+F paste </head>.


• Now paste the below code in next line of </head>.

<!-- Auto read more script Start -->
<script type="text/javascript">
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type="text/javascript">
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  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); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>
' + removeHtmlTag(div.innerHTML,summ) + '</div>
';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->world!'

• Again search for <data:post.body/>.
• Replace the above line with the below code.

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

• Click on the preview to check the website functionality.

Find anything difficulty or facing any problem. Feel free to comment below :).

Get Related post widget with LinkedWithin

Hi friends till now I have seen many types of Related Post gadgets for Websites/Blogs but, I never seen this type of website which make our task very easy to perform.Even you may refer many types of codes from many Websites/Blogs after following the steps you may think till now why I didn't seen this site..! Let jump to the main story LinkWithin is a website which add's the Related Post Widget directly to our Website/Blog by following very simple steps.For this process no need of registering to their site or even no need of advertising ads about their sites. 

  Follow the process:

->First of all go to LinkWithin site and fill the following columns like

• Email
• Blog Link               
• Platform(Blogger,Wordpress,Typepad or any other)
• Width(No. of stories like 3,4,5)

->You may also select the option My Blog has light text on a dark background.

->Now click submit.

Installation to Blog:

   ->Now click Install widget to add to your Website/Blog 

    ->A new webpage will open and asking your preferences .Then click add widget.

    ->Now select your preference where you would link to show your Related post.

    ->Save your layout.

    ->Finally check your site by visiting.

How to Create a Contact Us Page/Form for a blog:

‘Contact Us page/Form’ is used to provide the information about the Website/Blog owner .Even getting the Feedback and Quires about the particular website/Blog.

How to create Favicon to your Blog/WordPress/Website

Hi friends..!Before going to How to create Favicon to your Blog/WordPress/Website.Firstly know about

                What is a favicon?

Favicons are the little icons that show next to bookmarks and in the address bar of most browsers when you open a web site.

Add Falling Stars Effect on Mouse Movement in Blogger

Now add simple falling stars effect when your mouse moves using a simple JavaScript trick, by just adding some lines of codes in your html section you can easily show stars fallings when ever your mouse makes some motion. This effect is compatible with all the modern browsers so you will not have any problems using this script

Add Falling Stars Effect on Mouse 
Movement in Blogger:

Add Falling Stars Effect on Mouse Movement in Blogger

Now add simple falling stars effect when your mouse moves using a simple JavaScript trick, by just adding some lines of codes in your html section you can easily show stars fallings when ever your mouse makes some motion. This effect is compatible with all the modern browsers so you will not have any problems using this script .

Adding Falling Stars Script in Blogger

1. Login to blogger.com and navigate to Design > Template > Edit HTML.
2. Now press Ctrl + F and search for </head> tag and paste the below script right above it and press Save template.

<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>

</script>

Editing the above JavaScript :

If you wanna make some changes to the above script you can easily do that by changing the values in red color, well there are more ways of editing the above script but that depends on your creativity level so try it out what ever works perfect for you fir it up and enjoy.