MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

image Source Making Different

How To Add Floating Vertical Bar With Share Buttons To Blogger

Live Demo For Facebook Send Button

How To Add Facebook Send Button To Blogger

• Sign in to your Blogger Account
• Visit the Dashboard
• Now Click On Template(Shown below)

LIVE DEMO OF FACEBOOK LIKE BOX

How To Add Facebook Like Box To Blogger

• Cool Text ; The first and awesome free Online LOGO maker website is COOL Text,this website provide totally GUI Interface,you have to just select the text style and type the LOGO Text which you want to generate and click on Render image , that's it :)

How To Add Adsense Between The Blogger Posts

• The First Step is that you have to login to your Adsense Account >> Create new ad unit .
• Then Copy the Adsense Code from there and Parse it via Adsense Code Converter Tool.

• Now Copy the Above Script and Go To Blogger Dashboard.
• Click On Template As Shown Below

• Now Click on edit HTML and Proceed that.
• Check the small Box "Expand Widget Template".
• In this Step Search for this Code <data:post.body/> .
• Note :- In Magazine Blogger Template you may found the Above Code two or three times , so do the below step for All.
• Now If you want to Show your Adsense Ads Above the Post So Paste the Above Code up this Code <data:post.body/> .
• And If You want to Show Adsense Ads below the Blogger Post so Copy the Above Script and paste it below <data:posts.body/> .
• Now save template and that's it !

Adsense Ads at Right Side

Adsense At Left Side of Blogger Posts

1. Before installing Blogger Template,must backup your template.
2. How to backup your Template? It will be also discussed below.
3. Never edit any template ( i mean never remove copy rights of the author , because the author gives that template free to you , so as a credit you should respect him and should not remove his/her credit) ,in case if he get angry he can report your blog to DMCA ,as a result your blog will be deleted.

How To Backup Any Blogger Template.

• The first step , sign in to your Blogger Account
• Blogger Dashboard 
• Click On Template as Shown Below

• Now Click On restore/backup at the left most as shown below

• Now Click On Download Full Template

• And That's it !

How To Install Any Blogger Template 

• Go To Blogger Dashboard
• Then Click On Template as shown below

• Now Click On Restore/Backup as shown below

Live Demo

How To Add Facebook Popup Like Box To Blogger

• Sign in to your Blogger Account 
• Go To Blogger Dashboard , there click on template after that Click on Edit HTML , then Proceed it , Check the Small Box "Expand Widgets Template" after that Search for </head> tag.
• Now Copy the below Script and paste below/under </head> Tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Creating 404 Error Page 

<!-- 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>

How to Enable Meta Tags

Description Not Showing ?

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if> 

How To Remove Blogger Navigation Bar ?

Removing Extra Space Caused By Removing Navbar

]]></b:skin>

#navbar
{
height: 0px;
visibility: hidden;
display: none;
}

Other Awesome Tweaks And Tips 

How To Optimize Blog Post Title

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

4. Replace the above searched code in your blog with the code given below.

<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>

5. Now save the template. You are done!
6. It will some time before search engine crawls your page. But you can check it right away from your browser as show below. As you can see post title i.e 4 Awesome Faceb... is visible before blog title.

Search Results Before And After Blog Title Optimization

You may check change in search result title in search result after changing the code in your blogger template.

Any Problem ?

If you got any problem optimizing your blog post title or have any suggestion then leave a comment below i will be glad to help you out. Don't forget to subscribe to our daily tutorial update, like us on facebook, +1 on Google plus. Thank you!

How To Add Drop Down Menu ?

<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>

 <li>
       <a href='#'>Contact</a>
 </li> 

• Backup Your Template In 3 Simple Steps

]]></b:skin>

/**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;
}

Customizing Above Widget

Addind Facebook Like Box Widget

• Adding Facebook Like Box To Bloggers Blog

Adding Visit Our Page Button

<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

How to disable right click on blog or website ?

<!--MBW Code-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Got any problem ?