Add A Unique Reply Button To Blogger Comments

8:00 AM |

Obviously lots of you have added the reply option to your blogs comments so i thought i would add some extra features to it.In the original tutorial we added the Text '[Reply to comment]' so lets spice it up a little and replace that text with a button or image.Also i have added a title to the reply option and set it to float on the outside of the comment body, a better option with better design.

If you haven't added the old reply option we will show you how all the steps required, If you have already added the text reply option to your blogger comments i will show you how to change the text to an image or button.


How To Add Reply Button To Blogger Comments


Step 1. In your Blogger Dashboard Click 'Design' > 'Edit Html' > Tick the 'Expand Widget Templates' box.


Step 2. Find the following code in your blogs Html (Click Ctrl and F for a search bar to help find the code):

<data:commentPostedByMsg/>


Step 3. Choose the Reply button you want for your blog and add the corresponding code Directly Below / Under <data:commentPostedByMsg/>

Button 1.


Button 1 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMXpGUnq_lI/AAAAAAAAB50/s4Ox50TFl5E/s1600/Reply+Button+1.jpg' style='float:right;' title='Reply To This Comment'/></a></span>


Button 2.


Button 2 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TMXpHXw481I/AAAAAAAAB54/KzG70HvbrcQ/s1600/Reply+Button+2.gif' style='float:right;' title='Reply To This Comment'/></a></span>


Button 3.


Button 3 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers ' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TMXpHlhsnxI/AAAAAAAAB58/wSopo-ERW5E/s1600/Reply+Button+3.jpg' style='float:right;' title='Reply To This Comment'/></a></span>


Button 4.


Button 4 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers ' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://4.bp.blogspot.com/_rKG-ziTSNUQ/TMXpH8OvBlI/AAAAAAAAB6A/DKWa4_r1wLE/s1600/Reply+Button+4.jpg' style='float:right;' title='Reply To This Comment'/></a></span>


Button 5.


Button 5 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers ' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://2.bp.blogspot.com/_rKG-ziTSNUQ/TMXpIXB0wvI/AAAAAAAAB6E/n1x-Bs_LAJE/s1600/Reply+Button+5.jpg' style='float:right;' title='Reply To This Comment'/></a></span>


Button 6.


Button 6 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers ' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMXpIgwWp-I/AAAAAAAAB6I/skcjwo6fC2I/s1600/Reply+Button+6.gif' style='float:right;' title='Reply To This Comment'/></a></span>


Button 7.


Button 7 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers ' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TMXpJD64CbI/AAAAAAAAB6M/2jnYoOG3qrg/s1600/Reply+Button+7.png' style='float:right;' title='Reply To This Comment'/></a></span>


Button 8.


Button 8 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers ' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://2.bp.blogspot.com/_rKG-ziTSNUQ/TMXpJb9gGAI/AAAAAAAAB6Q/eFhs4ECKCMg/s1600/Reply+Button+8.gif' style='float:right;' title='Reply To This Comment'/></a></span>


Button 9.


Button 9 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers ' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMXpJioB-jI/AAAAAAAAB6U/yD51RVf_IEU/s1600/Reply+Button+9.gif' style='float:right;' title='Reply To This Comment'/></a></span>


Button 10.


Button 10 Code:


<a href=' http://createtheblogger.blogspot.com/ '><img alt='For Bloggers ' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID-HERE&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'><img src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TMXpF4HbqyI/AAAAAAAAB5w/XtxlKLfWL7Q/s1600/Reply+Button+10.gif' style='float:right;' title='Reply To This Comment'/></a></span>



Important

You must now add your blogs ID to the code, replace YOUR-BLOG-ID-HERE in red with your blogs ID.You can get your Blogs ID by going to your blogs Design Page, Posting Page, Settings Page or any page accessed from your dashboard.

Your Blogs ID will be in the address bar like this :




Once you have added your Blogs ID save your template and the reply button has been added to your Blogger comments.

OK the next tutorial is Only For People that have already added the text reply from our previous post.For everybody else the button should now be on your blog so check it out..



Replace The Text Reply With An Image

If you added the text reply you can change it to a Button.
To do this follow the steps as above then find this code in your template :


[Reply to comment]


Now Replace that code with one of the fllowing (See The Button Demos Above) :

Button 1

<img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMXpGUnq_lI/AAAAAAAAB50/s4Ox50TFl5E/s1600/Reply+Button+1.jpg' style='float:right;' title='Reply To This Comment'/>

Button 2

<img src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TMXpHXw481I/AAAAAAAAB54/KzG70HvbrcQ/s1600/Reply+Button+2.gif' style='float:right;' title='Reply To This Comment'/>

Button 3

<img src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TMXpHlhsnxI/AAAAAAAAB58/wSopo-ERW5E/s1600/Reply+Button+3.jpg' style='float:right;' title='Reply To This Comment'/>

Button 4

<img src='http://4.bp.blogspot.com/_rKG-ziTSNUQ/TMXpH8OvBlI/AAAAAAAAB6A/DKWa4_r1wLE/s1600/Reply+Button+4.jpg' style='float:right;' title='Reply To This Comment'/>

Button 5

<img src='http://2.bp.blogspot.com/_rKG-ziTSNUQ/TMXpIXB0wvI/AAAAAAAAB6E/n1x-Bs_LAJE/s1600/Reply+Button+5.jpg' style='float:right;' title='Reply To This Comment'/>

Button 6

<img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMXpIgwWp-I/AAAAAAAAB6I/skcjwo6fC2I/s1600/Reply+Button+6.gif' style='float:right;' title='Reply To This Comment'/>

Button 7

<img src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TMXpJD64CbI/AAAAAAAAB6M/2jnYoOG3qrg/s1600/Reply+Button+7.png' style='float:right;' title='Reply To This Comment'/>

Button 8

<img src='http://2.bp.blogspot.com/_rKG-ziTSNUQ/TMXpJb9gGAI/AAAAAAAAB6Q/eFhs4ECKCMg/s1600/Reply+Button+8.gif' style='float:right;' title='Reply To This Comment'/>

Button 9 

<img src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMXpJioB-jI/AAAAAAAAB6U/yD51RVf_IEU/s1600/Reply+Button+9.gif' style='float:right;' title='Reply To This Comment'/>

Button 10

<img src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TMXpF4HbqyI/AAAAAAAAB5w/XtxlKLfWL7Q/s1600/Reply+Button+10.gif' style='float:right;' title='Reply To This Comment'/>

OK that's your new Improved Reply Option added to your comments ! We have lots more tips on Comment Tips.
 
Gadgets By For Bloggers