SHM-HACK

How To Add Your Own CSS Styles To Blogger.Com

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYm9QcOcXBdFeefp0EDKcdZPMd5NrbVcciik98MdGS2B_9edVqPrswmNf7Y-uNEbg1AXZ7psBMieq5Cb_j8AfHA37kptbTON9tXnzRR_5vsmViopKaZLemwt76lJiSMbc2_Hqo8EaLitg/s1600/CSS.jpg" imageanchor="1" style="color: #5a9e25; margin-left: 1em; margin-right: 1em; margin-top: 15px; padding: 3px 7px; text-decoration: none;"><img alt="CSS Styles" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYm9QcOcXBdFeefp0EDKcdZPMd5NrbVcciik98MdGS2B_9edVqPrswmNf7Y-uNEbg1AXZ7psBMieq5Cb_j8AfHA37kptbTON9tXnzRR_5vsmViopKaZLemwt76lJiSMbc2_Hqo8EaLitg/s1600/CSS.jpg" style="border-width: 0px; margin: 10px; max-width: 90%;" title="CSS Styles" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
</div>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Drafting and publishing posts on your </span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">blogger.com</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> blog takes time. Make it easier. Define your own CSS styles and use them over and over in articles. </span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<div class="spacer" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">
</div>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">As a matter of fact, adding your own customized CSS styles to the template and using them in posts is possible and does not require advanced knowledge of </span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">blogger.com</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Here is a very simple example of what can be done using customized styles in blogger.com: </span><br />
<h4 class="myfavouritestyle" style="background-color: #f1f8af; border: 1px solid rgb(52, 168, 59); color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px auto 10px; padding-left: 20px; padding-top: 5px; text-transform: capitalize; width: 350px;">
This Is My Favourite Style</h4>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Let's see how it can be done. </span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><a href="https://draft.blogger.com/null" name="more" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"></a><br />
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
How To Add Your Own CSS Styles To Blogger.Com</h3>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<h4 class="step" style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 18px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-decoration: underline; text-transform: capitalize;">
Step #1:</h4>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Prepare the CSS style, you want to use in your posts. To do that, if you do not know much about CSS, use one of the many CSS editors that can be found on the web. For the exemple I used RapidCSS. Here is how I prepared the CSS style 'myfavouritestyle' I used in the exemple: </span><br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDIObQmjwkh8d2yafnYOgex09K_94OzjN0hrf6axNIVxYWqj4KG2fnaRZiB-RoCQj3MN2aptWIHpJmJT4KIBfhvSS8b4pxb01WzQK9meCgcImYxctWj3eBMK6NkvbwU9b_IOQLsYWGkY/s1600/RapidCSS01.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjDIObQmjwkh8d2yafnYOgex09K_94OzjN0hrf6axNIVxYWqj4KG2fnaRZiB-RoCQj3MN2aptWIHpJmJT4KIBfhvSS8b4pxb01WzQK9meCgcImYxctWj3eBMK6NkvbwU9b_IOQLsYWGkY/s1600/RapidCSS01.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<h4 class="step" style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 18px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-decoration: underline; text-transform: capitalize;">
Step #2:</h4>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">
Enter blogger.com and open the template of your blog. Edit the HTML and locate the <b:skin> tag:</div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiDrlz2PggiaPvNH_9RR5pkrQ8ZNooKbKTYlvjI0iA7PKN3O8BgCt8G4JAdcmIQVFw16BzJrPCPmCfuFHMMVnM7q0dzeToHXoE2WHZ11rMibUpiSe0oJMxwdTK3iatAybYaNqqXGTM44c/s1600/bskin.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiDrlz2PggiaPvNH_9RR5pkrQ8ZNooKbKTYlvjI0iA7PKN3O8BgCt8G4JAdcmIQVFw16BzJrPCPmCfuFHMMVnM7q0dzeToHXoE2WHZ11rMibUpiSe0oJMxwdTK3iatAybYaNqqXGTM44c/s1600/bskin.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a></div>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Clic on it to expend </span><br />
<h4 class="step" style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 18px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-decoration: underline; text-transform: capitalize;">
Step #3:</h4>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Go to the end of the </span><b:skin style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">section and paste the style you have created with the editor (before <b>]]</b:skin></b>). </b:skin><br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHQM-baqNCxYmg_-hZhKLcfJOVyUIp-CCC4suxuI-vtDPFi3UvItO6Eh_Bf7hYjZ7YEnxkwsZxw4B79CUX_AoCOhcat9gfoLfHRpcD1wDfIjdtz0Yiw69UBiAIl_bCkQL7nNogfopuGc/s1600/template-mystyle.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHQM-baqNCxYmg_-hZhKLcfJOVyUIp-CCC4suxuI-vtDPFi3UvItO6Eh_Bf7hYjZ7YEnxkwsZxw4B79CUX_AoCOhcat9gfoLfHRpcD1wDfIjdtz0Yiw69UBiAIl_bCkQL7nNogfopuGc/s1600/template-mystyle.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a></div>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">You can add a comment (in the exemple "My Personal Styles")so you can retrieve your customized styles easily in the future. Just remember that CSS comments must start with '/*' and ends with '*/'. </span><br />
<h4 class="step" style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 18px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-decoration: underline; text-transform: capitalize;">
Step #4:</h4>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">The last step is about the use of customized styles in posts. Once the text is entered (using 'compose'), select the text you want to highlight with your customized style, select the format (heading, subheading, minor heading) and switch to HTML view. Your text appears between two tags: </span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><h2> et </h2>  for headings,</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><h3> et </h3> for subheadings,</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><h4> et </h4> for minor headings.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">In the exemple, I selected minor heading; therefore the text  '</span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">This is my favourite style</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">' appears surrounded by a <h4> opening tag and a </h4> closing tag in the html view.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">To apply the customized style, you just have to add the class property to the opening tag as in the exemple:</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0msEgQTsbEx5KXmgQaBsyAhSe-7bbpq7u-jJEj17qfUDkhPu9sLQl5gWvOozm9-HWXZNt8ZLhleeifdrrijkgf-Mn908udIT_l0DRwxU0Yeq8Hdawu11iCtz14wyD5bsSUV6nhkURnE/s1600/styleinsertedinarticle.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0msEgQTsbEx5KXmgQaBsyAhSe-7bbpq7u-jJEj17qfUDkhPu9sLQl5gWvOozm9-HWXZNt8ZLhleeifdrrijkgf-Mn908udIT_l0DRwxU0Yeq8Hdawu11iCtz14wyD5bsSUV6nhkURnE/s1600/styleinsertedinarticle.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">That's it.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Happy blogging!</span></div>

BLOGGER CUSTOMIZATION How To Add Your Own CSS Styles To Blogger.Com

Drafting and publishing posts on your blogger.com blog takes time. Make it easier. Define your own CSS styles and use them over and o...

How To Add CSS Bubbles

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNiG8F46kpy941W-QeQNN0He5v2jwpcV1zIIIPytssk4tklLcZYMP2a2e5yENMxDxu771hyphenhyphenaBSaPL50XvY04rKepqQFxDZiGhILFHaf7w2RuyaOnxU9Ezb0UOIC_g8jMofE5hAK8XH4o/s1600/bubbles250.jpg" imageanchor="1" style="color: #5a9e25; margin-left: 1em; margin-right: 1em; margin-top: 15px; padding: 3px 7px; text-decoration: none;"><img alt="CSS Bubbles" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWNiG8F46kpy941W-QeQNN0He5v2jwpcV1zIIIPytssk4tklLcZYMP2a2e5yENMxDxu771hyphenhyphenaBSaPL50XvY04rKepqQFxDZiGhILFHaf7w2RuyaOnxU9Ezb0UOIC_g8jMofE5hAK8XH4o/s1600/bubbles250.jpg" style="border-width: 0px; margin: 10px; max-width: 90%;" title="CSS Bubbles" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
</div>
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">A simple way to animate your posts and render them more attractive is to add bubbles. You can use these bubbles to present short tips, give a definition or to add information.</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">These bubbles are invisible. They appear only when the reader passes his mouse over a word or a text for which you want to present additional information.</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<a href="https://draft.blogger.com/null" name="more" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"></a><br />
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
How To Add CSS Bubbles In A Post ?</h3>
<br />
<span style="background-color: white; color: #3d5054; font-family: lato, arial, sans-serif; font-size: 14px; line-height: 20px;">Let's see how we can create bubbles using CSS in very simple way:</span><br />
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
Step 1: Add Customized Styles For Bubbles In Blogger Template</h4>
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">In Blogger go to 'Template' and select 'edit html'. Then search the following line:</span><br />
<br />
<blockquote class="tr_bq">
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: xx-small; line-height: 20px;"><span style="font-family: "courier new" , "courier" , monospace;"><i>]]></b:skin></i></span></span></blockquote>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">and paste the CSS styles just before. You will need 3 styles:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: yellow; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">A style (1) for the bubble itself</span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">. In the case of the small example above I used the following:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq">
<i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">.help-bubble100 {</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    width: 100px;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    height: 18px;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    top: -100px;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    left: -120px;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    padding: 3px 3px 3px 3px;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    color: #fff ;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    background-color: #228B22 ;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    font-size: 10px;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    font-family: verdana ; </span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    border: 1px solid #228B22 ;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    overflow: hidden;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    display: block; </span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    position: absolute; /* important */    </span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    visibility: hidden;      </span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    opacity: 0; </span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    transition: 0.3s ease-out;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    -webkit-transition: 0.3s ease-out;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    }</span></span></i></blockquote>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: yellow; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">A style (2) for the text that supports the bubble</span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;"> (the bubble will appear when the mouse is over it). In the example I just underlined the text:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq">
<i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">.help-needed {</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    position: relative;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    text-decoration:underline ;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    }</span></span></i></blockquote>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: yellow; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">A style (3) for the bubble when the mouse is over the text</span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;"> (style that triggers the appearance of the bubble):</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq">
<i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">.help-needed:hover .help-bubble100 {</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    visibility: visible;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    opacity: 1; </span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    top: 0px;        </span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    z-index: 50;        </span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    transition: 0.8s ease-out;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    -webkit-transition: 0.8s ease-out;</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">    }</span></span></i></blockquote>
<blockquote class="tr_bq">
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">These styles may be customized to your needs. For instance, to change the size and the color of the bubble, you just have to edit the following property in the style of the bubble itself: </span><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">width; height; background-color;</span></span></i><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">.</span></blockquote>
<br />
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
Step 2: Insert The Bubble Into Your Post:</h4>
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">Once your post is ready, switch to the HTML view. Search for the text that should trigger the appearance of the bubble when the mouse is over it and add the the corresponding style (2). In the example above I used the html </span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: xx-small; line-height: 20px;"><span style="font-family: "courier new" , "courier" , monospace;">span</span></span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;"> tag:</span><br />
<br />
<blockquote class="tr_bq">
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: xx-small; line-height: 20px;"><span style="font-family: "courier new" , "courier" , monospace;">Here is an <span class="help-needed">example of bubble</span>.</span></span></blockquote>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">Just before the </span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: xx-small; line-height: 20px;"><span style="font-family: "courier new" , "courier" , monospace;">span</span></span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;"> closing tag, add the bubble itself with its content and its style. I used another </span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: xx-small; line-height: 20px;"><span style="font-family: "courier new" , "courier" , monospace;">span</span></span><span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;"> tag in the example above:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq">
<i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;">Here is an <span class="help-needed">example of bubble</span></span></i><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;"><span style="font-family: "courier new" , "courier" , monospace;"><span class="help-bubble100">I am the bubble!</span></span>.</span></span></i></blockquote>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">CSS bubbles can be versatile and creative. Here is another example:</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br />
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<span class="fun-needed" style="color: #e06666; font-family: "verdana"; font-size: 22px; position: relative;"><br /><span class="fun1" style="border: none; color: mediumblue; display: block; font-family: "verdana"; font-size: 20px; height: 25px; left: -400px; opacity: 0; overflow: hidden; padding: 3px 10px 3px 3px; position: absolute; text-align: right; top: 50px; transition: 0.3s ease-out; visibility: hidden; width: 150px;"></span><br />Enjoy Blogging!<br /><span class="fun2" style="border: none; color: mediumblue; display: block; font-family: "verdana"; font-size: 20px; height: 25px; left: 400px; opacity: 0; overflow: hidden; padding: 3px; position: absolute; text-align: left; top: 50px; transition: 0.3s ease-out; visibility: hidden; width: 250px;"></span></span></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<span style="background-color: white; color: #3d5054; font-family: "lato" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">Good blogging</span></div>

BLOGGER CUSTOMIZATION How To Add CSS Bubbles

A simple way to animate your posts and render them more attractive is to add bubbles. You can use these bubbles to present short tips, ...

3 Logo Generators To Give An Identity To Your Blog

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzNj0358H3ceW0WcI2EdQCKG9xLGt26hMzOTA_QdYVPhQFEZmx1jmuihU2ZjTcEPDNcp330La4QVgpepzpt4H6p7fY2VrYnljRkiyM52zoQwsQ3g3t7nCj8FSt6cbJgRik2NWBE1RUqc/s1600/logos340.png" imageanchor="1" style="color: #5a9e25; margin-left: 1em; margin-right: 1em; margin-top: 15px; padding: 3px 7px; text-decoration: none;"><img alt="Logo Generator" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBzNj0358H3ceW0WcI2EdQCKG9xLGt26hMzOTA_QdYVPhQFEZmx1jmuihU2ZjTcEPDNcp330La4QVgpepzpt4H6p7fY2VrYnljRkiyM52zoQwsQ3g3t7nCj8FSt6cbJgRik2NWBE1RUqc/s1600/logos340.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Logo Generator" width="320" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
</div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">A logo is a paramount component of the identity of your blog. To attract interest, it should be created from an original combination of graphics, colors and typefaces. At the same time, it should remain simple to facilitate the mental association with your blog.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Designing a logo is not an easy task. Fortunately, logo generators exist. This post introduces three of them that I personaly use.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><a href="https://draft.blogger.com/null" name="more" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"></a><br />
<h2 style="background-color: white; color: #3d5054; float: left; font-family: Arvo; font-size: 35px; font-weight: 500; letter-spacing: -2px; line-height: 40px; margin: 10px 0px; text-transform: capitalize; width: 560px;">
3 Logo Generators To Give An Identity To Your Blog</h2>
<div>
<br /></div>
<div>
<br /></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
<br /></h3>
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
1 - Logo Garden</h3>
<a href="http://www.logogarden.com/" rel="nofollow" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Logo Garden</a><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> is an easy to use logo generator. Visitors can create low resolution logos for free. A high resolution logo costs usd 12.50 (as of august 2014). Logo Garden offers a large selection of shapes and graphics to include in logos. Here is a low resolution logo generated using Logo Garden:</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
</div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnG0G4DgsatYazrqPN995SY0X04Goi6zAOrNNF-0CxmABdYSTadr6vGo61Kx3catAC2DxEPtCzbYibmODZDFBhum6x0ycjzFczO3efXOJEMZtNDb9vZLMXCyh-Gs8uhyphenhyphenBzCoUggxp7vXQ/s1600/logogarden-low.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnG0G4DgsatYazrqPN995SY0X04Goi6zAOrNNF-0CxmABdYSTadr6vGo61Kx3catAC2DxEPtCzbYibmODZDFBhum6x0ycjzFczO3efXOJEMZtNDb9vZLMXCyh-Gs8uhyphenhyphenBzCoUggxp7vXQ/s1600/logogarden-low.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
2 - Flamingtext</h3>
<a href="http://www.flamingtext.com/" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Flamingtext</a><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> is an on line logo generator with a large selection of original fonts that will help you to turn the name of your blog into a memorable logo. Use of Flamingtext for a blog is free. Commercial use costs usd 19.95 /year (as of august 2014). Flamingtext does not propose shapes or graphics for inclusion in logos. Here is what I did with Flamingtext:</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1r3I7N347HhITAcdviEZaN9llMpb-cyOnMdqnf7p7OxO8XqY4ypuigKa4d_jiQFrd5weJVQEvTsLHrs3wuemwyBLpnLf0gP5boKJ7gVu5ZKyGSY7_ILHn6hgApVclq4hBMHXAeEWjXA/s1600/flammingtext.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1r3I7N347HhITAcdviEZaN9llMpb-cyOnMdqnf7p7OxO8XqY4ypuigKa4d_jiQFrd5weJVQEvTsLHrs3wuemwyBLpnLf0gP5boKJ7gVu5ZKyGSY7_ILHn6hgApVclq4hBMHXAeEWjXA/s1600/flammingtext.png" style="border-width: 0px; margin: 10px; max-width: 90%;" width="320" /></a></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
3 - Createyourownlogo</h3>
<a href="http://www.createyourownlogo.co.uk/" rel="nofollow" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">CreateYourOwnLogo</a><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> is a tools that allows you to create a high resolution logo for free </span><i style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"><span style="font-size: xx-small;">(use the link to access the site since name of the site is different from address)</span></i><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">. However the choice of shapes or image that can be included in the logo is limited. Here is an example of what can be done using CreateYourOwnLogo:</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL9SkSkW5U0PwtZ0qD7MiAw8ct4Gl9-UkQ9-XsOEw5HC6tAXtY040FDAgVE9n7ERqR3sop4FjnTa4wv7TflwHN-kjC5KfDyJPCw8_6WZ3oo2cXGCVJzlrQZxlR55NIAyihO7ged1sjdMk/s1600/makeyourownlogo420.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL9SkSkW5U0PwtZ0qD7MiAw8ct4Gl9-UkQ9-XsOEw5HC6tAXtY040FDAgVE9n7ERqR3sop4FjnTa4wv7TflwHN-kjC5KfDyJPCw8_6WZ3oo2cXGCVJzlrQZxlR55NIAyihO7ged1sjdMk/s1600/makeyourownlogo420.png" style="border-width: 0px; margin: 10px; max-width: 90%;" /></a></div>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Happy blogging!</span></div>

BLOGGER TRICKS 3 Logo Generators To Give An Identity To Your Blog

A logo is a paramount component of the identity of your blog. To attract interest, it should be created from an original combination of...

How To Add AddThis Welcome Bar In Blogger

Unknown 2

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIE5SzG3BnPyWjwE_XR_cVoyqvJ5BbxQ4wtX8Y0J3iv_uYcXQU9xjmWBynYZAQSH5C0_9kTTKHGjrdHgPGm9FrX8gTVhg1Fjwn4JPnhJXW2oWZVivGgouljKOBMhZ5b5bSte0KLaqKUMs/s1600/Welcomebar.png" imageanchor="1" style="color: #5a9e25; margin-left: 1em; margin-right: 1em; margin-top: 15px; padding: 3px 7px; text-decoration: none;"><img alt="AddThis Welcome Bar" border="0" padding="10px 10px 10px 0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIE5SzG3BnPyWjwE_XR_cVoyqvJ5BbxQ4wtX8Y0J3iv_uYcXQU9xjmWBynYZAQSH5C0_9kTTKHGjrdHgPGm9FrX8gTVhg1Fjwn4JPnhJXW2oWZVivGgouljKOBMhZ5b5bSte0KLaqKUMs/s320/Welcomebar.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="AddThis Welcome Bar" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
</div>
<div style="background-color: white; color: #666666; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.5; text-align: justify;">
Did you believe that blogging is building up traffic? Well... not exactly. Blogging is more like exchanging with an audience. A blogger does everything to keep his audience interested and involved. In return he gets traffic, comments and subscribers on his site and followers on FaceBook and other social networks.<br />One of the best ways to attract the attention of your readers is to implement in your site, a welcome bar displaying a short welcome message. Nowadays it is really easy to do with <span style="color: red;">AddThis</span> (<a href="http://www.addthis.com/" style="color: #5a9e25; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;">www.addthis.com</a>). In this article we will show you how to implement AddThis Welcome Bar in your blogger blog. AddThis Welcome Bar can displayed on all modern browsers including IE 9 and above. AddThis Welcome Bar can be downloaded for free.<br /><h3 style="color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-align: left !important; text-transform: capitalize;">
<span style="color: #3d85c6;">How To Add AddThis Welcome Bar In Blogger? </span></h3>
<br />Step 1: Go to https://www.addthis.com/get/welcome and register. Registering with AddThis is mandatory however if you have a FaceBook, Twitter or Google+ account, you can sign in directly. After logging, a customization panel is displayed.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNTNdcZxYbq1oahQ8-18Jw60xKZrkczZsYlbzxgDpGY3HihVJhfu__zz0j_MRH4NGb3hNj1jeU93F1Czu0iTJsXVwh5bM_TIg4paPZq6S9-qgaBgKu7abOnqkVw_p3wqw5Qda1wUZkvQ/s1600/dashboard.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNTNdcZxYbq1oahQ8-18Jw60xKZrkczZsYlbzxgDpGY3HihVJhfu__zz0j_MRH4NGb3hNj1jeU93F1Czu0iTJsXVwh5bM_TIg4paPZq6S9-qgaBgKu7abOnqkVw_p3wqw5Qda1wUZkvQ/s400/dashboard.png" style="border-width: 0px; margin: 10px; max-width: 90%; padding: 20px 0px;" /></a></div>
Step 2: To customize the bar, you must select a theme (color), enter the message you want to display, enter the link associated with the button that is displayed on the bar, etc.<br /><br /><br />Step 3: Now you have to copy the code proposed by AddThis into your blog. To do that go to blogger.com, open the template, click on HTML and paste the code in the head section then save.<br /><br /><br />It's done! Good blogging.</div>
</div>

BLOGGER CUSTOMIZATION WIDGETS How To Add AddThis Welcome Bar In Blogger

Did you believe that blogging is building up traffic? Well... not exactly. Blogging is more like exchanging with an audience. A blogge...

How To Add Beautiful Bubble Comment Counter To Blogger Blog

Unknown 1

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZ5KnhF_m9phqyVJ1ZoMYkCCiTll5SL90P18zM_ChbG4qU6ZZ9Pah3-8K3qX166L61DBH5CP9zI5_nnoOurhegZE6Qy8WtcX_zoW2CPVQNlWumgaBuHo1Wv_vTO9Uo6Gjges4qYjJoLoU/s1600/Bubble+comment+counter+for+blogger.png" imageanchor="1" style="background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-left: 1em; margin-right: 1em; margin-top: 15px; padding: 3px 7px; text-decoration: none;"><img alt="Adding a bubble comment counter in blogger " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZ5KnhF_m9phqyVJ1ZoMYkCCiTll5SL90P18zM_ChbG4qU6ZZ9Pah3-8K3qX166L61DBH5CP9zI5_nnoOurhegZE6Qy8WtcX_zoW2CPVQNlWumgaBuHo1Wv_vTO9Uo6Gjges4qYjJoLoU/s1600/Bubble+comment+counter+for+blogger.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Bubble comment counter" /></a></div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
Comments are always seen as an important factor in the success of your blog. Users normally comments on your blog to appreciate author of that post, or to ask questions. One way to judge the popularity of the post is to see the number of comments post has received and for that you need to put comment counter on your blogger blog. In this article I will be explaining you how to add beautiful bubble comment counter to blogger blog.<a href="https://draft.blogger.com/null" name="more" style="color: #5a9e25;"></a></div>
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
How To Add Beautiful Bubble Comment Counter To Blogger Blog</h4>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: medium; line-height: 20px;">Step 1</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Login to your blogger blog and select the blog from your blog dashboard. Now select</span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">template</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> >></span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> edit html</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: medium; line-height: 20px;">Step 2</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Click in the template code area and press </span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">ctlr + F5</b><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;"> to open search box and type the following code in the search box.</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<blockquote class="tr_bq">
<span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">]]></b:skin></span></blockquote>
<br />
<span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;"><br /></span>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: medium; line-height: 20px;">Step 3</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Now expand the code by clicking the arrow next to it and search for the above code again, simply add the below code above </span><b style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">]]></b:skin></b><br />
<blockquote class="tr_bq">
<span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">.comment-bubble {</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">float : right;</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">width : 48px;</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">height : 48px;</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">background : url(</span><span style="background-color: magenta; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">http://goo.gl/92MxG2</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">);</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">background-repeat: no-repeat;</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">font-size : 18px;</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">margin-top : -15px;</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">margin-right : 2px;</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">text-align : center;</span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;">}</span></blockquote>
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: medium; line-height: 20px;">Step 4</span><br />
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Once the above code is added to the template, search for the code below</span><br />
<blockquote class="tr_bq">
<span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;"><b:if cond='data:post.title'></span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;"><h3 class='post-title entry-title'></span></blockquote>
<br />
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">If due to some reason you are unable to find the above stated line of code look for the code written below.</span><br />
<blockquote class="tr_bq">
<span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;"><b:if cond='data:post.title'></span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;"> <h3 class='post-title entry-title' itemprop='name'></span></blockquote>
<br />
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: medium; line-height: 20px;">Step 5</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">Now add the following code immediately after this code.</span><br />
<blockquote class="tr_bq">
<span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;"><b:if cond='data:post.allowComments'></span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;"><a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #000000; font-size: 18px; font-weight: bold;'><data:post.numComments/></a></span><span style="background-color: #f2f1f1; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14.4px; line-height: 18.72px;"></b:if></span></blockquote>
<br />
<span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: medium; line-height: 20px;">Customizing comment counter </span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">You can change the #ffffff hex color code to the choice of your color or color which suits to your template. Similarly, change 18px font size to your preferred font size.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">I have provided a few beautiful images that you can add to your blogger bubble comment counter, just replace the URL with the above stated URL in Step 3 that is highlighted in pink color.</span><br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><br />
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3iw6m3idcE4eo7W0XRHJYyVaursZdEHOkIhYh-hbjn6KMuPybb9eTau7qNe1gCnaUhWa4VTc6huY-gJ_hyphenhyphenJATGAtb-4nworMxtc5EUX6sJ_zNR2beR_hoZlNXmkYPQRkjLwW6uqWulFaz/s1600/blue+bubbe+comment+counter.png" style="margin: 10px; max-width: 90%;" /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3iw6m3idcE4eo7W0XRHJYyVaursZdEHOkIhYh-hbjn6KMuPybb9eTau7qNe1gCnaUhWa4VTc6huY-gJ_hyphenhyphenJATGAtb-4nworMxtc5EUX6sJ_zNR2beR_hoZlNXmkYPQRkjLwW6uqWulFaz/s1600/blue+bubbe+comment+counter.png</div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" />
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkQj_nFk6OVfgLdylpzrEcqVIKgo9kodjwRH3fFVfRaBcgEhg1cySX26ZiTrJLsS8aR7ML3zUJjOemYei81nAG-jgIqIUHV3muImJmfDit4pzJW6xTsS6ZGHOarO-cW_nbam4wsegv8cr/s1600/pink+comment.png" style="margin: 10px; max-width: 90%;" /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkQj_nFk6OVfgLdylpzrEcqVIKgo9kodjwRH3fFVfRaBcgEhg1cySX26ZiTrJLsS8aR7ML3zUJjOemYei81nAG-jgIqIUHV3muImJmfDit4pzJW6xTsS6ZGHOarO-cW_nbam4wsegv8cr/s1600/pink+comment.png</div>
<br style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;" /><span style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px;">I hope you have liked our effort of providing a beautiful bubble comment counter to blog post title. Do write to us in the comments section.</span></div>

BLOGGER CUSTOMIZATION BLOGGER TRICKS How To Add Beautiful Bubble Comment Counter To Blogger Blog

Comments are always seen as an important factor in the success of your blog. Users normally comments on your blog to appreciate autho...

Add Stylish Vertical Floating Sharing Buttons to Blogger

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 class="post-title entry-title" itemprop="name" style="background-color: white; color: #d52a33; font-family: Georgia, Utopia, 'Palatino Linotype', Palatino, serif; font-size: 22px; font-stretch: normal; font-weight: normal; margin: 0px; position: relative;">
<br /></h3>
<div class="post-header" style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 1.6; margin: 0px 0px 1em;">
<div class="post-header-line-1">
</div>
</div>
<div class="post-body entry-content" id="post-body-7819494636599846436" itemprop="articleBody" style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.2px; position: relative; width: 726px;">
<div dir="ltr" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZoPjrwpxBkDzM1sMz675P2q23CEwwZ7RiUyzrSPABq8lhNtEIAj0ax8tkJnsPBHOMEj3v3lEK2n1OvVktf3M8pSHcugPKcDrkFFk0bvoNkmQLrzR5aFImUKCxmM-z60ebQahiVUshpU/s1600/New+Stylish+Vertical+Floating+Share+Button.png" imageanchor="1" style="clear: left; color: #7d171d; float: left; margin-bottom: 1em; margin-right: 1em; text-decoration: none;"><span style="font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZoPjrwpxBkDzM1sMz675P2q23CEwwZ7RiUyzrSPABq8lhNtEIAj0ax8tkJnsPBHOMEj3v3lEK2n1OvVktf3M8pSHcugPKcDrkFFk0bvoNkmQLrzR5aFImUKCxmM-z60ebQahiVUshpU/s1600/New+Stylish+Vertical+Floating+Share+Button.png" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-radius: 5px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px; padding: 8px; position: relative;" /></span></a></div>
<span style="font-family: inherit;">Sharing is the best method to increase blog traffic so after publishing our blog posts we share them to social media and in return we get a lot of traffic. When our visitors landed on our blog's page and like our post then they thought to say thanks to the<a href="http://www.mybloggerbuzz.com/2012/11/5-things-blogger-should-always-remember.html" rel="" style="color: #7d171d; text-decoration: none;" target="_blank">author</a> so they do comment on the post but there is one another way by which visitors can say thanks to us i.e. sharing. By this method visitors can share the post to their favourite social media and we get a lot of visitors and pageviews. So, here we are discussing about a great floating sharing widget for blogger which floats vertically with the page. This widget contains all major social media on which your visitors can easily share or like your posts in a click. This widget contains <a href="http://www.mybloggerbuzz.com/2013/12/facebook-showing-wrong-thumbnail-image.html" style="color: #7d171d; text-decoration: none;" target="_blank">Facebook</a> like and share, google +1, Pinterest Pin buttons. So if you like this widget and wants to add it to your blog just follow the easy steps below.</span><br /><a href="https://draft.blogger.com/null" name="more"></a><h2 style="border-bottom-color: rgba(0, 0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 14px; font-stretch: normal; line-height: normal; margin: 0px; padding: 0.6em 0px 0.5em; position: relative;">
<span style="font-family: inherit;">How to add the new floating share buttons to blogger</span></h2>
<div style="border-top-color: rgb(170, 177, 34); border-top-style: solid; border-top-width: 1px; line-height: 24px; padding-top: 8px; text-align: justify;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="border: none; margin: 0px 0px 0.25em; padding: 0.25em 0px;"><span style="font-family: inherit;"> Log in to your Blogger account and go to Template > Edit</span><span style="font-family: inherit;"> </span>HTML</li>
<li style="border: none; margin: 0px 0px 0.25em; padding: 0.25em 0px;"><span style="font-family: inherit;"> Search for</span><span style="font-family: inherit;"> </span><span style="color: red; font-family: inherit;"><html </span><span style="font-family: inherit;">, leave a space and add</span><span style="font-family: inherit;"> </span><span style="color: red; font-family: inherit;">xmlns:fb=”http://ogp.me/ns/fb#”</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">just after it. The resulting code should lok like this:</span></li>
</ul>
</div>
<div style="line-height: 24px; text-align: justify;">
<blockquote>
<span style="font-family: inherit;"><html xmlns:fb=”http://ogp.me/ns/fb#”</span></blockquote>
</div>
<div style="line-height: 24px; text-align: justify;">
<span style="font-family: inherit;">If this is already there, you don’t need to do it again.</span><br /><span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<br /><ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="border: none; line-height: 24px; margin: 0px 0px 0.25em; padding: 0.25em 0px;"><span style="font-family: inherit;"> Search for </span><code style="line-height: normal;"><data:post.body/></code><span style="font-family: inherit;">. If you have more than one of it in your template, search for </span><code style="line-height: normal;"><div class='post-footer-line post-footer-line-1'/></code></li>
<li style="border: none; margin: 0px 0px 0.25em; padding: 0.25em 0px;"><span style="font-family: inherit; line-height: 24px;"> And just below that paste the following code:</span></li>
</ul>
</div>
<div style="line-height: 24px; text-align: justify;">
<br /><blockquote>
<blockquote class="tr_bq" style="direction: ltr; line-height: normal; margin-bottom: 0in; text-align: left; unicode-bidi: embed;">
<span style="font-family: 'Courier New'; font-size: 10pt;"><b:if cond=’data:blog.pageType == &quot;item&quot;’></span><span style="font-family: 'Courier New'; font-size: 10pt;"><!–Start Floating Share Buttons with Pinterest–></span><span style="font-family: 'Courier New'; font-size: 10pt;"><style type=’text/css’></span><span style="font-family: 'Courier New'; font-size: 10pt;">#dc-float {position:fixed; bottom:15%; right:10px; float:left;</span><span style="font-family: 'Courier New'; font-size: 10pt;">-webkit-border-radius: 5px;</span><span style="font-family: 'Courier New'; font-size: 10pt;">-moz-border-radius: 5px;</span><span style="font-family: 'Courier New'; font-size: 10pt;">border-radius: 5px;</span><span style="font-family: 'Courier New'; font-size: 10pt;">border:1px solid #BBBBBB;</span><span style="font-family: 'Courier New'; font-size: 10pt;">background-color:#FFFFFF;</span><span style="font-family: 'Courier New'; font-size: 10pt;">-webkit-box-shadow: #B3B3B3 5px 5px 5px;</span><span style="font-family: 'Courier New'; font-size: 10pt;">-moz-box-shadow: #B3B3B3 5px 5px 5px;</span><span style="font-family: 'Courier New'; font-size: 10pt;">box-shadow: #B3B3B3 5px 5px 5px;</span><span style="font-family: 'Courier New'; font-size: 10pt;">padding:0 0 2px 0;z-index:10;}</span><span style="font-family: 'Courier New'; font-size: 10pt;">#dc-float .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}</span><span style="font-family: 'Courier New'; font-size: 10pt;">.fb_share_count_top {width:48px !important;}</span><span style="font-family: 'Courier New'; font-size: 10pt;">.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}</span><span style="font-family: 'Courier New'; font-size: 10pt;">.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}</span><span style="font-family: 'Courier New'; font-size: 10pt;">.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}</span><span style="font-family: 'Courier New'; font-size: 10pt;"></style></span><span style="font-family: 'Courier New'; font-size: 10pt;"><div id=’dc-float’ title=’Share with your friends’></span><span style="font-family: 'Courier New'; font-size: 10pt;"><div class=’sbutton’ id=’rt’></span><span style="font-family: 'Courier New'; font-size: 10pt;"><a class=’twitter-share-button’ data-count=’vertical’ href=’http://twitter.com/share’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’ type=’text/javascript’/></span><span style="font-family: 'Courier New'; font-size: 10pt;"></div></span><span style="font-family: 'Courier New'; font-size: 10pt;"><div class=’sbutton’ id=’su’></span><span style="font-family: 'Courier New'; font-size: 10pt;"><script src=’http://www.stumbleupon.com/hostedbadge.php?s=5′/></span><span style="font-family: 'Courier New'; font-size: 10pt;"></div></span><span style="font-family: 'Courier New'; font-size: 10pt;"><div class=’sbutton’ id=’digg’ style=’margin-left:3px;width:48px’></span><span style="font-family: 'Courier New'; font-size: 10pt;">&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;</span><span style="font-family: 'Courier New'; font-size: 10pt;">&lt;script&gt;(function(d, s, id) {</span><span style="font-family: 'Courier New'; font-size: 10pt;">  var js, fjs = d.getElementsByTagName(s)[0];</span><span style="font-family: 'Courier New'; font-size: 10pt;">  if (d.getElementById(id)) return;</span><span style="font-family: 'Courier New'; font-size: 10pt;">  js = d.createElement(s); js.id = id;</span><span style="font-family: 'Courier New'; font-size: 10pt;">  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=167544263382192&quot;;</span><span style="font-family: 'Courier New'; font-size: 10pt;">  fjs.parentNode.insertBefore(js, fjs);</span><span style="font-family: 'Courier New'; font-size: 10pt;">}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;</span><span style="font-family: 'Courier New'; font-size: 10pt;"><div class=’fb-like’ data-layout=’box_count’ data-send=’false’ data-show-faces=’false’ data-width=’48′/></span><span style="font-family: 'Courier New'; font-size: 10pt;"></div></span><span style="font-family: 'Courier New'; font-size: 10pt;"><div class=’sbutton’ id=’gplusone’></span><span style="font-family: 'Courier New'; font-size: 10pt;"><script src=’https://apis.google.com/js/plusone.js’ type=’text/javascript’/></span><span style="font-family: 'Courier New'; font-size: 10pt;"><g:plusone size=’tall’/></span><span style="font-family: 'Courier New'; font-size: 10pt;"></div></span><span style="font-family: 'Courier New'; font-size: 10pt;"><div class=’sbutton’ id=’gb’></span><span style="font-family: 'Courier New'; font-size: 10pt;"><a class=’pin-it-button’ count-layout=’vertical’ expr:href=’&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url’>Pin It</a></span><span style="font-family: 'Courier New'; font-size: 10pt;"><a href=’javascript:void(run_pinmarklet())’ style=’margin-left:-46px; width:43px; height:20px; display:inline-block;’/></span><span style="font-family: 'Courier New'; font-size: 10pt;"><script src=’http://assets.pinterest.com/js/pinit.js’ type=’text/javascript’/></span><span style="font-family: 'Courier New'; font-size: 10pt;"><script type=’text/javascript’></span><span style="font-family: 'Courier New'; font-size: 10pt;">function run_pinmarklet() {</span><span style="font-family: 'Courier New'; font-size: 10pt;">var e=document.createElement(&#39;script&#39;);</span><span style="font-family: 'Courier New'; font-size: 10pt;">e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);</span><span style="font-family: 'Courier New'; font-size: 10pt;">e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);</span><span style="font-family: 'Courier New'; font-size: 10pt;">e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);</span><span style="font-family: 'Courier New'; font-size: 10pt;">document.body.appendChild(e);</span><span style="font-family: 'Courier New'; font-size: 10pt;">}</span><span style="font-family: 'Courier New'; font-size: 10pt;"></script></span><span style="font-family: 'Courier New'; font-size: 10pt;"></div></span><span style="font-family: 'Courier New'; font-size: 10pt;"><div class=’fb_button_share’></span><span style="font-family: 'Courier New'; font-size: 10pt;">&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;</span><span style="font-family: 'Courier New'; font-size: 10pt;">&lt;script&gt;(function(d, s, id) {</span><span style="font-family: 'Courier New'; font-size: 10pt;">var js, fjs = d.getElementsByTagName(s)[0];</span><span style="font-family: 'Courier New'; font-size: 10pt;">if (d.getElementById(id)) return;</span><span style="font-family: 'Courier New'; font-size: 10pt;">js = d.createElement(s); js.id = id;</span><span style="font-family: 'Courier New'; font-size: 10pt;">js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=112973755438933&quot;; // appId must be valid</span><span style="font-family: 'Courier New'; font-size: 10pt;">fjs.parentNode.insertBefore(js, fjs);</span><span style="font-family: 'Courier New'; font-size: 10pt;">}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));&lt;/script&gt;</span><span style="font-family: 'Courier New'; font-size: 10pt;">&lt;fb:share-button type=&quot;box_count&quot;&gt;</span><span style="font-family: 'Courier New'; font-size: 10pt;">&lt;/fb:share-button&gt;</span><span style="font-family: 'Courier New'; font-size: 10pt;"></div><br/></span><span style="font-family: inherit;"><span style="font-family: 'Courier New'; font-size: 10pt;"><!–End Floating Share Buttons with Pinterest</span><span style="font-family: 'Courier New'; font-size: 10pt;">–></span></span><span style="font-family: 'Courier New'; font-size: 10pt;"></b:if></span></blockquote>
<div dir="RTL">
</div>
</blockquote>
</div>
<div style="line-height: 24px; text-align: justify;">
</div>
<div style="line-height: 24px; text-align: justify;">
<br /><ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="border: none; margin: 0px 0px 0.25em; padding: 0.25em 0px;"><span style="font-family: inherit;">Hit the </span><strong style="font-family: inherit;">Save Template</strong><span style="font-family: inherit;"> button and view your blog.</span></li>
</ul>
</div>
<div style="line-height: 24px; text-align: justify;">
<span style="font-family: inherit;">To make the share butons float to the left instead of right, search for this code:</span></div>
<div style="line-height: 24px; text-align: justify;">
<blockquote class="tr_bq">
<span style="font-family: inherit;">dc-float {position:fixed; bottom:15%; right:10px; float:left;</span></blockquote>
</div>
<div style="line-height: 24px; text-align: justify;">
<span style="font-family: inherit;">Replace with this:</span></div>
<div style="line-height: 24px; text-align: justify;">
<blockquote class="tr_bq">
<span style="font-family: inherit;">dc-float {position:fixed; bottom:15%; left:10px; float:left;</span></blockquote>
</div>
<div style="line-height: 24px; text-align: justify;">
<span style="font-family: inherit;">So this is the easy steps to add this professional floating share buttons to your blogger blog. If you have any query or to give your feedback use the comment box. Keep sharing this post with your friends till then Peace, Blessings and Happy Sharing.</span></div>
</div>
</div>
</div>

BLOGGER CUSTOMIZATION WIDGETS Add Stylish Vertical Floating Sharing Buttons to Blogger

Sharing is the best method to increase blog traffic so after publishing our blog posts we share them to social media and in retur...

How To Add Custom Favicon In Your Blogger Blog

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwA3Doy9h63camSjuHGlgdAapbX-Bom5jJj8hi1euzgDpOre-21ecBW4Ymx6rs-BGClfN6vWk90lURSbQ7F7h-u4bVH3t82Vjogw-bzr9QjD5Asa6p4leAgVjP1iGpxXf5EYXGQ2fT-lY/s1600/How+to+Add+Custom+Favicon+in+your+Blogger+Blog.png" /></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
</div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
Branding your blog is a good thing and we as bloggers don’t really concentrate on it. One small way to brand your blog is adding a personalized Favicon to your blogger blogs. Those who don’t know what a favicon is? The favicon is a 16 x 16 pixel image which is placed on tabs and address bar of web browsers. By adding favicon you can have lots of advantage, one is that you are branding your blog, when some user bookmarked your blog favicon will be there as a label and in browser history it is there too. So today I am going to teach you how to add favicon to your blogger blog.<br />
<a href="https://draft.blogger.com/null" name="more" style="color: #5a9e25;"></a></div>
<h4 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 30px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-transform: capitalize;">
How To Add Favicon To Your Blogger Blog</h4>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
By default, we see a blogger favicon “<b>B</b>”, you can see in the below image.</div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoDyljE3kaMk77sklDABXqyvPVlWigDf0qj_vdg3fq-CziE5XGbD7_W1O_Zi50BxHZi0bFeEDizHVGREYmADRSlVZG0PY-ohS9D6SQvSY2EpsSF-2i8O5A17kiRxs_uogrLliB391Wn3J/s1600/default+blogger+favicon.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Default Blogger favicon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoDyljE3kaMk77sklDABXqyvPVlWigDf0qj_vdg3fq-CziE5XGbD7_W1O_Zi50BxHZi0bFeEDizHVGREYmADRSlVZG0PY-ohS9D6SQvSY2EpsSF-2i8O5A17kiRxs_uogrLliB391Wn3J/s1600/default+blogger+favicon.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Blogger Favicon" /></a></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
To add our personalized favicon first we have to make it first, the best way to get a favicon is make your blog initials as a favicon. In our blog also we have chosen “<b>PBT</b>” as our favicon, but it’s entirely up to you how you want your blog favicon to be. Favicon should be approximately <b>16 x 16 pixels</b> in size to be displayed properly.</div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
Once you have your favicon ready, log in to your blogger blog and select <b>layout</b> >> <b>edit</b>. See below pictorial representation.</div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcoC-ZFuJbTtIIrCLvK8mFZfRwADWz_pCV1rJPyS8lyHUml0MYRgkeEJIJnb1HgzNoGbXhYj4JbuvUb1Iguw1VKPTlnT9fRzO9rWkjJ2-81pTLDqi8hycgKHCzdq1sfF_VGRCZ79jv5Tpn/s1600/Edit+favicon.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Select edit Favicon from blog layout" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcoC-ZFuJbTtIIrCLvK8mFZfRwADWz_pCV1rJPyS8lyHUml0MYRgkeEJIJnb1HgzNoGbXhYj4JbuvUb1Iguw1VKPTlnT9fRzO9rWkjJ2-81pTLDqi8hycgKHCzdq1sfF_VGRCZ79jv5Tpn/s1600/Edit+favicon.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Edit Favison" /></a></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
By clicking on <b>edit</b> a pop up window will open having option to upload favicon file to your blog. Press <b>choose file button</b> and locate your favicon which you have just made it and upload it to blogger. Now click save to complete the process.</div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjldrQEYfs3AJm4y7cT2mthWT33yp5ec3c8NNaMv_LGUbkqdt3pePDS2vNzl65rzc_cX83MrAk0-CMP9aTIFl5wUPDSbAscMqBPOUNYVMLO18ahc8OaQf2lxPpl5MvC97hSM1OOhwSpO-Jd/s1600/upload+favicon.png" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Upload your Favicon By clicking choose file" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjldrQEYfs3AJm4y7cT2mthWT33yp5ec3c8NNaMv_LGUbkqdt3pePDS2vNzl65rzc_cX83MrAk0-CMP9aTIFl5wUPDSbAscMqBPOUNYVMLO18ahc8OaQf2lxPpl5MvC97hSM1OOhwSpO-Jd/s1600/upload+favicon.png" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Upload Favicon" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<br /></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY39fZSDshqa2eNbXrI6jkxCaz-kfvjvJ1JbU8xIiurvbPWsVXika3_ChfM_3nAOnrLyCOLNkGPZl35bEs0w9cAyhbWVl4pnceIISREQdLZLDr2B3Gl-frDrGqSCpPSHgdpJ4pNujkr0Mg/s1600/ice_screenshot_20160429-023710.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY39fZSDshqa2eNbXrI6jkxCaz-kfvjvJ1JbU8xIiurvbPWsVXika3_ChfM_3nAOnrLyCOLNkGPZl35bEs0w9cAyhbWVl4pnceIISREQdLZLDr2B3Gl-frDrGqSCpPSHgdpJ4pNujkr0Mg/s1600/ice_screenshot_20160429-023710.png" /></a></div>
<div class="separator" style="background-color: white; clear: both; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: center;">
<br /></div>
<div style="background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: justify;">
<b>Congratulations</b>, you have successfully added a personalized favicon to your blog. I hope now you have no difficulty in implementing favicon to your blogger blog. If having some difficulty write to us in comments we will be happy to help you.</div>
</div>

BLOGGER CUSTOMIZATION How To Add Custom Favicon In Your Blogger Blog

Branding your blog is a good thing and we as bloggers don’t really concentrate on it. One small way to brand your blog is adding...

Facebook Showing Wrong Thumbnail Image When Share Blogger Post

Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqH0Pyk_mNgLy0h21j5fUP9dNm88mS_voBXhzLnvF1HMTcVND_NldM6OfXRIjGIG0gfs_GtIv_nnF-WO3UdhyJN2cono0vP3zT6LkDJX_6JFh1rozsNcLID8fGGbrR1E6jpOMEkq7rGVw/s1600/facebook-show-wrong-picture-.png" /></div>
<br />
<div style="-webkit-text-stroke-width: 0px; background-color: white; clear: left; color: #3d5054; float: left; font-family: Lato, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; margin-bottom: 1em; margin-right: 1em; orphans: auto; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
</div>
<br />
<br />
<a href="https://draft.blogger.com/null" name="more" style="-webkit-text-stroke-width: 0px; background-color: white; color: #5a9e25; font-family: Lato, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;"></a><br />
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<b><span style="color: red;"><span style="background-color: white;"><br /></span></span></b>
<b><span style="color: red;"><span style="background-color: white;">B</span></span><span style="color: blue;">eing</span> <span style="color: purple;">a</span> <span style="color: red;">B</span>lo<span style="color: #3d85c6;">gger</span> user </b>everyone wants to promote his/her <span style="background-color: white;"></span>posts and mostly shared it on Facebook. Ever if you have tried sometime you might have observed that the shared post link does not show up the right image or showing irrelevant picture taking anywhere from your blog. This is one of the most common issue from Facebook pending since from several years back and still it has not been resolved. However Facebook is not much clever to pickup the right image from your post. You have to make your post understandable and add some piece of chunk code in your blogger template to tell the Facebook robot which image has to show in the Round thumbnail at Facebook wall.</div>
<div style="-webkit-text-stroke-width: 0px; background-color: white; color: #3d5054; font-family: Lato, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<br /></div>
<div style="-webkit-text-stroke-width: 0px; font-family: Lato, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: auto; text-align: justify; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px;">
<div style="background-color: white; color: #3d5054;">
The same issue has been also detected by <a href="http://shmhack.blogspot.com/" target="_blank">ShmHack</a> in the early days whenever we used to publish our post at facebook it would show up wrong picture or acting no thumbnail. So after reading and writing many articles about facebook algorithm meta data finally i come to know how to resolve facebook wrong picture thumbnail issue.</div>
<div style="background-color: white; color: #3d5054;">
<br /></div>
<div style="background-color: white; color: #3d5054;">
Since from the couple of day we have been receiving too much complaints about the facts that facebook is not showing the right picture when we share post there or even click on likes buttons.</div>
<div style="background-color: white; color: #3d5054;">
<br /></div>
<div style="background-color: white; color: #3d5054;">
So after receiving the same issue again and again my brain is pumped out and do prepare this tutorial, to show you how to show right post picture in facebook. So in this article we will guide you how to fix <b>facebook thumbnail image</b> not showing when shared a post link.</div>
<div style="background-color: white; color: #3d5054;">
<br /></div>
<div style="background-color: white; color: #3d5054;">
<h3 style="font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-align: left; text-transform: capitalize;">
Why Blogger Post Show Wrong Image Thumbnail In Facebook</h3>
<div>
To know the fact let me tell you the truth. Besides some of the paid blogger templates These days blogger templates are mostly coded by unprofessional developers and webmasters, they do not performed well in XML or html only get ride to complete the template and sell it out on templates websites.</div>
<div>
<br /></div>
<div>
They do thousands of creepy errors and give messy style coding layout. Though the same templates download by newbies and do facing a lot of errors inside blogger edit html template editor. We could recommended to use professional templates before getting too much issue.</div>
</div>
<div>
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-align: left; text-transform: capitalize;">
How To Fix Facebook Wrong Picture Thumbnail Issue In Blogger Template</h3>
<span style="background-color: white; color: #3d5054; text-align: left;">Te set the right picture for post in facebook while displaying no thumbnail or showing wrong picture we have to add some chunk of code in our template. follow the below given simple steps to Avoid No Thumbnail Issue While Sharing Post on Facebook</span><br />
<br style="text-align: left;" />
<b style="background-color: red; text-align: left;"><span style="color: #6aa84f;">Step1:</span></b><span style="background-color: white; color: #3d5054; text-align: left;">  </span><br />
<br style="text-align: left;" />
<ol style="background-color: white; color: #3d5054; text-align: left;">
<li>Go to<b> blogger dashboard:</b></li>
<li>Go to <b>Template >> Edit >>Html:</b></li>
<li>Find for <b><head></b> tag In template:</li>
<li>Past the below given code just after the <b><head> tag:</b></li>
</ol>
<br style="text-align: left;" />
<br style="text-align: left;" />
<div class="separator" style="background-color: white; clear: both; color: #3d5054; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv_LhIlMLquBBR7wbnovIEfZLbnc78bIbQBer3Y0Skm8ccBx6Y9lsDNg0gClLw3BTFlQks7ghcYGHlfT9vha6gQNuGMXjK7Qr8g_hGad80FIFvL9hz4hSX_HcgAY5YwgY8fiZeE91Sc4k/s1600/wrong-picture-show-in-facebook..jpg" imageanchor="1" style="color: #5a9e25; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Wrong Picutre Show thumnail issue when sharing post." border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv_LhIlMLquBBR7wbnovIEfZLbnc78bIbQBer3Y0Skm8ccBx6Y9lsDNg0gClLw3BTFlQks7ghcYGHlfT9vha6gQNuGMXjK7Qr8g_hGad80FIFvL9hz4hSX_HcgAY5YwgY8fiZeE91Sc4k/s1600/wrong-picture-show-in-facebook..jpg" style="border-width: 0px; margin: 10px; max-width: 90%;" title="Wrong image Show thumbnail Issue" /></a></div>
<br style="text-align: left;" />
<br style="text-align: left;" />
<blockquote class="tr_bq" style="background-color: white; color: #3d5054;">
<span style="background-color: #f2f1f1; font-size: 12.6px; line-height: 16.38px; text-align: left;"><meta content='article' property='og:type'/></span><span style="background-color: #f2f1f1; font-size: 12.6px; line-height: 16.38px; text-align: left;"><meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/></span><span style="background-color: #f2f1f1; font-size: 12.6px; line-height: 16.38px; text-align: left;"><meta expr:content='data:blog.title' property='og:site_name'/></span><span style="background-color: #f2f1f1; font-size: 12.6px; line-height: 16.38px; text-align: left;"><meta expr:content='data:blog.pageName' property='og:title'/></span><span style="background-color: #f2f1f1; font-size: 12.6px; line-height: 16.38px; text-align: left;"><b:if cond='data:blog.metaDescription != &quot;&quot;'></span><span style="background-color: #f2f1f1; font-size: 12.6px; line-height: 16.38px; text-align: left;"><meta expr:content='data:blog.metaDescription' name='description'/></span></blockquote>
<blockquote class="tr_bq" style="background-color: white; color: #3d5054;">
<span style="background-color: #f2f1f1; font-size: 12.6px; line-height: 16.38px; text-align: left;"></b:if></span></blockquote>
<span style="background-color: white; color: #3d5054; text-align: left;"></span><br />
<div>
<span style="background-color: white; color: #3d5054; text-align: left;"><br /></span></div>
<span style="background-color: white; color: #3d5054; text-align: left;">
<div>
   Now click on save button: You done Almost:</div>
</span><br />
<h3 style="background-color: white; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-align: left; text-transform: capitalize;">
<span style="color: orange;">Remember:</span><span style="color: #3d5054;"> The Following Things After Customization</span></h3>
<span style="background-color: white; color: #3d5054; text-align: left;">Here is some important tips you should must know before switching this post.</span><br />
<ol style="background-color: white; color: #3d5054; text-align: left;">
<li>After customization all your new post will <b>show correct picture thumbnail in facebook</b> whenever you share the post</li>
<li>Your Older Post will still not showing up Correct image.don't worry it will start showing up (wait for 3 days)</li>
<li>You will must add the same code if ever you change blogger template</li>
</ol>
<br style="text-align: left;" />
<h3 style="background-color: white; color: #3d5054; font-family: Arvo; font-size: 35px; font-weight: normal; letter-spacing: -2px; line-height: 40px; margin: 35px 0px 10px; text-align: left; text-transform: capitalize;">
Bounas Tips To Show Right Post Image Thumbnail In Facebook</h3>
<span style="background-color: white; color: #3d5054; text-align: left;">These are some of the basic blogger tips and tricks which would help in how we should insert image in right manner inside the blogger post.</span><br />
<ol style="background-color: white; color: #3d5054; text-align: left;">
<li>First of all i would recommended to use the PNG format for main image.</li>
<li>Use JPG image format for the rest of all ordinary image inside the post except the main picture.</li>
<li> Always try to add intro image inside the post.</li>
<li> Do not Resize Image automatically in Post by html if big one:</li>
<li>Share your Post on facebook immediately after publishing.</li>
<li>For more tips visit the below post.</li>
</ol>
<div style="background-color: white; color: #3d5054;">
Guys this was something all about how to resolve wrong show pictures thumbnail in Facebook. We hope you would love and share this trick with your followers. If anyone facing problem in displaying wrong image thumbnail in Facebook then kindly let us know and post your query in the below comment section and explain your word. Do not forget to share this informative post. <i>thank and happy blessing.</i></div>
</div>
</div>
</div>

BLOGGER CUSTOMIZATION Facebook Showing Wrong Thumbnail Image When Share Blogger Post

B eing a B lo gger user everyone wants to promote his/her posts and mostly shared it on Facebook. Ever if you have tri...

SHM-HACK

How To Add Your Own CSS Styles To Blogger.Com

How To Add CSS Bubbles

3 Logo Generators To Give An Identity To Your Blog

How To Add AddThis Welcome Bar In Blogger

How To Add Beautiful Bubble Comment Counter To Blogger Blog

Add Stylish Vertical Floating Sharing Buttons to Blogger

How To Add Custom Favicon In Your Blogger Blog

Facebook Showing Wrong Thumbnail Image When Share Blogger Post

Trending Topics

Translate