Salman Warriach.blogspot.com

Add Google Adsense to Blogger Header (Above the Title)

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bW2UCe2gKqIMrb842l96uyUDA_M6FMMlqyZVk3357tNt74_DvLNu6hHf1os2OliErlZi6jzpLIyVe4EmX8iuMxwCNZ7xQRuDF2I_HL6-Osmak9F74BxI8RxAnY5CLAy47mrZx5XBWXzD/s1600/add+Google+Adsense+to+Blogger+Blogspot+header+increase+revenue.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4bW2UCe2gKqIMrb842l96uyUDA_M6FMMlqyZVk3357tNt74_DvLNu6hHf1os2OliErlZi6jzpLIyVe4EmX8iuMxwCNZ7xQRuDF2I_HL6-Osmak9F74BxI8RxAnY5CLAy47mrZx5XBWXzD/s200/add+Goog le+Adsense+to+Blogger+Blogspot+header+increase+revenue.png" width="200" /></a></div> In the past tutorials ( See: Soc ial Media Buttons beside Adsense ads & Adsen se inside Blogger Header ) i've shared several tricks for Adsense ads placement that may help you to increase your adsense earnings. Now, i will show you how to add Google Adsense above your header, for instance just above the title of your Blogger blog. This can be done by adjusting your template to give you the option of adding more than one widget to the header area. Add a new element to Blogger header 1. If you are using the old Blogger interface:  <ul><li>Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template </li></ul> If you are using the new Blogger interface:  <ul><li>Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template </li></ul> 2. Next try to find (CTRL + F) this piece of code: <blockquote class="tr_bq"><div id='header-wrapper'></blockquote> ...if you can't find that one, search for this one: <blockquote class="tr_bq"><div class='region-inner header-inner'></blockquote> 3. Immediately after one of these lines, you'll see this code: <blockquote class="tr_bq"><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></blockquote> 4. Replace the values in red like in this example below: <blockquote class="tr_bq"><b:section class='header' id='header' maxwidgets='3' showaddelement='yes'></blockquote> 5. Save the Template. Adding the Adsense ad unit above the Blogger header 1. Navigate to Design > Page Elements and view the new option to add a gadget to the header area <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQsKDv-w9OeOYn9AkF2yNMliZC5yI_TAwmxbRcDqbVkjc_mH323ETMTJZVQ-m0lZlzWYwyLqVO5NH_U8uewJhlVQQhv_EeMu22zXbRRvv5YwQCcDvhnXcuzNA4KTiLwGU8hjxKeI8o5yX/s1600/add+adsense+ad+unit+above+header+inside+header+above+blogger+blogspot+title.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQsKDv-w9OeOYn9AkF2yNMliZC5yI_TAwmxbRcDqbVkjc_mH323ETMTJZVQ-m0lZlzWYwyLqVO5NH_U8uewJhlVQQhv_EeMu22zXbRRvv5YwQCcDvhnXcuzNA4KTiLwGU8hjxKeI8o5yX/s400/add+adse nse+ad+unit+above+header+inside+header+above+blogger+blogspot+title.jpg" width="400" /></a></div> 2. Click on Add a Gadget link and select the Google Adsense gadget. Choose the type of ad unit you want. For this example I chose a new linked 728x15 ad unit from the dropdown format menu for an AdSense ad that would sit above the blog title. Configure colors if necessary. Color blending is usually done automatically by Blogger according to the color schema of your template. 3. Click Save Now View your Blog to see your new Google Adsense unit. If all is going well, your new AdSense ad unit should appear something like in the image below: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEIFYn8oacddhNwSrheQJBYZnX3ijqIO37HCJMOFNXieGiFq_GTDm4Ku99oZmWBhrzk6zp7fALSuZiQUoFGwgTDdf8fFrNU3UZkb3mM-PuX4iGjhLIO821G9PrGssijmdJq_VnkPHINPaQ/s1600/how+to+add+adsense+ads+below+blogger+blogspot+navbar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEIFYn8oacddhNwSrheQJBYZnX3ijqIO37HCJMOFNXieGiFq_GTDm4Ku99oZmWBhrzk6zp7fALSuZiQUoFGwgTDdf8fFrNU3UZkb3mM-PuX4iGjhLIO821G9PrGssijmdJq_VnkPHINPaQ/s640/how+to+a dd+adsense+ads+below+blogger+blogspot+navbar.png" width="640" /></a></div> This is a very good Adsense placement, i'm sure you're gonna like it If you have a any questions, please feel free to ask below.</div>

Add Google Adsense to Blogger Header (Above the Title)

In the past tutorials ( See: Soc ial Media Buttons beside Adsense ads & Adsen se inside Blogger Header ) i've shared several tri...

+ Read more »

How to add an image next to Blogger Post Title

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAVP3lqSAfLTE6aJuDGYwHTQdPcOZIC8iTfAdi-aB-BSu7ayuhLGVOr3mDq32OlWlE0QKv_RHHaQeigK2YRrNI7OiMEjMrNUK3-NeTm0Q1LWqnt8tmvxXeqL7aJoH4BGq7BtmuS9wGNDJ/s1600/how-to-add-an-image-next-to-Blogger-post-title.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger posts, gadgets for blogger, blogger tutorials" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaAVP3lqSAfLTE6aJuDGYwHTQdPcOZIC8iTfAdi-aB-BSu7ayuhLGVOr3mDq32OlWlE0QKv_RHHaQeigK2YRrNI7OiMEjMrNUK3-NeTm0Q1LWqnt8tmvxXeqL7aJoH4BGq7BtmuS9wGNDJ/s1600/how-to- add-an-image-next-to-Blogger-post-title.png" title="Add an Icon to Blog Post Titles in Blogger" /></a></div> It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or an icon to our post title, as I have put in the title of the post in the screenshot above. <h2>Show Image Icon before Blogger Post Title</h2>Step 1: First thing first you have to do is to prepare an image. After that you'll need a direct link to an image before you proceed further. You can upload it to<a href="http://tinypic.com/"> tinypic.com</a> and copy the URL located in the Direct Link for Layouts box. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title. Step 2: Go to <a href="http://www.blogger.com/home">Dashboard</a> - Template - Edit HTML - Proceed if needed <ul></ul>Step 3. Click anywhere inside the code area to find (using CTRL + F) the following code: <blockquote class="tr_bq"><b:includable id='post' var='post'></blockquote>Step 4. After you found it, click on the left arrow next to it to expand the widget's code <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj53mDlW5o9T4GKNyydMk39J2TH9jH9_IiLXe7WyvAqOCe_urGOSShFhIEooJsRe0_h4FLNxB1Flcvji0ig1eUeWooRqyCbVGAsthEp0jUGZ60dx2gPhtU79Fx5rfx83S2swnZWzEkYKjO_/s1600/how-to-add-an-image-icon-before-post-title-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj53mDlW5o9T4GKNyydMk39J2TH9jH9_IiLXe7WyvAqOCe_urGOSShFhIEooJsRe0_h4FLNxB1Flcvji0ig1eUeWooRqyCbVGAsthEp0jUGZ60dx2gPhtU79Fx5rfx83S2swnZWzEkYKjO_/s400/how-to-a dd-an-image-icon-before-post-title-in-blogger.png" width="400" /></a></div> Step 5. Then delete it until you reach to <div class='post-header'>: <blockquote class="tr_bq">              <b:includable id='post' var='post'>   <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>     <b:if cond='data:post.firstImageUrl'>       <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>     </b:if>     <meta expr:content='data:blog.blogId' itemprop='blogId'/>     <meta expr:content='data:post.id' itemprop='postId'/>     <a expr:name='data:post.id'/>     <b:if cond='data:post.title'>       <h3 class='post-title entry-title' itemprop='name'>       <b:if cond='data:post.link'>         <a expr:href='data:post.link'><data:post.title/></a>       <b:else/>         <b:if cond='data:post.url'>           <b:if cond='data:blog.url != data:post.url'>             <a expr:href='data:post.url'><data:post.title/></a>           <b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h3>     </b:if></blockquote>The code to be deleted: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAhfWXo7Uxj313EhSH5cGvZSi3JD01ogjDINoUhG6nNXNoAzAUOsj9zp-caTbJGGYUUI1_-dOVt9Ip78tSAej5uPmIMDDi0mkwCfM2PfMGje5bu4cboB2uEXOiMTIxbuBsxfm22kdFDSUX/s1600/delete-code-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAhfWXo7Uxj313EhSH5cGvZSi3JD01ogjDINoUhG6nNXNoAzAUOsj9zp-caTbJGGYUUI1_-dOVt9Ip78tSAej5uPmIMDDi0mkwCfM2PfMGje5bu4cboB2uEXOiMTIxbuBsxfm22kdFDSUX/s400/delete-c ode-blogger.png" width="400" /></a></div> <div class="separator" style="clear: both; text-align: center;"></div>Step 6: Paste the following code in the place of the deleted code in Step 5: <blockquote class="tr_bq"><b:includable id='post' var='post'>   <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>     <b:if cond='data:post.firstImageUrl'>       <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>     </b:if>     <meta expr:content='data:blog.blogId' itemprop='blogId'/>     <meta expr:content='data:post.id' itemprop='postId'/>     <a expr:name='data:post.id'/>     <b:if cond='data:post.title'>       <table><tr>         <td class='posttitle'>            <img src='IMAGE-URL'/></td>         <td><h3 class='post-title entry-title' itemprop='name'>       <b:if cond='data:post.link'>         <a expr:href='data:post.link'><data:post.title/></a>       <b:else/>         <b:if cond='data:post.url'>           <b:if cond='data:blog.url != data:post.url'>             <a expr:href='data:post.url'><data:post.title/></a>           <b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h3>         </td>         </tr></table>             <style>         h3.post-title {           margin: 0px !important;         }       </style>         </b:if></blockquote> Step 7: Replace the IMAGE-URL text in blue color from above with the URL address of your image (the one that you've gotten from Step 1). Step 8: Save the Template and that's it! Enjoy :) </div>

How to add an image next to Blogger Post Title

It has often been said that a picture says a thousand words, so in the struggle for the attention of the reader, we can add a picture or a...

+ Read more »

How to remove Blogger Picture/Image Shadow and Border

<div dir="ltr" style="text-align: left;" trbidi="on">If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the screenshot below): <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHoE7rPeYH81s70Ib7tBMZOYiSCCFFAFFUUj2-UaI1jcHw4oBX35apbV-wAniMFkews-SQbuFe0YattxscQp-0pW-O0mcIJeEXIc2snztmvadCPE2OCFQIu_h5-bV_NDUSIottJ5hC5K2V/s1600/how+to+remove+borders+or+shadows+around+images+in+blogger+blogspot.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHoE7rPeYH81s70Ib7tBMZOYiSCCFFAFFUUj2-UaI1jcHw4oBX35apbV-wAniMFkews-SQbuFe0YattxscQp-0pW-O0mcIJeEXIc2snztmvadCPE2OCFQIu_h5-bV_NDUSIottJ5hC5K2V/s640/how+to+r emove+borders+or+shadows+around+images+in+blogger+blogspot.png" width="640" /></a></div>If you are using the old Blogger interface: <ul><li>Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.</li></ul> If you are using the new Blogger interface: <ul><li>Go to Dashboard - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. </li></ul> <blockquote class="tr_bq">.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {   padding: none !important;   border: none !important;   background: none !important;   -moz-box-shadow: 0px 0px 0px transparent !important;   -webkit-box-shadow: 0px 0px 0px transparent !important;   box-shadow: 0px 0px 0px transparent !important; }</blockquote> Now your blogger images should appear without any border or shadow. Cheers! Update: If the above method doesn't work for you, do the following: - Go to Blogger's Dashboard > Design (Layout) > Edit HTML - Thick the "Expand widget templates" checkbox; - Search (CTRL + F) for the following code: <div> <blockquote class="tr_bq">  border: 1px solid $(image.border.color);   -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);   -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);   box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);</blockquote><div> </div></div><div>- Delete it and Save your template.</div></div>

How to remove Blogger Picture/Image Shadow and Border

If you want to get rid of those annoying shadows and borders around blogger images, then follow the next steps (see the difference in the ...

+ Read more »

Replace Older, Newer And Home Blogger links with an image or text

<div dir="ltr" style="text-align: left;" trbidi="on">Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts. The number of the posts on these pages will be the same as the number of the posts on your main page. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRjB5tcFPGiywaB-ZCQWG_h-V1B1-Dq-BfhVr6nT9A2j1IndbWerdjOTACKF1G61XT_T8wQoK1GfiNn_dzbdHEPH-MO5xW4Lk4UbLyOrtvg6iWV3ZC2vC4wBYF4Y8K_vViUyLAYBQ8RFi/s1600/how+to+replace+older+newer+posts+and+home+links+in+blogger+blogspot+with+images+picture.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRjB5tcFPGiywaB-ZCQWG_h-V1B1-Dq-BfhVr6nT9A2j1IndbWerdjOTACKF1G61XT_T8wQoK1GfiNn_dzbdHEPH-MO5xW4Lk4UbLyOrtvg6iWV3ZC2vC4wBYF4Y8K_vViUyLAYBQ8RFi/s1600/how+to+ replace+older+newer+posts+and+home+links+in+blogger+blogspot+with+images+picture.png" /></a></div> What we can do: <a href="http://www.blogger.com/blogger.g?blogID=3305659502764981386#gotoA" style="color: #0000ee; text-decoration: none;">A. Change the text of Newer, Older, Home links</a> <a href="http://www.blogger.com/blogger.g?blogID=3305659502764981386#gotoB" style="color: #0000ee; text-decoration: none;">B. Place a picture beside them (a small icon, arrow, or whatever...)</a> <a href="http://www.blogger.com/blogger.g?blogID=3305659502764981386#gotoC" style="color: #0000ee; text-decoration: none;">C. Add an image instead of the links</a> So let's start customizing them... 1. Log in to your <a href="https://www.blogger.com/home">Blogger Dashboard</a>, go to Template > Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpKiuhl7WKJ44dCRMZ7TDBa6UZEGlemS88ZcEcd1cBZFbb37r_qnS7gget8q-84qHDdPlYTwCrBbtgp3X9RLtcv-xuOR8MxO_rbqlN6f_u5_2YF74DgmUgorpnic3H23xfYnXmrgMQy3K/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTpKiuhl7WKJ44dCRMZ7TDBa6UZEGlemS88ZcEcd1cBZFbb37r_qnS7gget8q-84qHDdPlYTwCrBbtgp3X9RLtcv-xuOR8MxO_rbqlN6f_u5_2YF74DgmUgorpnic3H23xfYnXmrgMQy3K/s400/blogger_ blogspot_template_edit_html_tutorial.png" width="400" /></a></div> 2. Click anywhere inside the code area and find - using CTRL + F keys - the following code: <blockquote class="tr_bq">    <b:if cond='data:newerPageUrl'>             <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>           </b:if>     <b:if cond='data:olderPageUrl'>             <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>           </b:if>     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></blockquote>Or find in this code the following fragments which corresponds to each page links <ul><li><data:newerPageTitle/> represents Newer Posts link</li><li><data:olderPageTitle/> represents Older Posts link</li><li><data:homeMsg/> represents Home link</li></ul> Now change these fragments of codes as it follows: <h3><div id="gotoA" style="color: #4992dc; text-decoration: none;">A. Change the text of Newer Posts, Older Posts and Home Links</div></h3> You need to REPLACE following parts in original code with ANY TEXT you like: <ul><li>replace <data:newerPageTitle/> with, for example NEXT POST </li><li>replace <data:olderPageTitle/> with, for example PREVIOUS POST</li><li>replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE</li></ul><ul></ul> <h3><div id="gotoB" style="color: #4992dc; text-decoration: none;">B. Place a picture beside Newer Posts, Older Posts and Home links </div></h3> Add the below code just at the beginning of each of the colored fragments of codes from step 2. <img src="URL Address"/> So it should look like this: <blockquote class="tr_bq"><img src="URL Address"/><data:newerPageTitle/> </blockquote>Note: Replace URL Address text with the url address of the image you want to appear <h3><div id="gotoC" style="color: #4992dc; text-decoration: none;">C. Replace Older Posts, Newer Posts and Home links with an image/picture</div></h3> You can place any kind of picture you want All you have to do is use this code for the pic: <blockquote><img src="URL ADDRESS"/></blockquote>...just replace URL ADDRESS, with the URL of your hosted picture ...and in code, REPLACE the original link code for text with picture code <ul><li>replace <data:newerPageTitle/> with the pic for newer (next) posts</li><li>replace <data:olderPageTitle/> with the pic for older (previous) posts</li><li>replace <data:homeMsg/> (only the first one) with the pic for homepage</li></ul><div style="text-align: center;">Screenshot</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXa1-rsCHTxdeQWX9fV7us7S60XLopVdAuY1j-xHpOfgULLiOh7skzLgA-36LHPFz2wHo9mVo7a8_6zwpwzMCy5X1smd3I3vy4-X2_-5DCvUQUBfCjDqXi6zGjnqnMN0SYY8xk746m1CAK/s1600/replace-blogger-older-newer-posts-with-an-image-icon-or-text.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, older posts, newer posts" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXa1-rsCHTxdeQWX9fV7us7S60XLopVdAuY1j-xHpOfgULLiOh7skzLgA-36LHPFz2wHo9mVo7a8_6zwpwzMCy5X1smd3I3vy4-X2_-5DCvUQUBfCjDqXi6zGjnqnMN0SYY8xk746m1CAK/s400/replace- blogger-older-newer-posts-with-an-image-icon-or-text.png" title="how to add an image or text to older, newer posts in blogger" width="400" /></a></div> 3. That's it! Preview and Save the Template.</div>

Replace Older, Newer And Home Blogger links with an image or text

Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will ta...

+ Read more »

How to change Blogger "Post A Comment" Message

<div dir="ltr" style="text-align: left;" trbidi="on">In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also, I will make available to you a few cool images or you can add your own image if you like... so let's get started. <div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3fWY1qHJTlCT4ric3v1KgqD9ShHGsW2Vm_8MWg6SMrJXttm7bjMKy-D3yQatdXJaZC3X3YcF7xxEXXv0hZmn7Zu044VhG11dFLOcXcIaBGblXn1OftAcxlzRP4L1ECWRJ11temzugxap/s1600/how+to+change+post+a+comment+in+blogger+blogspot+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP3fWY1qHJTlCT4ric3v1KgqD9ShHGsW2Vm_8MWg6SMrJXttm7bjMKy-D3yQatdXJaZC3X3YcF7xxEXXv0hZmn7Zu044VhG11dFLOcXcIaBGblXn1OftAcxlzRP4L1ECWRJ11temzugxap/s320/how+to+c hange+post+a+comment+in+blogger+blogspot+blog.png" width="320" /></a></div> How to replace Post a Comment with an image To replace  "Post A Comment" message in your Blogger / Blogspot blog follow the next steps: Step 1. Log in to Blogger, go to your <a href="http://www.blogger.com/home">Blogger Dashboard</a> >> Design >> Edit HTML Step 2. Tick the "Expand Widget Templates" checkbox. Step 3. Now search (CTRL + F) for the code marked in red: <blockquote class="tr_bq"><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/></a></blockquote> ...and for this one too: <blockquote class="tr_bq"><h4 id='comment-post-message'><data:postCommentMsg/></h4></blockquote> Step 4. Replace <data:postCommentMsg/> with one of the below images codes: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbHg44d9H7h1ZIpCSdd2p_9llrVCDKc-5CRAebtiBt6N6Yjx4o_6hb1aF7JadhBgEU4wiQfK1Z62tfZDqITOOdUTLiTu00nqGATUCqiElEpZnCkayMq8C7y291-hO2Jy_s2Rk-FfRY6s/s1600/leave+a+comment.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbHg44d9H7h1ZIpCSdd2p_9llrVCDKc-5CRAebtiBt6N6Yjx4o_6hb1aF7JadhBgEU4wiQfK1Z62tfZDqITOOdUTLiTu00nqGATUCqiElEpZnCkayMq8C7y291-hO2Jy_s2Rk-FfRY6s/s1600/leave+a +comment.png" /></a></div><blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbHg44d9H7h1ZIpCSdd2p_9llrVCDKc-5CRAebtiBt6N6Yjx4o_6hb1aF7JadhBgEU4wiQfK1Z62tfZDqITOOdUTLiTu00nqGATUCqiElEpZnCkayMq8C7y291-hO2Jy_s2Rk-FfRY6s/s1600/leave+a +comment.png" /></blockquote> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkPTLtOT_oqsATeMyJkuwB359cbPEJ-ERgMibhtD8kpQCPb-n28WazH3Q0ssOWDq9_OwoqThjyYZ-K4yeMkkFEPxYoy-wnhpPm22Mtmswaqp3K22qtXwhisMQ2_naA69U3Bw1xMgp0vLo/s1600/Post+a+comment+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkPTLtOT_oqsATeMyJkuwB359cbPEJ-ERgMibhtD8kpQCPb-n28WazH3Q0ssOWDq9_OwoqThjyYZ-K4yeMkkFEPxYoy-wnhpPm22Mtmswaqp3K22qtXwhisMQ2_naA69U3Bw1xMgp0vLo/s1600/Post+a+ comment+blogger.png" /></a></div><blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkPTLtOT_oqsATeMyJkuwB359cbPEJ-ERgMibhtD8kpQCPb-n28WazH3Q0ssOWDq9_OwoqThjyYZ-K4yeMkkFEPxYoy-wnhpPm22Mtmswaqp3K22qtXwhisMQ2_naA69U3Bw1xMgp0vLo/s1600/Post+a+ comment+blogger.png" /></blockquote> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bMpFbL1ejiPz6hnXydeFQC3I6Im3LoQw16EfufNEVpO0h7whX89cq5HCSdX6DJDJwKq6RfB_hZ04sg8rXZEdmtk34CxOOF2zLq5SkpqZPOHxrbL9jZ8ANFvhn4kdLSdJ8ep9KRHACMUe/s1600/animated+comment+arrow.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bMpFbL1ejiPz6hnXydeFQC3I6Im3LoQw16EfufNEVpO0h7whX89cq5HCSdX6DJDJwKq6RfB_hZ04sg8rXZEdmtk34CxOOF2zLq5SkpqZPOHxrbL9jZ8ANFvhn4kdLSdJ8ep9KRHACMUe/s1600/animate d+comment+arrow.gif" /></a></div> <blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bMpFbL1ejiPz6hnXydeFQC3I6Im3LoQw16EfufNEVpO0h7whX89cq5HCSdX6DJDJwKq6RfB_hZ04sg8rXZEdmtk34CxOOF2zLq5SkpqZPOHxrbL9jZ8ANFvhn4kdLSdJ8ep9KRHACMUe/s1600/animate d+comment+arrow.gif" /></blockquote> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42oYBxBOIEarVCVo3x28WiY0dPTQxi8hc2KOR78aW5LHprNlk3gkFBSnwIsKFc9ZEYnRyifDgtlJpSmyU5PXJ7QFpDWihVxzoEWVizof52i8rbcVxJ0yG7n6_1gZQPZ3aNDS0qiMghmET/s1600/leave+a+comment2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42oYBxBOIEarVCVo3x28WiY0dPTQxi8hc2KOR78aW5LHprNlk3gkFBSnwIsKFc9ZEYnRyifDgtlJpSmyU5PXJ7QFpDWihVxzoEWVizof52i8rbcVxJ0yG7n6_1gZQPZ3aNDS0qiMghmET/s1600/leave+a +comment2.png" /></a></div> <blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42oYBxBOIEarVCVo3x28WiY0dPTQxi8hc2KOR78aW5LHprNlk3gkFBSnwIsKFc9ZEYnRyifDgtlJpSmyU5PXJ7QFpDWihVxzoEWVizof52i8rbcVxJ0yG7n6_1gZQPZ3aNDS0qiMghmET/s1600/leave+a +comment2.png" /></blockquote> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxGD6lyeHpdkruHFql5uSRsrHFsZrbsQPOCzjHxmtKbmOIibxURnr_R0KNvu5GZfnEj8djWRuTFaCzW5kBmBx7HLnrNZW0trY7VtMDGmkCG4hxaUTclhWU8hDhsTXa3t4PuQJ4pguIWf_/s1600/comment.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxGD6lyeHpdkruHFql5uSRsrHFsZrbsQPOCzjHxmtKbmOIibxURnr_R0KNvu5GZfnEj8djWRuTFaCzW5kBmBx7HLnrNZW0trY7VtMDGmkCG4hxaUTclhWU8hDhsTXa3t4PuQJ4pguIWf_/s1600/comment .gif" /></a></div> <blockquote class="tr_bq"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxGD6lyeHpdkruHFql5uSRsrHFsZrbsQPOCzjHxmtKbmOIibxURnr_R0KNvu5GZfnEj8djWRuTFaCzW5kBmBx7HLnrNZW0trY7VtMDGmkCG4hxaUTclhWU8hDhsTXa3t4PuQJ4pguIWf_/s1600/comment .gif" /></blockquote> You can use your own image instead. Just upload your image on Blogger, switch to Edit HTML tab, copy the image code and replace <data:postCommentMsg/> with your code. UPDATE! Step 5. The first steps will replace the text only when there are no comments available. To show the image each time new comments are added, we should add the code of the image we want to appear after the 4th of the below code (search 4 times for it): <blockquote class="tr_bq"><data:blogCommentMessage/></blockquote><div> </div><div>Step 6. Save Your Template.</div> Thats it! I hope you like your new comment form !</div>

How to change Blogger "Post A Comment" Message

In this tutorial i will show you how to replace the 'Post A Comment' text that appears above the comment form with an image. Also,...

+ Read more »

How To Remove Blogger Attribution Gadget

<div dir="ltr" style="text-align: left;" trbidi="on">The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may of noticed this gadget is locked into you blog. To unlock it, follow the next steps: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_p3nFtdAxTeh1PO21eBDNpzG_OR-lAeMxcZqXq-fHy5UA2p_DHJwo7Nqcfvy5idfbQ3pbmXqkjJyWvAgYM7bTw8s19PYk4o4NADN_u6ztG33wNhyf1Sm7l1Ntbx3Aax0TnPxUD218hBO/s1600/REMOVE+POWERED+BY+BLOGGER.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger attribution, blogger hacks, powered by" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_p3nFtdAxTeh1PO21eBDNpzG_OR-lAeMxcZqXq-fHy5UA2p_DHJwo7Nqcfvy5idfbQ3pbmXqkjJyWvAgYM7bTw8s19PYk4o4NADN_u6ztG33wNhyf1Sm7l1Ntbx3Aax0TnPxUD218hBO/s1600/REMOVE+ POWERED+BY+BLOGGER.png" title="How to remove blogger attribution gadget " /></a></div> Step 1. Log in to your Dashboard, go to Template > Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, blogger hacks, " border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s320/blogger- template-edit-html.png" title="how to remove blogger powered by " width="320" /></a></div> Step 2. Check the "Expand Widget Templates" box <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6SseU5Tk_FWCRJmBRvIzBhubJmEYn4b46GtKVkLEd1Cz8dlF2sMYBWPsbQABv0ymfyrpGejJmLY27a1y866YaGdDvcAuilQG1VT6_IjFy0_GRXkBr6rxStU0QMcVK-oY4fBsaysW5QQm/s1600/blogger-expand-widget-templates-hide-pic-inside-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6SseU5Tk_FWCRJmBRvIzBhubJmEYn4b46GtKVkLEd1Cz8dlF2sMYBWPsbQABv0ymfyrpGejJmLY27a1y866YaGdDvcAuilQG1VT6_IjFy0_GRXkBr6rxStU0QMcVK-oY4fBsaysW5QQm/s1600/blogger -expand-widget-templates-hide-pic-inside-posts.png" /></a></div> Step 3. Search (CTRL+ F) for this code: <blockquote class="tr_bq"><b:widget id='Attribution1' locked='true' title='' type='Attribution'></blockquote> Step 4. Replace true with false Step 5. Click on the Save Template button Now attribution gadget is unlocked and it can be removed. Just go to: <ul><li>Layout and click on the edit link from Attribution gadget:</li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCfrgP7HK7MhcSbsgunrN3GSCiZN-kBp_ay2Dxk6wkrtmV1XI0ARiOk0mG0sME2GZnItwmD4t7NBdzjARhEKnAVhweubb4rxNx4Asq87-ffQ4kKuqewLofxjdXDL3h7MARmMmSU70oIgHl/s1600/how-to-remove-blogger-powered-by-attribution-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCfrgP7HK7MhcSbsgunrN3GSCiZN-kBp_ay2Dxk6wkrtmV1XI0ARiOk0mG0sME2GZnItwmD4t7NBdzjARhEKnAVhweubb4rxNx4Asq87-ffQ4kKuqewLofxjdXDL3h7MARmMmSU70oIgHl/s640/how-to-r emove-blogger-powered-by-attribution-widget.png" width="640" /></a></div><ul><li>Click on the Remove button - as you can see in the screenshot below:</li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMLW30ILzK2_WArKzPfYIEofsX_LnX0jMXgIlMzbpVert45Kn0BwSm57kUWePOUgnpjHnJ8gk6ppg3Oq0U39MGc7zmkzxtKEQQqxrsnNUFuanrEnRpyuj6E1Dm-HYfKBuV87onU8p_pL6r/s1600/remove+hide+powered+by+blogger+widget+gadget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMLW30ILzK2_WArKzPfYIEofsX_LnX0jMXgIlMzbpVert45Kn0BwSm57kUWePOUgnpjHnJ8gk6ppg3Oq0U39MGc7zmkzxtKEQQqxrsnNUFuanrEnRpyuj6E1Dm-HYfKBuV87onU8p_pL6r/s320/remove+h ide+powered+by+blogger+widget+gadget.png" width="320" /></a></div>That was all !</div>

How To Remove Blogger Attribution Gadget

The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may...

+ Read more »

How to add a gadget/widget inside your Blogger Blog header

<div dir="ltr" style="text-align: left;" trbidi="on">Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog, the most popular format being the AdSense 468x60 ad unit - see in the screenshot below: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4cG9icr8gW47tx8hstKDLvcQxINu9TIto-5eGPtxz4L2MrelFb_q7tAaazyHvYHy3LmBNXkhftGxdwBEuNyzjRe7HHxiCFuayA2lx-baHJcOFR2Vwid2Qz164DA1bJovUXfuzEsy-bMo/s1600/gadget+widget+inside+blogger+blogspot+header.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4cG9icr8gW47tx8hstKDLvcQxINu9TIto-5eGPtxz4L2MrelFb_q7tAaazyHvYHy3LmBNXkhftGxdwBEuNyzjRe7HHxiCFuayA2lx-baHJcOFR2Vwid2Qz164DA1bJovUXfuzEsy-bMo/s400/gadget+w idget+inside+blogger+blogspot+header.png" width="400" /></a></div> But how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized. A. Resize blogger header Step 1: Go to Blogger <a href="http://www.blogger.com/home">Dashboard</a> > Template > Edit HTML and backup your template Step 2: Click anywhere inside the code area and open the search box by using the CTRL + F keys: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-YvvB057y8mb1tKG1uxc0Ms4zc3MU50jlOLNLhekl7axtZODhTuo2vWm_gchq0WjcD-waaTGZ7Pp9XpeXf4MjiBhq57iMpsJvlKwDer02gaTQ2Y3s5PDIq1tsQRzbMjLT0ZncgRN_bWQ/s1600/screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="adsense, blogger tricks, blogger widgets" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy-YvvB057y8mb1tKG1uxc0Ms4zc3MU50jlOLNLhekl7axtZODhTuo2vWm_gchq0WjcD-waaTGZ7Pp9XpeXf4MjiBhq57iMpsJvlKwDer02gaTQ2Y3s5PDIq1tsQRzbMjLT0ZncgRN_bWQ/s400/screensh ot.png" title="adsense ads to blogger header" width="400" /></a></div> Step 3: Search for this piece of code: <blockquote class="tr_bq">/* Header ----------------------------------------------- */</blockquote>Note: If you can't find it, search only for the first line: <blockquote>/* Header</blockquote> <div style="text-align: center;">Screenshot:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0KDsgRlsuODmzOI_KjBmN5BvSb1ua-nzVnYM90yJNnvAg6l-uMV9I3FGP_ECyY8ddwtBAOkMDccI-VPfpyzq8l3-W5ITMpOPm8IzsC526U-H2y5H_8rsM0-Gtlowbhlh9txjI50kpw6y_/s1600/how-to-add-adsense-or-widget-to-blogger-header.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets, blogspot tricks" border="0" height="403" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0KDsgRlsuODmzOI_KjBmN5BvSb1ua-nzVnYM90yJNnvAg6l-uMV9I3FGP_ECyY8ddwtBAOkMDccI-VPfpyzq8l3-W5ITMpOPm8IzsC526U-H2y5H_8rsM0-Gtlowbhlh9txjI50kpw6y_/s640/how-to-a dd-adsense-or-widget-to-blogger-header.png" title="how to add a gadget or adsense inside blogger header" width="640" /></a></div> Step 4: Replace it with this code: <blockquote class="tr_bq">/* Header ----------------------------------------------- */ .header-left{ display: inline-block; height: 35px; width: 350px; float: left; } .header-right { display:inline-block; float:right; }</blockquote> Change the pixels in red with the image's height and width of your blogger header and change float: left; to float: right; if you want to change the position of your logo. Step 5: Find the below code: <blockquote class="tr_bq"><b:section class='header' id='header' maxwidgets='1' showaddelement='no'></blockquote> Step 6: Replace it with: <blockquote class="tr_bq"><b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'></blockquote> Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets: Step 7. Find the following code: <blockquote class="tr_bq">    </div>     </div>     <div class='header-cap-bottom cap-bottom'>       <div class='cap-left'/></blockquote> Step 8. Just above it, paste this: <blockquote class="tr_bq"><div style='clear:both;'/></blockquote> Note: if you can't find the code from step 7, search for this instead: <blockquote class="tr_bq">      <b:include name='description'/>     </div>   </b:if> </b:includable> </b:widget> </b:section></blockquote>... and paste the code from step 8 just below it. B. Add extra gadget/widget section to Blogger Header Let's go one step forward and add an extra gadget section within Blogger header in new template designers. Step 9. Just below the code from step 8, paste this codejust before/above it: <blockquote class="tr_bq"><b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/></blockquote> Step 10. Now find: <blockquote class="tr_bq">]]></b:skin></blockquote> Step 11. Paste just above it, this CSS code: <blockquote class="tr_bq">.header-right { display:inline-block; float:right; width:400px; }</blockquote> Change the width that is marked in red color. Increase or decrease the pixels according to your needs and positioning new header section. Step 12. Save the Template. Step 13. Now all you have to do is to go to Layout and Add a Gadget to the newly created extra header section in Blogger. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvk1iJ-NtFm_5kBpXuKEKFdCj3Nzs3s3-45MNGceahvk07D3uPMLmNVHoRzdrCyIeGOYtadQZotDHrjC17cMW5KvWVuWwiLisBQAsDnELOKTD1NPooXdTJKiTt0eYbnDw9oB8uMC_huVL/s1600/how-to-add-a-gadget-inside-blogger-header.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="widgets for blogger, blogger tricks" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBvk1iJ-NtFm_5kBpXuKEKFdCj3Nzs3s3-45MNGceahvk07D3uPMLmNVHoRzdrCyIeGOYtadQZotDHrjC17cMW5KvWVuWwiLisBQAsDnELOKTD1NPooXdTJKiTt0eYbnDw9oB8uMC_huVL/s640/how-to-a dd-a-gadget-inside-blogger-header.png" title="how to add a widget/gadget to Blogger header" width="640" /></a></div> The widget now should appear side by side. <div style="text-align: center;">If you have any questions or need some help, leave a comment below. </div></div>

How to add a gadget/widget inside your Blogger Blog header

Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog, the most popular format...

+ Read more »