Add a Different Background For Author Comments in Blogger's Threaded Comments

In this tutorial we will learn how to highlight the author comments so that they will have a different background color, border, or anything that makes them stand out from the others. To achieve this, we need to add a code in the Blogger's template and to modify the style according to our preferences.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73_K7-NFUgqk5gMFwciU0qiXc1KPZENMkQ1ypCNZdVcxhyithFE7tXknAqxpo5ur5z0HZ8RkfMaP7YqdmiV-Pn3xvk9lc_3h0B29Tq8xaH_t0_Q8VP5V2s-Ds7c2nlrCg4W2MJGRI1CrZ/s1600/how-to-add-a-different-background-color-for-author-comments-in-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, blogger comments" border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73_K7-NFUgqk5gMFwciU0qiXc1KPZENMkQ1ypCNZdVcxhyithFE7tXknAqxpo5ur5z0HZ8RkfMaP7YqdmiV-Pn3xvk9lc_3h0B29Tq8xaH_t0_Q8VP5V2s-Ds7c2nlrCg4W2MJGRI1CrZ/s400/how-to-add-a-different-background-color-for-author-comments-in-blogger-threaded-comments.png" title="how to change the background for author comments in blogger" width="400" /></a></div> <span style="color: #3d85c6;"><b><span style="font-size: large;"> </span></b></span><br /><h2><span style="color: orange;">How to highlight author comments in Blogger:</span></h2><span style="color: #3d85c6;"><b>Step 1.</b></span> Go to Template, click on Edit HTML<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjNYxmKuVkwOH1JDWZCGPvOe27Ov4dJGyLB9iwuK9LATEySDNLbvXyPMzBNYoP8ktcvv0xmprxbw4T03c5vn_wRkUglBmOZ64b0hEJKSCLiixJTf77mKI_c86KcAYzb6PSHUfyP1qGZxI/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger threaded comments, customize blogger comments" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjNYxmKuVkwOH1JDWZCGPvOe27Ov4dJGyLB9iwuK9LATEySDNLbvXyPMzBNYoP8ktcvv0xmprxbw4T03c5vn_wRkUglBmOZ64b0hEJKSCLiixJTf77mKI_c86KcAYzb6PSHUfyP1qGZxI/s320/blogger-template-edit-html.png" title="how to customize author comment in blogger threaded comments" width="320" /></a></div><br /><span style="color: #3d85c6;"><b>Step 2. </b></span>Click anywhere inside the code area and try to find - using CTRL + F keys - this tag:<br /><blockquote class="tr_bq"></body></blockquote><div style="text-align: center;"><b>Screenshot:</b></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRB1W0DBiouHxH4QchdpW08aDO25MDAlTm0m4oU15A-hjyaqlDE4P2VIMHdWBnFMCKLygSCjst9I0PXjpcL8UwGowiC680UY6tNiuOm8Cb-Uc-aCuNfUxtETPQTK85ctSBOE-4UpQYCVG_/s1600/how-to-customize-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger comments, blogger tricks" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRB1W0DBiouHxH4QchdpW08aDO25MDAlTm0m4oU15A-hjyaqlDE4P2VIMHdWBnFMCKLygSCjst9I0PXjpcL8UwGowiC680UY6tNiuOm8Cb-Uc-aCuNfUxtETPQTK85ctSBOE-4UpQYCVG_/s400/how-to-customize-blogger-threaded-comments.png" title="background style for author comments in blogger" width="400" /></a></div><br /><span style="color: #3d85c6;"><b>Step 3.</b></span> Just above it, paste the following code:<br /><blockquote class="tr_bq"><script src='http://code.jquery.com/jquery-latest.js'/><br /><script><br />$(function() {<br />function highlight(){<br />$('.user.blog-author').closest('.comment-block')<br />.css('border', '<span style="color: orange;">1px solid #FFA500</span>')<br />.css('background','<span style="color: blue;">#F1F1F2</span> url("<span style="color: #0b5394;">http://www.blogblog.com/1kt/transparent/white80.png</span>")')<br />.css('color', '<span style="color: green;">#444444</span>')<br />.css('font-size', '<span style="color: #cc0000;">12px</span>')<br />.css('padding', '10px');<br />}<br />$(document).bind('ready scroll click', highlight);<br />});<br /></script></blockquote><br /><h3><span style="color: orange;">Customizing the Author Comments:</span></h3><br /><b>Border:</b><br />The line marked in orange represents the border's style.<br />What it can be done:<br /><ul><li>1px - you can increase the value to change the border's thickness</li><li>solid - change the border's style to <i>dotted</i>, <i>dashed, inset, outset </i>etc.</li><li>#FFA500 - this is the border's color value, change it with your own color </li></ul><b>Background:</b><br />The line marked in blue represents the background's style. You can use a plain color or an image. By default there's a combination of both (a white transparent image with a gray plain color).<br />To change/add:<br /><ul><li>a different color: replace the <i>#F1F1F2</i> value with your own (use <a href="/2015/07/color-code-generator_3.html" target="_blank">this tool</a> to find the hex code of your desired color)</li><li>an image: replace the defaul url <span style="color: #0b5394;">http://www.blogblog.com/1kt/transparent/white80.png </span>with that of your image </li></ul><br /><b>Font Color:</b><br />To change the font's color, replace the #444444 color value in green with your own. (you can use <a href="/2015/07/color-code-generator_3.html">this tool</a> to find the hex code of your desired color)<br /><br /><b>Font Size:</b><br />Modify the value in red by increasing/decreasing the "12" value in order to change the size of text.<br /><br /><span style="color: #3d85c6;"><b>Step 4. </b></span>Now Save your Template.<br /><br />To customize the entire style of threaded comments, please check my previous tutorial on <i><a href="/2014/11/how-to-customize-blogger-comments-by_18.html" style="color: #0000ee; text-decoration: none;">How to Customize Comment's Background, Font Color and Border in Blogger.</a></i>

Blog Design Add a Different Background For Author Comments in Blogger's Threaded Comments

In this tutorial we will learn how to highlight the author comments so that they will have a different background color, border, or anything...

Read more »

How to Customize Blogger Comments By Adding a Background Color and Border

The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat.<br><br>To put our comments in order, we should make each comment easy to identify, so that we'll know from where it begins and to where it ends, otherwise it becomes a jumble of letters and our visitors could run away. Here are some methods to make some order by separating each comment. <br><br>- <a href="#separator">Add a Separator To Blogger Comments</a><br>- <a href="#divider">Add a Divider Below Comments in Blogger</a><br>- <a href="#customize">Fully Customize Your Blogger Comments By Changing The Background Color and Border</a><br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxPY4XZmmdweM-hHYb5fGxVFEB1suOcsWsRhrxqGLhAbMZkL2uX_ZsacYMIn21pSNwD3DEdyJK1-mOqxA0yGLRByPdyujnKjcU4imjifJqt6SL-UVOUmyykuHGBHOYtSxDpBGr1IBVgJ_R/s1600/how-to-customize-color-and-style-for-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxPY4XZmmdweM-hHYb5fGxVFEB1suOcsWsRhrxqGLhAbMZkL2uX_ZsacYMIn21pSNwD3DEdyJK1-mOqxA0yGLRByPdyujnKjcU4imjifJqt6SL-UVOUmyykuHGBHOYtSxDpBGr1IBVgJ_R/s320/how-to-customize-color-and-style-for-blogger-threaded-comments.png" width="320"></a></div>The first method is the easiest: we'll separate our comments by adding a border below each of them.<br> <div id="separator"><h2><b><span style="color: #0b5394;">How to Add a Separator/Border To Blogger Comments</span></b></h2></div><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrF_oErmTyhXdPjIwIm2gU9Fyk2W9x_T_nL7yA1kPIQk6-Yg-cyg40-_RIGB9lzAmdz0SgddF6U7-wIDSQCHzgdyU3spvcZiKx9UreNKaTpDrwl3HKGWFM_Z2NDknX4kRQL44k-bzJVL6w/s1600/how-to-add-a-divider-separator-between-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="customize comments, blogger" border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrF_oErmTyhXdPjIwIm2gU9Fyk2W9x_T_nL7yA1kPIQk6-Yg-cyg40-_RIGB9lzAmdz0SgddF6U7-wIDSQCHzgdyU3spvcZiKx9UreNKaTpDrwl3HKGWFM_Z2NDknX4kRQL44k-bzJVL6w/s400/how-to-add-a-divider-separator-between-blogger-threaded-comments.png" title="how to customize blogger threaded comments" width="400"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 215px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br><span style="color: #3d85c6;"><b>Step 1.</b></span> To add a simple separator go to <b>Template </b>> <b>Edit HTML</b> and click on the small arrow on the left of <b:skin>...</b:skin><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ovsDj4qY2R7i6iG5VCbm9BFOKYXgOCEMDkjy_NWAFIo08OwQ03FBCCJKONjCsUaQuxDihcZgDo_anSMIzlrf1gXhw9-xkxiY1TIlZF_eJTsh2rlwFfDEXTyee2cc-u7Yl58T-Zh4FejM/s1600/blogger-template-editor-css-styles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ovsDj4qY2R7i6iG5VCbm9BFOKYXgOCEMDkjy_NWAFIo08OwQ03FBCCJKONjCsUaQuxDihcZgDo_anSMIzlrf1gXhw9-xkxiY1TIlZF_eJTsh2rlwFfDEXTyee2cc-u7Yl58T-Zh4FejM/s400/blogger-template-editor-css-styles.png" width="400"></a></div><span style="color: #3d85c6;"><b>Step 2.</b></span> Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code:<br><blockquote class="tr_bq">]]></b:skin></blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoe382Z80BtJJTCvszA-wTi3qZoV6QH_P7VUeE74NlQtjIyh5rI4G4WyDP6s02BRcH_8InCZv1MD2hJlX3jSFI9YtGF5RUjGlb-C2i8PS2GCX9VrM2nMPE59-9r-R4cMT0SNKYAR7rD3dY/s1600/how-to-search-inside-the-new-blogger-template-editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoe382Z80BtJJTCvszA-wTi3qZoV6QH_P7VUeE74NlQtjIyh5rI4G4WyDP6s02BRcH_8InCZv1MD2hJlX3jSFI9YtGF5RUjGlb-C2i8PS2GCX9VrM2nMPE59-9r-R4cMT0SNKYAR7rD3dY/s400/how-to-search-inside-the-new-blogger-template-editor.png" width="400"></a></div><br><span style="color: #3d85c6;"><b>Step 3.</b></span> Paste the following style just above it:<br><br><i>- If we are using threaded comments (with the reply option):</i><br><blockquote class="tr_bq"><br>.comment-block {<br>border-bottom: 1px solid <b>#000000</b>;<br>}<br>.comments .continue {<br>  border-top: 0px solid #000;<br>}</blockquote><br><i>- If we are using previous commenting system (with no reply option)</i><br><blockquote class="tr_bq">#comments-block .comment-footer {<br>border-bottom:1px solid <b>#000000</b>;<br>}</blockquote><br>Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value.<br><br><span style="color: #3d85c6;"><b>Step 4.</b></span> Save the Template.<br><br>Instead of a simple border, we can also add a divider/image between our comments.<br><span style="color: #0b5394;"><span style="font-size: large;"><b></b></span></span><br><div id="divider"><h2><span style="color: #0b5394;"><b>How to Add a Divider (Image) Between Each Comment in Blogger</b></span></h2></div><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQmglcRZfMrSb-g_BEwptjf2SA5Nd7e0DOxGOJLNAJ_AHQi4P6sWFlcHVetPK80xyaHbIOaVtD_n1rlPuqATpxJgXxbTB9MnR0RpeZDwEChp7towTd_CoLVYGrM234XcrBnP1zRYqp_k3B/s1600/how-to-add-a-border-in-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger comments, blogger tricks, blogger tutorials" border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQmglcRZfMrSb-g_BEwptjf2SA5Nd7e0DOxGOJLNAJ_AHQi4P6sWFlcHVetPK80xyaHbIOaVtD_n1rlPuqATpxJgXxbTB9MnR0RpeZDwEChp7towTd_CoLVYGrM234XcrBnP1zRYqp_k3B/s400/how-to-add-a-border-in-blogger-threaded-comments.png" title="how to customize comments in blogger" width="400"></a></div><br><span style="color: #3d85c6;"><b>Step 1.</b></span> Go to <b>Template</b> ><b> Edit HTML</b> and search (CTRL + F) for the following piece of code:<br><blockquote class="tr_bq">]]></b:skin></blockquote><div style="text-align: center;"><b>Screenshot:</b></div><div style="text-align: center;"><br></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsS8FqO1w21-6il3JGwygm8XLXmlb-3fk7Uv5QkyBk6gFnrUuXkwQym9uo9kwhGoVymaaWgR9NmkEIoeq8yBfS9WVebA3Uws_DZJNgvTgI-RaDQ8M1oaDIOMofMTF9LuajkRU71xgxKBpu/s1600/how_to_search_in_blogger_template_editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsS8FqO1w21-6il3JGwygm8XLXmlb-3fk7Uv5QkyBk6gFnrUuXkwQym9uo9kwhGoVymaaWgR9NmkEIoeq8yBfS9WVebA3Uws_DZJNgvTgI-RaDQ8M1oaDIOMofMTF9LuajkRU71xgxKBpu/s400/how_to_search_in_blogger_template_editor.png" width="400"></a></div><br><span style="color: #3d85c6;"><b>Step 2.</b></span> Paste the following just above it:<br><br><i>- If we are using threaded comments (with the reply option): </i><br><blockquote class="tr_bq">.comment-block {<br>background-image:url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CJlnwsR-Tc-xbnYKzM-M7ouhgt964WlOMPLNpRcoQE6CKpRA9ssuyJuNW6uJLyssBnkTfW3yXqsxwZ7jXl2n0Ad2QIGX5cR_-O4PfedkL9djAvw-nkGdw3R8SUVQEtqwZpLn55wsEXrx/s1600/74.gif</span>);<br>background-repeat:no-repeat;<br>background-position:center bottom;<br>padding-bottom:<b>30</b>px;<br>margin-top: -10px;<br>}<br>.comments .continue {<br>border-top: 0px solid #000;<br>}</blockquote><br><i>- If we are using previous commenting system (with no reply function)</i><br><blockquote class="tr_bq">#comments-block .comment-footer {<br>background-image:url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CJlnwsR-Tc-xbnYKzM-M7ouhgt964WlOMPLNpRcoQE6CKpRA9ssuyJuNW6uJLyssBnkTfW3yXqsxwZ7jXl2n0Ad2QIGX5cR_-O4PfedkL9djAvw-nkGdw3R8SUVQEtqwZpLn55wsEXrx/s1600/74.gif</span>);<br>background-repeat:no-repeat;<br>background-position:center bottom;<br><b>height: 50px; </b><br>}</blockquote><br>Note: The URL that is in blue represents the image that you can change as you like, just remember that at the height must set the height of an image with 30px more, for instance, if the image's height is 50px then the value will be 80px. This is for making sure that the image won't overlap the date of comments. (for threaded comments, increase/decrease the padding 30 value)<br><br><span style="color: #3d85c6;"><b>Step 3.</b></span> Save the Template.<br><br>But you can still have more styles for each comment, for example adding a background color and a border.<br><br><div id="customize"><h2><span style="color: #0b5394;"><b>How to Add A Border and A Background Color To Blogger Comments</b></span></h2></div><br><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/AVvXsEifO1ovhALpHJQqVdmhvTmMNMOTdk3pPk5aGUtzTTMQDipals4StK2thy2-LGdAci3NEWWhiN4ItmtRCz68mJlwEyLX-BI1nIixYrlePo8dJd4gCYch9n6N5FRjrruRNiucQ27PDeoS838n/s1600/how-to-customize-color-and-style-for-blogger-threaded-comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tips, blogger tricks, gadgets" border="0" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifO1ovhALpHJQqVdmhvTmMNMOTdk3pPk5aGUtzTTMQDipals4StK2thy2-LGdAci3NEWWhiN4ItmtRCz68mJlwEyLX-BI1nIixYrlePo8dJd4gCYch9n6N5FRjrruRNiucQ27PDeoS838n/s400/how-to-customize-color-and-style-for-blogger-threaded-comments.png" title="how to change background and color of comments in blogger" width="400"></a></div><span style="color: #3d85c6;"><b>Step 1.</b></span> Go to <b>Template</b> > <b>Edit HTML</b> and search for the following piece of code:<br><blockquote class="tr_bq">]]></b:skin></blockquote><br><span style="color: #3d85c6;"><b>Step 2.</b></span> Paste the following just above it:<br><br><i>- If we are using threaded comments (with the reply option): </i><br><blockquote class="tr_bq">.comment-block {<br>background:#F9F9F9; <span style="color: #38761d;">/* Background Color */</span><br>border: 1px solid #f1f1f1; <span style="color: #38761d;">/* Border style */</span><br>margin-bottom:20px;<br>-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);<br>-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);<br>box-shadow: 0 1px 2px rgba(0, 0, 0, .4);<br>-moz-border-radius: 10px;<br>-webkit-border-radius: 10px;<br>border-radius: 10px; <br>}<br>.comments .comment-thread.inline-thread {<br>background-color: #FAFAFA; <span style="color: #38761d;">/* Background color behind the replies */</span><br>border-left: 4px dotted #E6E6E6; <span style="color: #38761d;">/* Border on the left side of replies */</span><br>}<br>.comment-content {<br>padding:2px 10px 10px 10px;<br>color:#444444; <span style="color: #38761d;">/* Font Color in Comments */</span><br>}<br>.datetime a {<br>font-style:italic;<br>font-size:9px;<br>margin-left: 2px;<br>}<br>.comments .comments-content .user a{<br>color:#1982D1; <span style="color: #38761d;">/* Author's name color */</span><br>font-size: 12px; <span style="color: #38761d;">/* Author's name size */</span><br>padding-left: 10px;<br>font-weight:bold;<br>text-decoration:none;<br>}<br>.comments .comment .comment-actions a,.comments .comment .continue a{<br>display:inline-block; <br>margin:0 0 10px 10px;<br>padding:0 15px;<br>color:#B4B4B7;<br>text-align:center;<br>text-decoration:none;<br>background:#F8F8FB;<br>border:1px solid #C2C2C5;<br>border-radius:4px;<br>height:20px;<br>line-height:20px;<br>font-weight:normal;<br>cursor:pointer;<br>}<br>.comments .continue {<br>border-top: 0px solid #000;<br>}<br>.comments .comments-content .icon.blog-author {<br>background-image: none;<br>margin-left: -10px;<br>}<br>.comments .avatar-image-container{<br>margin: 0px 0px 0px 0px;<br>padding: 0px 0px 0px 0px;<br>width: 40px;<br>max-height: 40px;<br>border: 1px solid #F2F2F2;<br>padding: 1px;<br>}<br>.comments .avatar-image-container img{<br>margin: 0px 0px 0px 0px;<br>padding: 0px 0px 0px 0px;<br>max-width: 40px;<br>height: 40px;<br>}</blockquote><span style="color: #3d85c6;"><b>Step 3.</b></span> Save the Template.<br><br><i>- If we are using previous commenting system (with no reply function): </i><br><br><span style="color: #3d85c6;"><b>Step 1. </b></span>Search for this line in your template:<br><blockquote class="tr_bq"><b:loop values='data:post.comments' var='comment'></blockquote><span style="color: #3d85c6;"><b>Step 2.</b></span> Then, add the following code just below of it:<br><blockquote class="tr_bq"><div class='comments-new'></blockquote><span style="color: #3d85c6;"><b>Step 3.</b></span> Look a little further down and you'll see the <b></b:loop></b> code and just above it, add this:<br><blockquote class="tr_bq"></div></blockquote><span style="color: #3d85c6;"><b>Step 4.</b></span> Now find this:<br><blockquote class="tr_bq">]]></b:skin></blockquote><span style="color: #3d85c6;"><b>Step 5.</b></span> And just above of it, add this CSS code:<br><blockquote class="tr_bq">.comments-new{<br>background:#F9F9F9; <span style="color: #38761d;">/* Background Color */</span><br>border: 1px solid #f1f1f1; <span style="color: #38761d;">/* Bprder Style */</span><br>margin-bottom:20px;<br>-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);<br>-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);<br>box-shadow: 0 1px 2px rgba(0, 0, 0, .4);<br>-moz-border-radius: 10px;<br>-webkit-border-radius: 10px;<br>border-radius: 10px; <br>}<br>.comment-body {<br>color:#444444; <span style="color: #38761d;">/* Font Color in Comments */</span><br>padding:10px;<br>}<br>.comments-new a {<br>padding-left: 5px; <span style="color: #38761d;">/* Link color */</span><br>color: #4A9BD8;<br>}<br>.comment-timestamp a {<br>font-style:italic;<br>font-size:9px;<br>padding-right:10px;<br>padding-left:10px;<br>}<br>.comments .avatar-image-container {<br>overflow: visible;<br>} </blockquote>(The rounded edges will not work in Internet Explorer with CSS)<br><br>In either case, you can change the background color, border, etc.. in parts with annotations in green. <br><br><span style="color: #3d85c6;"><b>Step 6.</b></span> Save the Template.<br><br>If you need more help, leave a comment below.

Blog Design How to Customize Blogger Comments By Adding a Background Color and Border

The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to sp...

Read more »

How to add go to top and go to bottom buttons Using jQuery in Blogger

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog. <br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIjBy_TIDAhY1mYwHC2JiVmY5VdVZYuS1gpN889iu2cYb3WssVHcmilp-kYyV_LiGxZUfbxxQvnIJniBOi5SSTUrcYKVYtY-cIGgIutXrwCP5TCIY0B5B7gXemJomla-dkyszS0aU5Lfn/s1600/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger widgets, blogger navigation" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIjBy_TIDAhY1mYwHC2JiVmY5VdVZYuS1gpN889iu2cYb3WssVHcmilp-kYyV_LiGxZUfbxxQvnIJniBOi5SSTUrcYKVYtY-cIGgIutXrwCP5TCIY0B5B7gXemJomla-dkyszS0aU5Lfn/s200/how-to-add-go-to-top-go-to-bottom-buttons-in-blogger-blogspot.png" title="how to add back to top go to bottom navigation in blogger" width="200"></a></div><span style="color: #3d85c6;"><b><span style="font-size: large;">Demo</span></b></span><br><br>You can see a live demo on my blog, the buttons are located on the right side.<br><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>How to put Go Up and Go Down buttons using <span style="font-size: large;">the</span> jQuery slide effect</b></span></span><br><br><span style="color: #0b5394;"><b>Step 1.</b></span> Go to Template, click on the Edit HTML button<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjNYxmKuVkwOH1JDWZCGPvOe27Ov4dJGyLB9iwuK9LATEySDNLbvXyPMzBNYoP8ktcvv0xmprxbw4T03c5vn_wRkUglBmOZ64b0hEJKSCLiixJTf77mKI_c86KcAYzb6PSHUfyP1qGZxI/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjNYxmKuVkwOH1JDWZCGPvOe27Ov4dJGyLB9iwuK9LATEySDNLbvXyPMzBNYoP8ktcvv0xmprxbw4T03c5vn_wRkUglBmOZ64b0hEJKSCLiixJTf77mKI_c86KcAYzb6PSHUfyP1qGZxI/s400/blogger-template-edit-html.png" width="400"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 348px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br><span style="color: #0b5394;"><b>Step 2. </b></span>Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box<br><div class="separator" style="clear: both; text-align: center;"></div><br><b><span style="color: #0b5394;">Step 3.</span> </b>Copy and paste the following piece of code inside the search box in order to find it:<br><blockquote class="tr_bq">]]></b:skin></blockquote><span style="color: #0b5394;"><b>Step 4. </b></span>Just above ]]></b:skin> paste this one:<br><blockquote class="tr_bq">/* Up and Down Buttons with jQuery<br>----------------------------------------------- */<br>.button_up{<br>padding:7px; <span style="color: #38761d;">/* Distance between the border and the icon */</span><br>background-color:white;<br>border:1px solid #CCC; <span style="color: #38761d;">/* Border Color */</span><br>position:fixed;<br>background:<span style="color: red;"><b> <span style="color: black;">white</span> </b></span>url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYC2OfSghQ8dmTfruI2nEw1lG3UY2cQv5dzLB9Xs_9vxeKoB8VBmLrCc1HZukUt69syPxltbhSrSzchNl9qB3qPiDIynHCt3T4ZYcolEN4aHRMq4mecyNNgqK51Z_nnx-FnovnHK8YMbk/s16/arrow_up.png</span>) no-repeat top left;<br>background-position:50% 50%;<br>width:20px; <span style="color: #38761d;">/* Button's width */</span><br>height:20px; <span style="color: #38761d;">/* Button's height */</span><br>bottom:280px; <span style="color: #38761d;">/* Distance from the bottom */</span><br>right:5px; <span style="color: #38761d;">/* Change right to left if you want the buttons on the left */</span><br>white-space:nowrap;<br>cursor: pointer;<br>border-radius: 3px 3px 3px 3px;<br>opacity:0.7; <br>filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br>}<br>.button_down{<br>padding:7px; <span style="color: #38761d;">/* Distance between the border and the icon */</span><br>background-color:white;<br>border:1px solid #CCC; <span style="color: #38761d;">/* Border Color */</span><br>position:fixed;<br>background:<b><span style="color: red;"> <span style="color: black;">white </span></span></b>url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBt_m7-uwl-B7GogqsPT7JLTmgnMb0GMhU-8hw1yeeyrb9qFONHNGyao1u0jE185k4NprBbADzpApcECnhBVCcHhO9saFPoNmBK3p2Gle0lsEVILsUQK-rUa492r8HkxA_XBVtDMVjD0/s16/arrow_down.png</span>) no-repeat top left;<br>background-position:50% 50%;<br>width:20px; <span style="color: #38761d;">/* Button's width */</span><br>height:20px; <span style="color: #38761d;">/* Button's height */</span><br>bottom:242px;<span style="color: #38761d;"> /* Distance from the bottom */</span><br>right:5px; <span style="color: #38761d;">/* Change right to left if you want the buttons on the left */</span><br>white-space:nowrap;<br>cursor: pointer;<br>border-radius: 3px 3px 3px 3px;<br>opacity:0.7;<br>filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br>}</blockquote><b>Note:</b>  - in <span style="color: #38761d;">green </span>are some annotations that explains what styles you can modify on their left side.<br>           - You can change the arrows by changing the URLs in <span style="color: blue;">blue</span>.<br>           - To change the buttons background color of buttons, change the <b>white</b> text with your color <br><br><span style="color: #0b5394;"><b>Step 5. </b></span>Now search (CTRL + F) for the following tag:<br><blockquote></body></blockquote><span style="color: #0b5394;"><b>Step 6. </b></span>And just above it, paste the code below:<br><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br><br><b><div class='button_up' id='button_up' style='display:none;'/></b><br><b><div class='button_down' id='button_down' style='display:none;'/></b><br><br><script><br>//<![CDATA[<br>(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();<br><br>$(function() {<br>var $elem = $('body');<br>$('#button_up').fadeIn('slow');<br>$('#button_down').fadeIn('slow'); <br>$(window).bind('scrollstart', function(){<br>$('#button_up,#button_down').stop().animate({'opacity':'0.2'});<br>});<br>$(window).bind('scrollstop', function(){<br>$('#button_up,#button_down').stop().animate({'opacity':'1'});<br>});<br>$('#button_down').click(<br>function (e) {<br>$('html, body').animate({scrollTop: $elem.height()}, 800);<br>} );<br>$('#button_up').click(<br>function (e) {<br>$('html, body').animate({scrollTop: '0px'}, 800);<br>} );});<br>//]]><br></script></blockquote><br><b>Note:</b> In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.<br><br><span style="color: #0b5394;"><b>Step 7. </b></span>Finally, Save your changes by clicking on the <b>Save template</b> button. Enjoy!

Blog Design How to add go to top and go to bottom buttons Using jQuery in Blogger

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page are many artic...

Read more »

How to Add a Widget Below First Post in Blogger

This tutorial will show you how to make a gadget/widget to appear just below the first Blogger post.<br /><br />First, you must understand that the usual gadgets provided by Blogger can be added only where the design section allows this. Yet, we can show any element, for example, an AdSense ad, an image, a flash file or a video etc...<br /><br />So, what we will do in this tutorial is to display an element under the first post, this means that it will not be visible below the other posts. This is great when you use any automatic summary, although it is not a requirement.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4-1uLbO9ohzU1bo_Z_fXGKnL0PqaNR5uCeucZ9WgFea_rWnY3xXD2NK-e9OwIYuh-arAGYK790b8YuUuQPkaIZCZrN8S-CxH0XUCZD79x1pusf9v4u09CyaIawTO9VaWwc93XFJ7FcZ1M/s1600/how-to-add-a-widget-below-first-post-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="widget below post" border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4-1uLbO9ohzU1bo_Z_fXGKnL0PqaNR5uCeucZ9WgFea_rWnY3xXD2NK-e9OwIYuh-arAGYK790b8YuUuQPkaIZCZrN8S-CxH0XUCZD79x1pusf9v4u09CyaIawTO9VaWwc93XFJ7FcZ1M/s400/how-to-add-a-widget-below-first-post-in-blogger.png" title="Add a widget below first post in blogger" width="400" /></a></div><div class="pinit-visibility" onmouseover="this.style.opacity=1;this.style.visibility='visible'" style="left: 348px; opacity: 0; position: absolute; top: 366.5px; visibility: visible; z-index: 9999;"></div>This is easy to do and we will use the <b>isFirstPost</b> conditional tag for that element to show it under the first post published on our blog.<br /><br /><h3><span style="color: #3d85c6;"><b>Adding A Gadget or Widget Below First Post in Blogger</b></span></h3><br /><span style="color: #3d85c6;"><b>Step 1. </b></span>From your <a href="http://blogger.com/" rel="nofollow">Blogger dashboard</a>, go to <b>Template</b> and click on the <b>Edit HTML</b> button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></a></div><br /><span style="color: #3d85c6;"><b>Step 2.</b></span> Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger search, blogger tutorials" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" title="how to add a widget below first blogger post" width="320" /></a></div><br /><span style="color: #3d85c6;"><b>Step 3</b></span>. Type or paste this line below inside the search box and hit Enter to find it:<br /><blockquote class="tr_bq"><b:include data='post' name='post'/> </blockquote><span style="color: #3d85c6;"><b>Step 4.</b></span> Just below it add this code:<br /><blockquote class="tr_bq"><b:if cond='data:post.isFirstPost'><br /><div align="center" style="<span style="color: #cc0000;">margin:10px auto;</span>"><br /><b>Here goes the code of the element you want to show</b><br /></div><br /></b:if></blockquote><b>Note: </b><br /><br /><i>- The bolded text indicates to where you should paste the code of the element (eg. AdSense ad, a widget). </i><br /><br /><i>- In red are the top margins (margin-top) and the bottom margins (margin-bottom), this is in case you want the element to move towards or away from the entries, also you can add any style like a background color, border etc.. </i>

Blog Design How to Add a Widget Below First Post in Blogger

This tutorial will show you how to make a gadget/widget to appear just below the first Blogger post. First, you must understand that the usu...

Read more »

How to Customize Blogger's Lightbox

For those of you who have chosen to use the Blogger's Lightbox View for displaying pictures when clicking on them, you have the option to change its style in a whole different way. You will be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background. We can customize the Blogger Lightbox entirely on our taste.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUkhbVHr9HgNKMkhLSWm-QtLsydOU_Tg-9_CQi9GnN-w5vuTmhKxU006v2qi1bUdIWfEn7uDXcBroGtVyh4O7XhMIoR9J39fw1uH4zaBKxiQ5YLF-_iRO6v86OQItDTADQNd8ff6HQThvZ/s1600/modify-the-blogger-lightbox-background-style-color-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger lightbox, change blogger lightbox" border="0" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUkhbVHr9HgNKMkhLSWm-QtLsydOU_Tg-9_CQi9GnN-w5vuTmhKxU006v2qi1bUdIWfEn7uDXcBroGtVyh4O7XhMIoR9J39fw1uH4zaBKxiQ5YLF-_iRO6v86OQItDTADQNd8ff6HQThvZ/s320/modify-the-blogger-lightbox-background-style-color-3.png" title="how to modify blogger lightbox view" width="320"></a></div><span style="color: #3d85c6;"><b><span style="font-size: large;">Demo</span></b></span><br><br>Take a look at the screenshots below:<br><br><div style="text-align: center;"><span style="font-size: large;"><span style="color: #3d85c6;"><b>Before</b>:</span></span></div><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCOQ5gp0iyhmErB2_X54B5sjpfy6LffKuAfauU4GR40pKhFy7oYQiwSV16UanNnaU7P8FYRJ4BWzL-YBog-HTxiv2NTvTTkR0ocOPlrjjz-eNiXkVBTZZBwhUCEOZHdyvghVU0djz5-I4/s1600/how-to-change-the-style-background-of-blogger-lightbox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="customize blogger lightbox, blogger lightbox" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRCOQ5gp0iyhmErB2_X54B5sjpfy6LffKuAfauU4GR40pKhFy7oYQiwSV16UanNnaU7P8FYRJ4BWzL-YBog-HTxiv2NTvTTkR0ocOPlrjjz-eNiXkVBTZZBwhUCEOZHdyvghVU0djz5-I4/s320/how-to-change-the-style-background-of-blogger-lightbox.png" title="how to change the background of blogger lightbox" width="320"></a></div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: center;"><br></div><div style="text-align: center;"><span style="font-size: large;"><span style="color: #3d85c6;"><b>After:</b></span></span></div><br><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/AVvXsEhLOwPMY0nLOYANaPl0RkctnMbiSg_PfGWtHniGjDYv58ptW2FIJkpkjwwcsWvMb3GmC0NcF5Y8CYKUMoikwKGu8J-PIBprsl5hK0OxeoK-nPcTMsoE1f3NJcTSESn1PNCG7d8uwAVzNfGO/s1600/modify-the-blogger-lightbox-background-style-color-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger lightbox, change lightbox background" border="0" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLOwPMY0nLOYANaPl0RkctnMbiSg_PfGWtHniGjDYv58ptW2FIJkpkjwwcsWvMb3GmC0NcF5Y8CYKUMoikwKGu8J-PIBprsl5hK0OxeoK-nPcTMsoE1f3NJcTSESn1PNCG7d8uwAVzNfGO/s320/modify-the-blogger-lightbox-background-style-color-2.png" title="how to customize blogger lightbox" width="320"></a></div><br>After adding our CSS code, the entire look of the modal window will be changed: the background color, the bar showing the thumbnails, the border of images, the text within it, transparency and the close button.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpXkanAI02HeY7RH1ychHTusJ-I6cQ6kjVgN4bghWpY_NLQJDMxf1sz-EDelIUjLwi9w-JF3TepXSL7Y5Fwnh5PV307S_kQadWyutxn6-eIhn-FoINBjt4s9KUr2bqnx2vXIsZWIYDKCe/s1600/modify-the-blogger-lightbox-background-style-color-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger lightbox, modify lightbox, blogger tutorials" border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpXkanAI02HeY7RH1ychHTusJ-I6cQ6kjVgN4bghWpY_NLQJDMxf1sz-EDelIUjLwi9w-JF3TepXSL7Y5Fwnh5PV307S_kQadWyutxn6-eIhn-FoINBjt4s9KUr2bqnx2vXIsZWIYDKCe/s640/modify-the-blogger-lightbox-background-style-color-3.png" title="how to change blogger lightbox background color" width="640"></a></div><br>All we have to do is to overwrite the default styles and change them with ours.<br><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>How to Change the Blogger's Lightbox Background and Style</b></span></span><br><br><span style="color: #3d85c6;"><b>Step 1. </b></span>Go to Template, click on the Edit HTML button (also click on the Proceed button if needed)<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><span style="color: #3d85c6;"><b>Step 2.</b></span> Click anywhere inside the code area and search using CTRL + F the following tag:<br><blockquote></head></blockquote><span style="color: #3d85c6;"><b>Step 3.</b></span> Just above the <b></head></b> tag, add the following code:<br><blockquote class="tr_bq"><style><br><span style="color: #38761d;">/* Background Color */</span><br>.CSS_LIGHTBOX_BG_MASK {<br>background-color: #ffffff !important;<br>background-image: url(<span style="color: #cc0000;">image-url-address</span>) !important;<br>opacity: <span style="color: orange;">0.8</span> !important;<br>filter: alpha(opacity=90) !important;<br>}<br><span style="color: #38761d;">/* Images Border */</span><br>.CSS_LIGHTBOX_SCALED_IMAGE_IMG {<br>outline: 0px solid #fff !important;<br>-webkit-border-radius: 10px;<br>-moz-border-radius: 10px;<br>border-radius: 10px;<br>-webkit-box-shadow: 0px 0px 5px #000000;<br>-moz-box-shadow: 0px 0px 5px #000000;<br>box-shadow: 0px 0px 5px #000000;<br>}<br><span style="color: #38761d;">/* Close Button */</span><br>.CSS_LIGHTBOX_BTN_CLOSE {<br>background: url(<span style="color: blue;">image-url</span>) no-repeat !important;<br>width: 24px !important;<br>height: 24px !important;<br>}<br><span style="color: #38761d;">/* Thumbnails Bar Color */</span><br>.CSS_LIGHTBOX_FILMSTRIP {<br>background-color: #eaeaea !important;<br>}<br><span style="color: #38761d;">/* Text Color */</span><br>.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {<br>color: #000 !important;<br>}<br><span style="color: #38761d;">/* Index Info (number of images) */</span><br>.CSS_LIGHTBOX_INDEX_INFO {<br>color: <i>#555555</i> !important;<br>}<br></style></blockquote><br><b>Note:</b><br>- The text in green explains to which part the code belongs to and it doesn't need to be modified<br><br>For example, the portion below <span style="color: #38761d;">/ * Background Color * /</span> can change the background color or even the LightBox background color with an image - for this, change this line by replacing the red text with the url address of your image:<br><blockquote class="tr_bq">background-image: url(<span style="color: blue;">image-url</span>) !important;</blockquote>- Below is the opacity: if you add a lower value ( <span style="color: orange;">0.8</span> ) the background will become more transparent.<br><br>- To change the icon for the close button, you have to replace the text in red from <span style="color: #38761d;">/* Close Button */ </span>with the URL of your image. (you can host image at tinypic or upload it into a blogger draft and then Copy the Link Location - read <a href="/2015/07/upload-images-and-get-url-of-image_7.html" style="color: blue;">this tutorial</a> for more info)<br> - To change the text color of images, replace the <i>#555555</i> value from <span style="color: #38761d;">/* Index Info (number of images) */</span><br><br>- We can also change the look of the border around our pictures like we can make them more round, add a shadow, etc... but remember this is CSS3 and older versions of Internet Explorer will not show any changes.<br><br><span style="color: #3d85c6;"><b>Step 4.</b></span> Click on <b>Save Template</b> and you're done!

Blog Design How to Customize Blogger's Lightbox

For those of you who have chosen to use the Blogger's Lightbox View for displaying pictures when clicking on them, you have the option ...

Read more »

How to Make the Blogger Posts Have a Calendar for the Date in

It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always easy adding it. But who said you can't do it? You need to look no further than this blog. In this tutorial, we'll learn how to create a calendar style for your Blogger posts date!<br><br><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujg2n8BM0Cs8ZvvLbnJdYNdlQQMD4XfEYcBWO9tdeOhupB5Bk6IcT4aYRPPkKrLSpTjxQHkqt1WZ1lXIVx8FALOmm_4krPeTMRn-f4xIDQAPov3Oa-auZF5ofxpBUde31VeKfoX9Cof4A/s1600/Creating-calendar-style-dates-for-your-Blogger-blog-posts-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujg2n8BM0Cs8ZvvLbnJdYNdlQQMD4XfEYcBWO9tdeOhupB5Bk6IcT4aYRPPkKrLSpTjxQHkqt1WZ1lXIVx8FALOmm_4krPeTMRn-f4xIDQAPov3Oa-auZF5ofxpBUde31VeKfoX9Cof4A/s200/Creating-calendar-style-dates-for-your-Blogger-blog-posts-3.png" width="200"></a></div><br><a href="http://demo-blog32.blogspot.com/2012/07/demo-post1.html" rel="nofollow" target="_blank"><b>DEMO</b></a></div><br><h2>How to create calendar style dates in Blogger</h2><br><br><span style="color: #3d85c6;"><b>Step 1.</b></span> <span style="font-weight: normal;">Go t</span>o "Settings" > "Language and Formatting" - "Date Header Format" and c<span style="font-weight: normal;">hange the date format as you can see in this example below (</span><span style="font-weight: normal;">first add day, month and finally year)</span><br><span style="font-weight: normal;"> </span><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS4D3v7YHSvo7i7XMIgSiJj2KUgwZ2nGv3T5O6qR_FhFQQxa0GOBPwpKSdNgJL712ebpXuGIenxrGAqoNgH6mgAYN7cWroCv6GGcr6qDAWQa9IfIeGH8I6_w1Y9c8eqk8nMNm17_y2og4b/s1600/Creating-calendar-style-dates-for-your-Blogger-blog-posts-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS4D3v7YHSvo7i7XMIgSiJj2KUgwZ2nGv3T5O6qR_FhFQQxa0GOBPwpKSdNgJL712ebpXuGIenxrGAqoNgH6mgAYN7cWroCv6GGcr6qDAWQa9IfIeGH8I6_w1Y9c8eqk8nMNm17_y2og4b/s400/Creating-calendar-style-dates-for-your-Blogger-blog-posts-1.png" width="400"></a></div><br><span style="color: #3d85c6;"><b>Step 2.</b></span> Go to Template > click the "Edit HTML" button<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjNYxmKuVkwOH1JDWZCGPvOe27Ov4dJGyLB9iwuK9LATEySDNLbvXyPMzBNYoP8ktcvv0xmprxbw4T03c5vn_wRkUglBmOZ64b0hEJKSCLiixJTf77mKI_c86KcAYzb6PSHUfyP1qGZxI/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjNYxmKuVkwOH1JDWZCGPvOe27Ov4dJGyLB9iwuK9LATEySDNLbvXyPMzBNYoP8ktcvv0xmprxbw4T03c5vn_wRkUglBmOZ64b0hEJKSCLiixJTf77mKI_c86KcAYzb6PSHUfyP1qGZxI/s400/blogger-template-edit-html.png" width="400"></a></div><br><span style="color: #3d85c6;"><b>Step 3.</b></span> Click anywhere inside the code area and press CTRL + F to open the blogger' search box<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" width="320"></a></div><br><span style="color: #6fa8dc;"><b><span style="color: #3d85c6;">Step 4.</span> </b></span>Type or paste the following line inside the search box and hit Enter to find it:<br><blockquote class="tr_bq"><h2 class='date-header'><span><data:post.dateHeader/></span></h2></blockquote><span style="color: #3d85c6;"><b>Step 5.</b> </span>In case you find it twice, replace it twice with this code:<br><blockquote class="tr_bq"><div id='Date'><br><script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script><br></div><br><b:else/><br><div id='Date'><br><script>changeDate(&#39;&#39;);</script><br></div></blockquote><span style="color: #3d85c6;"><b>Step 6.</b></span> Now type this tag inside the search box and hit Enter to find it:<br><blockquote class="tr_bq"></head></blockquote><span style="color: #3d85c6;"><b>Step 7.</b></span> Just above the <span style="background-color: yellow;"></head></span> tag, paste this code: <br><blockquote><script type='text/javascript'><br>//<![CDATA[<br>var DateCalendar;<br>function changeDate(d){<br>if (d == "") {<br>d = DateCalendar;<br>}<br>var da = d.split(' ');<br>day = "<strong class='date_day'>"+da[0]+"</strong>";<br>month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";<br>year = "<strong class='date_year'>"+da[2]+"</strong>";<br>document.write(month+day+year);<br>DateCalendar = d;<br>}<br>//]]><br></script><br><b:if cond='data:blog.pageType != &quot;static_page&quot;'><br><style type='text/css'><br>/* Calendar style date<br>----------------------------------------------- */<br>#Date {<br>background: transparent url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidLkL9jZSgs5rjxPdLzLPOhs92_9GwwQjcCLl4nJbnXPseO0U9eRM2EblF5Sd5zABkHJfJablWCshliqhcXrcjiqAQJLE-vwvYYI19sezDLcdJ9DGMS73o3Nmz-0YHpgJt3ESqGgwCIddd/s1600/calendar07.png</span>) no-repeat;<br>display: block;<br>width:60px;<br>height:60px;<br>float: left;<br>margin: 15px 2px -40px <span style="color: red;">-108</span>px;<br>padding: 0 0 8px 0px;<br>border: 0;<br>text-transform: uppercase;<br>}<br>.date_month {<br>display: block;<br>font-size: 15px;<br>font-weight:bold;<br>margin-top:-1px;<br>text-align:center;<br>color:#ffffff; <span style="color: #6aa84f;">/* Month's color */</span><br>}<br>.date_day {<br>display: block;<br>font-size: 28px;<br>font-weight:bold;<br>margin-top:-8px;<br>text-align:center;<br>color:#282828; <span style="color: #6aa84f;">/* Day's color */</span><br>}<br>.date_year {<br>display: block;<br>font-size: 10px;<br>margin-top:-8px;<br>text-align:center;<br>color:#282828; <span style="color: #6aa84f;">/* Year's color */</span><br>}<br></style><br></b:if></blockquote>Before saving the Template, here we can make some changes: <br><br>- To change the calendar style, replace the url in blue with yours;<br>- If the calendar doesn't appear as it should, change <b><span style="color: red;">-108</span></b> with 0;<br>- With green are marked the areas where you can change the color of the dates <br><br><span style="color: #3d85c6;"><b>Step 8.</b></span> Now Preview your Template and if everything looks ok, hit the <b>Save Template</b> button.<br><br>That was all... Enjoy!

Blog Design How to Make the Blogger Posts Have a Calendar for the Date in

It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always easy adding...

Read more »

How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and have a different color from the rest of the text. This style can be often seen in newspapers, literature, magazines. So, in this tutorial I will show you how to apply <b>automatically</b> a Magazine text style on Blogger Posts and Comments. Let's start adding it...<br><br><span style="font-family: inherit;">-> <a href="#posts">Add Drop Caps For Blogger Posts</a></span><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnd9hYcekVPiPcooPM8-fZMKcT7gD03KzjzfeDvEc8j56PaF0S3kf0vIsiNNY35SAbVFun4ntyGGDtJ3SKCjHgx_Oc1QvxNyvkNubM5xcVUc2ReoESS8tStzD4fBvk0cZk7cvO44vCAuu/s1600/Drop+Cap+Large+First+Letter+On+Your+Blogger+Blogspot+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="drop caps, blogger blogspot, tutorials" border="0" height="92" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJnd9hYcekVPiPcooPM8-fZMKcT7gD03KzjzfeDvEc8j56PaF0S3kf0vIsiNNY35SAbVFun4ntyGGDtJ3SKCjHgx_Oc1QvxNyvkNubM5xcVUc2ReoESS8tStzD4fBvk0cZk7cvO44vCAuu/s400/Drop+Cap+Large+First+Letter+On+Your+Blogger+Blogspot+Blog.png" title="Add a Large first letter for blogger blogspot posts" width="400"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 274.5px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br>-> <a href="#comments">Add Drop Caps For Blogger Comments</a><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hF_ydCxUwrIVn_6-MD9nRtavvVuS5OiXZheYnaJXRKX8rBrorw7pxxIIfje4-ee3P4Hkn96IftdnFwDEiifN7TLTHdNOOZ1E4Qxjzf1_Q3d0kFs4mB1ERegOiyGPUKjyJ7pZcofKDp7n/s1600/how+to+add+first+letter+capitalized+to+blogger+comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="drop caps, first letter, blogger" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1hF_ydCxUwrIVn_6-MD9nRtavvVuS5OiXZheYnaJXRKX8rBrorw7pxxIIfje4-ee3P4Hkn96IftdnFwDEiifN7TLTHdNOOZ1E4Qxjzf1_Q3d0kFs4mB1ERegOiyGPUKjyJ7pZcofKDp7n/s320/how+to+add+first+letter+capitalized+to+blogger+comments.png" title="how to add drop caps to blogger comments" width="320"></a></div><br><h3><b><span id="posts" style="color: #0b5394;">Big First Letter for your Blogger / Blogspot Posts</span></b></h3><br><b><span style="color: #3d85c6;">Step 1.</span> </b>From your <a href="http://blogger.com/" rel="nofollow">Blogger Dashboard</a>, go to <b>Template</b> and click on the <b>Edit HTML</b> button:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 2.</span></b> Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type this piece of code inside the search box then hit Enter to find it:<br><blockquote class="tr_bq">]]></b:skin></blockquote><i>Note: you might need to click on the arrow next to it to expand the code within and then you need to search <span style="background-color: yellow;">]]></b:skin></span> one more time.</i><br><br><b><span style="color: #3d85c6;">Step 3.</span></b> Just above <span style="background-color: yellow;">]]></b:skin></span>, add the following CSS code:<br><blockquote class="tr_bq">.capital:first-letter {<br>float: left;<br>display: block;<br>font-family: Times, serif, Georgia;<br>font-size: <b><span style="color: magenta;">40px</span></b>;<br>color: <b><span style="color: #0b5394;">#000000</span></b>;<br>margin:0px 5px 0 0;<br>padding:0 0 0 10px;<br>}</blockquote><b><span style="color: #0b5394;">Color</span></b> - change the value in blue with the hex of your color<br><b><span style="color: magenta;">Size</span></b> - to change the letter size, increase/decrease the value highlighted in pink.<br><br><b><span style="color: #3d85c6;">Step 4.</span> </b>Now search for this code:<br><blockquote class="tr_bq"><data:post.body/></blockquote><b><span style="color: #3d85c6;">Step 5.</span></b> Then immediately before and after add the red fragments you see in the example below:<br><blockquote class="tr_bq"><span style="color: #cc0000;"> </span><b><span style="color: red;"><div class='capital'></span></b><data:post.body/><b><span style="color: red;"></div></span></b></blockquote><b><span style="color: #3d85c6;">Step 6. </span></b>Save the changes by clicking on the <b>Save template</b> button.<br><br>Important! If the above code is not working, add one of following codes from this example:<br><blockquote class="tr_bq"><b><span style="color: red;"><p class="capital"></span></b><data:post.body/><b><span style="color: red;"></p></span></b></blockquote>Or try this instead:<br><blockquote class="tr_bq"><b><span style="color: red;"><span class="capital"></span></b><data:post.body/><b><span style="color: red;"></span></span></b></blockquote><br><h3><b><span id="comments" style="color: #0b5394;">Big First Letter For Blogger/Blogspot Comments</span></b></h3><b><span style="color: #3d85c6;">Step 1. </span></b>Log in to your Blogger account > go to <b>Template</b> > <b>Edit HTML</b> > click anywhere inside the code area and press CTRL + F keys to open the search box<br><br><b><span style="color: #3d85c6;">Step 2.</span></b> Type the following piece of code inside the search box and hit Enter to find it (if you have already added this code, skip step 2 & 3):<br><blockquote class="tr_bq">]]></b:skin></blockquote><b><span style="color: #3d85c6;">Step 3.</span></b> Add the following code just above <span style="background-color: yellow;">]]></b:skin></span>:<br><blockquote class="tr_bq">.capital:first-letter {<br>float: left;<br>display: block;<br>font-family: Times, serif, Georgia;<br>font-size: <b><span style="color: magenta;">40px</span></b>;<br>color: <b><span style="color: #0b5394;">#000000</span></b>;<br>margin:0px 5px 0 0;<br>padding:0 0 0 10px;<br>}</blockquote><span style="color: #0b5394;"><b>Color</b></span> - to change the letter color, replace the value in blue with the value of your color. Here's a tool that might help you to find the hex of the color that you need: <a href="/2015/07/color-code-generator_3.html">Color Code Generator</a><br><b><span style="color: magenta;">Size</span> </b>- to change the letter size, change the value in pink.<br><br><b><span style="color: #3d85c6;">Step 4.</span></b> Then Search for this piece of code:<br><blockquote class="tr_bq"><data:comment.body/></blockquote><span style="color: #3d85c6;"><b>Step 5.</b> </span>Add the red codes before and after <b><data:comment.body/></b> as you can see in my example below:<br><blockquote class="tr_bq"><span style="color: red;"><b><p class="capital"></b></span><data:comment.body/><span style="color: red;"><b></p></b></span></blockquote><b><span style="color: #3d85c6;">Step 6.</span></b> Save your Template.<br><br>That's it! Now you have a cool drop cap first letter on your blog. If you have any question, leave a comment below!

Blog Design How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter ...

Read more »

Create A Rollover Image Effect (change image on mouseover)

The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.<br><br> <b>Demo: </b> Place your mouse over the image below to see its rollover effect<br><br><div style="text-align: center;" class="nopin"><a href="https://twitter.com/Helplogger76" rel="nofollow"><img height="128" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0K3EpK7dSqWQFQhSJTFotxSanp_nNq15I2ZsAZ2zMlmJuwtDIFa_8R574r6CCzjgxOeA5LRuJ27I-_aE0IDbtx11emXptXvvavNWNaZDOoWIclxvGZkRCkAmDSXrYuHMRKjQObhTJfvz/s1600/Twitter.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyltL5sCUN05HeWvojF2R8TstOLSf71crlR8Cdgj6SETj1EWH-4dkGVyZH2tlQm7iiK6GqyRUcx91weqz34xOVtFoSzk_XjO1LBkhVgQGMC-j1kXcCi7Vq9JNKHfdiRYHAlpEnkPpmYfYQ/s1600/RSS.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp0K3EpK7dSqWQFQhSJTFotxSanp_nNq15I2ZsAZ2zMlmJuwtDIFa_8R574r6CCzjgxOeA5LRuJ27I-_aE0IDbtx11emXptXvvavNWNaZDOoWIclxvGZkRCkAmDSXrYuHMRKjQObhTJfvz/s1600/Twitter.png" width="128"></a></div><br><h2>Making Rollover Effect Image</h2>You have the following code:<br><br><blockquote class="tr_bq"><a href="<b><span style="color: #0b5394;">URL ADDRESS</span></b>"><img src="<span style="color: orange;"><b>URL OF THE FIRST IMAGE GOES HERE</b></span>" onmouseover="this.src='<span style="color: blue;"><b>URL OF THE SECOND IMAGE GOES HERE</b></span>'" onmouseout="this.src='<span style="color: orange;"><b>URL OF THE FIRST IMAGE GOES HERE</b></span>'" /></a></blockquote><br>Change the colored texts as it follows:<br><br><b>1.</b> <b><span style="color: #0b5394;">URL ADDRESS</span></b><br><br>This is the address where somebody will be sent when clicks on the image.<br>Example, my blog address: <span style="color: #0b5394;">http://www.helpscripts.blogspot.com</span><br><br><b>2.</b> <span style="color: orange;"><b>URL OF THE FIRST IMAGE GOES HERE</b></span><br><br>Replace the orange text (two times) with the URL address of the image which will appear before you hover over it<span style="color: #cc0000;"><b><span style="color: #cc0000;">.</span></b></span><br><br><b>3.</b> <span style="color: blue;"><b>URL OF THE SECOND IMAGE GOES HERE</b></span><br>Replace the text in blue with the url of  the image that will appear when the cursor hovers over it.<br><br>Now you can paste your image inside a blog gadget, going to <b>Layout</b> > click on <b>Add a Gadget</b> link (right side) > Select <b>HTML/JavaScript</b> from the pop-up window, then add it to your sidebar.<br><br>You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.<br><br>That's it. Enjoy ;)

Blog Design Create A Rollover Image Effect (change image on mouseover)

The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and r...

Read more »

How to Change Default Anonymous Avatar in Blogger Comments

Earlier, you've seen <a href="/2014/11/how-to-change-avatar-size-in-blogger_12.html">how you can change the size of the avatars in blogger comments</a> and now I will show you how to change or customize the default avatar of anonymous commenters or Blogger users with no picture on their profiles. While Blogger announced the new threaded commenting system, we can still customize it by adding a jQuery plugin to our template and then replace the default anonymous avatar that can be found on this address: <i><b><span style="color: #666666;">http://img1.blogblog.com/img/anon36.png </span></b></i>and the one for blogger users: <i><b><span style="color: #666666;">http://img2.blogblog.com/img/b36-rounded.png </span></b></i>...with our own.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0nwWiEQyouLZqeE-r2o-FlvNAXN0ISHogDjgG4yHfWdjZZk4qAD12tKjFQLhB9ar0MNNLO03GiTObj0cBusCTM_t_bSevHgk8ZOMEnYa63nhMnggdG8yp_6bt9KD9m4RNu0A55PNwo640/s1600/change+anonymous+avatar+in+blogger+blogspot+comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="anonymous, default avatar, blogger blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0nwWiEQyouLZqeE-r2o-FlvNAXN0ISHogDjgG4yHfWdjZZk4qAD12tKjFQLhB9ar0MNNLO03GiTObj0cBusCTM_t_bSevHgk8ZOMEnYa63nhMnggdG8yp_6bt9KD9m4RNu0A55PNwo640/s1600/change+anonymous+avatar+in+blogger+blogspot+comments.png" title="change anonymous avatar in blogger comments"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 324.5px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br><h3><b><span style="color: #0b5394;">Replace the Default Anonymous Avatar on Blogger Comments</span></b></h3><br><b><span style="color: #3d85c6;">Step 1.</span> </b>Go to Dashboard - <b>Template</b> - click on the <b>Edit HTML</b> button<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8dY-hSLvWrXGcbtpKWj72g1MmQRmR_dv2cWgSTRg83u3eezpNQMFasKe-eQgI00BFzkBzM55ZOar1eRX4a7TYvMf254r0qdg9xE9e3EBOQ8C4yv1Ckpda3u5mVbj4tXyf2Nx_KKsg9WW/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8dY-hSLvWrXGcbtpKWj72g1MmQRmR_dv2cWgSTRg83u3eezpNQMFasKe-eQgI00BFzkBzM55ZOar1eRX4a7TYvMf254r0qdg9xE9e3EBOQ8C4yv1Ckpda3u5mVbj4tXyf2Nx_KKsg9WW/s1600/remove-blogger-labels.png" width="320"></a></div><br>...click anywhere inside the code area and open the template search box by pressing the CTRL + F keys<br><br><b><span style="color: #3d85c6;">Step 2.</span> </b>Type or paste this code in the search box, then hit Enter to find it:<br><blockquote class="tr_bq"></body></blockquote><b><span style="color: #3d85c6;">Step 3.</span></b> Just above the <span style="background-color: yellow;"></body></span> tag, add the following code:<br><blockquote class="tr_bq"><script src='http://code.jquery.com/jquery-latest.js'/><br><script><br>$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)<br>.attr(&#39;src&#39;, &#39;<b><span style="color: red;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2VICR3EnV2l8FfXWEsKyDKu5mrB0rVQDfd3agwa1cINOKLCe3zHx4ZoPffeE1unm0-9XftMfjenvF-S2BNJJT4agMkidQilo86wBs10zKByzW1tzjGgkQc83LcPNvka4Ruq2OgVShEY/s1600/default_avatar.gif</span></b>&#39;)<br>.ssyby(&#39;blank&#39;)<br></script><br><script src='http://code.jquery.com/jquery-latest.js'/><br><script><br>$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)<br>.attr(&#39;src&#39;, &#39;<b><span style="color: #0b5394;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGrpxof0j3_sZG3nSymrCbzZTxqvoDwIXtAsfPO554pjDvK8hzOuVEauK1QCoLBjoajwlDTHURJCpG6i52O3-YlQ4ZUzwbd_xjAjloK8yU3m32DZ8C2YN01oYmCP5Vb3yrc3d_jsfc6X8/s1600/blogger-user.png</span></b>&#39;)<br>.ssyby(&#39;blank&#39;)<br></script></blockquote><b><span style="color: #3d85c6;">Step 4.</span></b> Save the changes by clicking on the <b>Save Template </b>button<br><br><h4><b><span style="color: #0b5394;">Changing the default avatar</span></b></h4><b><span style="color: red;">For Anonymous users: </span></b>Replace the code in red with your image address<br><b><span style="color: #0b5394;">For Blogger users: </span></b>Replace the URL in blue with your own.<br><br>You can choose an avatar from here and then copy the url of it:<br><br><div class="separator" style="clear: both; text-align: center;"></div><div style="margin-left: 1em; margin-right: 1em;"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2VICR3EnV2l8FfXWEsKyDKu5mrB0rVQDfd3agwa1cINOKLCe3zHx4ZoPffeE1unm0-9XftMfjenvF-S2BNJJT4agMkidQilo86wBs10zKByzW1tzjGgkQc83LcPNvka4Ruq2OgVShEY/s200/default_avatar.gif" width="100"></div><br><div style="margin-left: 1em; margin-right: 1em;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2VICR3EnV2l8FfXWEsKyDKu5mrB0rVQDfd3agwa1cINOKLCe3zHx4ZoPffeE1unm0-9XftMfjenvF-S2BNJJT4agMkidQilo86wBs10zKByzW1tzjGgkQc83LcPNvka4Ruq2OgVShEY/s200/default_avatar.gif</blockquote></div><div class="separator" style="clear: both; text-align: center;"></div><div style="margin-left: 1em; margin-right: 1em;"><br></div><div style="margin-left: 1em; margin-right: 1em;"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjROC-7O_uJYsRPbeYyVL12ygb6lWDRoJJv1h9ih8q1SuMozLq_3VwpUKWPs6Se0YMiB8tMd2AZuMPfB6hj_-cs25BdybfaknTuk3k98_nc9dTOIV2ba70AWkjdUyU3VLcoYuitU5qktBA/s1600/facebook.gif" width="100"></div><br><div style="margin-left: 1em; margin-right: 1em;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjROC-7O_uJYsRPbeYyVL12ygb6lWDRoJJv1h9ih8q1SuMozLq_3VwpUKWPs6Se0YMiB8tMd2AZuMPfB6hj_-cs25BdybfaknTuk3k98_nc9dTOIV2ba70AWkjdUyU3VLcoYuitU5qktBA/s1600/facebook.gif</blockquote></div><div class="separator" style="clear: both; text-align: center;"></div><div style="margin-left: 1em; margin-right: 1em;"><br></div><div style="margin-left: 1em; margin-right: 1em;"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrphGuRAZ034-DBBv9Yl9GFMmadzq73DVGEyJkLj6Avg7Uso4bM6MwYKXlFObfRpljfrf1juwe20V-f8TXw4L8Vjk4lLU5ZpBhRbuA6ZDn8od6ydB5of_L8bm1b_IF4XBlhOWx2NWMeyY/s1600/anonymous3.png" width="100"></div><br><div style="margin-left: 1em; margin-right: 1em;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrphGuRAZ034-DBBv9Yl9GFMmadzq73DVGEyJkLj6Avg7Uso4bM6MwYKXlFObfRpljfrf1juwe20V-f8TXw4L8Vjk4lLU5ZpBhRbuA6ZDn8od6ydB5of_L8bm1b_IF4XBlhOWx2NWMeyY/s1600/anonymous3.png</blockquote></div><br><div style="margin-left: 1em; margin-right: 1em;"><br></div><div style="margin-left: 1em; margin-right: 1em;"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4YC5vLFsfv_S0GLuLcX7bSS8Sp3333XaXJtlKpyMuJLfXNSwFwvSHobhbIHFZPVhFhHZoKgG2KqlfnzE4gunqOh5eRRZdf5kSyxT7oRL1qiKhnyOiYe0htLBLUYbi7nNSNEaaC5Yafmc/s1600/blogger-user.png" width="100"></div><br><div style="margin-left: 1em; margin-right: 1em;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4YC5vLFsfv_S0GLuLcX7bSS8Sp3333XaXJtlKpyMuJLfXNSwFwvSHobhbIHFZPVhFhHZoKgG2KqlfnzE4gunqOh5eRRZdf5kSyxT7oRL1qiKhnyOiYe0htLBLUYbi7nNSNEaaC5Yafmc/s1600/blogger-user.png</blockquote></div><br>That's it! If you found this trick useful, please consider sharing it.<br>

Blog Design How to Change Default Anonymous Avatar in Blogger Comments

Earlier, you've seen  how you can change the size of the avatars in blogger comments  and now I will show you how to change or customiz...

Read more »

How To Change Avatar Size In Blogger Comments

This simple trick will help you modify the avatars size in Blogger comments whose default size is of 36px... pretty small considering that a lot of sites these days are using much larger avatars. To change the style and size of avatars is very easy - you just need to add the CSS code in your Blogger template that will make size of avatars to have width and height of 64px.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAYDCleYa4SFcGqTCQSlP32eHshj2JVZnvLp-SFxu77N3v_q0npby-Y-nfR18j0zsgmnOEhWNKyiyaz3AYTkY1Q_RNusJYWv9L2_-dJOhWFOJVIF96h2bij6QmxsELBSur6VnvNDXBKlFt/s1600/how+to+change+avatar+size+in+blogger+blogspot+comments.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAYDCleYa4SFcGqTCQSlP32eHshj2JVZnvLp-SFxu77N3v_q0npby-Y-nfR18j0zsgmnOEhWNKyiyaz3AYTkY1Q_RNusJYWv9L2_-dJOhWFOJVIF96h2bij6QmxsELBSur6VnvNDXBKlFt/s320/how+to+change+avatar+size+in+blogger+blogspot+comments.png" style="display: none;" width="220"></a></div><br><b><span style="color: #0b5394;">Step 1. </span></b>Go to Dashboard -<b> Template</b> -<b> </b>click on the <b>Edit HTML</b> button<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8dY-hSLvWrXGcbtpKWj72g1MmQRmR_dv2cWgSTRg83u3eezpNQMFasKe-eQgI00BFzkBzM55ZOar1eRX4a7TYvMf254r0qdg9xE9e3EBOQ8C4yv1Ckpda3u5mVbj4tXyf2Nx_KKsg9WW/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8dY-hSLvWrXGcbtpKWj72g1MmQRmR_dv2cWgSTRg83u3eezpNQMFasKe-eQgI00BFzkBzM55ZOar1eRX4a7TYvMf254r0qdg9xE9e3EBOQ8C4yv1Ckpda3u5mVbj4tXyf2Nx_KKsg9WW/s1600/remove-blogger-labels.png" width="320"></a></div><br>...click anywhere inside the code area and press CTRL + F to open the blogger' search box<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" width="320"></a></div><br><b><span style="color: #0b5394;">Step 2.</span></b> Type or paste this tag inside the search box and hit Enter to find it:<br><blockquote class="tr_bq">]]></b:skin></blockquote><div><i>Note: you may need to click on the arrow next to it and then search this tag again</i><br><br></div><b><span style="color: #0b5394;">Step 3. </span></b>Depending on which comment system you use (with reply/no reply), copy and paste one of the following codes just above it:<br><br><i>[Works in Blogger threaded comment system]</i><br><blockquote class="tr_bq">.comments .avatar-image-container{<br>background-color: rgb(34, 34, 34);<br>border:1px solid #ccc;<br>margin: 0px 10px 0px 0px;<br>padding: 0px 0px 0px 0px;<br>width: <b><span style="color: red;">64</span></b>px;<br>max-height: <b><span style="color: red;">64</span></b>px;<br>}<br>.comments .avatar-image-container img{<br>margin: 0px 0px 0px 0px;<br>padding: 0px 0px 0px 0px;<br>max-width: <b><span style="color: red;">64</span></b>px;<br>height: <b><span style="color: red;">64</span></b>px;<br>}</blockquote><i>[for old blogger commenting system]</i><br><blockquote class="tr_bq">.avatar-image-container{<br>border:1px solid #d6d6d6;<br>margin-left: -30px;<br>-moz-border-radius: 4px;<br>background:#fff;<br>height:<b><span style="color: red;">70</span></b>px;<br>min-height: <b><span style="color: red;">70</span></b>px;<br>width:<b><span style="color: red;">70</span></b>px;<br>min-width:<b><span style="color: red;">70</span></b>px;<br>}<br>.avatar-image-container img {<br>background: url(<b><span style="color: #3d85c6;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNawDD4buHwzQnknPHXHMM17TvMlCZO_3Gx2RlS5Zeiyzdem8DE_aS7bTa6o352y4_5O59R7WrVZERnkcdACNIWXBSCj2RKfb_wMLbVi63mAGkBU_SxiupC1VFOn4fG-Pl_QE5VSSt_WY/s200/anonymous.jpg</span></b>);<br>background-repeat: no-repeat;<br>background-position: center;<br>background-size: 100%;<br>width:<b><span style="color: red;">70</span></b>px;<br>min-width:<b><span style="color: red;">70</span></b>px;<br>height:<b><span style="color: red;">70</span></b>px;<br>min-height:<b><span style="color: red;">70</span></b>px;<br>}</blockquote>Note: For bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URLs in blue with your own. (works only for the old commenting system i.e. that has no reply option)<br><br><b><span style="color: #0b5394;">Step 4. </span></b>Cick on the <b>Save template</b> button to apply the changes.<br><br>That's it. Now the Blogger comments avatars should look bigger.<br>

Blog Design How To Change Avatar Size In Blogger Comments

This simple trick will help you modify the avatars size in Blogger comments whose default size is of 36px... pretty small considering that ...

Read more »

How to Hide Blogger Sidebar to Display AdSense For Search Results

When visitors are searching for content on your blog, you have three options to display the search results: opening the results in the same window, in a new window or within your own site using an iframe.<br><br>The best option would be, however, to display the search results within your own site/blog, mainly because you are not sending people off your blog when they are taken to a new page of search results which could be confusing for many because it doesn't look anything like your site or Google. Therefore, displaying the search results within your site, could make it look much more professional and may also increase the page views and the revenue from the ads on the search page.<br><br>A problem that many bloggers are facing is that the page which displays the AdSense for search results must be at least of 800 px wide, so the posting area must be of minimum 800px and there's nothing like this in most of the blogs. <br> So, what we will do in this tutorial is to set up the search results to be displayed in a static page (none of other posts or pages will be affected) in which we'll remove the sidebar so that we'll have enough space to make the post/page section of 800px wide. Moreover, we will <a href="/2015/07/how-to-create-static-pages-in-blogger_7.html">create a static page</a> designed only for the search results, then create a new AdSense for search in our AdSense account and finally add a small snippet of code top in your Blogger template to hide the sidebar in that specific page.<br><br><i>Search results span the width of the page with the sidebar hidden:</i><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6r26BSw7u6l6ZZz_sr1r9xcec0NHQshPv9Mm_R3hovJo7d75ws8LsUBpaypNoQ4M0EX8S6073uNGgqHfmS-7eODOh7_fluUJYlh5YtOqc3dwohQtoTYxoiYVgd4fSVGMKDseiS5fjZ5PW/s1600/HOW-TO-HIDE-REMOVE-SIDEBAR-FOR-ADSENSE-SEARCH-RESULTS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6r26BSw7u6l6ZZz_sr1r9xcec0NHQshPv9Mm_R3hovJo7d75ws8LsUBpaypNoQ4M0EX8S6073uNGgqHfmS-7eODOh7_fluUJYlh5YtOqc3dwohQtoTYxoiYVgd4fSVGMKDseiS5fjZ5PW/s1600/HOW-TO-HIDE-REMOVE-SIDEBAR-FOR-ADSENSE-SEARCH-RESULTS.png" width="640"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 374px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br><b><span style="color: #3d85c6; font-size: large;">Display AdSense For Search Results Within Blogger Page</span></b><br><br><b>Step 1.</b> Create a new static page on your blog, you can give it the title 'Search Results' but leave the content section empty and then <b>Publish</b> the page.<br><br><b>Step 2. </b>When you publish the page you have the option to add the page to a menu, choose the third option 'No Gadget Link To Pages Manually' click 'Save and Publish'. In case this screen doesn't show, right click on <i>View Page</i> and select <i>Copy Link Address</i>. We will need this URL of the page later when we will create the AdSense for search.<br><br><b>Step 3.</b> Go To Your AdSense account, then go to <b>My ads </b>tab, select the <b>Search</b> option and Create a <b>New custom search engine</b>. Follow the steps until you come to the<b> <span style="color: #3d85c6;">Search results</span></b> option.<br><br><b>Step 4.</b> Select the 3rd method "<span class="gwt-InlineLabel"><i>on my website using an iframe</i>"</span>, then Enter the URL of the page you created into the URL field and continue.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-eFhgjflaZVT2Y_WjFNN-fvf8d_ArGMwORwBgMpB-3Sf1O7n9iZ_migp30mruF7nkK-psa-Behu7_DXF_rejuun82SINLm4z7eWdbtF5oemuFLgf41GceaY1-11EQo4oO7krXIEMJfEj4/s1600/hide-blogger-sidebar-for-adsense-search-results.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-eFhgjflaZVT2Y_WjFNN-fvf8d_ArGMwORwBgMpB-3Sf1O7n9iZ_migp30mruF7nkK-psa-Behu7_DXF_rejuun82SINLm4z7eWdbtF5oemuFLgf41GceaY1-11EQo4oO7krXIEMJfEj4/s1600/hide-blogger-sidebar-for-adsense-search-results.png"></a></div><br><div class="separator" style="clear: both; text-align: center;"></div><b>Step 5.</b> Follow the rest of the set up process and at the end you will be given two pieces of code. The first piece of code is for the actual search bar which you can paste into a Html/JavaScript gadget on your sidebar or wherever you want it. The second piece of code you need to copy and paste it into a new HTML/JavaScript gadget, click on Save, then drag it above the <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxiWPBDr6UDFCzWg3F5dCt-MUHSkCUzLDb0tULE3lVxyKKzvLAYfkmfz9zZ4Iy__px89qA4CY-g2m-MTbkyWxFXyXf-Fey5PubgCxithnlhqxMdANNARKGZdECTQD_bBZS2R1G3qHmPvt/s1600/adsense-search-results-blogger.png"><i><b>Blog Posts</b></i></a> area <br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxiWPBDr6UDFCzWg3F5dCt-MUHSkCUzLDb0tULE3lVxyKKzvLAYfkmfz9zZ4Iy__px89qA4CY-g2m-MTbkyWxFXyXf-Fey5PubgCxithnlhqxMdANNARKGZdECTQD_bBZS2R1G3qHmPvt/s1600/adsense-search-results-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxiWPBDr6UDFCzWg3F5dCt-MUHSkCUzLDb0tULE3lVxyKKzvLAYfkmfz9zZ4Iy__px89qA4CY-g2m-MTbkyWxFXyXf-Fey5PubgCxithnlhqxMdANNARKGZdECTQD_bBZS2R1G3qHmPvt/s1600/adsense-search-results-blogger.png" style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 640px 254px;" width="0"></a></div><br>Now that you have your page set up with the search results code and your search bar code in your sidebar, it is time to add a snippet of code to your template to remove the sidebar.<br><br><b><span style="color: #3d85c6; font-size: large;">Adding The Code In Blogger To Change the Results Page Layout</span></b><br><br><b>Step 1. </b>From Your Blogger Dashboard, go to <b>Template</b> and click on the <b>Edit HTML</b> button<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8dY-hSLvWrXGcbtpKWj72g1MmQRmR_dv2cWgSTRg83u3eezpNQMFasKe-eQgI00BFzkBzM55ZOar1eRX4a7TYvMf254r0qdg9xE9e3EBOQ8C4yv1Ckpda3u5mVbj4tXyf2Nx_KKsg9WW/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ8dY-hSLvWrXGcbtpKWj72g1MmQRmR_dv2cWgSTRg83u3eezpNQMFasKe-eQgI00BFzkBzM55ZOar1eRX4a7TYvMf254r0qdg9xE9e3EBOQ8C4yv1Ckpda3u5mVbj4tXyf2Nx_KKsg9WW/s1600/remove-blogger-labels.png"></a></div><br><b>Step 2</b>. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" width="320"></a></div><br><b>Step 3. </b>Find (CTRL + F) the following piece of code<br><blockquote class="tr_bq">]]></b:skin></blockquote><div><b>Step 4.</b> Just below it, paste this code:<br><blockquote class="tr_bq"><b:if cond='data:blog.url == &quot;<span style="color: blue;">PAGE-URL-HERE</span>&quot;'><br><style><br>.main-inner .columns {<br>padding-left: 0px !important;<br>padding-right: 0px !important;<br>}<br>.main-inner .fauxcolumn-center-outer {<br>left: 0px !important;<br>right: 0px !important;<br>}<br>.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {<br>display: none !important;<br>}<br></style><br></b:if></blockquote></div><div><br>Note: Replace <span style="color: blue;">PAGE-URL-HERE</span> with the url of the page where the search results will be displayed (the one you have added at the <b>step 4</b>)</div><div><br></div><b>Step 5. </b>Now <b>Save Template</b> and you're done!<br><br>This simple trick allows you not only to hide the sidebar in the search results page, you can as well, hide it on any page you want... just create your page and follow the same steps. It is also recommended to hide the sidebar in Privacy Policy Pages, Contact Pages and on all the non-content-based pages with little content or no content at all.<br><br>

Blog Design How to Hide Blogger Sidebar to Display AdSense For Search Results

When visitors are searching for content on your blog, you have three options to display the search results: opening the results in the same...

Read more »

Show Blogger Image only in Homepage and Hide it in Post Page

<div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT25G5I5Be4_gBZVd3DHp0LhDFn3sLpt9TfFdoOe63AwEdbaHEVVM8ivdINmP5w_GyGw7QcjsqFSsl98wDTj5gXegLCO0Qw5TkWd0LYWV-oh6dTkGsTsVy2OVtMZH2qgwjqypWGFGuW8dM/s1600/hide+images+in+blogger+posts+pages+and+show+them+only+in+homepage+mainpage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT25G5I5Be4_gBZVd3DHp0LhDFn3sLpt9TfFdoOe63AwEdbaHEVVM8ivdINmP5w_GyGw7QcjsqFSsl98wDTj5gXegLCO0Qw5TkWd0LYWV-oh6dTkGsTsVy2OVtMZH2qgwjqypWGFGuW8dM/s320/hide+images+in+blogger+posts+pages+and+show+them+only+in+homepage+mainpage.png" style="display: none;" width="320"></a></div><br>To hide images/pictures from blogger posts and make them appear only in homepage, we will add just a small piece of CSS code in our template and then use the class "hidepic" each time we want to hide an image.<br><br><b>Just follow the next steps:</b><br><br><b><span style="color: #3d85c6;">Step 1. </span></b>Go to Dashboard - Template - Edit HTML<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IHQBnn6sVDvlYC_L4XeNW1RbiAQ1CC4-pi3FhG2poGHHTA3x8yjIuVdCepQKtBtr873aXP2UUrh6K-Ymn0nT9vfPN9Z6mAK-HkOgMgnZpUA1cYSYR-t8aROMiiaaByrnfc0NnWvkkRuv/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IHQBnn6sVDvlYC_L4XeNW1RbiAQ1CC4-pi3FhG2poGHHTA3x8yjIuVdCepQKtBtr873aXP2UUrh6K-Ymn0nT9vfPN9Z6mAK-HkOgMgnZpUA1cYSYR-t8aROMiiaaByrnfc0NnWvkkRuv/s1600/blogger-template-edit-html.png"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 319px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br> <span style="color: #3d85c6;"><b>Step 2.</b></span> Click anywhere inside the code area and press the CTRL + F keys to open the search box:<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/s1600/blogger-template-search-box.png" width="320"></a></div><br><b><span style="color: #3d85c6;"> Step 3. </span></b>Type or paste this code inside the search box then hit Enter to find it:<br><blockquote class="tr_bq">]]></b:skin></blockquote><div><b><span style="color: #3d85c6;">Step 4. </span></b>Paste the following code just below it <br><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;index&quot;'><br><style><br>.hidepic{<br>display: none;<br>}<br></style><br></b:if></blockquote><b><span style="color: #3d85c6;">Step 5. </span></b>Save the Template.</div><br>Now, each time you create a post, first add the picture that you want to hide and then switch to the <b>HTML</b> tab where you'll see the HTML code of the image that you added - it will look something like this:<br><blockquote class="tr_bq"><div class="<b><span style="color: red;">separator</span></b>" style="clear: both; text-align: center;"><br><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjRdh8FHGHZBoZeNGaPsls9FF1qhyphenhyphenxTdY6QiUZ21OE-grHtFPgC3EUY2_zSPf3QjPlQ2YTrdsSMBpKkSVsLIe2XpTHjy06ylaQ1PrgrA2XewtRS-dU8BcWeSo3fa6bdDq8J6q9pWH-fg/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjRdh8FHGHZBoZeNGaPsls9FF1qhyphenhyphenxTdY6QiUZ21OE-grHtFPgC3EUY2_zSPf3QjPlQ2YTrdsSMBpKkSVsLIe2XpTHjy06ylaQ1PrgrA2XewtRS-dU8BcWeSo3fa6bdDq8J6q9pWH-fg/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div></blockquote><br><i><b>Note:</b> it should be at the exact location where your image has been added </i><br><i>(if the image is at the middle of the text, then the code should be found at the middle)</i><br><br><span style="color: #3d85c6;"><b>Step 6.</b></span> Replace "separator" with "hidepic" - see the screenshot below: <br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWVsJ9Vq2GBLEUOdKrgoDEMeYbQXQ1eI-oRXKwQzWb8kyNl2Sqqbrcwb5n0bL38B0QKschCuyqHB10Ye1ihODNedqWsECPgR68sp1edetedUWyri_mKMSDwhVSGyOOp7zNl_p3k9gHiL_/s1600/how-to-hide-pic-in-posts-and-show-it-on-homepage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiWVsJ9Vq2GBLEUOdKrgoDEMeYbQXQ1eI-oRXKwQzWb8kyNl2Sqqbrcwb5n0bL38B0QKschCuyqHB10Ye1ihODNedqWsECPgR68sp1edetedUWyri_mKMSDwhVSGyOOp7zNl_p3k9gHiL_/s1600/how-to-hide-pic-in-posts-and-show-it-on-homepage.png" width="640"></a></div><br>If you need more help, please leave a comment below.<br>

Blog Design Show Blogger Image only in Homepage and Hide it in Post Page

To hide images/pictures from blogger posts and make them appear only in homepage, we will add just a small piece of CSS code in our templat...

Read more »

How to Remove Showing Posts With Label in Blogger

<div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6u0OCr-rEbffBDdg0PgCsOZK_7PhOW4K_wV7gMuevHrTzmb-Tt-BLS4NR_Rf7xLjxr3bnXjYRL368o6egZQj-EMDtx7lRkWWmLgxvV4KPAkb5aezhbv8D1kkQ0q8ScsCAPCIeDm9TZ7v/s1600/Remove+Showing+Posts+with+Label+Show+all+posts+blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="label, blogger, remove, how to" border="0" height="247" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6u0OCr-rEbffBDdg0PgCsOZK_7PhOW4K_wV7gMuevHrTzmb-Tt-BLS4NR_Rf7xLjxr3bnXjYRL368o6egZQj-EMDtx7lRkWWmLgxvV4KPAkb5aezhbv8D1kkQ0q8ScsCAPCIeDm9TZ7v/s320/Remove+Showing+Posts+with+Label+Show+all+posts+blogger.png" style="display: none;" title="Remove Showing Posts With Label Blogger" width="320"></a></div><br>For any default Blogger layout, the "<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXodIWctZuzNfoQgwwQJcLMZ-ZafsoOumTp4kZrKDB44iaIMuUJ1dEnQqYTbFzDTCenLvSqLuvjavlZte6AkAglsF2KoT5GXP24-SOXiwKx1n8jfzaJvHGZeL9f2NcbSJQTLTniAXB4IKT/s1600/remove+showing+posts+with+label+show+all+posts+from+blogge+blogspot.png">Showing posts with label</a>" message shows up above the posts each time you click on a label link. As it's a pretty useless and annoying message, many people like to have it removed. If that is your wish, just follow the tutorial below:<br><br><b><span style="color: #3d85c6; font-size: large;">Removing "Showing post with label...show all posts"</span></b><br><br><b><span style="color: #3d85c6;">Step 1. </span></b>Go to Dashboard - Template - Edit HTML (if necessary, click on <i>Proceed</i> button)<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjNYxmKuVkwOH1JDWZCGPvOe27Ov4dJGyLB9iwuK9LATEySDNLbvXyPMzBNYoP8ktcvv0xmprxbw4T03c5vn_wRkUglBmOZ64b0hEJKSCLiixJTf77mKI_c86KcAYzb6PSHUfyP1qGZxI/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjNYxmKuVkwOH1JDWZCGPvOe27Ov4dJGyLB9iwuK9LATEySDNLbvXyPMzBNYoP8ktcvv0xmprxbw4T03c5vn_wRkUglBmOZ64b0hEJKSCLiixJTf77mKI_c86KcAYzb6PSHUfyP1qGZxI/s1600/blogger-template-edit-html.png"></a></div><br><b><span style="color: #3d85c6;">Step 2.</span> </b>Click anywhere inside the template code, then search - using CTRL+F - this code:<br><blockquote class="tr_bq"><b:includable id='status-message'></blockquote>After you found it, click on the sideways arrow next to it, to expand the rest of the code.<br><br><div style="text-align: center;"><i>Screenshot:</i></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJp1mJP4tYurFdgXvupVCM_mUoYc9DV7_EU1Z_q6R24-9mtR1QE6zTx3kciVB2yeNNclymouQHD_UbHqQTVqJrHgE3ZGUZaC_wkY2Nw1xbhnP2nLq62GXh2LhooWITdrvdlhiU6TFM5LM/s1600/remove-blogger-blogspot-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUJp1mJP4tYurFdgXvupVCM_mUoYc9DV7_EU1Z_q6R24-9mtR1QE6zTx3kciVB2yeNNclymouQHD_UbHqQTVqJrHgE3ZGUZaC_wkY2Nw1xbhnP2nLq62GXh2LhooWITdrvdlhiU6TFM5LM/s640/remove-blogger-blogspot-labels.png" width="640"></a></div><br><span style="color: #3d85c6;"><b>Step 3. </b></span>Below is this code that you need to remove - along with the first one, as well:<br><blockquote class="tr_bq">     <span style="color: #6aa84f;"><b:includable</span> <span style="color: blue;">id=</span><span style="color: #990000;">'status-message'</span><span style="color: #6aa84f;">></span><br>      <b:if cond='data:navMessage'><br>      <div class='status-msg-wrap'><br>        <div class='status-msg-body'><br>          <data:navMessage/><br>        </div><br>        <div class='status-msg-border'><br>          <div class='status-msg-bg'><br>            <div class='status-msg-hidden'><data:navMessage/></div><br>          </div><br>        </div><br>      </div><br>      <div style='clear: both;'/><br>      </b:if><br>    </b:includable></blockquote><br><div style="text-align: center;"><i>Screenshot </i></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4eUbmTemWjXbpPfOunZnicEQSmTr_yc3C_KF5SptqfWhKUMEziY8PBQ8xAsnS267_hd8Q36B8IjMnoba5jHI9xzvL-Dx1UxdsOsix9502Nl0zetWDpA8XSiKpjinPvCPY6Z4sgBGQTZpt/s1600/remove-blogger-labels-new-template-editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4eUbmTemWjXbpPfOunZnicEQSmTr_yc3C_KF5SptqfWhKUMEziY8PBQ8xAsnS267_hd8Q36B8IjMnoba5jHI9xzvL-Dx1UxdsOsix9502Nl0zetWDpA8XSiKpjinPvCPY6Z4sgBGQTZpt/s640/remove-blogger-labels-new-template-editor.png" width="640"></a></div><br><b><span style="color: #3d85c6;"> Step 4.</span></b> Replace it with this one:<br><blockquote class="tr_bq"><b:includable id='status-message'><br><b:if cond='data:navMessage'><br><div><br></div><br><div style='clear: both;'/><br></b:if><br></b:includable></blockquote><br><span style="color: #3d85c6;"><b>Step 5.</b></span> Save the template. Now view your blog and click on some label....there should be no box anymore.<br>

Blog Design How to Remove Showing Posts With Label in Blogger

For any default Blogger layout, the " Showing posts with label " message shows up above the posts each time you click on a label ...

Read more »