How to add auto read more button in blogger

Add to button plays a great role in blogger.It shortens the post of the blogger and make more posts within a short space.But in default template it is not appeared.So,this tricks will be helpful for your blogger site.

Add auto read more button with thumbnails:

• Go to your blogger dashboard>design>edit html
• Click on "Expand widgets templates"
• Find the code </head>

Paste the code before </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 100;

img_thumb_width = 120;

</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(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>

• Now find the code  <data:post.body/> 

Replace <data:post.body/> with the code below



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

Now save the template and see the above.
If you feel any problem, ask me.I will try to solve it.

   

Read more ...

How to publish auto blog posts to facebook page

Read more ...

How to remove default Navigationbar from Blogger

       Remove your default navigationbar from blogger

In the default template you will see above a navbar. Many people don't like it. You see none good template do not use this navbar. I do not know why it?. Its very easy to Remove this Navbar from your Blogger Blog. In this tutorial i show you how you remove the navbar from your blog? Just follow below step.

01) First login your blogger blog and go to dashboard.
02) Then go to Design Tab and Click Edit Html.
03) Now backup your template for safety.
04) Press Ctrl + F and find this code     ]]></b:skin>
When you found above code. Now paste below code before above code.

#navbar-iframe { display: none !important; }

05) Now save the template and see the navbar gone.

How to Restore the Navbar :

If you want to restore the navbar then just remove the code you paste. Save the template and see your navbar comes again.

If you  fell any problem leave a comment.

Read more ...