Adding a Stylish Reply Button for Blogger Blog

Posted on the 26 January 2013 by Babanature @proudlyonenaija

Whether you like it or not, you need this widget as long as you’re using blogger blog. Most customize templates do not have a reply comment button, right? Yeah I know! So I took the time to wonder around doing my usual research and finally boom… i got something incredible. I’m just asking; would you like to know how to put this wonderful stylish button to your blog? Hey! If you have a blog that doesn’t have a reply button then hurray for you because today, we are going to be discussing it.

So are you ready for the tutorial? If yes can we proceed?

HOW TO ADD A COOL REPLY BUTTON TO BLOGGER COMMENT

Must Read: ADDING A STYLISH POPULAR POST WIDGET FOR BLOGGER BLOG

Note: Before we continue with this tutorial, it is advisable to backup your template and to do this, go to your blogger dashboard >>> Click Template >>> by the top right you’ll see Backup/ Restore >>> Click Download full template. You have successfully completed backing up your template now let’s go to the main show shall we!

First off, go to your blogger dashboard >>> Click Template >>> Click Edit HTML >>> Tick Expand Widget Templates

Now search for the below code

<data:commentPostedByMsg/>

Remember: To make the search more easy, simultaneously press the ctrl + f keys to bring out a search bar below your browser.

Have you seen the above code? Now paste the below code right below the above code

<a href='http://onenaijablog.com'><img alt='Onenaijablog' src='http://1.bp.blogspot.com/-U48n00nknhY/UQMKZdf9lyI/AAAAAAAABCg/7DUFFEKCBmI/s1600/onenaija-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;'>Reply this</a></span><a href='http://onenaijablog.com'><img alt='Onenaijablog' src='http://1.bp.blogspot.com/-U48n00nknhY/UQMKZdf9lyI/AAAAAAAABCg/7DUFFEKCBmI/s1600/onenaija-tips.png'/></a>

Note: if you look inside the code, you’ll see “YOUR-BLOG-ID-HERE” now change it with your blogs id. Have you done that? Hurray! We have successfully inserted a reply this widget to our comments

Next stop is to design the reply button to make it look slickly slick. So are you ready guys? If yes, let’s continue with the tutorial…

Now search for the below code

.post h3 {

Have you seen it? Now paste the below code right above it

.h12 {

-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;

-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;

box-shadow:inset 0px 1px 0px 0px #fff6af;

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23) );

background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');

background-color:#ffec64;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

border:1px solid #ffaa22;

display:inline-block;

color:#333333;

font-family:arial;

font-size:15px;

font-weight:bold;

padding:1px 21px;

text-decoration:none;

text-shadow:1px 1px 0px #ffee66;

}.h12:hover {

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64) );

background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');

background-color:#ffab23;

}.h12:active {

position:relative;

top:1px;

}

/* This imageless css button was generated by onenaijablog */ 

Save your work and go check your blog and see the awesome reply this button. Now your readers have more reasons to come back to your blog.

Must Read: LATEST POST WIDGET WITH THUMBNAIL FOR BLOGGER BLOG

Do you still have anymore question pertaining to this post? Then please drop them by using the comment box below. Do you have comments or thoughts running through your mind? Then drop them using the comment box below. Remember that your comments and thoughts are much appreciated and most welcomed.

Do you find the post helpful? Then do click the like button, share us and recommend us to friends because you never know which of your friends might need it.

Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated

Enter your email address below:

Powered by OnenaijaBlog