Salman Warriach.blogspot.com

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

<div dir="ltr" style="text-align: left;" trbidi="on">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. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIG_9fijQ3zudEFIHU3OpQ9U4ThB7b0r6KV1JDkC9ENl9w-qhnBJcf-cLjRseB630K6Ydrn2mz31teX0_XDDBZd49qhq9oeC99q58_wPDKsf4FevHfOmErLjxJqrZOv6n8YzQYw8E1u7N/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/AVvXsEgzIG_9fijQ3zudEFIHU3OpQ9U4ThB7b0r6KV1JDkC9ENl9w-qhnBJcf-cLjRseB630K6Ydrn2mz31teX0_XDDBZd49qhq9oeC99q58_wPDKsf4FevHfOmErLjxJqrZOv6n8YzQYw8E1u7N/s400/how-to-a dd-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>   <h2>How to highlight author comments in Blogger:</h2>Step 1. Go to Template, click on Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger threaded comments, customize blogger comments" border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s320/blogger- template-edit-html.png" title="how to customize author comment in blogger threaded comments" width="320" /></a></div> Step 2. Click anywhere inside the code area and try to find - using CTRL + F keys - this tag: <blockquote class="tr_bq"></body></blockquote><div style="text-align: center;">Screenshot:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4mEaKjE9FwQ2PXq8nhw4OfDFAOmHCOhdA7Ewo4FVBmq1lBScTCwizpbKmpsHZbihbnGABX_Act8CQ7OqC0YvzaN5-V1f5I-kXSL__2W-SR9mJmAjcCijg6FkcSLp2myC0JrSppRCUMhBt/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/AVvXsEh4mEaKjE9FwQ2PXq8nhw4OfDFAOmHCOhdA7Ewo4FVBmq1lBScTCwizpbKmpsHZbihbnGABX_Act8CQ7OqC0YvzaN5-V1f5I-kXSL__2W-SR9mJmAjcCijg6FkcSLp2myC0JrSppRCUMhBt/s400/how-to-c ustomize-blogger-threaded-comments.png" title="background style for author comments in blogger" width="400" /></a></div> Step 3. Just above it, paste the following code: <blockquote class="tr_bq"><script src='http://code.jquery.com/jquery-latest.js'/> <script> $(function() { function highlight(){ $('.user.blog-author').closest('.comment-block') .css('border', '1px solid #FFA500') .css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")') .css('color', '#444444') .css('font-size', '12px') .css('padding', '10px'); } $(document).bind('ready scroll click', highlight); }); </script></blockquote> <h3>Customizing the Author Comments:</h3> Border: The line marked in orange represents the border's style. What it can be done: <ul><li>1px - you can increase the value to change the border's thickness</li><li>solid - change the border's style to dotted, dashed, inset, outset etc.</li><li>#FFA500 - this is the border's color value, change it with your own color </li></ul> Background: 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). To change/add: <ul><li>a different color: replace the #F1F1F2 value with your own (use this tool to find the hex code of your desired color)</li><li>an image: replace the defaul url http://www.blogblog.com/1kt/transparent/white80.png with that of your image </li></ul> Font Color: To change the font's color, replace the #444444 color value in green with your own. (you can use this tool to find the hex code of your desired color) Font Size: Modify the value in red by increasing/decreasing the "12" value in order to change the size of text. Step 4. Now Save your Template. To customize the entire style of threaded comments, please check my previous tutorial on How to Customize Comment's Background, Font Color and Border in Blogger.</div>

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 anythi...

+ Read more »

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

<div dir="ltr" style="text-align: left;" trbidi="on">The comments are an essential part of a blog because in them is reflected the readers' opinions regarding a post or our blog, so it is important to spend a little of our time to make this part looking more presentable, accessible and neat. To set in order our comments, it is necessary to make each comment easy to identify, therefore to know from where it begins and to where it ends, otherwise it becomes a jumble of letters of which the reader can run away. Here are some ways to make some order by separating each comment. - <a href="http://www.blogger.com/blogger.g?blogID=3305659502764981386#separator">Add a Separator To Blogger Comments</a> - <a href="http://www.blogger.com/blogger.g?blogID=3305659502764981386#divider">Add a Divider Below Comments in Blogger</a> - <a href="http://www.blogger.com/blogger.g?blogID=3305659502764981386#customize">Fully Customize Your Blogger Comments By Changing The Background Color and Border</a> <div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvN555iEeoTW1qLFXt5ZTCdUpjvuq9Qn-PfCM_JEK6cUVsqMMjiUAvPEyb98WXsoTXdL-pgGGzsTd4ixAB70zWkzNPlWuORt2GYWGk0q0pYP2nN5Kb1bhkLjmoMj1PSdbI5oMOsLU-snRW/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/AVvXsEgvN555iEeoTW1qLFXt5ZTCdUpjvuq9Qn-PfCM_JEK6cUVsqMMjiUAvPEyb98WXsoTXdL-pgGGzsTd4ixAB70zWkzNPlWuORt2GYWGk0q0pYP2nN5Kb1bhkLjmoMj1PSdbI5oMOsLU-snRW/s320/how-to-c ustomize-color-and-style-for-blogger-threaded-comments.png" width="320" /></a></div>The first method is the easiest, and is about how to put a border below our comments, this is to separate each blog comment in a simple but effective way. <div id="separator">How to Add a Separator/Border To Blogger Comments</div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBSG5Wptx9STh_LoEgbzeulf8g-TbYSpg9LRcIPUbQZPamAihH0Lj90yeoqi9JQunB16_sRtXkkk2fIBfrYzDPzxdz42f9lEmRcoXDR6VCwib_KFPeB8JsPTffisg_x-ZQIfqQfHgcorD/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/AVvXsEhaBSG5Wptx9STh_LoEgbzeulf8g-TbYSpg9LRcIPUbQZPamAihH0Lj90yeoqi9JQunB16_sRtXkkk2fIBfrYzDPzxdz42f9lEmRcoXDR6VCwib_KFPeB8JsPTffisg_x-ZQIfqQfHgcorD/s400/how-to-a dd-a-divider-separator-between-blogger-threaded-comments.png" title="how to customize blogger threaded comments" width="400" /></a></div> Step 1. To add a simple separator go to Template > Edit HTML and click on the small arrow on the left of <b:skin>...</b:skin> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmXvxCVpY0jEYbaXKueCfq9FtH03o38idVj2euVWSr2rb8FBBLwcPmetaBFNDIIQ5Ss2SZfuJcUINuSv0-tlBASSXr6ARQzh5S0GiRCB1OPTRorwkra-jcvSaJONlY5aQz0g_fHHk3TDoQ/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/AVvXsEhmXvxCVpY0jEYbaXKueCfq9FtH03o38idVj2euVWSr2rb8FBBLwcPmetaBFNDIIQ5Ss2SZfuJcUINuSv0-tlBASSXr6ARQzh5S0GiRCB1OPTRorwkra-jcvSaJONlY5aQz0g_fHHk3TDoQ/s400/blogger- template-editor-css-styles.png" width="400" /></a></div>Step 2. Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code: <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/AVvXsEi0D8lOwPKNslHG6S3u4sQnakBVOy3D9Yn67WzvX9ApE6HtO4xv5BlzrHuE0ivi5Ay05OO0nR93k3aN3fm91pCWesVmLt6OAp3LfqD9uYfCbojKfdX3DmQNcla-pAxL63pQNw4e8-1Ijn7Q/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/AVvXsEi0D8lOwPKNslHG6S3u4sQnakBVOy3D9Yn67WzvX9ApE6HtO4xv5BlzrHuE0ivi5Ay05OO0nR93k3aN3fm91pCWesVmLt6OAp3LfqD9uYfCbojKfdX3DmQNcla-pAxL63pQNw4e8-1Ijn7Q/s400/how-to-s earch-inside-the-new-blogger-template-editor.png" width="400" /></a></div> Step 3. Paste the following style just above it: - If we are using threaded comments (with the reply option): <blockquote class="tr_bq"> .comment-block { border-bottom: 1px solid #000000; } .comments .continue {   border-top: 0px solid $(widget.alternate.text.color); }</blockquote> - If we are using previous commenting system (with no reply option) <blockquote class="tr_bq">#comments-block .comment-footer { border-bottom:1px solid #000000; }</blockquote> Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value. Step 4. Save the Template. Instead of a simple border, we can also add a divider/image between our comments. <div id="divider">How to Add a Divider (Image) Between Each Comment in Blogger</div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGSvw1tcwikwSAL8scqA7rO9cMOFjDnNqhxXbTf-TR_ezJoyX1g4yt6ABowIn4fbTJNh91cXvcl9XyMSDgge85WIfgG9cbM7cdCpE0cT4ihHwSmBuY6eEAfMzmNreZaHsii1mcH44fdfVr/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/AVvXsEiGSvw1tcwikwSAL8scqA7rO9cMOFjDnNqhxXbTf-TR_ezJoyX1g4yt6ABowIn4fbTJNh91cXvcl9XyMSDgge85WIfgG9cbM7cdCpE0cT4ihHwSmBuY6eEAfMzmNreZaHsii1mcH44fdfVr/s400/how-to-a dd-a-border-in-blogger-threaded-comments.png" title="how to customize comments in blogger" width="400" /></a></div> Step 1. Go to Template > Edit HTML and search (CTRL + F) for the following piece of code: <blockquote class="tr_bq">]]></b:skin></blockquote><div style="text-align: center;">Screenshot:</div><div style="text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvStFS-p-bOG2WNYF0mq99CbwH1CvF61IIe3hoB8kyjayM8xxTZeyjiJU31QURlmbQuggb47GTvIno5pN789RkX6zJ6AYEmftSH27h8_MwqdteEDrcuzK3VHsrrJwhDDKAVpSrS1vvgzwK/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/AVvXsEjvStFS-p-bOG2WNYF0mq99CbwH1CvF61IIe3hoB8kyjayM8xxTZeyjiJU31QURlmbQuggb47GTvIno5pN789RkX6zJ6AYEmftSH27h8_MwqdteEDrcuzK3VHsrrJwhDDKAVpSrS1vvgzwK/s400/how_to_s earch_in_blogger_template_editor.png" width="400" /></a></div> Step 2. Paste the following just above it: - If we are using threaded comments (with the reply option): <blockquote class="tr_bq">.comment-block { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8YiSS4nuFUO4HDX0mC9W07hmK7TAb5nT1y_bPOPg3HaqHOCjKbM32fQdYqfkXTol-svbK_yy2170Wa_3YggSp9VJzQYbqFGcMKP42EKG-bWX1TS6KEAMNwdH0cWK0iv15t8y2zmuybAoy/s1600/74.gi f); background-repeat:no-repeat; background-position:center bottom; padding-bottom:30px; margin-top: -10px; } .comments .continue { border-top: 0px solid $(widget.alternate.text.color); }</blockquote> - If we are using previous commenting system (with no reply function) <blockquote class="tr_bq">#comments-block .comment-footer { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8YiSS4nuFUO4HDX0mC9W07hmK7TAb5nT1y_bPOPg3HaqHOCjKbM32fQdYqfkXTol-svbK_yy2170Wa_3YggSp9VJzQYbqFGcMKP42EKG-bWX1TS6KEAMNwdH0cWK0iv15t8y2zmuybAoy/s1600/74.gi f); background-repeat:no-repeat; background-position:center bottom; height: 50px; }</blockquote> 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) Step 3. Save the Template. But you can still have more styles for each comment, for example adding a background color and a border. <div id="customize">How to Add A Border and A Background Color To Blogger Comments</div> <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/AVvXsEhmd3DuD5kyucJUOylfBKCJohLo7KPiFLIleVzakT4pQ8cJ813UJTMclAu7aZAyQ39Ciqu9QvOxR6afjx6l1HTmqJeSboTR2_G9j47wuzOBaGqqblT2PntcHajGilELHGAGIMD6zlISfbWd/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/AVvXsEhmd3DuD5kyucJUOylfBKCJohLo7KPiFLIleVzakT4pQ8cJ813UJTMclAu7aZAyQ39Ciqu9QvOxR6afjx6l1HTmqJeSboTR2_G9j47wuzOBaGqqblT2PntcHajGilELHGAGIMD6zlISfbWd/s400/how-to-c ustomize-color-and-style-for-blogger-threaded-comments.png" title="how to change background and color of comments in blogger" width="400" /></a></div>Step 1. Go to Template > Edit HTML and search for the following piece of code: <blockquote class="tr_bq">]]></b:skin></blockquote> Step 2. Paste the following just above it: - If we are using threaded comments (with the reply option): <blockquote class="tr_bq">.comment-block { background:#F9F9F9; /* Background Color */ border: 1px solid #f1f1f1; /* Border style */ margin-bottom:20px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .comments .comment-thread.inline-thread { background-color: #FAFAFA; /* Background color behind the replies */ border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */ } .comment-content { padding:2px 10px 10px 10px; color:#444444; /* Font Color in Comments */ } .datetime a { font-style:italic; font-size:9px; margin-left: 2px; } .comments .comments-content .user a{ color:#1982D1; /* Author's name color */ font-size: 12px; /* Author's name size */ padding-left: 10px; font-weight:bold; text-decoration:none; } .comments .comment .comment-actions a,.comments .comment .continue a{ display:inline-block; margin:0 0 10px 10px; padding:0 15px; color:#B4B4B7; text-align:center; text-decoration:none; background:#F8F8FB; border:1px solid #C2C2C5; border-radius:4px; height:20px; line-height:20px; font-weight:normal; cursor:pointer; } .comments .continue { border-top: 0px solid $(widget.alternate.text.color); } .comments .comments-content .icon.blog-author { background-image: none; margin-left: -10px; } .comments .avatar-image-container{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 40px; max-height: 40px; border: 1px solid #F2F2F2; padding: 1px; } .comments .avatar-image-container img{ margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; max-width: 40px; height: 40px; }</blockquote> Step 3. Save the Template. - If we are using previous commenting system (with no reply function): Step 1. Search for this line in your template: <blockquote class="tr_bq"><b:loop values='data:post.comments' var='comment'></blockquote> Step 2. Then, add the following code just below of it: <blockquote class="tr_bq"><div class='comments-ct'></blockquote> Step 3. Look a little further down and you'll see the </b:loop> code and just above it, add this: <blockquote class="tr_bq"></div></blockquote> Step 4. Now find this: <blockquote class="tr_bq">]]></b:skin></blockquote> Step 5. And just above of it, add this CSS code: <blockquote class="tr_bq">.comments-ct{ background:#F9F9F9; /* Background Color */ border: 1px solid #f1f1f1; /* Bprder Style */ margin-bottom:20px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } .comment-body { color:#444444; /* Font Color in Comments */ padding:10px; } .comments-ct a { padding-left: 5px; /* Link color */ color: #4A9BD8; } .comment-timestamp a { font-style:italic; font-size:9px; padding-right:10px; padding-left:10px; }</blockquote>(The rounded edges will not work in Internet Explorer with CSS) In either case, you can change the background color, border, etc.. in parts with annotations in green. Step 6. Save the Template. If you need more help, leave a comment below.</div>

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

The comments are an essential part of a blog because in them is reflected the readers' opinions regarding a post or our blog, so it is...

+ Read more »

How to Add a Vintage Style to Images In Blogger using CSS

<div dir="ltr" style="text-align: left;" trbidi="on">To get that vintage Instagram effect for your pictures you don't have to use a program, now you can use CSS and get a similar result! We will apply a shadow inside the image, add a border, we will put a color in it, and on top of our image, we will add another semitransparent image with a grunge style that will give a vintage touch. You can see the example in this picture below, moving the cursor changes to normal but keeps the edge. <div class="vintage"><img alt="vintage images blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4s9wNJ7syBHt2suBwQaiVdlbi-HIR2kAbDIE9OHTkf7_XK7C81HbCJZ94dYqOL_0xwSjhJNbWWjZTiP13JjUI476EOrS3xFx2cuiPNtHadKGLCcVxpMBsVfe7KxqRH-tBgQ_Arks_wAq/s640/Beautifu l+Flowers.jpg" title="vintage effect to blogger image" /></div><div style="clear: both;"> Obviously there will be images that will fit better these effects than others, but regardless of that we do, there should be made a few observations: <ol><li>It is made with CSS styles so as some of you might already know, it will not recognize browsers, specifically Internet Explorer, so using IE browser does not show any effect.</li><li>Hovering around the image will change with a transition effect, but only in Firefox.</li><li>The images are not centered, you will have to align to left (default), or right.</li></ol>Having clarified the above, let's start adding the CSS code to our template. Adding a Vintage Effect to Blogger Images Step 1. Go to Template > Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s320/blogger- template-edit-html.png" width="320" /></a></div> Step 2. Select the "Expand widget templates" box <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6SseU5Tk_FWCRJmBRvIzBhubJmEYn4b46GtKVkLEd1Cz8dlF2sMYBWPsbQABv0ymfyrpGejJmLY27a1y866YaGdDvcAuilQG1VT6_IjFy0_GRXkBr6rxStU0QMcVK-oY4fBsaysW5QQm/s1600/blogger-expand-widget-templates-hide-pic-inside-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6SseU5Tk_FWCRJmBRvIzBhubJmEYn4b46GtKVkLEd1Cz8dlF2sMYBWPsbQABv0ymfyrpGejJmLY27a1y866YaGdDvcAuilQG1VT6_IjFy0_GRXkBr6rxStU0QMcVK-oY4fBsaysW5QQm/s1600/blogger -expand-widget-templates-hide-pic-inside-posts.png" /></a></div>  Step 3. Search for the following piece of code: <blockquote class="tr_bq">]]></b:skin></blockquote> Step 4. Just above it, add the following CSS code: <blockquote class="tr_bq">/* Vintage Images ----------------------------------------------- */ .vintage img { padding:0; float:left; } .vintage { border:10px solid #000; position: relative; float: left; /* Change to right if you want the images to be aligned to the right */ margin-right: 20px; margin-bottom: 20px; } .vintage:before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(255,102,0, 0.6); /* sepia */ background-image:url(http://2.bp.blogspot.com/-Qva8IVtO25k/UFejhDww-zI/AAAAAAAADAY/RnlCb7JO0 xs/s000/grunge.png); background-size: cover; box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; } .vintage:hover:before { background: none; box-shadow:none; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; }</blockquote> Note: In the first code, you see in bold the line that corresponds to the color of the image, you can change it to any other color, these are some examples of traditional vintage: <blockquote class="tr_bq">background-color: rgba(0,0,255, 0.5); /* blue */ background-color: rgba(0,255,0, 0.5); /* green */ background-color: rgba(0,255,255, 0.5); /* cyan */ background-color: rgba(255,0,0, 0.5); /* red */ background-color: rgba(255,0,240, 0.5); /* violet */</blockquote> If you want the image to not change to its original state on mouse hover, then remove the last code: <blockquote class="tr_bq">.vintage:hover:before { background: none; box-shadow:none; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; transition: all .1s; } </blockquote> Step 5. After you've made your changes, click on Save Template Step 6. Finally, add this code inside your posts each time you want to apply the vintage effect to an image (switch to HTML tab if you want to use this code inside your post) <blockquote class="tr_bq"><div class="vintage"> <img border="0" src="URL of the image" /></div> <div style="clear: both;"/></blockquote> And add the URL of the image to where is the text in blue. And that's it, with this little experiment you can have your vintage-style images using CSS only. Enjoy!</div></div>

How to Add a Vintage Style to Images In Blogger using CSS

To get that vintage Instagram effect for your pictures you don't have to use a program, now you can use CSS and get a similar result! ...

+ Read more »

How to Customize Blogger's Lightbox

<div dir="ltr" style="text-align: left;" trbidi="on">Now, for those of you who have chosen to use the Blogger's Lightbox View to display the images, you have the option to change its style in a whole different way. We'll be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background as well. We can customize the Blogger Lightbox entirely on your taste. <div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUCrpfFlqEcECJertZ-YtXcsX6TOfACsLMkIjqxwTmfckcLVqZvy-aacECI6Do4XfMdIliR00k41jdLgYrIkRv4gEPFNjrm89mMV2xWXEp_WwZI-NmUKbMneIzpNeqluIRa0MqxOiQhQe/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/AVvXsEicUCrpfFlqEcECJertZ-YtXcsX6TOfACsLMkIjqxwTmfckcLVqZvy-aacECI6Do4XfMdIliR00k41jdLgYrIkRv4gEPFNjrm89mMV2xWXEp_WwZI-NmUKbMneIzpNeqluIRa0MqxOiQhQe/s320/modify-t he-blogger-lightbox-background-style-color-3.png" title="how to modify blogger lightbox view" width="320" /></a></div>Demo Take a look at the screenshots below: <div style="text-align: center;">Before:</div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WB6_fA0w-D-niVc36DSw43r9oF96E4j9RghFEPpsVH498-JYnhmdCyF45_2P0gpqSULxQsQU4r4_2rw0GXcDGpAuKnF9AY2He6gxAu3Dy6MSv-5J6_rTuL2eqJ1hDX32HyQGU0x0g2nu/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/AVvXsEg6WB6_fA0w-D-niVc36DSw43r9oF96E4j9RghFEPpsVH498-JYnhmdCyF45_2P0gpqSULxQsQU4r4_2rw0GXcDGpAuKnF9AY2He6gxAu3Dy6MSv-5J6_rTuL2eqJ1hDX32HyQGU0x0g2nu/s320/how-to-c hange-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;"> </div><div style="text-align: center;">After:</div> <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/AVvXsEgx5gBZVpmF9F-V6aIWwWPXrQSMoICMeO4ZuMnjZoJ3kTexBnjg_9l8FLXu90F66G_jOtY8XhejcyEEAVcIEZ4cmsdiboCqYiYbSk34IbwNU51CBJcmdmIZR5VmB0VpO9hkaidTHZkX9Jlf/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/AVvXsEgx5gBZVpmF9F-V6aIWwWPXrQSMoICMeO4ZuMnjZoJ3kTexBnjg_9l8FLXu90F66G_jOtY8XhejcyEEAVcIEZ4cmsdiboCqYiYbSk34IbwNU51CBJcmdmIZR5VmB0VpO9hkaidTHZkX9Jlf/s320/modify-t he-blogger-lightbox-background-style-color-2.png" title="how to customize blogger lightbox" width="320" /></a></div> After adding our CSS code, the entire look of the modal window will be changed: the background color, the bar showing the thumbnails, the edge of images (border), the text that appears in it, transparency and the close button. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgol4o4QQga66ldUiz9HMhzxyU4XWQDatWjKYV5IYkpGe7vARYljvpzlcW-Hr82zWKe-zcGL7x3tHu5N4z_Y6t8TgcoUhxRoorSbiT5apm5QR4CQ2l1Vs_AoBHNqMq94SsdWQt_-9Wuiuto/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/AVvXsEgol4o4QQga66ldUiz9HMhzxyU4XWQDatWjKYV5IYkpGe7vARYljvpzlcW-Hr82zWKe-zcGL7x3tHu5N4z_Y6t8TgcoUhxRoorSbiT5apm5QR4CQ2l1Vs_AoBHNqMq94SsdWQt_-9Wuiuto/s640/modify-t he-blogger-lightbox-background-style-color-3.png" title="how to change blogger lightbox background color" width="640" /></a></div> All we have to do is to overwrite the default styles and change them for ours. How to Change the Blogger's Lightbox Background and Style Step 1. Go to Template, click on the Edit HTML button (also click on the Proceed button if needed) <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s400/blogger- template-edit-html.png" width="400" /></a></div> Step 2. Search using CTRL + F the following code snippet: <blockquote>]]></b:skin></blockquote> Step 3. Copy and paste the following code just above it: <blockquote class="tr_bq">/* Blogger Lightbox ----------------------------------------------- */ /* Background Color */ .CSS_LIGHTBOX_BG_MASK { background-color: #ffffff !important; background-image: url(image-url-address) !important; opacity: 0.8 !important; filter: alpha(opacity=90) !important; } /* Images Border */ .CSS_LIGHTBOX_SCALED_IMAGE_IMG { outline: 0px solid #fff !important; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 5px #000000; -moz-box-shadow: 0px 0px 5px #000000; box-shadow: 0px 0px 5px #000000; } /* Close Button */ .CSS_LIGHTBOX_BTN_CLOSE { background: url(image-url-address) no-repeat !important; width: 24px !important; height: 24px !important; } /* Thumbnails Bar Color */ .CSS_LIGHTBOX_FILMSTRIP { background-color: #eaeaea !important; } /* Text Color */ .CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK { color: #000 !important; } /* Index Info (number of images) */ .CSS_LIGHTBOX_INDEX_INFO { color: #555555 !important; }</blockquote> Note: - The text in green explains to which part the code belongs (it doesn't need to be modified) For example, the / * Background Color * / part can change the background color or even the LightBox background color to an image. If you want to do that, then change this line by replacing the red text with the url address of your image: <blockquote class="tr_bq">background-image: url(image-url-address) !important;</blockquote> - The opacity is just below, if you add a lower value ( 0.8 ) the background will become more transparent. - To change the icon for close button, you have to replace the text in red from /* Close Button */ 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) - To change the text color of images, replace the #555555 value from /* Index Info (number of images) */ - The border of the images can be changed as much as we want: you can change the borders' roundedness, shadow, etc... but remember this is CSS3 so older versions of Internet Explorer will not see it. Step 4. Click on Save Template and you're done!</div>

How to Customize Blogger's Lightbox

Now, for those of you who have chosen to use the Blogger's Lightbox View to display the images, you have the option to change its styl...

+ Read more »

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

<div dir="ltr" style="text-align: left;" trbidi="on">It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always an very easy task to add this. 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 date for your Blogger posts. <div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknwkn5pV2S33Ha68KbQaOpS67xs9Vwm7Mc_bp37sKUrk7OXa1gauQ6ciX0dyiLaPk3gse0LW1YXdNytAGTOTWWWI7tBA90c9Z707h0Hf20nvbsf3P2clz2PECw4kwF6wnS6Nl-7Oj0sAX/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/AVvXsEgknwkn5pV2S33Ha68KbQaOpS67xs9Vwm7Mc_bp37sKUrk7OXa1gauQ6ciX0dyiLaPk3gse0LW1YXdNytAGTOTWWWI7tBA90c9Z707h0Hf20nvbsf3P2clz2PECw4kwF6wnS6Nl-7Oj0sAX/s200/Creating -calendar-style-dates-for-your-Blogger-blog-posts-3.png" width="200" /></a></div> <a href="http://demo-blog32.blogspot.ro/2012/07/demo-post1.html">DEMO</a></div> How to create calendar style dates in Blogger Step 1. Go to Settings > Language and Formatting - Date Header Format and change the date format as you can see in my example below (put day first, then the month and finally the year)   <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKge1TuX7wkoerRWB2pHqVBnxOzSeu6b7OuZ_eOkwZaWsu3dxTaOU5gRm51orLszmnumA1IOeZ3umzOsRTX-840J6AOlor1wGszbcuI3_s_rU5fHdz8wvrNZm5e4IewrThlj3oyZ8v7Ife/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/AVvXsEgKge1TuX7wkoerRWB2pHqVBnxOzSeu6b7OuZ_eOkwZaWsu3dxTaOU5gRm51orLszmnumA1IOeZ3umzOsRTX-840J6AOlor1wGszbcuI3_s_rU5fHdz8wvrNZm5e4IewrThlj3oyZ8v7Ife/s400/Creating -calendar-style-dates-for-your-Blogger-blog-posts-1.png" width="400" /></a></div> Step 2. Then go to Template > Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s400/blogger- template-edit-html.png" width="400" /></a></div> Step 3. Select the "Expand Widget Templates" checkbox <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwqQ94J6ByF0a8cY4NIj6W1gqeVQP6jKBy4UQP_zNnm9BG147WWbxBNtkuVk0muq1A5pR4B1o3c62Zevvml4Mjt2JX9rayA5P1EkplUJ8u43KqOBp_jp4lcRgpYXTlUEIHnwfkz9fAQ1B/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwqQ94J6ByF0a8cY4NIj6W1gqeVQP6jKBy4UQP_zNnm9BG147WWbxBNtkuVk0muq1A5pR4B1o3c62Zevvml4Mjt2JX9rayA5P1EkplUJ8u43KqOBp_jp4lcRgpYXTlUEIHnwfkz9fAQ1B/s1600/blogger -expand-widget-templates.png" /></a></div> Step 4. And search (CTRL + F) the following line: <blockquote class="tr_bq"><h2 class='date-header'><data:post.dateHeader/></h2></blockquote> Step 5. In case you find it twice, then you should replace it twice with this code: <blockquote class="tr_bq"><div id='Date'> <script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script> </div> <b:else/> <div id='Date'> <script>changeDate(&#39;&#39;);</script> </div></blockquote> Step 6. Now search for this tag (CTRL + F to find it) <blockquote class="tr_bq"></head></blockquote> Step 7. And paste the code from below just ABOVE the </head> tag: <blockquote><script type='text/javascript'> //<![CDATA[ var DateCalendar; function changeDate(d){ if (d == "") { d = DateCalendar; } var da = d.split(' '); day = ""+da[0]+""; month = ""+da[1].slice(0,3)+""; year = ""+da[2]+""; document.write(month+day+year); DateCalendar = d; } //]]> </script> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <style type='text/css'> /* Calendar style date ----------------------------------------------- */ #Date { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiatoKumRsTsR6MAFyGdumY4CsJa4qC4Cr3ex-OMLmIhhUKoH-fJxtkt0C-uL4X1U99xDtPetNONby2WQc_SADe8V8Ps6z4jnnKu14EM3hpP-WqS6xu4qu3FdXsWD6Zn82dxtJWoV8MN47O/s1600/calen dar07.png) no-repeat; display: block; width:60px; height:60px; float: left; margin: 15px 2px 0 -108px; padding: 0 0 8px 0px; border: 0; text-transform: uppercase; } .date_month { display: block; font-size: 15px; font-weight:bold; margin-top:-1px; text-align:center; color:#ffffff; /* Month's color */ } .date_day { display: block; font-size: 28px; font-weight:bold; margin-top:-8px; text-align:center; color:#282828; /* Day's color */ } .date_year { display: block; font-size: 10px; margin-top:-8px; text-align:center; color:#282828; /* Year's color */ } </style> </b:if></blockquote> Before saving your Template, we can make some changes: <ul><li>To change the calendar style, replace the url in blue with yours;</li><li>If the calendar doesn't appear correctly, change -108 with 0;</li><li>With green are marked the areas where you can change the color of the dates</li></ul><div> Step 8. Now Preview your Template and if everything is ok, click on the Save button. Enjoy!</div></div>

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 an very ea...

+ Read more »

How to Change Default Anonymous Avatar in Blogger Comments

<div dir="ltr" style="text-align: left;" trbidi="on">In the last tutorial, I wrote about how you can change avatars size in blogger comments and in this simple tutorial, I will show you how to change or customize default avatar of anonymous commenters or Blogger users with no picture added on their profiles. After Blogger announced new feature of threaded comment, we can still customize it by adding a jQuery plugin to our template and replacing the default anonymous avatar found at this URL http://img1.blogblog.com/img/anon36.png and the one for blogger users http://img2.blogblog.com/img/b36-rounded.png ...with our own. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Bp-8B7OQuL45kf3ig9HxLG9-RICRMH6qFKaIApgYfsuFK1qaCetoQoyoc_m6J3nwEC1hyphenhyphennnKKWcD2p0x3bbfk1nVnP0JINVk7l6lo_WsSzBXzQ0IlhD0JIKmVsdEiK6VnlbvjYwKtyyX/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/AVvXsEg3Bp-8B7OQuL45kf3ig9HxLG9-RICRMH6qFKaIApgYfsuFK1qaCetoQoyoc_m6J3nwEC1hyphenhyphennnKKWcD2p0x3bbfk1nVnP0JINVk7l6lo_WsSzBXzQ0IlhD0JIKmVsdEiK6VnlbvjYwKtyyX/s1600/change+ anonymous+avatar+in+blogger+blogspot+comments.png" title="change anonymous avatar in blogger comments" /></a></div> Step 1. Go to Dashboard - Template - click on the Edit HTML button and then Proceed <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/AVvXsEjAct2wTTur4md3cIkcEUSLtqN3JGVui46Mr7BZj7qFwKIeE_JYM1jGIYF6WXbQGf28QYRhF3UE8ynUn4606TyTeJrzUviy2vnSe6h6bBdRgzC617gGCIQB09VXOj2t1p26iFLHDej0eo7J/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/AVvXsEjAct2wTTur4md3cIkcEUSLtqN3JGVui46Mr7BZj7qFwKIeE_JYM1jGIYF6WXbQGf28QYRhF3UE8ynUn4606TyTeJrzUviy2vnSe6h6bBdRgzC617gGCIQB09VXOj2t1p26iFLHDej0eo7J/s1600/remove- blogger-labels.png" width="320" /></a></div> ...then select Expand Widget Template (don't forget to make a backup) <ul></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwqQ94J6ByF0a8cY4NIj6W1gqeVQP6jKBy4UQP_zNnm9BG147WWbxBNtkuVk0muq1A5pR4B1o3c62Zevvml4Mjt2JX9rayA5P1EkplUJ8u43KqOBp_jp4lcRgpYXTlUEIHnwfkz9fAQ1B/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwqQ94J6ByF0a8cY4NIj6W1gqeVQP6jKBy4UQP_zNnm9BG147WWbxBNtkuVk0muq1A5pR4B1o3c62Zevvml4Mjt2JX9rayA5P1EkplUJ8u43KqOBp_jp4lcRgpYXTlUEIHnwfkz9fAQ1B/s1600/blogger -expand-widget-templates.png" width="320" /></a></div> Step 2. Find (CTRL + F) this code in your template: <blockquote class="tr_bq"></body></blockquote> Step 3. Add the following code just above it: <blockquote class="tr_bq"><script src='http://code.jquery.com/jquery-latest.js'/> <script> $(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;) .attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJt6_GYNAeiHvDFvtnHLvdsjAasEYVnx07_fjW6tyGKsmcbapFxZmgbI6xpRfLZ9sTkSd6-M8W-yx8FhTn5uJoBD23j123sAkHeBKyeiTXSdVGMdR_DglPug-ilgNGZcT2xSe5Q8k3fc/s1600/defaul t_avatar.gif&#39;) .ssyby(&#39;blank&#39;) </script> <script src='http://code.jquery.com/jquery-latest.js'/> <script> $(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot ;) .attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd5ZZ3vhJsjqurvBP6z6z2L6HwHhITidZrmepUE3namfCtpOP0Uw6c7xIfGVcIYOTCf7U0yffUloftt3mXuJrGFGqvGc2tzq6bK0i71Lru6aomh1Btvc0iKH9b4b2ajD-6-QnL7uX8hHw/s1600/bl ogger-user.png&#39;) .ssyby(&#39;blank&#39;) </script></blockquote> Step 4. Save the Template How to change avatar: For Anonymous users: Replace the code in red with the url address of your image For Blogger users: Replace the URL in blue with your own. You can choose one from these below (copy the url address): <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/AVvXsEhLJt6_GYNAeiHvDFvtnHLvdsjAasEYVnx07_fjW6tyGKsmcbapFxZmgbI6xpRfLZ9sTkSd6-M8W-yx8FhTn5uJoBD23j123sAkHeBKyeiTXSdVGMdR_DglPug-ilgNGZcT2xSe5Q8k3fc/s200/default_ avatar.gif" width="100" /></div> <div style="margin-left: 1em; margin-right: 1em;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLJt6_GYNAeiHvDFvtnHLvdsjAasEYVnx07_fjW6tyGKsmcbapFxZmgbI6xpRfLZ9sTkSd6-M8W-yx8FhTn5uJoBD23j123sAkHeBKyeiTXSdVGMdR_DglPug-ilgNGZcT2xSe5Q8k3fc/s200/default_avata r.gif</blockquote></div><div class="separator" style="clear: both; text-align: center;"></div><div style="margin-left: 1em; margin-right: 1em;"> </div><div style="margin-left: 1em; margin-right: 1em;"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl-nv1fS7ykTivFY1qnGBeu2-lz0twO6AdS5VVy4hgHVyzqJo5V7XCIsIGgZbJsOTLeWiiSrVqminf0aDvsZh23u1VOyk68cOExzB899iz3bCWQTWlZnn-sEzp-Lh8k-ReMGzQ5T52K-g/s1600/faceboo k.gif" width="100" /></div> <div style="margin-left: 1em; margin-right: 1em;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl-nv1fS7ykTivFY1qnGBeu2-lz0twO6AdS5VVy4hgHVyzqJo5V7XCIsIGgZbJsOTLeWiiSrVqminf0aDvsZh23u1VOyk68cOExzB899iz3bCWQTWlZnn-sEzp-Lh8k-ReMGzQ5T52K-g/s1600/facebook.gif </blockquote></div><div class="separator" style="clear: both; text-align: center;"></div><div style="margin-left: 1em; margin-right: 1em;"> </div><div style="margin-left: 1em; margin-right: 1em;"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQK7d5W5rZgAMl2LBtXU9QRTn7RbCRSxNCrLCpWYNOAVG3JAXl8v2VEmvHhWG4-FO9c24wOUxrs0vAVGaNrNPXVZNrNVRrzaobANgJrDreucgeULtqgTxFrLwf6pGT9IV4gAa6THSMYI/s1600/anonymo us3.png" width="100" /></div> <div style="margin-left: 1em; margin-right: 1em;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQK7d5W5rZgAMl2LBtXU9QRTn7RbCRSxNCrLCpWYNOAVG3JAXl8v2VEmvHhWG4-FO9c24wOUxrs0vAVGaNrNPXVZNrNVRrzaobANgJrDreucgeULtqgTxFrLwf6pGT9IV4gAa6THSMYI/s1600/anonymous3.p ng</blockquote></div> <div style="margin-left: 1em; margin-right: 1em;"> </div><div style="margin-left: 1em; margin-right: 1em;"><img height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-fD-thl61QUnlq49wI2_1-_S_EDAEggKfr7xHH0pTxbzLrtOmIPN5kMacML3xhfK5TcNtIHbZxVL7rzz6XcWxtqrcXetzEqrJG6IodGOg2vMOTGTKQLXrqfFqx8ZiMIWxQzgYeijbxAe/s1600/blogger -user.png" width="100" /></div> <div style="margin-left: 1em; margin-right: 1em;"><blockquote class="tr_bq">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR-fD-thl61QUnlq49wI2_1-_S_EDAEggKfr7xHH0pTxbzLrtOmIPN5kMacML3xhfK5TcNtIHbZxVL7rzz6XcWxtqrcXetzEqrJG6IodGOg2vMOTGTKQLXrqfFqx8ZiMIWxQzgYeijbxAe/s1600/blogger-user .png</blockquote></div> That's it! If you liked this post, please consider sharing it.</div>

How to Change Default Anonymous Avatar in Blogger Comments

In the last tutorial, I wrote about how you can change avatars size in blogger comments and in this simple tutorial, I will show you how...

+ Read more »

How to Hide Blogger Sidebar to Display AdSense For Search Results

<div dir="ltr" style="text-align: left;" trbidi="on">When visitors are searching for content on your blog, you have the following 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. But the best option is to display the search results in your own site/blog, mainly because you are not sending people off your blog and when they are taken to a new page of search results, so it could be confusing many times because it doesn't look anything like your site or Google. Therefore, displaying the search results within your site, could look more professional and could also increases your page views and your revenue from the ads on the search page. 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 that in most of the blogs. 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) where we'll remove the sidebar, so that we'll have enough space to make the post/page section of 800px wide. Also, we will cre ate a static page specially designed 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. Search results span the width of the page with the sidebar hidden: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRAzNN1Ckp9B5GDpEynB-Ww3134YI9tlNrWTiRgLqYxw7_LJNq9Mbmca-WJwMC2XzDRBhVC_ZoLzKi4ZHJw1jBHpvkqrhyphenhyphenNgaKCaQ-MEbf7UpPJIHKsG9GKJefrRDIvbXb8La1T3Hs4Of/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/AVvXsEibRAzNN1Ckp9B5GDpEynB-Ww3134YI9tlNrWTiRgLqYxw7_LJNq9Mbmca-WJwMC2XzDRBhVC_ZoLzKi4ZHJw1jBHpvkqrhyphenhyphenNgaKCaQ-MEbf7UpPJIHKsG9GKJefrRDIvbXb8La1T3Hs4Of/s1600/HOW-TO- HIDE-REMOVE-SIDEBAR-FOR-ADSENSE-SEARCH-RESULTS.png" width="640" /></a></div> Display AdSense For Search Results Within Blogger Page Step 1. Create a new static page on your blog, you can give it the title 'Search Results' but leave the content section empty and then Publish the page. Step 2. 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'. OR in case this screen will not appear, right click on View Page and select Copy Link Address. We will need this URL of the page when creating the AdSense for search. Step 3. Go To Your AdSense account, then go to My ads tab, select the Search option and Create a New custom search engine. Follow the steps until you come to the Search results option. Step 4. Select the 3rd method "on my website using an iframe", then Enter the URL of the page you created into the URL field and continue. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkaRR8ShwokYdnHF5ZRKw3UVaSvh2GtWBL-GqM1eqI6ybtItc4JR0tXjeJlhbOih8lu6_vg1k4oAh-uascBrGifANXJcsilx6c5B_6wWabE_XmvFsxnbnIe7lgzVZKVLQXv9sn1nr-bG72/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/AVvXsEhkaRR8ShwokYdnHF5ZRKw3UVaSvh2GtWBL-GqM1eqI6ybtItc4JR0tXjeJlhbOih8lu6_vg1k4oAh-uascBrGifANXJcsilx6c5B_6wWabE_XmvFsxnbnIe7lgzVZKVLQXv9sn1nr-bG72/s1600/hide-bl ogger-sidebar-for-adsense-search-results.png" /></a></div> <div class="separator" style="clear: both; text-align: center;"></div>Step 5. Follow the rest of the set up process, at the end you will be given two pieces of code. The first piece of code is for the actual search bar that you can paste into a Html/Javascript gadget in your sidebar or wherever you want it. The second piece of code you must copy and paste into a new HTML/JavaScript gadget and after clicked on Save - drag it above the <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sBp1ll66BJCaK6uggx1TcMG_juN6up_26w383P1w13BTnEFAhFkYFARW6LGlEYJR71MwB4WKpdVwCtJb27QlGoW7zAx-JHJkRYaPEs5Ks5hYp5YadjBJZawDn4pFHqpBA1UmsVPWmeRS/s1600/adsense-search-results-blogger.png">Blog Posts</a> area <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sBp1ll66BJCaK6uggx1TcMG_juN6up_26w383P1w13BTnEFAhFkYFARW6LGlEYJR71MwB4WKpdVwCtJb27QlGoW7zAx-JHJkRYaPEs5Ks5hYp5YadjBJZawDn4pFHqpBA1UmsVPWmeRS/s1600/adsense-search-results-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sBp1ll66BJCaK6uggx1TcMG_juN6up_26w383P1w13BTnEFAhFkYFARW6LGlEYJR71MwB4WKpdVwCtJb27QlGoW7zAx-JHJkRYaPEs5Ks5hYp5YadjBJZawDn4pFHqpBA1UmsVPWmeRS/s1600/adsense -search-results-blogger.png" width="640" /></a></div>  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. Adding The Code In Blogger To Change the Results Page Layout Step 1. In Your Blogger Dashboard, go to Template > Edit HTML - then click Proceed  <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAct2wTTur4md3cIkcEUSLtqN3JGVui46Mr7BZj7qFwKIeE_JYM1jGIYF6WXbQGf28QYRhF3UE8ynUn4606TyTeJrzUviy2vnSe6h6bBdRgzC617gGCIQB09VXOj2t1p26iFLHDej0eo7J/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/AVvXsEjAct2wTTur4md3cIkcEUSLtqN3JGVui46Mr7BZj7qFwKIeE_JYM1jGIYF6WXbQGf28QYRhF3UE8ynUn4606TyTeJrzUviy2vnSe6h6bBdRgzC617gGCIQB09VXOj2t1p26iFLHDej0eo7J/s1600/remove- blogger-labels.png" /></a></div> Step 2. Select the "Expand widget templates" box <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_v8AU19HWKNurG3NPjxiOxErq6p2TDgjk6VaCSw6Ruqf2FLyLl-D2D2lFVDjLw1EA7QukU781axFOojDorR_1KphdT94vOUWgxswGluVTle5KfyKBtf1ZHm3AuM9ZV_XBquJ5dKYiQZwg/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_v8AU19HWKNurG3NPjxiOxErq6p2TDgjk6VaCSw6Ruqf2FLyLl-D2D2lFVDjLw1EA7QukU781axFOojDorR_1KphdT94vOUWgxswGluVTle5KfyKBtf1ZHm3AuM9ZV_XBquJ5dKYiQZwg/s1600/blogger -expand-widget-templates.png" /></a></div> Step 3. Find (CTRL + F) the following piece of code <blockquote class="tr_bq">]]></b:skin></blockquote><div> </div><div>Step 4. Just below it, paste this code: <blockquote class="tr_bq"><b:if cond='data:blog.url == &quot;PAGE-URL-HERE&quot;'> <style> .main-inner .columns { padding-left: 0px !important; padding-right: 0px !important; } .main-inner .fauxcolumn-center-outer { left: 0px !important; right: 0px !important; } .main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer { display: none !important; } </style> </b:if></blockquote></div><div> Note: Replace PAGE-URL-HERE with the url address of the page where the search results will be displayed (the one you have added at the step 4)</div><div> </div>Step 5. Now Save Template and you're done! This simple trick allows you not only to hide the sidebar in the search results page, you can, as well, hide it in any page you want... just create your page and follow the same steps. It is also good to hide the sidebar in Privacy Policy Pages, Contact Pages and in all the non-content-based pages with little content or no content at all. Make sure to check out other interesting AdSense Tutorials. If you need more help, leave your comments below.</div>

How to Hide Blogger Sidebar to Display AdSense For Search Results

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

+ Read more »

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

<div dir="ltr" style="text-align: left;" trbidi="on">To hide images/pictures from our blogger posts and to make them appear only in homepage, we will have to 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. Just follow the next steps: Step 1. Go to Dashboard - Template - Edit HTML ( click on Proceed button ) <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7a6BvTgtZfiar7yE9W72-yo5C51xdVKuwQSnMW1vTreVbJuspdosciCL2PgBVJ1cp5Tb9p6C49BISzfTd2djxw_VFQ49BiSqQPU1YrihWLsqgUQLOSB03lWWL68OfRObcRG-oRQnzaTyw/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/AVvXsEj7a6BvTgtZfiar7yE9W72-yo5C51xdVKuwQSnMW1vTreVbJuspdosciCL2PgBVJ1cp5Tb9p6C49BISzfTd2djxw_VFQ49BiSqQPU1YrihWLsqgUQLOSB03lWWL68OfRObcRG-oRQnzaTyw/s1600/blogger -template-edit-html.png" /></a></div>  Step 2. Select "Expand Widget Template" (make a backup) <ul></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiywFE-u68ZAexr9w9Ca_3RILtgQmDeh7VcvyR7fUKFNzMWFFSA3Uj4y56xFqaTQxaPablqqUGBejnVgvQ7JWgTNDUX_3i3BjdDcElSH3E_1HZQ4Khgh31WZz3HGgl8wVuMWvG-Dpp64OZt/s1600/blogger-expand-widget-templates-hide-pic-inside-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiywFE-u68ZAexr9w9Ca_3RILtgQmDeh7VcvyR7fUKFNzMWFFSA3Uj4y56xFqaTQxaPablqqUGBejnVgvQ7JWgTNDUX_3i3BjdDcElSH3E_1HZQ4Khgh31WZz3HGgl8wVuMWvG-Dpp64OZt/s1600/blogger -expand-widget-templates-hide-pic-inside-posts.png" /></a></div>  Step 3. Find (CTRL + F) this code in your template: <blockquote class="tr_bq">    }]]></b:skin></blockquote><div> </div><div>Step 4. Copy and paste the following code just below it</div><div> </div><div><div><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;index&quot;'> <style> .hidepic{ display: none; } </style> </b:if></blockquote></div></div><div> </div><div>Step 5. Save the Template.</div><div> </div><div>Now everytime you create a post, firstly add the pic you want to hide and then switch to HTML tab where you'll see the HTML code of the image you have added that will look something like this: <blockquote class="tr_bq"><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89rAMe5FygZLbdc60UMmZheWeOyrKqz4H4B4mHXPRV91pmgXGf-EXp8dst3-yju7MU2ZHu1FIPNmzVWEW4TmOd9Vhz-SMelRvySCt21-t-mU0npWZonvnUwOP_2JDed246D5wy0RzqoM/s1600/fire_b ird_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/AVvXsEi89rAMe5FygZLbdc60UMmZheWeOyrKqz4H4B4mHXPRV91pmgXGf-EXp8dst3-yju7MU2ZHu1FIPNmzVWEW4TmOd9Vhz-SMelRvySCt21-t-mU0npWZonvnUwOP_2JDed246D5wy0RzqoM/s320/fire_bir d_by_fhrankee-d32af8v.png" width="320" /></a></div></blockquote></div><div> Note: it should be at the exact location where your image has been added  (if the image is at the middle of the text, then the code should be found at the middle) Step 6. Replace "separator" with "hidepic" - see the screenshot below:</div><div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolBbP0uyU7n8X9tmwtDqqLMOb0TSmQutiu2N5hwuj1DhG680_A_RD-u3AfCXWGQvPYEAieGPwCUzRvvy8jE0xoQo0xQnmtwre-Rx7VIbYVVxC1bmA9p6eavbJN4qYvykmWCbPK3UW-EAj/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/AVvXsEjolBbP0uyU7n8X9tmwtDqqLMOb0TSmQutiu2N5hwuj1DhG680_A_RD-u3AfCXWGQvPYEAieGPwCUzRvvy8jE0xoQo0xQnmtwre-Rx7VIbYVVxC1bmA9p6eavbJN4qYvykmWCbPK3UW-EAj/s1600/how-to- hide-pic-in-posts-and-show-it-on-homepage.png" width="640" /></a></div> </div><div>If you need more help, please leave a comment below.</div></div>

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

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

+ Read more »

How to Remove Showing Posts With Label in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">For any default Blogger layout, the "<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqoVVtde0GABLfic7XpQ4jgekfHq-OQZBMPyH4KDUFj8a_CvjlLuw4H8LJ3eRfBpwIgI_jYElRM04nVvXu-9vcARY-suyW_UYPbuGHyIMGdzRPOtOL0-sq6sQS2O9meuoYmFEn4ofSnFFi/s1600/remove+showing+posts+with+label+show+all+posts+from+blogge+blogspot.png">Showing posts with label</a>" message shows up above the posts whenever 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: Removing "Showing post with label...show all posts" Step 1. Go to Dashboard - Template - Edit HTML (if necessary, click on Proceed button) <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s1600/blogger -template-edit-html.png" /></a></div> Step 2. Click somewhere inside the template code, then search - using CTRL+F - this code: <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. <div style="text-align: center;">Screenshot:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpbOW-N3iBJ1Bare2CrkILWNZs3V-qDDRREBKFhO8sg_-x6GXrQmJbSx0m8GM8SnmBuSdKcjU8BZ6-SGyL09NPQTnYWYagRccWmQme6UQogYzAxSKEYmoYl3iYQaxZXdCispAnLHBSIVkA/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/AVvXsEhpbOW-N3iBJ1Bare2CrkILWNZs3V-qDDRREBKFhO8sg_-x6GXrQmJbSx0m8GM8SnmBuSdKcjU8BZ6-SGyL09NPQTnYWYagRccWmQme6UQogYzAxSKEYmoYl3iYQaxZXdCispAnLHBSIVkA/s640/remove-b logger-blogspot-labels.png" width="640" /></a></div> Step 3. Below is this code that you need to remove - along with the first one, as well: <blockquote class="tr_bq">     <b:includable id='status-message'>       <b:if cond='data:navMessage'>       <div class='status-msg-wrap'>         <div class='status-msg-body'>           <data:navMessage/>         </div>         <div class='status-msg-border'>           <div class='status-msg-bg'>             <div class='status-msg-hidden'><data:navMessage/></div>           </div>         </div>       </div>       <div style='clear: both;'/>       </b:if>     </b:includable></blockquote> <div style="text-align: center;">Screenshot </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xtmdY0MYSW_my-KNBGICo6VS7_uEM32VpIubwRpll0l0g8idg-_4VftilNHDlQgbcpiXb-22G2X8LfD2UREt7_PheE5DXjugU33rWrdxVzaRlI2RYM4FEnbCDdf-ghLQYY__SdQSpHBm/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/AVvXsEi1xtmdY0MYSW_my-KNBGICo6VS7_uEM32VpIubwRpll0l0g8idg-_4VftilNHDlQgbcpiXb-22G2X8LfD2UREt7_PheE5DXjugU33rWrdxVzaRlI2RYM4FEnbCDdf-ghLQYY__SdQSpHBm/s640/remove-b logger-labels-new-template-editor.png" width="640" /></a></div>  Step 4. Replace it with this one: <blockquote class="tr_bq"><b:includable id='status-message'> <b:if cond='data:navMessage'> <div> </div> <div style='clear: both;'/> </b:if> </b:includable></blockquote> Step 5. Save the template. Now view your blog and click on some label....there should be no box anymore.</div>

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 whenever you click on a label ...

+ Read more »

How to number comments in Blogger/BlogSpot

<div dir="ltr" style="text-align: left;" trbidi="on">This Blogger hack will show you how to add comment count inside a speech bubble, so that you & your readers can use the numbers to mention or point to a particular comment on any of your posts and besides this, it could as well improve the look and feel of your blog. Note: This works with the previous blogger commenting system, so if you want to add this hack, you should remove first the Blogger threaded comments. Learn here H ow to remove Blogger threaded comments UPDATE! Now you can add comment bubble in your threaded comments too. Read this tutorial: How to Add Numbered Comments In Threaded Comments <div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1b49IsEbUAvwIi4PpgEBgwnhvnVNaaTMm4HIqMGd2NrkrEQf_UXvz_Or9qkyshXVyOGa3tgHsbPUat10Sy1KO1Lo9MQEbmdnAFW3wR0S1_P3pk3SaRED6nk9bOIZPBBmnqfDqhWHQuP8g/s1600/number+comments+on+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger blogspot, tricks" border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1b49IsEbUAvwIi4PpgEBgwnhvnVNaaTMm4HIqMGd2NrkrEQf_UXvz_Or9qkyshXVyOGa3tgHsbPUat10Sy1KO1Lo9MQEbmdnAFW3wR0S1_P3pk3SaRED6nk9bOIZPBBmnqfDqhWHQuP8g/s200/number+c omments+on+blogger+blogspot.png" title="" width="200" /></a></div> <a href="http://helplogger.blogspot.ro/2012/06/numbered-comments-on-threaded-comments.html"></a>How to add numbered comments on our Blogger/Blogspot blog <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/AVvXsEg79u0BbQdHR_NPQMDvs_nBtIROIDVu0h_MmA0fFHB4rgVzluAmkPUMyh0O4De5Yl1BKi44bROlADUEjmlIw1-cfLVOhtYO5n5aI5YPsTcYR_E_wsPMuZngNZ8qtQkWypiWgnnO9-RCajsp/s1600/how+to+number+comments+in+blogger+blogspot+blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to blog, blogspot blogger" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg79u0BbQdHR_NPQMDvs_nBtIROIDVu0h_MmA0fFHB4rgVzluAmkPUMyh0O4De5Yl1BKi44bROlADUEjmlIw1-cfLVOhtYO5n5aI5YPsTcYR_E_wsPMuZngNZ8qtQkWypiWgnnO9-RCajsp/s320/how+to+n umber+comments+in+blogger+blogspot+blog.png" title="how to number comments in blogger blogspot" width="320" /></a></div> Step 1. Go to Dashboard - Template - Edit HTML (click on Proceed button, if needed) <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeYZCxf_l671pd1uNcX5tyxUxoKl7y66sCSCP2H2YDXMu4S1DYAlP_3eLYqtYY9QidFR6yqXj7F5iki5Gk7oXFgssy4Il0WUkFV9FU073rOkMzf46QC-IWYB6aWoNIs6ng1LdEekgJz6vu/s400/blogger- template-edit-html.png" width="400" /></a></div>  Step 2. Select "Expand Widget Template" (make a backup) <ul></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6SseU5Tk_FWCRJmBRvIzBhubJmEYn4b46GtKVkLEd1Cz8dlF2sMYBWPsbQABv0ymfyrpGejJmLY27a1y866YaGdDvcAuilQG1VT6_IjFy0_GRXkBr6rxStU0QMcVK-oY4fBsaysW5QQm/s1600/blogger-expand-widget-templates-hide-pic-inside-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6SseU5Tk_FWCRJmBRvIzBhubJmEYn4b46GtKVkLEd1Cz8dlF2sMYBWPsbQABv0ymfyrpGejJmLY27a1y866YaGdDvcAuilQG1VT6_IjFy0_GRXkBr6rxStU0QMcVK-oY4fBsaysW5QQm/s1600/blogger -expand-widget-templates-hide-pic-inside-posts.png" /></a></div> Step 3. Now find (CTRL+F) the following code in your template: <blockquote class="tr_bq"><b:loop values='data:post.comments' var='comment'></blockquote> Step 4. Immediately above/before it, paste this code: <blockquote class="tr_bq"><script type='text/javascript'>var CommentsCounter=0;</script></blockquote> Step 5. Find this code: <blockquote class="tr_bq"><data:commentPostedByMsg/></blockquote> Step 6. And immediately below/after it, copy and paste this: <blockquote class="tr_bq"> <a expr:href='data:comment.url' title='Comment Link'> <script type='text/javascript'> CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) </script> </a> </blockquote> Step 7. Find (CTRL+F) this tag in the template: <blockquote class="tr_bq"></head></blockquote> Step 8. Paste this code just above/before it: <blockquote class="tr_bq"> <style type="text/css"> .comments-number a:link, .comments-number a:visited { color: black !important; text-decoration: none !important; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ByuwV9vVRX2dR1xWy_iWg4-kzUBxYhGYbG0vJxzK6WEHSmjFwimVVoKHIj5Dqakk3dm42BbYvficPaESuNQSg_CNljiG2BEkjEoTi5e9_p_dr9dlQtFlqLDTI74UFz0uuQlQNlKM-h5S/ /comment+bubble+1.png) no-repeat; width: 50px; /*image-width size*/ height: 48px; /*image-height size*/ float: right; display: block; margin-right: 5px; margin-top: -15px; /*comments-counter position*/ text-align: center; font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif; font-size: 15px; font-weight: normal; } .comments-number a:hover, .comments-number a:active { color: #1BA0E1 !important; text-decoration: none !important; } </style> </blockquote> Note: <ul><li>To change the comment bubble, replace the red text from above with your own address</li><li>To change the color of the numbers, replace the blue text with the hex value of your color</li></ul> Comment Bubbles  To choose a comment bubble, right-click on the image and select "Copy Image Address/Location": <img alt="how to blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc6ZE7LGo6nFELPbbW9hDMNkjdHSma5daOHyOWk1AahC-RgICud1EfW5l2KxNeNN02ecrEigut5EslU-WEQ6d1lkd1jXki90fTknLGU2WWEuVpebsY7EmHEJqvHiy0kFrZ3Vpsr_7DzE2S/s1600/blue+co mment+bubble.png" title="comments bubble" /><img alt="blogger blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdcdqPaFDmcdZo2_rx9KYcYe7Ms3BboadTs9-5Hu9PmAFiv2a0lbaWqDTHBf-uLGUlLLm4PtnieNTim-tnj-tGgAV3xqeuGAvlWsNe0oBB9Qeah0_DMAEaTnYezLf6QozpK6UH7fEFywn0/s1600/blue.pn g" title="speech bubble" /><img alt="blogspot blogger, how to blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDHgp6aFxjr30gQiPwTWXKST9BGhVSjvQNvpgZjn7mgx5zN7PX2tOuqmdRl97bouoxvrOSMcYKcFVFSIFB4ae7PXbOWYynNZG5ThYy-yKiucr4_DuORIhRi0Dj52j7fX0riaIIl6m-Pjhd/s1600/bubble. png" title="speech bubble 3" /><img alt="widget blogger blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLi7f2AxRgiLnID4KYTC0BBXLmRiy4Pzpu55l7UbI8wRcNnIDF38y-3_9mCDRB-Wnb5Uu6llk8iWEHuItEfYvqDnXm716_5PIG_UWq9eNv3IKy4JRHZehUCDj3sonoJGKR23_VzIdCvAzK/s1600/cloud.p ng" title="speech bubble 4" /><img alt="blogs, how to blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiiEnILpMX4xo_Inl6ZWrkdtPy0pRqnU-HHVNub14HOSlQFLUl_QBDo1G0LKDORWEyRDYOLnenioDvQ4B1_4DCrYMkJYfGTduEHbcYuHC-7Z62Bvfh2BkpXBRXdTWvUVMVHohvZE4sAr-2/s1600/comment +6.png" title="speech bubble 5" /><img alt="blogspot or blogger, how to blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ByuwV9vVRX2dR1xWy_iWg4-kzUBxYhGYbG0vJxzK6WEHSmjFwimVVoKHIj5Dqakk3dm42BbYvficPaESuNQSg_CNljiG2BEkjEoTi5e9_p_dr9dlQtFlqLDTI74UFz0uuQlQNlKM-h5S/s1600/comment +bubble+1.png" title="speech bubble 6" /><img alt="tutorials, how to" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSuJ0_j5Nz3Dx3RIJ1dmUCSFcQvKPonBp-AMxir98qzzKduGJFUbFrBWjJmgCgNWpM4XqHEQFA_f46CvKBOZ7It4Mtk7Yf2Bnvb2OpsMFG6dX-4txtDkHnsIjpWBZSBhwWEeFEqU3JTpjI/s1600/comment +bubble+2.png" title="speech bubble 7" /><img alt="comments, how to, blogspot blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibpjTGqOcZ6PC_m0COMLJLrrgb_tdd8QWiETNeUnPANtor_3wB-UJWMdh_Kf63Fe21T_8hhkLY3dSIxd8icFEDTUBlxg127FRpFMLvry907QpI_ZVBqgEhyphenhyphenWeUM9GwvcjdpzVD5L1Fj8Gw/s1600/comment +bubble+green.png" title="speech bubble 8" /><img alt="new comment, how to blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89Lr8D4GoyMB2irylHyV7DZnefFXTqLsqibPhnp7XY8cV0YmtCgf4_NgS7s1nY0pq6YzBU8HpEJZSOsr4uim83WAhXCcAPZEB6cFHFAbDnuJ_6SRWO3vYN66ZRXNDqNb1Fnn-YpgUj0ea/s1600/comment +bubble+red.png" title="speech bubble 9" /><img alt="blog design, blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCtgGJ-063iEBAsDXN3KUQiVd60-tomWbKdRjekqdVSWccsLLvZuqFNak_f4nGpiErW7lKqY9FCi_3RRGtg3RWwSdJMYnLWubzdiOk1UZCaCkNbU9sDNaf5ugCxwK6yFGC8_VMuU-pPnDU/s1600/green+c omment+bubble.png" title="speech bubble 10" /><img alt="blogger.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikmchl6SWbvj6jBvOkhokz4uDy5Q6ta8oAyf2EI390lVCgXojfBVyEPeEd_suw_-GtvRMg0_pZtQB_oMaZvs5w9EZtffd7Uc9B_pzvj8WoU-hvZuDlpDpYxM6VZ_kPUTtVHiV_Ib2HlUzs/s1600/grey+cl oud.png" title="speech bubble 11" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfYLh9QBRCRPNwvCuD8YsDpY8cQvcXU5-wsJPGR81oZxNVRXiMTjT8AAX0y8YdrC_-TScQuJRaMYGB6NdD842ZrYcJ__GXwWfiT9i41OnoDX4sCfsNjK4fFlB9DqqtJvP6qZOnRbYwBcL/s1600/heart+1 .png" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMXu3f0GlrzsQZ5pbAqRECizY24rUg5Ftaqb-ljxV0zwUooYdo0teOJ3KSeCOWTH30ng23L8iMLuFfNPomcUu1W_XT2R9KCuMr6yVXRjBSduZchpG35ywNfkfQbxhUqCfpQ0PgSGn3Yzrh/s1600/pink+co mment+bubble+2.png" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF2evZby9O4l_YAsvSzkwQL3WNMyrhNcL-yYEQWOUSQySgRGcTLcOnWBu9JmFI3FT4dKQVmTadlgeRy7EefSooxh3a4ZpDue7IQ4JZek5LbEZfkOvIYrfkV7cpKFfrXtdY7Iqim2jR8jr7/s1600/pink+co mment+bubble.png" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKf5n5DXHH7vb2JNnXj9VUxlGbJdDJ_TW_QPFHL7bg-zhXfGHhtCN92NxhOpmVClrIO4SwpMbWLAzas-3TC7um3FPUh4KBXlK5C5EHsBuWgZgB5HJCUi7CjO71GnS3VSDd3YRMuJFLQjSH/s1600/pink+co mment.png" /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7jaWI-maFb5X8Eg4Ela8wFrvQsMlRUjxn0CGhtbTURhVwE8_7tyJ5q46QY0dlGxCoh15JcoNePLaksX6xL7JtLgijVsFs-Nv7Bk4uag-ij8Ha46iefl05jNNxqmeF6VBrmt-wCVMa8sQ/s1600/round.p ng" /> IMPORTANT: You could use any image instead of the one linked in the code above (STEP 8) but after that, you should modify the size values (width and height), so that the numbers inside the bubble to be correctly adjusted. Step 9. Save the template... and enjoy your comments :] You might also be interested in this tutorial from the same category:</div>

How to number comments in Blogger/BlogSpot

This Blogger hack will show you how to add comment count inside a speech bubble, so that you & your readers can use the numbers to men...

+ Read more »