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

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 16+ Awesome Back To Top Button For Blogger 2013

Seo Master present to you:
back to top button
I had previously posted on Adding Back Top Button  for bloggers blog. In this post i will share with you guys 16+ Cool and Awesome back to top button code for your blog or website. Back to button is simple and very small widget but is kind of very usefull for your blog readers. If users are browsing through number of post on your blog this widget will let them easily go back to top of the page with a click rather then scrolling to the top, which take some time. Choose any button from the code given below.

  How To Add Back To Top Button


Before selecting back to top button you need to know how to add this widget or plugin to your blog. In order to know more about this check out detailed tutorial given below.

So after checking above tutorial you can move further on to this tutorial. Instead of code given in above tutorial you can use any of the codes given below. I have added image above every code so you can know how this button will look on your blog.

      Back To Top Button #1 


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-hsRaTBL9lpY/USDb4Wzo2WI/AAAAAAAAAiU/2eSTakNmCOE/s1600/back+to+top.png "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #2


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-3sXsLU1aW3s/USDkamRLRZI/AAAAAAAAAj4/UOoh-GJWUdI/s1600/back+to+top+button.png "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #3


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-b3YWne8aCdw/USDmXTnyUiI/AAAAAAAAAkg/SieNqYTVQKQ/s1600/back-to-top-button.png "/></a>
    <!--BACK TO ENDS-->


      Back To Top Button #4


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-nhvmIT-UOiY/USDh-EyeKDI/AAAAAAAAAjE/hjEdj5OMvO0/s1600/back+to+top.png "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #5


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-36z7H3mWlZ0/USDizr47anI/AAAAAAAAAjU/8SoPm-odD7I/s1600/back_to_top_button.png "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #6


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-BWmnRp-sR9o/USDmkStjAcI/AAAAAAAAAko/q6nJN8bXMZ8/s1600/back-to-top-button.png "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #7


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-ggvoO88bhfM/USDi6IWVtFI/AAAAAAAAAjc/n4vpSkZgR00/s1600/back+to+top.png "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #8


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-C3ZJY99YKfo/USDmD4KR-zI/AAAAAAAAAkY/3fO83hpF2Zk/s1600/back-to-top-button.png "/></a>
    <!--BACK TO ENDS-->


      Back To Top Button #9


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-y2BIm2-mphA/UQLlFFt1-MI/AAAAAAAAAXo/lXvFBVnpLjc/s1600/Back-To-Top.png "/></a>
    <!--BACK TO ENDS-->


      Back To Top Button #10


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-BkNGUImcIV4/USDcBMHYjqI/AAAAAAAAAig/qEtwRO4pH6Q/s1600/back+to+top.png "/></a>
    <!--BACK TO ENDS-->



      Back To Top Button #11


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-X5sq11nsiNY/USDiu1zNWSI/AAAAAAAAAjM/8Y6vn3Vx6kQ/s1600/back+to+top+button.png "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #12


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-6NJTD1oE2I8/UQLk0xLIW-I/AAAAAAAAAXY/bNC6zvfehKY/s1600/Back-to-top.png "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #13


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-PEmadyDjsUw/USDjUyqlWsI/AAAAAAAAAjs/oVRttmskRfc/s1600/back+to+top+button.gif "/></a>
    <!--BACK TO ENDS-->

      Back To Top Button #14


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-Urx3H8aFQmY/USDkbnvSsLI/AAAAAAAAAkA/Wm4OkKT9yRI/s1600/back+to+top.png "/></a>
    <!--BACK TO ENDS-->


      Back To Top Button #15


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-yhJXvPXAuNw/UQLk-mySRjI/AAAAAAAAAXg/pIAnUf9q1c8/s1600/Back-To-Top.png "/></a>
    <!--BACK TO ENDS-->



      Back To Top Button #16


    back to top button
    <!--BACK TO TOP STARTS-->
    <a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://www.matrixar.com/-WH_FEtT_Cvs/USDjPDtErPI/AAAAAAAAAjk/0BNlHdiUu9w/s1600/back+to+top+button.gif "/></a>
    <!--BACK TO ENDS-->

    Your Feedback


    Hope you like this post. If you have any question or suggestion then leave a comment below. You may also like to add some must have widget on your blog given below.


    2013, By: Seo Master

    seo Creating Simple Drop Down Menu For Blogger 2013

    Seo Master present to you:
    blogger drop down menu
    A drop down is really essential tool or widget for any blog or websites. It gives real feel or look of the template or blog. Drop down menu lets users easily navigate through different parts of the blog. In this tutorial i will teach you to add simple navigation menu or Drop down menu to your blog. The good thing about this widget is that it requires no jquery and is coded completely in Html and CSS. So it loads really fast. Lets get started!.

    How To Add Drop Down Menu ?

    1. Go to blogger Dashboard and click on Layout.
    2. Then Click on Add Gadget (Below Header not on sidebar) and Choose Html/Javascript Widget.
    3. Now Paste below code into it.
    <div id='mbwnavbar'>
          <ul id='mbwnav'>
            <li>
              <a href='#'>Home</a>
            </li>
            <li>
              <a href='#'>About</a>
           </li>
            <li>
              <a href='#'>Contact</a>
            </li>
             <li>
               <a href='#'>Sitemap</a>
                <ul>
                    <li><a href='#'>Sub Category #1</a></li>
                    <li><a href='#'>Sub Category#2</a></li>
                </ul>
            </li>
          </ul>
        </div>
    4. Now Change the text in Bold with appropriate label and also replace the url highlighted in red color (#).
    5. To add another tab to the drop down menu then add below code before </ul>. or delete that code from above code to remove any menu.
     <li>
           <a href='#'>Contact</a>
     </li> 
    6. Now we will add CSS, Go to Blogger Dashboard and click on Template and click on Edit Html. Backup your template before doing this.


    7. Then Search for below code.
    ]]></b:skin>
    8. Paste the below code above the code you searched in Step 7.
    /**MBW Navgation bar**/
    #mbwnavbar {
        background: #464849;
        width: 960px;
        color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
    }
    #mbwnav {
        margin: 0;
        padding: 0;
    }
    #mbwnav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #mbwnav li {
        list-style: none;
        margin: 0;
        padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
    }
    #mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
       color: #FFF;
       display: block;
       font:normal 12px Helvetica, sans-serif;    margin: 0;
        padding: 9px 12px 10px 12px;
        text-decoration: none;
         
    }
    #mbwnav li a:hover, #mbwnav li a:active {
        background: #028490;
        color: #FFF;
        display: block;
        text-decoration: none;
        margin: 0;
        padding: 9px 12px 10px 12px;
                 
    }
    #mbwnav li {
        float: left;
        padding: 0;
    }
    #mbwnav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;
    }
    #mbwnav li ul a {
        width: 140px;
    }
    #mbwnav li ul ul {
        margin: -25px 0 0 161px;
    }
    #mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
        left: -999em;
    }
    #mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
        left: auto;
    }
    #mbwnav li:hover, #mbwnav li.sfhover {
        position: static;
    }
    #mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
        background: #028490;
        width: 120px;
        color: #FFF;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 0;
        padding: 9px 12px 10px 12px;
        text-decoration: none;
        z-index:9999;
        border-bottom:1px dotted #333;
     
    }
    #mbwnav li li a:hover, #mbwnavli li a:active {
        background: #70b6bd;
        color: #FFF;
        display: block;     margin: 0;
        padding: 9px 12px 10px 12px;
        text-decoration: none;
    }
     9. Save the template and you will have drop down menu added to your blog.

    Customizing Above Widget

    This part is completely optional. If the above provided plugin does not match the theme of your blog and want to customize to match template of your blog then change some Hex code listed below.
    • Change #464849 to change background color of navigation bar which is currently dark grey.
    • Change #028490 to change the color of tab on mouse hover.
    • Change #028490 to change the color of Drop down menu
    • Change #70b6bd to change the color of Drop down on mouse hover.

    Any Question ?

    If you find this plugin usefull or got into problem while adding this plugin to your blog then leave a comment below i will be glad to help you out. Dont forget to subscribe and follow us on google+,twitter and facebook.

    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 Visit Our Page Button Below Facebook Like Box 2013

    Seo Master present to you:
    facebook widgets
    In this tutorial i will show you to add simple Html/CSS button below Facebook like box widget, which will let your visitors to go directly to your Facebook fan page. This button can also be added below any other bloggers widgets. For live demonstration check mine below facebook like box on the right sidebar. So lets get started.

    Addind Facebook Like Box Widget

    Before getting started you must have facebook like box widget installed on your blog. If not then check the tutorial below.

    Adding Visit Our Page Button

    1. Go to blogger Dashboard and click on layout.
    2. Then choose your like box widget and click on edit as shown in below picture.
    facebook widgets
    3. Now paste the code given below into your like box widget (Paste it after the code that is present i.e after </iframe>)
    <style>
    /*www.matrixar.com*/
    #mbw-fb {
    color: #365899;
    font: bold 11px arial;
    background: #ECEEF5;
    padding: 3px !important;
    margin: 5px 0px!important;
    border: 1px solid #E1E4ED;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    width: 290px;
    }
    #mbw-fb:hover {
    border: 1px solid #6383C1;
    }
    </style> 
    <div id="mbw-fb"><a rel="nofollow" target="_blank" style="text-decoration:none; color:#365899;" href="https://www.facebook.com/mybloggersworld">Visit Our Page Now »</a></div>

    • Change my facebook page url highlighted in green to yours.
    • Change the text in red to change text to something else
    • Change #ECEEF5 to change background of the button.
    • Change #E1E4ED to change border at static mode.
    • Change  #6383C1 to change border on hover effect.

    More Cool Widgets

      2013, By: Seo Master
      Powered by Blogger.