Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...

seo Add Social Media Sharing Buttons Below Each Post In BLogger 2013

Seo Master present to you:
social media sharing widget
As social media is growing day by day and is serving bloggers to increase trafffic to their blog, it would be great if we make easier for our blog visitors or followers to share our post easily on this social networking sites to drive more traffic to our blog. So today in this post i will show you to add social media sharing widget with Google+, Facebook, Twitter and Stumbleupon  sharing button along with counter below every post on blogger. SO lets add this widget to your blog.

1. Go to Blogger Dashboard then Go to Template > Edit Html
2. Before Editing Template Backup your Template
3. Check Mark "Expand Widgets Template" box (On Top Left Corner)
4. Now Search for the code given Below by pressing Ctrl + F
<data:post.body/>
5. Just Below <data:post.body/> paste following code.
<div style='clear: both;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='left'>
<p style='margin:0; border-bottom:2px solid #333;'><font color='#333' face='Arial Black' size='5'>Kindly Share This Post &#187;&#187;</font></p>
<table border='0' cellpadding='5' cellspacing='10'><tbody>
    <tr>
<td style='padding-top:8px;'>
<g:plusone size='tall'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>
      <td style='padding-top:8px; '>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>
      <td style='padding-top:8px;'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
      <td style='padding-top:8px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td>
      <td>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
    </tr>
  </tbody></table></div></b:if>
<div style='clear: both;'/> 
  • Replace Kindly Share This Post to what ever text you like.
  • Replace #333 to change font color.
  • Replace #333 to change border color below the text 
If you find any difficulty installing this sharing widget to your blog or have any other questions then leave a comment below i will be glad to help you out.

2013, By: Seo Master

seo Setting Up A 404 Error Page For Blogger Blog 2013

Seo Master present to you:
404 error page not found
In this tutorial i will teach you to enable and customize 404 Error page for your blogger blog. A 404 Error occurs when you try to visit  a page that does not exist or has been deleted. Adding a 404 error page will let your visitors go back to previous page or Home page and will. This will allow to keep visitors engage on your blog for little longer and decrease bounce rate. The default blogger 404 page is boring and unattractive so we will be styling it using some Html and CSS to make it look more stylish. So lets add and style 404 Error page to your blog. check out live demo of 404 error page by clicking on button given below.

Creating 404 Error Page 

1. Go to blogger Dashboard then Settings > Search Preferences
2. Now under Error and Redirection click on Edit beside custom page not found.

blogger 404 error page
3. Inside the box paste code given below.


<!-- MBW 404 Page -->
<div class='MBW-404-box'>
  <p style='line-height: 1.6em'><strong>
<font color='red' size='6'>
Oops!!!
</font> <font color='#666666'>
 <!-- www.matrixar.com -->
Looks like you are trying to access page that does not exist or has been deleted. Please do any of the followings:
</font></strong></p>
  <ol style='line-height: 25px'>
    <li><a href='javascript:history.go(-1)'>&#171; Go Back</a> </li>
    <li>Report the Problem By <a href='http://www.www.matrixar.com'>Clicking Here</a>&#160;&#160;&#160; (<i>This will help us serve you better</i>) </li>
    <li>Go To Homepage by <a href='http://www.www.matrixar.com/contact'>Clicking Here</a>
      <br/></li>
  </ol>
  <p><br><br></p><p align='center'><font color='#159b24' style='font-size: 135px'><strong>404</strong></font></p>
  <p align='center'><font size='5'>Error Page Not Found</font></p>
</div>

4. Now make following changes to above code.

  • Change www.www.matrixar.com to your blog address
  • Change http://www.www.matrixar.com/contact to your contact page
  • Replace #159b24 to change color of 404 text.

5. Then save the changes.
6. Now from blogger dashboard click on Template > Edit Html
7. Seach for ]]></b:skin> and paste the code give below just below it.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none;
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
.MBW-404-box {
  background:#FFFFFF;
  width:96%;
  margin:10px 0px;
  padding:15px 15px;
  border:1px solid #b9b6b6;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  box-shadow: 6px 6px 6px #e3e3e3;
}
</style>
</b:if>
8. Make following changes to customize 404 Error page

  • Replace #FFFFFF to change background color.
  • Replace #b9b6b6 to change border color.
9. Save the template and done.

How to check if its Working ?

In order to check if you implemented 404 error page properly on your blog and is working correctly visit link given below.
  • htttp://www.yourblogurl.com/somecrap  (Replace yourblogurl with your blog address)
2013, By: Seo Master

seo Add "Back To Top" Button To Your Blog 2013

Seo Master present to you:
back to top
In this post i will teach you to add simple Button or Icon to your blog to make your readers easily go back to top of the page. If your readers are browsing through dozens of posts on your blog, this simple plugin will let them to jump directly to top of the page. This plugin is very simple to install on your blog and it will be placed on bottom right corner of your blog so readers can make use of this usefull customizarion.


Adding Back To Top Button To Bloggers Blog

1. Go to Blogger Dasboard and click on Layout.
2. Then Click on Add Gadget and choose Html/Javascript from pop up window.
3. Now paste below code into it.

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="URL OF BACK TO TOP "/></a>
<!--BACK TO ENDS-->
4. Now replace the Text in Green with url of your image. I have provided some image at the bottom of this post which you can use on your blog.
5. Save the widget and you will have Back to top button on your blog.

Images For Back To Top Buttons

Right click on any of the below image and select Copy Image Url and paste in the provided code above or check Step 4 for more information.

back to top

back to top

back to top

Share Your Thoughts!

If you like our post or have any suggestion or got stuck at any steps implementing the widget to your blog then leave a comment below i will be glad to help you out. Subscribe to our blog, Like us on Facebook, +1 on Google+. Keep Blogging!

2013, By: Seo Master

seo Adding Animated Cloud Label To Your Blog 2013

Seo Master present to you:
blogger animated label cloud
As you all know good and relevant widgets make your blog easy to navigate and can help to keep visitors engaged on your blog. Today i will teach you to add such usefull widget to your blog. This blogger widget looks cool on your blog as well as helps user to navigate on your blog. I had previosly posted about how to add label or categories cloud on your blog, In this post i will teach you to add animated label cloud to your blog.


Adding Label or Categories Cloud

    1. Go to Dashboard > Layout > Add Gadget.
    2. Now choose labels from pop up window and change setting as show in below image.

    3. Now save it and follow below steps to animate label or categories cloud. For more details check below article.


Animating Label Cloud 

    1. Go to your Blogger Dashboard and Click on Template
    2. Then click on Edit HTML
    3. Now search for below code be clicking CTRL  + F
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
    4. Now paste below code just after the code you search on step 3.
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>My Bloggers World <a href='http://mybloggersworld.blogspot.in/'>Mbw</a> and <a href='http://www.matrixar.com/'>Mbw</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget> 
    5. Now save the template and go to Layout to change the position of the widget.
    6. If you have any problem implementing this widget on your blog leave a comment below, i will be glad to help you out. You may also like to add below widgets to your blog.

Other Usefull Customization For Your Blog

2013, By: Seo Master
Powered by Blogger.
Design by Dev Nasser