How To Add Comment Bubble In Blogger

Do you want to make your blog look different and nice? Add this comment bubble on your blog. You can add this widget in second. Follow this easy steps :


1. Go to your Dashboard > Design > Edit HTML > Check Expand Widget Templates.


2. Find this code :

<h3 class='post-title entry-title'>

3. Paste this code below, under it.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

4. Now, this code :

</head>

5. Paste this code below above it.

<style type="text/css">
.comment-bubble {
float: right;
background: url(PUT YOUR BUBBLE IMAGE URL HERE) no-repeat;
width: 55px;
height: 38px;
font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;
}
</style>

6. Insert your own bubble image URL. Here 43 of Comment Bubble Collection Icon. Download it here.

7. Host the icon by yourself to avoid exceeded bandwidth if you using image host by others. Also you can change the width and height.

8. Preview it. If it looks fine. save it. DONE!

How To Add Hover Image in Blogger

Now you can hover image in blogger with this trick. You can add to your blog only with 4 steps. This is very simple and easy trick. So, let's start. 

Just follow this 4 steps :

1. Go to your Dashboard > Design > Edit HTML

2.Find this code </head> tag .

3. Paste code below, before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

4. Save template. Hit it! DONE! :D

Watch DEMO HERE.

Try it & good luck!   

credit to :

blogger tips & tricks

How To Change Your Subscription Email Form For Blogger (RSS Feed)

Wanna customize your feeds e-mail subscription look? Make it look nice and beautiful with some style. Try to change it into something like this :

But, for proceeding this, make sure have burnt your feeds with www.feedburner.com/. So let's start our customization. Follow this steps :

1. Go to Dashboard > Design > Add Page Element.

2. Choose HTML/JavaScript Widget 

3. Put this code  in it :

<div align="center"><a title="Subscribe to my feed" rel="alternate" type="application/rss xml" href="http://feeds.feedburner.com/howtohouse"> </a><a href="http://feeds.feedburner.com/howtohouse"><img style="border:0" src="http://feeds.feedburner.com/~fc/howtohouse?bg=FFCC00&amp;fg=444444&amp;anim=1" alt="" width="88" height="26" /></a><a href="http://feeds2.feedburner.com/howtohouse" rel="alternate" title="Subscribe now to avail the unthinkable" type="application/rss xml"><img border="0" alt="" style=" padding-bottom:20px; margin: 0pt 10px 10px 0pt; float: left; width:100px; height:100px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHs71QOYov8NOWH8OS1sO3Ra2hX3f0p7n_96ZoJ68hBH9AAuWvSenEZ3m6wxzn-A7oD8Fu08J4wgcpCoUlAOT8gzbZmPoj8t0KIOVIgAvrOja_hOuNAlj17sI0YGlEfdUCQYMI2_tBex_/s400/MBT-RSS-FEED.gif"/></a><p><a href="http://feeds2.feedburner.com/howtohouse" rel="alternate" title="Subscribe to my feed" type="application/rss xml">Subscribe HOW-TO HOUSE now! </a><span style="color: #006699; font-weight: bold;">Enter your email address:</span></p>
<style>
input.mbt1 {
color:#fff;
font: bold 10px Arial, sans-serif;
background:#F39100;
border:0;
padding:3px;
}
input.mbt1hov {
color:#fff;
font: bold 10px Arial, sans-serif;
border:2px solid #F39100;
padding:3px;
}
</style>
<form action="http://feedburner.google.com/fb/a/mailverify" style="padding: 5px; " target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=howtohouse', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input style=" color:#FFCC66; background: #fff; border:2px solid #FFCC66; width: 150px;" name="email" type="text"/><input value="howtohouse" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/> <input onmouseover="this.className='mbt1 mbt1hov'" onmouseout="this.className='mbt1'" value="GO!" class="mbt1" type="submit"/></form><br/></div>

4. Change howtohouse to your feeds name.

Change

http://feeds2.feedburner.com/howtohouse

to 

http://feeds2.feedburner.com/YOUR FEEDS NAME HERE

5. Change #FFCC66  & #006699 the color based own your template theme.

6. You can change the icon image too by change this image URL. You can search icon at Google search engine, keyword = "RSS feed icon".

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIHs71QOYov8NOWH8OS1sO3Ra2hX3f0p7n_96ZoJ68hBH9AAuWvSenEZ3m6wxzn-A7oD8Fu08J4wgcpCoUlAOT8gzbZmPoj8t0KIOVIgAvrOja_hOuNAlj17sI0YGlEfdUCQYMI2_tBex_/s400/MBT-RSS-FEED.gif

7.  And, it's FINISH! WELL DONE!

Save it & preview your work!! Nicely done! :D

How To Change "Post a Comment" Text of Blogger Comment Form

Post your Comment

Above your comment form, you can see "Post a Comment" text. Do you want to change it to another text like "Leave a comment", "Drop your words", "Give your feedback" ? If you like to replace it with your own creative text. Here is the steps :

1. Go to your blogger Dashboard > Design > Edit HTML.

2. Check on "Expand Widget Templates".

3. Find this code : 

<data:postCommentMsg/>

4. You will find the code twice. Change it to your own creative text. 

Example : "Share your opinion"

 

5. Save your template. DONE! 

Try it guys !

How To Add Snow Effect on Blogger

Do you want to add a Falling Snow Effect at your blog. It's easy and you can have it with this very simple steps. Only in 3 steps :

1. Go to your Dashboard > Design > Page Element.

2. Add a Gadget > Add HTML/Javascript. Paste this code in it :

<script language="JavaScript" src="https://sites.google.com/site/bloggertricksandtoolz/snowstormeffectbywww.bloggertricksandtoolz.com.js">

/***********************************************

Sharing Credits : http://place2how-to.blogspot.com/

***********************************************/

</script>

3. Hit the save button. DONE! 

Preview it to look the Snow Effect Widget.

ENJOY!!