Add Awesome Floating Sharing Bar On Blogger And WordPress Blog

Today here’s a tutorial on how to add a floating social media bar to a blogger blog. In this widget we have included  Facebook ,like button, Google Plus, Tweet, likedin and also have a StumbleUpon, buttons in the bar and each of them comes with a counter. I have not using any scripts and this widget works purely on CSS and HTML and is fully compatible with all browsers. You can see this sticky widget to left of my blog post. I have made sure to keep the installation process as easy as possible. We made it very easy to install on blogger even wordpress, so you don’t need to edit your blogger html code. Just drop the whole code into a HTML/Javascript gadget. Designing this widget took to much time but after a very hard work we are finally make it 100% working fine..

Add It To Blogger Blog

1. Login to your blogger dashboard.
2. Go to your blogger Layout.
3. Click Add A Gadget. 
3. In Add A Gadget window, select HTML/Javascript . 
4.Copy the code below and paste it inside the content box. 

<style type="text/css"> 
#floating_bar { 
background-color:#fff; 
position:fixed; 
padding:0 0 3px 0; 
bottom: 30%; 
margin-left:-60px; 
float:left; 
border: 1px dotted #f7f7f7; 
border-radius: 5px; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
z-index:10; 
}
#floating_bar { 
clear:both; 
} 
</style> 
<div id='floating_bar'> 
<div style='margin:10px 0 5px 13px;' id='like'> 
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div> 
</div> 
<div style='margin:0px 0 0 10px;' id='gplusone'> 
<g:plusone size="tall"></g:plusone> 
</div>
<div style='margin:5px 5px 5px 6px;'> 
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mybloggertriks" data-lang="en" data-count="vertical">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 
</div> 
<div style='margin:5px 5px 5px 5px;' id='linkedin'> 
<script src='http://platform.linkedin.com/in.js' type='text/javascript'></script> 
<script data-counter='top' type='IN/Share'></script> 
</div> 
<div style='margin:0 0 10px 11px; id='su'> 
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> 
</div> 
<p style='line-height:0px; margin-bottom:8px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.myblogger-tricks.com/2013/09/add-awesome-floating-sharing-bar-on.html' rel='nofollow' style='color:#333;'> Get Widget</a></p> 
</div>

Note:- Just replace mybloggertriks highlighted in yellow color  with your twitter username.
5. Save the gadget. 
6. Drag the gadget and reposition it under Blog Posts gadget. (See Screenshot Below)



Click orange Save button ( Place at top right corner).
If in case the facebook like button did not work then add this Javascript code just before closing </body>.

<div id="fb-root"></div> 
<script>(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script>

Customization

Vertical Alignment:
In css section change the value 30% to any other which is your blog requirement for example.

bottom: 25 %;  or bottom: 30%; or bottom: 35%;

To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

Horizontal Alignment
To align the widget more towards the left or right then edit this value.

margin-left: -60px;

Negative value pushes the button to the left of the main blog column, positive value pushes it to the right.
I Hope you will enjoy this nice floating widget. Let us know below in comment section if you got any question. enjoy..!!

Continue Reading »

এবার এক ক্লিকেই সবোর্চ্চ ১০০০ (এক হাজার) বন্ধুকে রিকোয়েষ্ট পাঠান।

► প্রথমে নিচের লিংক এ যাবেন↓
http://www.facebook.com/invite.php?ref=cfr
এখান থেকে উপরে To: তে আপনার বন্ধুদের ইমেইল গুলো পেষ্ট করুন এবং Invites your Friend ক্লিক করুন।

► বলছি কিভাবে বন্ধুদের ইমেইল সংগ্রকরবেন। আপনার জন্য এই নিচের লিংক এর কাজে লাগবে...
http://www.facebook.com/photo.php?fbid=617342981611099&set=a.570091756336222.87153588.126117604066975&type=1&theater

► আমি জানি এই ট্রিপস টি কপি করে অন্য পেজে যাবে। ঐ এডমিনদের বলছি আপনি সাথে ছবিটি সহ কপি করে দিবেন। এবং

► আমি নিচে MASS ADD Email থেকে ১০০০ খানেক এর মতো email address দিলাম ↓↓
http://www.yourdesignbd.com/1000-email-address-for-facebook-friend-request/

-------------------------------------------------------------------
↓↓সল্প মূল্যে অধিক মানসম্পর্ন ওয়েব সাইট ডেভেলপমেন্ট↓↓
http://www.yourdesignbd.com/dhaka-web-service-bangla-blog-news-portal-dynamic-web-development/dhaka-bangla-blog-news-business-website-development/

Continue Reading »

How To Make Your Blogger Template SEO Friendly ?

If your template is best for your blog or you don't want to remove that template then don't worry, you can also make your blogger template SEO friendly. Just apply below tutorials on your template.

• Add Meta Description And Keyword Tags In Blogger

  •  Go To Blogger >> Template >> Edit Html
  • Find <head>    (Tip: Press Ctrl+F To Find)
  • Copy The Code Below And Paste Below <head> Tag.

  <meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
  
  <meta content='Add_Your_Description_Here' name='description'/>
  
  <meta content='Add_Your_Keywords_Here' name='keywords'/>

• Replace  Add_Your_Description_Here With Your Description and minimum characters are 150.
• Replace   Add_Your_Keywords_Here  With Your blog's niche keywords and add 10/15 keywords only.
• 
  

• Show Post Title First In Search Results

  • Go To Blogger >> Template >> Edit Html >> Proceed
  • Find the code below        [Tip: Press Ctrl+F to Find]

  <title><data:blog.pageTitle/></title>

• Replace "<title><data:blog.pageTitle/></title>" With the Following Code 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<title><data:blog.pageName/> | <data:blog.title/></title> 
<b:else/> 
<title><data:blog.pageTitle/></title> 
</b:if>

• Click Save Template and You Have Done !

• 
  

• SEO Optimize Blogger Comments 

  • Go To Blogger >> Template >> Edit Html >> Proceed
  • Tick "Expand Widget Templates"
  • Find The Code Below      (Tip: Press Ctrl+F To Find)

  expr:href='data:post.createLinkUrl'

  • Replace Above Code With The Following Code

  rel='external nofollow' expr:href='data:post.createLinkUrl'

•  Click Save Template & You Have Done !
• 
  

• SEO Optimize Blogger Labels

  • Go To Blogger >> Template >> Edit Html 
  • Tick Mark "Expand Widget Templates"
  • Find The Code Below

  <a expr:href='data:label.url'

  • Replace Above Code With The Following Code

  <a expr:href='data:label.url' rel='tag'

• Note :  If the rel='tag' is already existing then do nothing.
• Click Save Template & You Have Done !
• 
  

• SEO Optimize Archive Links

  • Go To Blogger >> Template >> Edit Html 
  • Tick "Expand Widget Templates"
  • Find The Code Below

  <a class='post-count-link' expr:href='data:i.url'>

  • Replace Above Code With The Following Code

  <a rel="archives" class='post-count-link' expr:href='data:i.url'> 

• Click Save Template & You Have Done !
• 
  

• Optimize Post Title Using H2 Tag

  • Go To Blogger >> Template >> Edit Html 
  • Tick "Expand Widget Templates"
  • Find For The Following Or Similar Coding

  <h3 class='post-title'>
  <b:if cond='data:post.link'>
  <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
  <b:if cond='data:post.url'>
  <a expr:href='data:post.url'><data:post.title/></a>
  <b:else/>
  <data:post.title/>
  </b:if>
  </b:if>
  </h3>

• Now you have to change heading tags h3 to h2 which are placed at the beginning and in the last.
• After making changes your post title code will look like the following or similar coding.

<h2 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>

• Click Save Template & You Have Done !

Add An SEO Friendly Robots.txt File To Blogger

• Go To Blogger >> Settings >> Search Preferences
• In The Crawlers and Indexing Sections, Look For The Custom Robots.txt
• Click On Yes and a Box Will Appear Like The Image Below

• Now Copy The Following Code And Paste It In That Box

 User-agent: Mediapartners-Google
 User-agent: *
 Disallow: /search?q=*
 Disallow: /*?updated-max=*
 Allow: /
 Sitemap: http://yaqoobforall.blogspot.com/feeds/posts/default?orderby=updated

•  Note : In the above code first line "User-agent: Mediapartners-Google" is for Google Adsense. If you are not using the Google Adsense then remove the first line.
• Replace http://yaqoobforall.blogspot.com/ with your blog/site link.
• Click 'Save Changes' and You have done !

Continue Reading »