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

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 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
    Powered by Blogger.