BloggersStand

Best Ten Places To Put Adsense Ads In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="tr_bq">
<div style="text-align: justify;">
In this tutorial i'm going to explain how to add Adsense ads on best places in blogger,these are the most  common places in website or blog.</div>
</div>
<h3>
<b>Also Read:
</b></h3>
<div class="series">
<a href="http://www.bloggersstand.com/2015/08/add-adsense-in-blogger-middle-below-post-titles-footer.html" target="_blank">Best Ten Places To Put Adsense Ads In Blogger</a></div>
</div>
<div class="series">
<a href="http://www.bloggersstand.com/2015/08/add-adsense-inside-middle-blogger-post.html" target="_blank">Adsense Ads Middle/Below Titles/Anywhere Inside Blogger</a></div>
<div class="series">
<a href="http://www.bloggersstand.com/2015/08/float-facebook-box-with-adsense-in-blogger.html" rel="nofollow" target="_blank">Add Floating Facebook Like Box With Adsense Ads Widget</a></div>
<div class="series">
<a href="http://www.bloggersstand.com/2015/08/float-blogger-adsense-in-center-stick.html" target="_blank">Float Adsense Ads In Center/Middle In Blogger Widget</a></div>
<div class="series">
<a href="http://www.bloggersstand.com/2015/08/float-adsense-other-ads-right-left-in-blogger.html" target="_blank">Add Floating Adsense Right And LeftSidebar In Blogger</a></div>
<br />
<h2 style="text-align: justify;">
Adsense Ads For Blogger Below Post Titles,Sidebar,Middle Post,Footer.</h2>
<h3 style="text-align: left;">
1. In The Sidebar:</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-zQpPbtR_jII/Vbxm0jLU2ZI/AAAAAAAABHQ/P91u-YqVLEM/s1600/adsense-ads-in-sidebar-of-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Adsense Ads in Sidebar of Blogger" border="0" src="https://1.bp.blogspot.com/-zQpPbtR_jII/Vbxm0jLU2ZI/AAAAAAAABHQ/P91u-YqVLEM/s1600/adsense-ads-in-sidebar-of-blogger.png" title="Adsense Ads in Sidebar of Blogger" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
<b>Implementation:</b>Just go to the Page Elements (Layout), click on the "Add a Gadget" link, then add an HTML/Javascript widget with your  Adsense ad code inside it or you can also  add directly an AdSense widget provided by blogger under the "Add a Gadget"</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Recommended Ads formats for Sidebar:</b> 125 × 125,120 × 600,160 × 600 and 300 x 600</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
2. Adsense Ads In Between Posts:</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-WQqtYgJdBK4/VbxoQMT5y7I/AAAAAAAABHc/PDqVsHiMGzU/s1600/adsense-ads-between-posts-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://1.bp.blogspot.com/-WQqtYgJdBK4/VbxoQMT5y7I/AAAAAAAABHc/PDqVsHiMGzU/s1600/adsense-ads-between-posts-in-blogger.png" /></a></div>
<div>
<b><br /></b></div>
<div>
<div style="text-align: justify;">
<b>Implementation:</b>You can add AdSense ads between your posts just go to <b>Layout</b>, click on the "<b>Edit</b>" link below the <b>Blog Posts</b>, then check the "<b>Show Ads Between Posts</b>".</div>
</div>
<div>
<br /></div>
<div>
<b>Recommended Ads formats for Between Posts:</b>468 × 60,300 × 250 & 336 × 280</div>
<h3 style="text-align: left;">
3.Adsense Ads Under The Header:</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-wdCmYTmWIMI/Vbxp6D-bdVI/AAAAAAAABHo/J16WiBEbnxM/s1600/adsense-ads-under-header-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Adsense ads under the header in blogger" border="0" src="https://2.bp.blogspot.com/-wdCmYTmWIMI/Vbxp6D-bdVI/AAAAAAAABHo/J16WiBEbnxM/s1600/adsense-ads-under-header-in-blogger.png" title="Adsense ads under the header in blogger" /></a></div>
<div>
<b><br /></b></div>
<div>
<div style="text-align: justify;">
<b>Implementation:</b>For this Ad first you need to CONVERT your Adsense Ads.You can use this converter here.</div>
</div>
<div>
<br /></div>
<div>
<a href="http://bloggersstand.blogspot.in/p/online-html-to-xml-parserblogger.html" rel="nofollow" target="_blank">Adsense Online HTML to XML Ads  Parser Converter</a></div>
<div>
<br /></div>
<div>
<div style="text-align: justify;">
Now,go to your<b> blogger template</b> and press <b>edit</b> html button and click anywhere inside your code and search for the following code by using the CTRL+F keys.</div>
</div>
<blockquote class="tr_bq">
 <div id='header-wrapper'></blockquote>
Paste the converted code after it.<br />
<br />
<b>Recommended Ads Format for under the Header:</b>728 × 90 & 728 × 15<br />

<h3 style="text-align: left;">
4. Adsense Ads Above The Blog Posts:</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-sE4KxB0QyTs/VbxsP7_9n0I/AAAAAAAABH0/iOCQdovYI2k/s1600/blogger-adsense-ads-above-blog-post-titles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="adsense ads above the blogger post" border="0" src="https://1.bp.blogspot.com/-sE4KxB0QyTs/VbxsP7_9n0I/AAAAAAAABH0/iOCQdovYI2k/s1600/blogger-adsense-ads-above-blog-post-titles.png" title="adsense ads above the blogger post" /></a></div>
<div>
<b><br /></b></div>
<div>
<div style="text-align: justify;">
<b>Implementation:</b>First <a href="http://bloggersstand.blogspot.in/p/online-html-to-xml-parserblogger.html" rel="nofollow" target="_blank">convert your adsense ads code</a>,now go to edit template then click on edit html button and click anywhere inside your code and find  <b><div id='header-wrapper'></b> by using CTRL+F keys.After converted code paste just right after it.</div>
</div>
<div>
<br /></div>
<div>
<b>Recommended Formats For Adsense Above the Blog Posts:</b>460×68,468×15 & 336×280</div>
<h3 style="text-align: left;">
5. Adsense Ads Under The Post Titles In Blogger(This will visible on all the pages):</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-5VBP3uO5wHY/VbxuFOOHjMI/AAAAAAAABIA/D8eIV8q12OM/s1600/blogger-adsense-ads-under-post-title.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://1.bp.blogspot.com/-5VBP3uO5wHY/VbxuFOOHjMI/AAAAAAAABIA/D8eIV8q12OM/s1600/blogger-adsense-ads-under-post-title.png" /></a></div>
<div>
<br /></div>
<div>
<div style="text-align: justify;">
<b>Implementation:</b>First,<a href="http://bloggersstand.blogspot.in/p/online-html-to-xml-parserblogger.html" rel="nofollow" target="_blank">Convert your adsense code</a> then,go to template>edit html>click anywhere inside your code and search for the following code by using CTRL+F keys.</div>
</div>
<blockquote class="tr_bq">
<div class='post-header-line-1'/></blockquote>
<div>
<b><i>Note:</i></b> If you can't find it,search it without the <b>ending slash /.</b>Now Paste the code after it.</div>
<div>
<br /></div>
<div>
<b>Recommended Ads Format For Under The Post Title:</b>468 × 68 & 468 × 15</div>
<h3 style="text-align: left;">
6. Adsense Ads Under The Post Title (Visible only on the post pages):</h3>
<div>
Implementation:First,<a href="http://bloggersstand.blogspot.in/p/online-html-to-xml-parserblogger.html" rel="nofollow" target="_blank">Convert your adsense ad code</a>,then go to edit template and find</div>
<blockquote class="tr_bq">
<div class='post-header-line-1'/></blockquote>
<b><i>Note:</i></b>If you can't find it,search it without the trailing slash<b> / </b><br />
<br />
Now paste your coverted code like this:<br />
<blockquote>
   <b:if cond='data:blog.pageType == "item"'><br />
<br />
</b:if></blockquote>
<h3 style="text-align: left;">
7. Add Adsense Ads Under The Posts Footer: </h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-GVd_c8mek9s/VbxyaDEri7I/AAAAAAAABIM/v_dBZ1FOWH8/s1600/blogger-adsense-ads-under-posts-entry-footer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to add adsense ads under the post entry footer" border="0" src="https://4.bp.blogspot.com/-GVd_c8mek9s/VbxyaDEri7I/AAAAAAAABIM/v_dBZ1FOWH8/s1600/blogger-adsense-ads-under-posts-entry-footer.png" title="how to add adsense ads under the post entry footer" /></a></div>
<div>
<div style="text-align: justify;">
<b>Implementation:</b>First,<a href="http://bloggersstand.blogspot.in/p/online-html-to-xml-parserblogger.html" rel="nofollow" target="_blank">Convert your adsense code</a> and the go to edit template and search for the following code</div>
</div>
<blockquote class="tr_bq">
 <div class='post-body entry-content'></blockquote>
<i><b>Note:</b></i>If you can't find it,search for this code <b><div class='post-body'></b><br />
<br />
Now paste your converted code like this<br />
<blockquote>
 <div style='float:right'><br />
<br />
</div></blockquote>
<b> Recommended Adsense Ads Formats: </b>125x125, 180x150, 120x240 & 200x200<br />
<h3 style="text-align: left;">
8.Adsense Ads Under the Post Titles(Visible Only in the Posts pages):</h3>
<div>
<div style="text-align: justify;">
<b>Implementation:</b>First,Convert your adsense ads code,then go to edit template and search for the following code.</div>
</div>
<blockquote class="tr_bq">
 <div class='post-body entry-content'></blockquote>
 <i><b>Note:</b></i>If you can't find it,search for this code <b><div class='post-body'></b><br />
<b><br /></b>
Now paste your converted code like this,<br />
<blockquote>
 <b:if cond='data:blog.pageType == "item"'><br />
<div style='float:right'><br />
<br />
</div><br />
</b:if></blockquote>
<b> Recommended Adsense Ads Formats:</b> 125x125, 180x150, 120x240 & 200x200<br />
<h3 style="text-align: left;">
9.Adsense Ads Between Posts And Comments In Blogger:</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-g_yUUDEWS88/Vbx062GM3gI/AAAAAAAABIY/c6TLTfJoZds/s1600/how-to-add-adsense-ads-between-posts-and-comments-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to add adsense ads between posts and comments in blogger" border="0" src="https://3.bp.blogspot.com/-g_yUUDEWS88/Vbx062GM3gI/AAAAAAAABIY/c6TLTfJoZds/s1600/how-to-add-adsense-ads-between-posts-and-comments-in-blogger.png" title="how to add adsense ads between posts and comments in blogger" /></a></div>
<div>
<div style="text-align: justify;">
<b>Implementation:</b>First,<a href="http://bloggersstand.blogspot.in/p/online-html-to-xml-parserblogger.html" rel="nofollow" target="_blank">Convert your adsense code</a> and the go to edit template and search for the following code.</div>
</div>
<div>
<blockquote class="tr_bq">
 </b:includable><br />
<b:includable id='postQuickEdit' var='post'></blockquote>
Now paste the converted code just above it like this.<br />
<blockquote>
 <b:if cond='data:blog.pageType == "item"'><br />
<br />
</b:if></blockquote>
<b>Recommended Adsense Ads Formats: </b>468x60, 300x250 & 336x280<br />
<h3 style="text-align: left;">
10.Adsense Ads In The Blogger Footer:</h3>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-ZLcs_e9aIyk/Vbx2IOKWSSI/AAAAAAAABIk/QhDx1oqFXcc/s1600/how-to-add-adsense-ads-in-blogger-footer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://3.bp.blogspot.com/-ZLcs_e9aIyk/Vbx2IOKWSSI/AAAAAAAABIk/QhDx1oqFXcc/s1600/how-to-add-adsense-ads-in-blogger-footer.png" /></a></div>
<div>
<div style="text-align: justify;">
<b>Implementation:</b>First,<a href="http://bloggersstand.blogspot.in/p/online-html-to-xml-parserblogger.html" rel="nofollow" target="_blank">Convert your adsense code</a> and the go to edit template and search for the following code.</div>
</div>
<blockquote class="tr_bq">
 <div id='footer-wrapper'></blockquote>
Now,Paste Your Converted Code Right After it.<br />
<br />
<b>Recommended Ads Format for under the Header:</b>728 × 90 & 728 × 15</div>

In this tutorial i'm going to explain how to add Adsense ads on best places in blogger,these are the most common places in website ...

VIEW

How To Add Five Star Rating Style Popular Posts Widget

22:47:00 / BYshekhar singh / 0 /

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-lqvA0ACl6y4/VrovqSyvqGI/AAAAAAAAETg/21b7DdV3a-s/s1600/customize%2Bfive%2Bstar%2Brating%2Bstyle%2Bpopular%2Bpost%2Bwidget%2Bfor%2Bblogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Five Star Rating Style Popular Widget In Blogger Template" border="0" src="https://1.bp.blogspot.com/-lqvA0ACl6y4/VrovqSyvqGI/AAAAAAAAETg/21b7DdV3a-s/s1600/customize%2Bfive%2Bstar%2Brating%2Bstyle%2Bpopular%2Bpost%2Bwidget%2Bfor%2Bblogger.png" title="How To Add Five Star Rating Style Popular Widget In Blogger Template" /></a></div>
<div style="text-align: justify;">
Hello Folks,Today in this article we are going to explore another stylish blogger popular post widget.However you guys are using a different type or style gadgets in your blog,but i'am damn sure no one have this <a href="http://www.bloggersstand.com/2016/02/popularpost-embed-trending-widget-in-blogger-template.html" target="_blank">five star rating widget for blogger popular posts</a>.We have developed this widget for our visitors and we have used pure CSS to customize it.Popular post widget is a very useful to keep engage your website visitors to another post,result your SEO ranking will also increase that's why we recommend to use popular gadget tool in your blogspot theme.</div>

<div style="text-align: justify;">
Five Star Rating Style <b><a href="http://www.bloggersstand.com/search/label/Blogger%20Widgets" target="_blank">widget</a></b> is very simple to implement in blog and it's load fast.Five Star Rating widget comes with three styles.In style 1 the most popular post will display with five stars rating and next one with one less star means 4 star will be in dark color the other one will fade.In style 2 which post is highly popular will get five stars rating the next one will get direct 4 star rating means one star will remove.And in the third and final one the rating will start getting down from first to last.We recommend this popular post widget go and use it and it also improve the page designing because it looks so attractive.So now we are heading towards the implementation of the widget,to grab this widget follow the steps mentioned below.</div>
<center>
<a class="bloggersstand-button bloggersstand-butt bloggersstand-buttlater bloggersstand-butticon" href="http://sevidatemplate.blogspot.in/2015/08/snews-v13-newsmagazine-responsive.html" rel="”nofollow”" target="_blank">Demo</a></center>
<h2 style="text-align: justify;">
How to install Five Star Rating Style Popular Widget In Blogger template</h2>
<h4 style="text-align: left;">
installation steps:</h4>
<div>
<div>
Step .1 Go to <b><i>https://www.blogger.com</i></b> and Sign in to your account.</div>
<div>
Step .2 Now From Blogger Dashboard click on -><i><b>Template ->Edit HTML</b></i>.<br />
Step .3 Now Search For <i style="font-weight: bold;"><head> </i>tag In Your Template By Using CTRL+F Keys or CMD+F<br />
Step .4 Now Paste the following below script and paste just after the <i style="font-weight: bold;"><head> </i>tag.<br />
<blockquote class="tr_bq">
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/></blockquote>
<div style="text-align: justify;">
Step .5 Now Search For <b>]]></b:skin></b> or <b></style> </b>tag and now copy the any style of  CSS code from the below and paste it just above it.</div>
<br />
<b><u>#Style 1</u></b><br />
<blockquote class="tr_bq">
/* Five Star Rating Popular Post Widget By BloggersstanD.com */<br />
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}<br />
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}<br />
.PopularPosts ul{margin:0;list-style:none;color:#64707a}<br />
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}<br />
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}<br />
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}<br />
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}<br />
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}<br />
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}<br />
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}<br />
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}<br />
.PopularPosts ul li:hover:before{opacity:1}<br />
.PopularPosts ul li:first-child{border-top:none}<br />
.PopularPosts ul li:last-child{border-bottom:none}<br />
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}<br />
.PopularPosts ul li a:hover{color:#2476e0;}<br />
.PopularPosts .item-thumbnail{margin:0;}<br />
.PopularPosts .item-snippet{display:none}<br />
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}</blockquote>
<b><u>#Style 2</u> </b><br />
<blockquote class="tr_bq">
/* Five Star Rating Popular Post Widget By BloggersstanD.com */<br />
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}<br />
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}<br />
.PopularPosts ul{margin:0;list-style:none;color:#64707a}<br />
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}<br />
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}<br />
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}<br />
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}<br />
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}<br />
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}<br />
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}<br />
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}<br />
.PopularPosts ul li:hover:before{opacity:1}<br />
.PopularPosts ul li:first-child{border-top:none}<br />
.PopularPosts ul li:last-child{border-bottom:none}<br />
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}<br />
.PopularPosts ul li a:hover{color:#2476e0;}<br />
.PopularPosts .item-thumbnail{margin:0;}<br />
.PopularPosts .item-snippet{display:none}<br />
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}</blockquote>
<b><u>#Style 3 </u></b><br />
<br />
<br />
<blockquote class="tr_bq">
/* Five Star Rating Popular Post Widget By BloggersstanD.com */<br />
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}<br />
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}<br />
.PopularPosts ul{margin:0;list-style:none;color:#64707a}<br />
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}<br />
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}<br />
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}<br />
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}<br />
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}<br />
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}<br />
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}<br />
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}<br />
.PopularPosts ul li:hover:before{opacity:1}<br />
.PopularPosts ul li:first-child{border-top:none}<br />
.PopularPosts ul li:last-child{border-bottom:none}<br />
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}<br />
.PopularPosts ul li a:hover{color:#2476e0;}<br />
.PopularPosts .item-thumbnail{margin:0;}<br />
.PopularPosts .item-snippet{display:none}<br />
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}</blockquote>
Step .6 Now Save your Template..Done !!  </div>
</div>
</div>

Blogger Gadgets Blogger Tricks Blogger Widgets How To Add Five Star Rating Style Popular Posts Widget

Hello Folks,Today in this article we are going to explore another stylish blogger popular post widget.However you guys are using a diffe...

VIEW

Resolve Author+Name+Date Published+Modified Error From Static Page

22:47:00 / BYshekhar singh / 2 /

<div style="text-align: justify;">
Hello Folks,Today in this article we are going to explain How to <a href="http://www.bloggersstand.com/2016/02/how-to-make-all-blogger-static-pages-amp-hatom-error-free.html" target="_blank">Fix Author Name,Date Published And Modified Error From Blogger Static Page</a>.We have already talked about fixing various errors from blogger template But all those errors fixed from blogger post pages and from home page..But today we have developed the new trick to fix error from blogger static page,However it took a bit of time..but finally we have got that working and its available for use.And we must fix those error from blogger static page to make our website template error free so that google can read good content and gives higher ranking to your content.Before we proceeding to next step we assume that you have already fixed error from blogger pages.But you can still see Hatom error in blogger static page and becuase of that google still display these errors.</div>
<br />
<span style="text-align: justify;">For checking the error you have to use google structure testing tool, simply go to the below URL and through click on Fetch URL to check your weblog Errors.</span><br />
<blockquote class="tr_bq">
<span style="text-align: justify;">https://developers.google.com/structured-data/testing-tool/</span></blockquote>
If Google structure data testing tool display the erros it will looks like this:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-pHhKuCiUMWQ/VrCefdueDJI/AAAAAAAAEBY/vCwg_hPSlGA/s1600/author%2Band%2Bname%2Berror%2Bin%2Bblogger%2Bstatic%2Bpages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="author,datepublished,name,datemodified error missing and requried" border="0" height="48" src="https://4.bp.blogspot.com/-pHhKuCiUMWQ/VrCefdueDJI/AAAAAAAAEBY/vCwg_hPSlGA/s320/author%2Band%2Bname%2Berror%2Bin%2Bblogger%2Bstatic%2Bpages.png" title="author,datepublished,name,datemodified error missing and requried" width="320" /></a></div>
<div style="text-align: justify;">
So you can clearly see Author,Date Published,Name,Date Modified Missing,Required and Recommended Error In your blogger static pages.So to make template error free follow the steps mentioned below.</div>
<h2 style="text-align: justify;">
How To solve Hatom error fixed from Blogger Static Page</h2>
<h4 style="text-align: left;">
installation steps:</h4>
<div>
<div>
Step .1 Go to https://www.blogger.com and Sign in to your account</div>
<div>
Step .2 Now From Blogger Dashboard click on ->Template ->Edit HTML<br />
Step .3 Now Search For Below Code In Your Template By Using CTRL+F Keys<br />
<blockquote class="tr_bq">
<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'></blockquote>
Step .4 Now Copy The Below Schema Markup Code And Paste It Just After Above Step .3 That means After the above code.<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br />
<div class='post-meta' style='display:none;'><br />
<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'> <data:post.timestamp/></abbr></a><br />
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><br />
                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/><br />
                      <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><br />
                        <span itemprop='name'><data:post.author/></span><br />
                      </a><br />
                    </span><br />
</div><br />
</b:if></blockquote>
Step .5 Now Save Your Template..Done !<br />
<br />
<div style="text-align: justify;">
<i>Now again go on google structure data testing tool and check these error are fixed from blogger static pages.</i></div>
<span style="text-align: justify;">We hope this article helped you to learn How To Resolve <a href="http://www.bloggersstand.com/2016/02/how-to-make-all-blogger-static-pages-amp-hatom-error-free.html" target="_blank">Author+Name+Date Published+Modified Error From Blogger Static Page</a>.If you liked this article please Join us on </span><b style="text-align: justify;"><a href="https://www.facebook.com/bloggersstand" rel="nofollow" target="_blank">Facebook</a>,<a href="http://twitter.com/bloggersstand" rel="nofollow" target="_blank">Twitter</a>,<a href="https://plus.google.com/+Bloggersstand" rel="nofollow" target="_blank">Google Plus</a>.</b> </div>
</div>
</div>

Blogger Tutorials Resolve Author+Name+Date Published+Modified Error From Static Page

Hello Folks,Today in this article we are going to explain How to Fix Author Name,Date Published And Modified Error From Blogger Static...

VIEW

How To Add Slide Up And Slide Down Contact Us Widget

22:46:00 / BYshekhar singh / 3 /

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-YxfkS8Xd7cc/Vr3HXIlQDaI/AAAAAAAAEfA/bTzojRvQYFk/s1600/How%2Bto%2Badd%2Ba%2Bfloating%2Bcontact%2Bform%2Bwidget%2Bin%2Bbottom%2Bdown%2Bin%2Bblogger%2Btemplate.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Slide Up And Slide Down Contact Us Widget " border="0" src="https://3.bp.blogspot.com/-YxfkS8Xd7cc/Vr3HXIlQDaI/AAAAAAAAEfA/bTzojRvQYFk/s1600/How%2Bto%2Badd%2Ba%2Bfloating%2Bcontact%2Bform%2Bwidget%2Bin%2Bbottom%2Bdown%2Bin%2Bblogger%2Btemplate.png" title="How To Add Slide Up And Slide Down Contact Us Widget " /></a></div>
<div style="text-align: justify;">
Heya ! How all are you doing ? Today in this tutorial we are going to explain <a href="http://www.bloggersstand.com/2016/02/embed-fixed-contact-us-button-right-side-below-in-blogger-template.html" target="_blank">How to add a Fixed Contact From gadget In Blogger Template</a>.Lot's of using blogger default contact us widget that is just like a ok ok type.if you want to increase a niche of your blogger website or blog you must add this custom CSS contact form tool which will add in right side of bottom in your website and whenever you will click on contact us button it will slide up and you can fill the form and directly send the email to the author or admin of website or blog.</div>

<div style="text-align: justify;">
We have also seen some are installing contact form in blogger pages even i have also installed :P but that is different thing you can add there too.but this contact us floating widget is very useful for every blogspot website.We have customized the some functions of contact us widget to look more beautiful.We have used CSS and jquery to make it work perfect.To grab the floating contact us widget follow the steps mentioned below.</div>
<h4 style="text-align: center;">
<a href="http://demo-bloggersstand.blogspot.in/" target="_blank">Demo</a></h4>
<h2 style="text-align: left;">
How to add fixed contact us button in blogger footer</h2>
<div>
<h4 style="text-align: left;">
installation steps:</h4>
<div>
<div class="series">
Before customizing Contact us widget to slide up and slide down in blogger template,First add blogger default contact widget..just go to your <i>layout->Add a gadget->More Gadget->Contact Form. </i><b>After Adding above step then follow to the below steps.</b></div>
</div>
<div>
Step 1. Log in to your Blogger account and Go to your <b>Blogger Dashboard</b>.</div>
Step 2. Now Click on <b>-> Template -> Edit HTML</b>.<br />
Step 3. Now Search for the <i></b:skin></i> or <i></style> </i>and copy the below CSS code and paste it just above <b></b:skin></b> or <b></style></b><br />
<blockquote class="tr_bq">
/* Slide Out Contact Form Widget By Www.Bloggersstand.com */<br />
.ContactForm,.ContactForm .title{display:none}<br />
.bsd-floating{position:fixed;width:280px;right:30px;bottom:0;z-index:99}<br />
.bsd-floating-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}<br />
.bsd-floating-head a:hover{background:#2588ca;color:#fff}<br />
.bsd-floating-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}<br />
.bsd-floating-head{text-align:right}<br />
.bsd-floating-body .ContactForm{margin:0;display:block!important}<br />
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}<br />
#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}<br />
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}<br />
#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}<br />
#ContactForm1_contact-form-submit:hover{background:#468a53;}<br />
#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}<br />
.contact-form-widget form{display:table;margin:0 auto;}<br />
.contact-form-widget {max-width:initial;}<br />
.bsd-floating-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}</blockquote>
<br />
Step 4. Now Search for the closing<b><i> </body></i></b> tag and now copy the below script and paste it just above <i></body></i> it.<br />
<blockquote class="tr_bq">
<script type='text/javascript'><br />
//<![CDATA[<br />
// Contact Form Widget By www.Bloggersstand.com<br />
$("body").append('<div class="bsd-floating"><div class="bsd-floating-head"><a href="#no-move">Contact Form</a></div><div class="bsd-floating-body"></div></div>'),$(".ContactForm").appendTo(".bsd-floating-body");var bsd-slide_up=!1;$(".bsd-floating-head a").click(function(){bsd-slide_up?(bsd-slide_up=!1,$(".bsd-floating-body").slideUp()):(bsd-slide_up=!0,$(".bsd-floating-body").slideDown())});<br />
//]]><br />
</script></blockquote>
Step 5. Now Save your Template..Done !!</div>
</div>

Blogger Gadgets Blogger Tricks Blogger Widgets How To Add Slide Up And Slide Down Contact Us Widget

Heya ! How all are you doing ? Today in this tutorial we are going to explain How to add a Fixed Contact From gadget In Blogger Template...

VIEW

How To Enable Review Schema.Org Star Ratings In Blogger

22:45:00 / BYshekhar singh / 0 /

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-gXFbX8kg9_E/Vsq8J2qnqUI/AAAAAAAAE8A/LincPj9Dg3M/s1600/how%2Bto%2Badd%2Bschema%2Bmarkup%2Breview%2Bstar%2Brating%2Bfor%2Bblogger%2Btemplate.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Review Schema.Org Star Ratings In Blogger post page template" border="0" src="https://2.bp.blogspot.com/-gXFbX8kg9_E/Vsq8J2qnqUI/AAAAAAAAE8A/LincPj9Dg3M/s1600/how%2Bto%2Badd%2Bschema%2Bmarkup%2Breview%2Bstar%2Brating%2Bfor%2Bblogger%2Btemplate.png" title="How To Add Review Schema.Org Star Ratings In Blogger post page template" /></a></div>
<h2 style="text-align: justify;">
What is Schema Markup</h2>
<div style="text-align: justify;">
One of the most recent evolutions in SEO is termed schema markup. This new variety of optimization is one among the foremost powerful.Schema markup is code [<b>semantic vocabulary</b>]. If you have ever used rich snippets,you will  perceive precisely what schema markup is all regarding.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Today we are going to explain how to <a href="http://www.bloggersstand.com/2016/02/add-rich-snippet-review-schema.html" target="_blank">add schema markup review rating in blogger template</a>.In previous post we have already talked about <b><a href="http://www.bloggersstand.com/2015/12/add-schema-markup-in-blogspot-template.html" target="_blank">how to install schema markup in website or blog</a></b>.You might have seen in google search result page ,when you search for some hotels,website,company,movies etc. there google first show the review with star ratings,item reviewed by etc.review stars ratings display just below the title of the product that is just because of the schema markup review rating.but you have ever thought that you can install review ratings for the product,thing in your blogspot theme? After implementing review ratings in your blog it will helps your website to index in better way.Now days google search engine is preferring those websites in which schema review markup is installed.However after installing review ratings in your blogger template it will take some time to display until google robots crawl your page and send information to SERP and google will start indexing your post with schema reviews.The result will look like this:

<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-gJIxLtpNxQU/VsrfutlQFZI/AAAAAAAAE8Q/l_BjLiZtJv0/s1600/display%2Breview%2Bstar%2Bratings%2Bin%2Bblogger%2Btemplate%2Bby%2Badding%2Bschema%2Bmarkup.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to install review schema star ratings widget in blogger template " border="0" height="115" src="https://3.bp.blogspot.com/-gJIxLtpNxQU/VsrfutlQFZI/AAAAAAAAE8Q/l_BjLiZtJv0/s400/display%2Breview%2Bstar%2Bratings%2Bin%2Bblogger%2Btemplate%2Bby%2Badding%2Bschema%2Bmarkup.png" title="How to install review schema star ratings widget in blogger template " width="400" /></a></div>
<br /></div>
<div style="text-align: justify;">
Most of the websites still don't have markup installed in their templates.we are providing tutorial in very easy steps to implement schema review markup in blogger.we have also a detailed tutorial on <b><a href="http://www.bloggersstand.com/2015/08/add-google-schema-meta-tags-in-blogspot.html" target="_blank">how to install google schema meta tags in blogger template</a></b>,you must first check that meta tags is installed or not it's very important for the search engine optimization.Before installing schema review rating trick you must check that your <b><a href="http://www.bloggersstand.com/2016/02/add-verify-valid-html5-code.html" target="_blank">blog is valid for HTML5 version</a></b> or not.Below is the link to check your Schema markup is installed correctly or not.</div>
<blockquote class="tr_bq">
https://developers.google.com/structured-data/testing-tool/</blockquote>
After checking by visiting above url if you don't find any error that means your blog is ready to install review schema in your blogger template.<br />
<br />
<h2 style="text-align: left;">
Advantage of Installing Review Schema In Blogger Template</h2>
<div style="text-align: justify;">
The website for schema markup.org, was created by a  team from Google, Bing, and Yahoo.When a web site has schema markup installed, readers will see within the SERPs what a web site is all regarding.The higher rankings can be explained by the fact that webmasters who use Schema.org integration are one step ahead of the competition.It makes search engine to provide more accurate data. It tells search engine, what your business is about.Schema markup helps your web site rank higher for all types every kind of content types.There are lot's of schema data markup few and important one from among all of them are provided below:</div>
<div style="text-align: justify;">
<div>
<ul>
<li>Articles</li>
<li>Local businesses</li>
<li>Restaurants</li>
<li>TV episodes and ratings</li>
<li>Book Reviews</li>
<li>Movies</li>
<li>Software Applications</li>
<li>Events</li>
<li>Products</li>
<li>And Many More..</li>
</ul>
So let's skip the tutorial and head towards to install schema review markup in blogger template.To grab this trick just follow the steps mentioned below.</div>
<h2>
How to install review schema markup in blogger template</h2>
<div>
<b><u>Installation Steps:</u></b></div>
<div>
<b><u><br /></u></b></div>
<div>
<div style="text-align: left;">
<span style="text-align: justify;">Step 1. Log in to your Blogger account and Go to your </span><b style="text-align: justify;">Blogger Dashboard</b><span style="text-align: justify;">.</span><br />
<span style="text-align: justify;">Step 2. Now Click on </span><b style="text-align: justify;">-> Template -> Edit HTML</b></div>
<div style="text-align: left;">
<div style="text-align: justify;">
Step 3. Now Search for the <b><data:post.body/> </b>tag you will find 2-3 times we will stop at third one (in my template case) your may be different one, now copy the below code and paste it just above/below <i><data:post.body/></i> tag.<br />
<blockquote class="tr_bq">
<div itemscope='' itemtype='http://data-vocabulary.org/Review' style='display:none;'><br />
<span itemprop='itemreviewed'><data:post.title/></span><br />
<span itemprop='reviewer'><data:post.author/></span><br />
<span itemprop='rating'>5</span> of 5<br />
<div itemprop='description'><data:post.snippet/></div><br />
</div></blockquote>
<div class="series">
We have provided basic review ratings schema markup,there is another way to add schema review markup that is little different and highly recommended to advance users,however if you want that one we will explain in our another tutorial.</div>
<br />
<br />
Step 4. Now Save your template..Done<br />
<br />
Now visit  <span style="text-align: left;">https://developers.google.com/structured-data/testing-tool/ and fetch your url and check in your post pages there you can see review schema markup in testing tool.</span></div>
</div>
</div>
</div>
</div>

Blogger SEO Tips Blogger Tutorials SEO Tips How To Enable Review Schema.Org Star Ratings In Blogger

What is Schema Markup One of the most recent evolutions in SEO is termed schema markup. This new variety of optimization is one among ...

VIEW

How To Add Right And Left Siderbar Ads Widget In Blogger

22:44:00 / BYshekhar singh / 0 /

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-QXDUp0ZldcY/VswsMafk_EI/AAAAAAAAE8w/jEuCoW_J22E/s1600/how%2Bto%2Badd%2Bsiderbar%2Bright%2Band%2Bleft%2Bside%2Badsense%2Bads%2Bwith%2Bclose%2Bbutton%2Bin%2Bblogger%2Btemplate.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Right And Left Siderbar 160x600 Ads Widget In Blogger template " src="https://3.bp.blogspot.com/-QXDUp0ZldcY/VswsMafk_EI/AAAAAAAAE8w/jEuCoW_J22E/s1600/how%2Bto%2Badd%2Bsiderbar%2Bright%2Band%2Bleft%2Bside%2Badsense%2Bads%2Bwith%2Bclose%2Bbutton%2Bin%2Bblogger%2Btemplate.png" title="How To Add Right And Left Siderbar 160x600 Ads Widget In Blogger template " /></a></div>
<div style="text-align: justify;">
Hello Folks, Today in this article we are going to explain How to Add Right and Left Sidebar Adsense banner ads widget in blogger template.Installing sidebar banner ads widget will surely increase your revenue because this widget always remain active infront of the users.We have embedded close button in the sidebar banner ads 160x600 skyscrapper, so if the user don't want to see the ads s/he can click on close button to close the ads.In previous post we have already talked about the <a href="http://www.bloggersstand.com/2016/02/display-install-970x90-big-banner-billboard-ads-in-blogger-template-to-earn-more-money.html" target="_blank"><b>Top leaderboard 970 x 90 ads gadget</b></a> and another <a href="http://www.bloggersstand.com/2016/02/embed-responsive-floating-ads-widget-for-blogger-template.html" target="_blank"><b>footer floating responsive sticky ads tool</b></a>.</div>

<div style="text-align: justify;">
However in skyscrapper 160 x 600 you can install adsense ads or any other third part advertisement in it.It looks very cool and unique,lot's of website is using this trick to increase their income from ads.But always keep this in my mind before placing any ads on the widget first read the implentation of the ads policy after that only install them.So many ads network allow to embed this kind of sitcky sidebar ads gadget to website or blog.so to grab this sidebar sticky ads widget for blogger template follow the step mentioned below.</div>
<h2 style="text-align: justify;">
How to install right and left sidebar ads widget in blogger template</h2>
<div>
<b><u>Installation Steps:</u></b></div>
<div>
<b><u><br /></u></b></div>
<div>
<div>
<span style="text-align: justify;">Step 1. Log in to your Blogger account and Go to your </span><b style="text-align: justify;">Blogger Dashboard</b><span style="text-align: justify;">.</span></div>
<div>
<span style="text-align: justify;">Step 2. Now Go to your <b>Layout->Add a gadget->HTML/JAVASCRIPT</b></span></div>
<div>
<span style="text-align: justify;">Step 3. Now copy the below code snippet and paste in your <i>HTML/JAVASCRIPT</i> box and click save button.</span><br />
<blockquote class="tr_bq" style="text-align: justify;">
<style scoped='' type="text/css"><br />
#bsdsidebarads{position:fixed;_position:absolute;top:0;right:0;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+<br />
document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)}<br />
</style><br />
<script type="text/javascript"><br />
// Siderbar Ads Widget By www.Bloggersstand.com<br />
function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close1(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("bsdsidebarads").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar<br />
</script><br />
<br /><br />
<div class="clear"><br />
</div><br />
<div id="bsdsiderbarads"><br />
<div style="text-align: right;"><br />
<a href="" onclick="close1(); return false"><img src="https://4.bp.blogspot.com/-EAkW1lXxTHY/VswyNjKxY3I/AAAAAAAAE9A/qetYgZj3Qx0/s1600/close-button%2Bbloggersstand.png" /></a></div><br />
<div onclick='close1()'><br />
<div style="background: #fff;"><br />
<a target="_blank" href="<span style="background-color: #f4cccc;">Your URL</span>"><img src="<span style="background-color: #d9ead3;">https://1.bp.blogspot.com/-N5IE_uoRtaY/VswyNhzes8I/AAAAAAAAE9E/a7lcID1SD-Q/s320/siderbar%2Bleft%2Band%2Bright%2Badsense%2Bbanner%2Bad%2Bwidget%2Bgadget%2Bby%2Bbloggersstand.gif</span>" style="border: none;" alt="Bloggersstand" /></a></div><br />
</div></div><br />
<style scoped='' type="text/css"><br />
#bsdsidebarads1{position:fixed;_position:absolute;top:0;left:0;width:160px;clip:inherit;_top:expression(document.documentElement.scrollTop+<br />
document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth)}<br />
</style><br />
<script type="text/javascript"><br />
function get_cookie(Name){var search=Name+"="var returnvalue="";if(document.cookie.length>0){offset=document.cookie.indexOf(search)if(offset!=-1){offset+=search.length end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;returnvalue=unescape(document.cookie.substring(offset,end))}}return returnvalue}function close11(){if(persistclose)document.cookie="remainclosed=1"document.getElementById("bsdsidebarads1").style.visibility="hidden"}if(window.addEventListener)window.addEventListener("load",staticbar,false)else if(window.attachEvent)window.attachEvent("onload",staticbar)else if(document.getElementById)window.onload=staticbar<br />
</script><br />
<br /><br />
<div class="clear"><br />
</div><br />
<div id="bsdsidebarads1"><br />
<div style="text-align: left;"><br />
<a href="" onclick="close11(); return false"><img src="https://4.bp.blogspot.com/-EAkW1lXxTHY/VswyNjKxY3I/AAAAAAAAE9A/qetYgZj3Qx0/s1600/close-button%2Bbloggersstand.png" /></a></div><br />
<div onclick='close11()'><br />
<div style="background: #fff;"><a target="_blank" href="<span style="background-color: #f4cccc;">Your URL</span>"><img style="border: none;" src="<span style="background-color: #d9ead3;">https://1.bp.blogspot.com/-N5IE_uoRtaY/VswyNhzes8I/AAAAAAAAE9E/a7lcID1SD-Q/s320/siderbar%2Bleft%2Band%2Bright%2Badsense%2Bbanner%2Bad%2Bwidget%2Bgadget%2Bby%2Bbloggersstand.gif</span>" width="160" height="600"/></a><p></p></div></div></div></blockquote>
<u><b>Customization:</b></u><br />
<ul style="text-align: left;">
<li>Replace the Above <i><b>highlighted Lines</b></i> with your url and image link.</li>
</ul>
Step 4. Now save you gadget.</div>
</div>
</div>

Blogger Gadgets Blogger Tricks Blogger Widgets How To Add Right And Left Siderbar Ads Widget In Blogger

Hello Folks, Today in this article we are going to explain How to Add Right and Left Sidebar Adsense banner ads widget in blogger templa...

VIEW

Fixed All Google Data Structured Error From Blogger + Static Pages

22:44:00 / BYshekhar singh / 0 /

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<img alt="how to fix all errors missing and required from blogger website in google structure data testing tool" src="https://2.bp.blogspot.com/-gjzkzVHTiNU/VuWSjnjhzlI/AAAAAAAAFpI/sw5rXFcSv0sgfsmne5arl-xmyQ7PmUfWw/s1600/Fixed-all-data-structure-error-from-blogger-template.png" title="Fixed All Google Data Structured Error From Blogger + Static Pages" /></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Your <b>Blogger template</b> is error free from <b>google data structure testing tool</b> ? Do you know what is structure testing tool ? Know the advantages of fixing google Structure <b>hatom</b>, <b>Image</b> url , <b>Date published error</b> , date modified error , <b>author</b> error , main entity of page etc.</span></div>
<h2 style="text-align: left;">
What is Google Structured Data Testing Tool ?</h2>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Google Structured data is the very important tool to help you to grow your business or website.Structured data markup enable the rich snippets for your website.Structure data Directly added in the <b>HTML</b> markup and from their search engine use your website or blog markup in order to index in better way.You can use <b>Schema.org</b> vocabulary for adding Structured data in your website or blog in blogger template.Structured data testing tool use your markup information to index your business website or blog in <b>SERP</b> listing.In simple words Structure data make your website HTML easier to understand by crawlers to get important information regarding your <b>business</b> <b>website</b> or blog like Who is the publisher or author of the content , name, Address , Url , Date Published and <b>Modified</b> , Copyright , Navigation Menu , Breadcrumbs , Webpage ,<b>Articles</b> Information , <b>recipes</b> etc.You can see this error from google tool to validate and test by visiting <b>https://developers.google.com/structured-data/testing-tool </b>url. If the Structured data not installed properly in your webpage or not have you can see google search console will display a error with a name  <b>items with errors </b></span></div>
<h2 style="text-align: left;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Important Schema markup factors to Resolve in Blogger Template</span></h2>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">1 - <b><a href="https://www.google.com/url?q=http://www.bloggersstand.com/2015/12/add-schema-markup-in-blogspot-template.html&sa=U&ved=0ahUKEwia3OLVjb7LAhWTCI4KHS-8A5MQFggFMAA&client=internal-uds-cse&usg=AFQjCNFFJtI2DGXhUshYVisCKDJ5iHUm0w" target="_blank">How To Install Schema Markup In Blogger Template</a></b></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">In this Article we have shared information of installing , adding Schema.org markup in your blogger template.Important tags to add and use in correct way in <b>blogspot</b> theme.Here you will get to know what is Schema.org markup and how to use in blogger website for better <b>SEO</b> In google SERP.</span></div>
<div>
<br /></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">2 - <b><a href="http://www.bloggersstand.com/2015/08/add-google-schema-meta-tags-in-blogspot.html" target="_blank">Important Google Schema Meta Tags For Blogger</a></b></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">If you have are not aware with what is <b>google schema meta tags</b> for better indexing your website or blog in google search result page.you will get to know how to implement google schema.org meta tags in your blogger theme.Like to display better title for your article , Url , social media profile links , social media network sharing etc.</span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">3 - <b><a href="http://www.bloggersstand.com/2016/02/add-rich-snippet-review-schema.html" target="_blank">How To Add Schema.org Review Ratings Markup In Blogger</a></b></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">You have added review rating schema.org markup in your blogger template to show/display start ratings by in google search result,you must install to display ratings for your content in google.in order to use ,you must install schema review rating markup trick in your blogger template.</span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">4 - <b><a href="http://www.bloggersstand.com/2016/03/create-structure-data-markup-in-webiste.html" target="_blank">How To Add Schema.org Framework In Your Template</a></b></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">If you have not installed Schema.org <b>framework</b> in your template, this tutorial will help you to understand the schema.org markup property to add in your blogger website.In order to use correct schema structured data you must create framework.</span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>

<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">5 - <b><a href="http://www.bloggersstand.com/2016/03/add-data-vocabulary.org-on-breadcrumb.html" target="_blank">How to Add Schema.Org Markup On Blogger Breadcrumbs</a></b></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">In order to get index your breadcrumb properly in google search result page you must add schema.org markup on blogger breadcrumb. This will also helps to increase your ranking because breadcrumbs works like a keyword in SERP. so in order to get your website or blog index perfectly you must install schema.org markup on blogspot breadcrumb.</span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">6- <b><a href="http://www.bloggersstand.com/2016/01/resolve-image-error-from-google-structure-data-testing-tool-for-better-seo.html" target="_blank">Fix Image Missing Error and AMP Article Error From Blogger Template</a></b></span></div>
<div>
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Your Blogger website is showing Image:missing error in google structure data testing tool ? AMP article error ? Then you must check your blog and reinstall and if not yet installed add them now ,because your images won't get scroll unless and until you will not fix image:missing error from your blogger template.in order to improve your <b>SEO</b> ranking and let google index your images to you must fix it.</span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">7 - <b><a href="http://www.bloggersstand.com/2016/01/resolve-author-amp-article-error-in-my-blogspot-theme.html" target="_blank">Fixed Publisher:Missing Required Error From Blogger Template</a></b></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">In order to let google understand who is the publisher of the article/pots/Any information provided in website or blog, you must fix publisher missing error from blogspot theme.</span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">8 - <b><a href="http://www.bloggersstand.com/2015/12/trick-how-to-fixed-missing-author-hentry-microformat-error.html" target="_blank">Fixed Missing:Author Error In Blogger Template</a></b></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">Your website is displaying missing:author error in blogger template ? learn how to fix post <b>hentry</b> microformat error from website or blog.In order to display author information in google you must <b>fix</b> missing:author <b>recommended required error</b>.</span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">9 - <b><a href="http://www.bloggersstand.com/2016/02/how-to-make-all-blogger-static-pages-amp-hatom-error-free.html" target="_blank">Fixed All Publisher + Author + Image + Date Published + Modified From Static Pages</a></b></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: "helvetica neue" , "arial" , "helvetica" , sans-serif;">fix hatom google structured data testing error from blogger template ? learn how to fix all errors from <b>blogger static page</b> of website.Resolve and make your template error free from google structured data error you must install Schema.org markup  in your blogspot template. </span></div>
</div>

Blogger Tutorials Blogging Fixed All Google Data Structured Error From Blogger + Static Pages

Your Blogger template is error free from google data structure testing tool ? Do you know what is structure testing tool ? Know the ad...

VIEW

How To Add CSS Demo And Download Button In Blogger

22:43:00 / BYshekhar singh / 0 /

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-Fq_iJ4upZ_s/VrtsqmlkCpI/AAAAAAAAEY8/BB-8bEzO_YI/s1600/demo%2Bdownload%2Bbutton%2Busing%2Bpure%2Bcss%2Band%2Bfontawesome%2Bfor%2Bblogger%2Btemplate.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How To Add Demo And Download Buttons In Blogger template with fontawesome icon and css" border="0" src="https://3.bp.blogspot.com/-Fq_iJ4upZ_s/VrtsqmlkCpI/AAAAAAAAEY8/BB-8bEzO_YI/s1600/demo%2Bdownload%2Bbutton%2Busing%2Bpure%2Bcss%2Band%2Bfontawesome%2Bfor%2Bblogger%2Btemplate.png" title="How To Add Demo And Download Buttons In Blogger template with fontawesome icon and css" /></a></div>
<div style="text-align: justify;">
Hello Folks,Today in this article we are going to explain you How to <b><a href="http://www.bloggersstand.com/2016/02/adding-demo-download-button-with-font-awesome-icon-hover-effect-in-template.html" target="_blank">Add Demo and Download Button</a></b> Using CSS and Font Awesome.These Demo and Download Button will Surely increase the look of your website or blog.However might be you guys are using different type of Demo and Download Buttons by using any kind of scripts or image link for display.But these Buttons are totally different it loads very fast because we have used pure CSS3 and Font awesome icons.Now Day every blog or website have <a href="http://www.bloggersstand.com/search/label/FontAwesome" target="_blank">font awesome</a> feature in their website.</div>

<div style="text-align: justify;">
If you don't have fontawesome feature don't worry,you can add them anytime.To add font awesome read here:<b><a href="http://www.bloggersstand.com/2015/08/use-font-awesome-icons-in-blogspot.html" target="_blank">How to Add Font awesome icons in my template</a></b>.Demo and download buttons come with font awesome icons and you can change the icon also if you want.So to add Buttons in your blogger template follow the steps mentioned below.</div>
<div style="text-align: center;">
<b>Demo
</b></div>
<div class="codepen" data-default-tab="result" data-height="268" data-slug-hash="GoPWym" data-theme-id="0" data-user="bloggersstand">
See the Pen <a href="http://codepen.io/bloggersstand/pen/GoPWym/">GoPWym</a> by BloggersStand (<a href="http://codepen.io/bloggersstand">@bloggersstand</a>) on <a href="http://codepen.io/">CodePen</a>.</div>
<script async="" src="//assets.codepen.io/assets/embed/ei.js"></script>

<br />
<h2 style="text-align: justify;">
How to add demo and download buttons with font awesome icon </h2>
<h4 style="text-align: left;">
installation steps:</h4>
<div>
Step 1. Log in to your Blogger account and Go to your <b>Blogger Dashboard</b>.<br />
Step 2. Now Click on <b>-> Template -> Edit HTML</b>.<br />
Step 3. Now Search for <b>]]></b:skin> or </style></b> by Pressing Ctrl+F keys.<br />
Step 4.Copy the any style code from below and paste it just before the <b>]]></b:skin> or </style></b> tag.<br />
<b><i>#Style 1</i></b><br />
<blockquote class="tr_bq">
/* CSS Button Style by www.BloggersStanD.com */<br />
.bsdbutton{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}<br />
.bsdbutton ul{margin:0;padding:0}<br />
.bsdbutton li{display:inline;margin:5px;padding:0;list-style:none}<br />
.bsdbutton li a.demo,.bsdbutton li a.download{position:relative;padding:9px 48px 9px 16px;background:#<span style="background-color: #fce5cd;">f39c12</span>;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}<br />
.bsdbutton li a.download{background:#<span style="background-color: #cfe2f3;">3498db</span>}<br />
.bsdbutton li a.demo:hover,.bsdbutton li a.download:hover{background:#666}<br />
.bsdbutton li a.demo:active,.bsdbutton li a.download:active{cursor:pointer}<br />
.bsdbutton li a.demo:after,.bsdbutton li a.download:after{content:'\<span style="background-color: #b4a7d6;">f135</span>';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}<br />
.bsdbutton li a.download:after{content:'\<span style="background-color: #f4cccc;">f019</span>'}</blockquote>
<i><b>#Style 2 </b></i><br />
<blockquote class="tr_bq">
/* CSS Button Style by www.BloggersStand.Com */<br />
.bsdbutton1{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}<br />
.bsdbutton1 ul{margin:0;padding:0}<br />
.bsdbutton1 li{display:inline;margin:5px;padding:0;list-style:none}<br />
.bsdbutton1 li a.demo,.bsdbutton1 li a.download{position:relative;padding:14px 48px 14px 16px;background:#<span style="background-color: #fce5cd;">f39c12</span>;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}<br />
.bsdbutton1 li a.download{background:#<span style="background-color: #cfe2f3;">3498db</span>}<br />
.bsdbutton1 li a.demo:hover,.bsdbutton1 li a.download:hover{background:#666}<br />
.bsdbutton1 li a.demo:active,.bsdbutton1 li a.download:active{cursor:pointer}<br />
.bsdbutton1 li a.demo:after,.bsdbutton1 li a.download:after{content:'\<span style="background-color: #b4a7d6;">F054'</span>;background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}<br />
.bsdbutton1 li:hover a.demo:after,.bsdbutton1 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}<br />
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}<br />
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}</blockquote>
<h4 style="text-align: left;">
Customization:</h4>
<div style="text-align: justify;">
<ul>
<li>To Change the blue an orange color of the button,for orange replace <span style="background-color: #fce5cd;">f39c12</span><span style="background-color: white;"> and for blue color change </span><span style="background-color: #cfe2f3;">3498db</span><span style="background-color: white;"> with your desired color.you can choose colors from here.<b><a href="http://www.bloggersstand.com/p/color-picker.html" target="_blank">color wheel picker tool</a></b> or <b><a href="http://www.bloggersstand.com/p/color-hex-code-generator-for-bloggers.html" target="_blank">color code generator tool</a>.</b></span></li>
<li><span style="background-color: white;">To change the Font awesome icons replace </span><span style="background-color: #b4a7d6;">f135</span><span style="background-color: white;"> , </span><span style="background-color: #f4cccc;">f019 </span><span style="background-color: white;">and </span><span style="background-color: #b4a7d6;">F054</span><span style="background-color: white;"> with your desired buttons.To choose the font awesome buttons visit:</span><a href="http://fortawesome.github.io/Font-Awesome/icons/">http://fortawesome.github.io/Font-Awesome/icons/</a></li>
</ul>
</div>
</div>
</div>
<div>
<br /></div>
Step 5. Now Search for <b><head></b> by Pressing Ctrl+F keys.<br />
Step 6.Copy the below Font Awesome Icons script and paste it just before the <b><head></b> tag.<br />
<blockquote class="tr_bq">
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/></blockquote>
Step 7. Now Save your template.<br />
<h3 style="text-align: left;">
How To Add Demo and Download button inside the post editor</h3>
<div style="text-align: justify;">
Whenever you create a new post and you want to add these buttons just click on HTML mode tab near compose mode inside your post editor and choose your place where you want to show these button just paste the any one of style to show the buttons inside the post.</div>
<div style="text-align: justify;">
<i><b><u>#Style 1</u></b></i></div>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<div style="text-align: center;"><br />
  <ul class="bsdbutton"><br />
    <li><a class="demo" href="http://www.bloggersstand.com" target="_blank">Demo Link</a></li><br />
    <li><a class="download" href="http://bloggersstand.com" target="_blank">Download Link</a></li><br />
  </ul><br />
</div><br />
<div class="clear"></div></blockquote>
<b><i><u>#Style 2 </u></i></b><br />
<blockquote class="tr_bq">
<div style="text-align: center;"><br />
  <ul class="bsdbutton1"><br />
    <li><a class="demo" href="http://bloggersstand.com" target="_blank">Demo Link</a></li><br />
    <li><a class="download" href="http://bloggersstand.com target="_blank">Download Link</a></li><br />
  </ul><br />
</div><br />
<div class="clear"></div></blockquote>
And Publish Your Post ! </div>
<br /></div>

Blogger Tricks Blogger Tutorials Blogger Widgets How To Add CSS Demo And Download Button In Blogger

Hello Folks,Today in this article we are going to explain you How to Add Demo and Download Button Using CSS and Font Awesome.These Dem...

VIEW

BloggersStand

Best Ten Places To Put Adsense Ads In Blogger

How To Add Five Star Rating Style Popular Posts Widget

Resolve Author+Name+Date Published+Modified Error From Static Page

How To Add Slide Up And Slide Down Contact Us Widget

How To Enable Review Schema.Org Star Ratings In Blogger

How To Add Right And Left Siderbar Ads Widget In Blogger

Fixed All Google Data Structured Error From Blogger + Static Pages

How To Add CSS Demo And Download Button In Blogger

WE’RE SOCIAL

Most Viewed

Featured post

How To Write a Skilled Blog Post?

Trending Now

INSPIRING YOUR CREATIVITY !

WE’RE SOCIAL

Most Viewed

Featured post

Trending Now