REPLACE/CHANGE "POST A COMMENT" TEXT WITH A COOL IMAGE/TEXT IN BLOGGER

This tutorial will show you How to change/remove/replace "Post a Comment" Text With a Cool Image/Text In Blogger. I will give you a few images you can use or you can add your own image.

HOW TO REPLACE POST A COMMENT TEXT

• Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code shown below
• Now Find the code shown below using [ctrl+F]

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

• Now replace the highlighted code with one of the image code shown below

LIST OF IMAGES

Here I am giving some sample of images you can use them or you can add your own image.

SAMPLE 1

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjDhuwn8Wpn5t95yVG4znguAYjNpLZ6AMpxO_JfDw8Pt9RiAdXdwk72B3NTRqrcK5sNSxSg18Yvcjt4qFWiQ8yrzVeIlFLz9pE0HMPlNQWr6b01kx1hhfPjQJ9pNO8FIEJCzcdku3v69qV/s1600/comment+cloud.png" />

SAMPLE 2

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEnKuDditOWjKDngntn9aO8fytfb_ryVRZs-R2Q6jG8pSl7XSlR2hPgLrN-Msr_cIEWlEYVyhgLMSOJqqld978aucUH6HFDZl3xhaqgp7tkGEbJ3HJM8AtS8zslFcbnAgOiq0iAClxxsn6/s1600/comment+here+flowers.png" />

SAMPLE 3

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigwihyGyoy9sHMQrtMtbqLFLciOObdpWyp_buTf29RjnF5DeZHmNhIE-5uwHYtR1fxDDilOMcWHq7PcnPbUrlRVd9LPg4yIdpDKtKT_Y7RTZWnLe8Q1TVLAkculXMUe8T3J60LX6csBd-6/s1600/PostAComment+%286%29.png" />

SAMPLE 4

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTrAWWERZz2O8hmmucnScDG1wAOxx-ZGIC0maTMTjpbdINam1YBT-spbhtzop0tqe0kcJxblEZwXcMU54K-p5ZbLGcVQdvrF0CfgKiI_JLWAn1oyPWyzDz0KygIPapyZLR-_jTRWliViRX/s1600/PostAComment+%282%29.png" />

SAMPLE 5

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoNKEjTbx-UunItlTCHWXp99ZwS1k3AQNOYH8q-xdSM6IZvZsrklkuSnRmmjBXWudiQhlpaySjAs_uIw_cki96Y1Z7UPS-EXKOab-PddMBjD84X0-DMFaPC4uaREeSM1NF9pbpShahoAe/s1600/PostAComment.png" />

SAMPLE 6

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNaNrAsCBN4iHntmtSQ-jvX49F7fa-ivVtd3cGHUgJniPldwDGplM3lau-YryQ78_lLNKFFVnrh57R4xvHQS7pnZs-3HluTj5h7uc1frMmVAXeBQMX6ouoF9t_AMrl7RhNLrETXwVhyuKR/s1600/PostAComment4.png" />

• Now save your template

Read more

ADD CSS3 SPINNING SOCIAL SHARING ICONS/BUTTONS BELOW EVERY POST IN BLOGGER

Social Bookmarking and sharing buttons helps your blog visitors to easily bookmark or Share your blog content with popular social websites like Facebook, Twitter, etc. This widget is based on CSS3 such as -moz-transform which converts spinning effect to social sharing buttons. Whenever you hover the mouse on these buttons they rotates in slight round and surprise them with their spinning effect method. In this post we are going to show you how to add simple social sharing buttons below every post in blogger. In this widget we added Facebook, Twitter, Google Plus,  Delicious, Digg, Stumble upon, Technorati icons. If you are ready to add these sharing widget below every post in your blogger blog, then kindly follow these steps.

SOCIAL SHARING WIDGET PREVIEW

HOW TO ADD SOCIAL SHARING WIDGET

• Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code shown below
• Now Find the code shown below using [ctrl+F]

<div class='post-footer-line post-footer-line-1'/>

• Now Paste the Code Shown Below just below/after it

<b:if cond='data:blog.pageType == "item"'>
<style>
p#socialicons img {    -moz-transition: all 0.2s ease-in-out;    -webkit-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;} p#socialicons img:hover {    -moz-transform: rotate(70deg);    -webkit-transform: rotate(70deg);    -o-transform: rotate(70deg);    -ms-transform: rotate(70deg);    transform: rotate(70deg);}
</style>
<center><p id='socialicons'>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQU5-TAqHIYUhZAI40sug4qS8rMj_yyvW52gckcRy-rLB9A1p59tc9VU9lYGTWEITjaCx4akq2-iczEJ7zJ3sJ8TGF0i_1we_mvNiUQfyJmWzjpGwVFnDuQVpVI_boq9Kbhw57krpBmlM/s1600/latesthack.com-google_plus.png'/></a>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfoRWbGLkTg-XEtGN8PzkVSNCZrbsreWZP-PrPLY9ZIs7U-3csx_r6Dy_OazU4bLVGvoD2CaLPRxSxTilUSEGJ7p66DAPuAgWopomx5Uxhgq1cCzQqSbC992kNQwXJkKUWsCqdT2DhpLg/s1600/latesthack.com-facebook.png'/></a>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezT2DPDuSh0rKYTYjHejxmjSxGQRkjrY0gFr5dNHZqAaHozQ1c9OYANjeTok0z5KNA5OVthCaWWJEJv2G9oOsdvm6URu3sMD8NwK6qEPvQ9WXFf6fPsNjbC4pR2OTNxGHdbNDiakxWbY/s1600/latesthack.com-twitter.png'/></a>      
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGAxgKH9ZqBLgGZmt97Ge3wkVi1CgD2LTqnbvE7dCp8HRDXr2svG8by1EWl9WwPYBcs0NmWAj1BJfb1EHcZtPwFT9u_f1sF3rsNPIGkCEfL2ZnZX3piKdadk81QVnyY90qL6WEMIRXGsMg/s1600/digg.png'/></a>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ToapWMcLt6b2dM9Vn0yy841JLXIeT7Wssbegz1G0UCSwOdMzM1gQgIQXbv5E2IH1PnEKGR8-64S4LDaeVxg5etXJeGo8I0tGpmnyDNcu77nkrxvhaOZPQJZFkFdVzlPtp-c9Mx0VAW54/s1600/delicious.png'/></a>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgovT07ToSM5b0BvruUyZYTZv8fjK_uVCbAL7aqQuS7FPwmvUwjarPUqsXUZZxvzReIPt_6a6azw_WcHbu6T6c9hSSLlUTtx76fsJm7meyzlvUeHdfQOI0hEsGrs-9OD4AnBhBhaEBIpJIw/s1600/stumbleupon.png'/></a>
<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTMDMphUyBjKLZnbytorMJ7Io80UNIcwkFuGvXSbTSfKrFit6xHEyGggpgt-7CI_lc9IYz5RJWba0gCSll8QFycrWFM-sA67N2C_V0g788WhLFhMb2vIg1VKqBgcvS5ZDUZyNiT9QnGAhv/s1600/technorati.png'/></a></p></center><p style='display:none;'>Spinning icons by <a href='http://www.latesthack.com'>Latest Hack</a></p></b:if>

• Now save your template

Read more

AUTOMATIC READ MORE HACK FOR BLOGGER WITH THUMBNAIL

By default Blogger shows all the contents from your post on your blog homepage. Having everything on your homepage will make your blog homepage load slower. This might result in getting lower page views as your readers can read all your posts on a single page. So, it’s better to give a summary of your posts on your blog’s homepage and then add a ‘read more’ link below that post summary. In this Blogger Tutorial i have a script that automatically converts your posts into read more summary in your blog homepage

FEATURES

• No need of adding jump break
• Your posts will be displayed as short summary with a read more link
• You can choose how much text is displayed in the summary
• An image from your post will be re sized as a thumbnail and displayed beside the summary
• You can choose the size of the thumbnail

AUTOMATIC READ MORE HACK FOR BLOGGER WITH THUMBNAIL DEMO

Live Demo

HOW TO ADD AUTOMATIC READ MORE HACK ON BLOGGER WITH THUMBNAIL

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code

</head>

• Copy the code shown below and paste it Before/above </head>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var s=a.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)}}a=s.join("")}b=(b<a.length-1)?b:a.length-2;while(a.charAt(b-1)!=' '&&a.indexOf(' ',b)!=-1)b++;a=a.substring(0,b-1);return a+'...'}function createSummaryAndThumb(a){var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+'<div>'+removeHtmlTag(b.innerHTML,e)+'</div>';b.innerHTML=f}
//]]>
</script>
<script type='text/javascript'>
summary_noimg = 550;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200;
</script>

• Now find the code shown below

<data:post.body/>

• Replace it with the code shown below

<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>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:6px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more</a></span>
</b:if>
</b:if>

• Now save your template

CUSTOMIZATION TO THE WIDGET

summary_ noimg= 550; >> Length of the summary if the post does not have a thumbnail.
summary_img = 450; >> Length of the summery if the post have a thumbnail
null_thumb_height = 150; >> Height in pixels of the thumbnail.
null_thumb_width = 200; >> Width in pixels of the thumbnail.

Read more

ADD A REFLECTION EFFECT TO THE IMAGES IN BLOGGER POSTS

This tutorial will show you How To Add A Reflection Effect To The Images In Blogger Posts. This hack gives a nice reflection effect to the images at the bottom

REFLECTION EFFECT TO THE IMAGES IN BLOGGER POSTS DEMO

HOW TO ADD A REFLECTION EFFECT TO THE IMAGES IN BLOGGER POSTS

• Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code shown below
• Now Find the code shown below using [ctrl+F]

</head>

• Now Paste the Code Shown Below just above/before it

<script src='http://latest-hacks.googlecode.com/svn/gadgets/extras/reflection.js' type='text/javascript'/>

• Now save your template

• Now when you upload an image to blogger post click on Edit HTML tab and add aclass="reflect" attribute inside the image tag as shown below

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYKIbo5IeZ0kLk5OLBPToZQoq2LeGTpuH3w5YAj_doGenZfZ_GGIZYe-cq-fHqqrFRUNZtIOJGBrK65dPFkCiLVdB4mk2vqxBFXQCPGkujAGmxaBgiAE0HNw2RC9wrdR1pkvSKzr3JotM/s1600/reflection-effect-to-images.png" imageanchor="1" style="clear: right; float: center; margin-bottom: 1em; margin-left: 1em;"><img border="0" class="reflect" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYKIbo5IeZ0kLk5OLBPToZQoq2LeGTpuH3w5YAj_doGenZfZ_GGIZYe-cq-fHqqrFRUNZtIOJGBrK65dPFkCiLVdB4mk2vqxBFXQCPGkujAGmxaBgiAE0HNw2RC9wrdR1pkvSKzr3JotM/s1600/reflection-effect-to-images.png" /></a>

Read more

HOW TO REMOVE/HIDE PLUS LOGO FROM ADDTHIS WELCOME BAR

In my previous post I have guide you How to install Addthis welcome bar to blogger.Now in this tutorial i will show you How to Remove/Hide plus Logo From Addthis Welcome Bar. There is no any easy way to remove it, but with Css you can hide it. You just need to paste the code shown below in your blogger template and this plus logo will hide/remove permanentally from Addthis welcome bar.

HOW TO REMOVE/HIDE PLUS LOGO FROM ADDTHIS WELCOME BAR

• Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code shown below
• Now Find the code shown below using [ctrl+F]

]]></b:skin>

• Now Paste the Code Shown Below just above/before it

.addthis_bar_watermark {display: none;}

• Now Save your template

Read more