Master Blogging Tips: Traffic Tips

<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/AVvXsEiL5wpkzOGo7Z9CPp_La1vNh8voKwhCXG0tj7kF3_EqYOWGWAnLYT1RomPKVi6ajiKafFjCNFynmm7IKJGszJc3gYl075b8iIJ7y5AS02yJARxy1FGBPIpPYCmE9bw8yaJXj1mNP6-YPNQ/s1600/facebook-commnets-box%5B4%5D.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5wpkzOGo7Z9CPp_La1vNh8voKwhCXG0tj7kF3_EqYOWGWAnLYT1RomPKVi6ajiKafFjCNFynmm7IKJGszJc3gYl075b8iIJ7y5AS02yJARxy1FGBPIpPYCmE9bw8yaJXj1mNP6-YPNQ/s1600/facebook-commnets-box%5B4%5D.gif" /></a></div>
<h3 style="text-align: left;">
<span style="font-weight: normal;"><span style="font-size: small;"><span style="background-color: white; color: #333333; font-family: Verdana, arial; line-height: 20.796875px; text-align: justify;">The previous post on </span><a href="http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html" style="background-color: white; color: #289728; font-family: Verdana, arial; line-height: 20.796875px; outline: none; text-align: justify; text-decoration: none;" target="_blank">Facebook comments box</a><span style="background-color: white; color: #333333; font-family: Verdana, arial; line-height: 20.796875px; text-align: justify;"> did not replace your blogger comment form but if you wish to completely remove the blogger form and use this new plugin then steps are even more simple. However I may assure you one important thing here. I am soon going to publish a script that will automatically count and display Facebook and blogger comments beautifully and will show only one form at a time. For the time being apply this new trick.</span></span></span></h3>
<div>
<span style="font-weight: normal;"><span style="font-size: small;"><span style="background-color: white; color: #333333; font-family: Verdana, arial; line-height: 20.796875px; text-align: justify;"><br /></span></span></span></div>
<div>
<h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: Verdana, arial; line-height: 20.796875px; padding: 3px;">
Replace Blogger Comments Form With FB Comments Box</h3>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
All the steps are exactly the same as mentioned in the earlier tutorial except step#7</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
1.  Instead of searching for this code,</div>
</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><b:includable id='comment-form' var='post'></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
Search for this code,</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<br /></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><data:post.body/></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
2.  Just after it, paste the same code we used earlier as shown below,</div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><b:if cond='data:blog.pageType == &quot;item&quot;'> </span><br style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;" /><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> </span><br style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;" /><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><div> <fb:comments  colorscheme='</span><b style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">light</b><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' </span><b style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">width='520'</b><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">/></div> </span><br style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;" /><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; </span><b style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">width:510px</b><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;">;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div> </span><br style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;" /><span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"></b:if></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<span style="background-color: #f2f1f1; font-size: 12px; line-height: 15.203125px;"><br /></span></div>
<div align="justify" style="background-color: white; color: #333333; font-family: Verdana, arial; font-size: 13px; line-height: 20.796875px;">
<ul style="list-style: none; text-align: left;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
If you want to use the dark scheme then simply replace <b>light </b>with <b>dark</b></div>
</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
To change the Comments box size, change this value <b>width='520'</b></div>
</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
To change the footer credits size, change this value <b>width:510px</b></div>
</li>
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to <b>width='600'</b> then set footer-size to <b>width:590px</b></div>
</li>
</ul>
<div align="justify">
     3.  Save your template</div>
<div align="justify">
<br /></div>
<h3 align="justify" style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px;">
Hide or Pop-up Blogger Comment Form</h3>
<div align="justify">
Here you have two options. Either you can,</div>
<ol style="text-align: left;">
<li><div align="justify">
Hide the comments box but not the comments. The box will appear only when visitors will click the <u>Post comment</u> link. or</div>
</li>
<li><div align="justify">
Hide both Blogger comments and comments box</div>
</li>
</ol>
<div align="justify">
<br /></div>
<div align="justify">
<b><u>For the first option:</u></b></div>
<div align="justify">
A pop-up link will display both Facebook and blogger comments but will hide the Blogger comment form as shown below</div>
<div align="justify">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3d8E3DZAcGqkg_xNtECtJipDV082lWpDe6imOGpfZphHgsYa2IyZ_-fQy4ps4aON0IuQWKypGIec5v9sEfBfw57mAcOHE21FAhhM0Z6Pq-LataVOX5FBRoyEhNRHkyP2C-OJhz_dVe4/s1600/FACEBOOK-COMMENTS-FORM%5B3%5D.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU3d8E3DZAcGqkg_xNtECtJipDV082lWpDe6imOGpfZphHgsYa2IyZ_-fQy4ps4aON0IuQWKypGIec5v9sEfBfw57mAcOHE21FAhhM0Z6Pq-LataVOX5FBRoyEhNRHkyP2C-OJhz_dVe4/s1600/FACEBOOK-COMMENTS-FORM%5B3%5D.gif" /></a></div>
<div align="justify">
<br /></div>
<div align="justify">
<div align="justify">
To do this go to <b>Blogger > Settings > Comments</b>   and in the <b>comment form placement option</b> choose the pop-up option as shown below,</div>
<div align="justify">
</div>
<div align="justify">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74GT4Do7JC_3FqAyA6CAu1rAuItTapMyRTizee-4Q9nHOojgnle0-nEU-nts0XQOWbbbH4aEz3X7VDQn2j1HFVsS9-_UAQDOxoCBHb0V5EH0K3H2j7k78r7rkaJgINW6WwORBu1tVSVI/s1600/image%5B27%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi74GT4Do7JC_3FqAyA6CAu1rAuItTapMyRTizee-4Q9nHOojgnle0-nEU-nts0XQOWbbbH4aEz3X7VDQn2j1HFVsS9-_UAQDOxoCBHb0V5EH0K3H2j7k78r7rkaJgINW6WwORBu1tVSVI/s1600/image%5B27%5D.png" /></a></div>
<div align="justify">
<br /></div>
<div align="justify">
Save and you are done!</div>
<div align="justify">
<b><u>For The Second Option:</u></b></div>
<div align="justify">
If you wish to hide both blogger comments and the comment box? In that case, set<b>comments</b> to <b>hide</b></div>
<div align="justify">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxG95DLjpShCr6dqiBosSq_-MqRNaMw4mS69ZZ3wcK_2v_B_uUUCCjKRMoLzYKR5JT0QrNWGA587kKWbY9ln5-fg_i65QnToHwUnz68zAiTY5FGBNseIY3MY-7W1W-NqXY0yxV_8prxc/s1600/image%5B49%5D.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxG95DLjpShCr6dqiBosSq_-MqRNaMw4mS69ZZ3wcK_2v_B_uUUCCjKRMoLzYKR5JT0QrNWGA587kKWbY9ln5-fg_i65QnToHwUnz68zAiTY5FGBNseIY3MY-7W1W-NqXY0yxV_8prxc/s1600/image%5B49%5D.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div align="justify">
As mentioned by Blogger Hiding the comments will not delete them but temporarily hide them from visitors.</div>
<div align="justify">
Hit save and you are done again!</div>
<h3 align="justify" style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px;">
What to Do Hide or Popup the form?</h3>
<div align="justify">
The best SEO and productive advise that I can give is that you may hide the Blogger comment box only but you must display blogger comments and give users the chance to comment with any platform they may like. In short <b><span style="color: green;">the popup option is the best</span></b>. Blogger comments are crawled by search engines and they are an important part of your content so its better that you don't hide them.</div>
<div align="justify">
With coming days I will come up with more tweaks related to this brilliant traffic gifting Facebook plugin and will try to make it more blending with some customization tips.</div>
<div align="justify">
You must know:</div>
<ul style="list-style: none; text-align: left;">
<li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7koQBb5n9vjfmnqdFMSuQz6TZDTgvnRIE6msCQh4fdyv-2BnIYKmQloHyO746fzE_mHD1TEDVBjdiUSTEdJZb4yAxoVuesU9XaBAs-kDuXB0RYgUcTMWBxzi-N8pmaog5_5-ermQ2ujE/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><div align="justify">
7 <a href="http://www.mybloggertricks.com/2011/06/10-advantages-of-using-facebook.html" style="color: #289728; outline: none; text-decoration: none;" target="_blank">advantages of facebook</a> comments Form</div>
</li>
</ul>
<div align="justify">
<b><br /></b></div>
</div>
</div>
</div>

Facebook comments Box Instead of Blogger Comments Form

The previous post on Facebook comments box did not replace your blogger comment form but if you wish to completely remove the blogger ...