Changing "Post a Comment" With Image and Text

I really made a lot of research in order to implement this kind of trick in my blog, for I want that my unique visitors will give some comments regarding my posts for the development  of my writing skills, in delivering my tutorials and to be complemented as well. So let us jump with the tutorial on how to change or replace the text "Post a Comment" with an image and some encouraging texts.

Changing "Post a Comment" With Image and Texts

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML

Step 2. Look/Control F the code below,

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

Step 4. Replace the text in blue (data:postCommentMsg) above with one of the image URL  below

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm96SSmO5g5bQtgfmgqRNE17HUhEmsV8Dc_GuPjlGR7KnCKbHlLX0wHeXXiRvw_YLryTvYt7xVJunzBshkQK7UfKBo4_6JHGQTJR64OLHr0hI8G0cXcm7r20zGhs33wcn-DO8Gjobvywc/s1600/animated+comment+arrow+7.gif'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPnSaxQf5DHBzMs4aOHV_LXOvzDTfb4EgMjMzgb46LHzcbEE1-3O_c_chAcYwJNwOBV6TwmGWKyPL-aNHCWB6ts2wkzhogw0zNpRkQtHwb9xX3jpC8tC9vGJBeIPFGzsxU1THNMBnBn0A/s1600/colored+comment++2.png'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFbVOT8qBFpEaFTLYGPbeidgVMfQp_ewpOwx0AoAeXbkbobw_rW7b0NojKXn3XKMPn1t4vYAh5CPPW84HRwuYqD1yhhHUApnSWaeYJX4qNwEt7pFUGMHpHyeIFiJN9sbhKsOJYz7SdiIk/s1600/comment+9.gif'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiflIab-BHVWVIIfew0Lt53e4fYBfpGnEMSWnT4sZpVP8522Y_K6Cb9QFTeTI3WMlngGMiyZUJM3cjanGMK2hC9HL-PyM8v90ii5UDFtMhxemtJ60OmUixtZHZ-oGng1_ISQKE4kM-x2tA/s1600/comment+cloud+3.png'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZl-uEG9GFLMzmciPgmRcpI8AfQu-1K8d3h8U2r3SQ6kpJ_BnZaPc0JWfF59FvascHCeSFV0vAxwk5dKL8xJe8PQ7FBB36cpo3UJ4ledZp557PDwhWLSr7J4QFW77LFch8HXJ3D5b52y8/s1600/leave+a+comment+8.png'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgggsyrOZxj7Z9rnihgwNBEyzBaU5b-SemxS9tTp5n3m9WEa4JswCBwQf91RIzAnBd4CLHODrAIj6LGsLCDKq_9cFy1fKysTz8cL2qgUJJofDEbIS6FexdrPM0lcNuP7mSAFb0kcrdwL7c/s1600/comment+here+blue+4.gif'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo5E3HSU-s6hKvbxhCszrjkJBRtPsZwdF1ds3H9TwNjPkV7u7YORG91onE7Xy_0qhWFfd-_TUaWVJEqgODf-_nc64-Z_7pC-zCu6pPadcODEUbi1J53kbSy836CD_dXT8vveIXwjd5DgI/s1600/leave+a+comment+1.png'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixss453DmIttyJNYwFm0cJyRvG-LiTpH1dfGXGm6QtKOX78mUfU8-RzuiocvZn9RHl0nmphkfHVGZrXcwQR2drWRzsW2aKsf62aZAjNy_if1FFv0wN6SV3PZgmTAfVP_r6EJ43H3AgDhE/s1600/comment+here+flowers+5.png'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB32EooBVNAmq9ScXXRd3mW4nL1WlXkbOlzRsrXXkouPtVObBervCi52Gfz4cEXLN6CfbvQoHnTnnYTYzhM4A8NQxCP7Vu9LwUs9WadXm722WmeQAkhscqGoyxmslvRNLh_LmEEBKH1PsI/s800/what-question-mark.gif'

img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf9n0CLUcqncxkJT124ylfsfdiFngsERSwu_ciCYh4rO9Iqz_9Q_RYQucCxEXhMRCj4pm0w_kgyRSCH-zaV3bDztRlRyQDvDqntKuhnomAgyzvWJknx-keRIjMWyLVMLJYIdvWM5fM9o/s1600/thinking+man.gif'

Step 5. If you want to add some encouraging text beside your selected image, place it in behalf of the text Your Text Here

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

Step 6. Click preview to see the initial effect and then hit the Save button.


 In the above trick about replacing the texts "Post a Comment"  with an image or texts in order to encourage our viewers to leave a comment in our articles made. But the texts that we had put are not properly styled, so let us put some css on it to make it beautiful.

Customize Texts Beside the Image in "Post a Comment"

Step 1. Go to Blogger >> Template (Always Back-up Template) >> Edit HTML,

Step 2. Find/Control F the tag ]]></b:skin> and just above it paste the code below,

#comments h4 {
color: #4E555A;
font-size: 23px;
font-family: Arial, Verdana !important;
line-height: 1.6em !important;
font-weight: bold;
margin: 0 0 20px;
padding: 10px 0 0;
}

Short Customization (Optional):

1. Change #4E555A to change the color of the text beside the image. You can select hexadecimal colors here..
2.  Replace the value of font- size (23px) in order to change the size of the text.

Step 4. Always click Preview to see the initial result of the code applied then hit the Save button and you are done.To add texts below the line "Post a Comment", click here for the tutorial.
Hope you enjoy this short post and if you have some questions, don't forget to leave a comment below.
Subscribe to receive our free tutorials via email. Hope you like this post and Enjoy Blogging my friends!!!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook