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

seo Setting Up A 404 Error Page For Blogger Blog 2013

Seo Master present to you:

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.

Live Demo

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.

3. Inside the box paste code given below.

<div class='MBW-404-box'>
<p style='line-height: 1.6em'><strong>
<font color='red' size='6'>
Oops!!!
</font> <font color='#666666'>

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)'>« Go Back</a> </li>
<li>Report the Problem By <a href='http://www.www.matrixar.com'>Clicking Here</a>    (<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 == "error_page"'>
<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:

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.

Adding Back To Top Button On Your Blog

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

<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 Top Button #2

<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 Top Button #3

<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 Top Button #4

<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 Top Button #5

<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 Top Button #6

<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 Top Button #7

<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 Top Button #8

<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 Top Button #9

<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 Top Button #10

<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 Top Button #11

<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 Top Button #12

<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 Top Button #13

<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 Top Button #14

<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 Top Button #15

<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 Top Button #16

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

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:

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.

Backup Your Template In 3 Simple Steps

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:

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.

Live Demo

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.

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

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.

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:

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 Facebook Like Box To Bloggers Blog

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.

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

seo Adding Animated Cloud Label To Your Blog 2013

Seo Master present to you:

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.

Adding Label Or Category Cloud On Your Blog

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("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</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

seo Styling Popular Post Widget With CSS 2013

Seo Master present to you:

There are some usefull and must have widgets which can help you to increase traffic to your blog and keep your visitors engaged on your blog. Facebook Like Box, Twitter Follow Button and Popular post widget are some of those widget. I had previously posted on Adding Popular Post widget to your blog, but the default style of this widget that blogger provides is very boring and not so attractive. So in this tutorial i will teach you to add and style popular post widget using CSS. After styling the widget it will look more stylish and more attractice as you can see on the left. You can even customize this further to match your blog template. So lets get started customizing blogger popular post widget.

Adding Popular Post Widget To Blog

1. Go to Blogger Dashboard > Layout > Add Gadget and choose Popular Post Widget.

2. Now set this setting as shown below.

3. You may change number of post to show upto 10 but dont make it below 6. Check below article for detail information.

Add Popular Post Widget To Your Blog

Styling Popular Post Widget With CSS

1. After Adding Popular Post widget to your blog. Go to Blogger Dashboard and choose Template.

2. Now Backup your Template to be safe if you mess something up. Check below tutorial if you dont know how to do that.

How To Backup Blogger Template ?

3. After Template been selected click on Edit HTML and search for below code.

]]></b:skin>

4. Now paste below code just above the code you search in Step 3.

/*--- www.matrixar.com Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #6BB5FF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}.popular-posts ul li:hover {
border:1px solid #009900;
}.popular-posts ul li a:hover {
text-decoration:none;
}

5. Now save this template and you are done.

Further Customizing The Widget

If you follow above steps correctly then you have install and style popular post widget on your blog.This part is completely optional. So if the border of the widget does not match your blog template or you want some different color then change the setting shown below.

6BB5FF - Change this to change the border color at static mode.
009900 - Change this to change border color on hover effect.

If you have any question or suggestion or come across a problem while implementing this widget then leave a comment below i will be glad to help you out.

2013, By: Seo Master

seo Disable Right Click On Your Blog To Prevent Copy/Paste 2013

Seo Master present to you:

Bloggers always wanted to prevent users or other bloggers from copying the content from their blog or website. Few Bloggers do lots of efforts by researching and writing great articles for their blog, whereas some just copy and paste article and tutorials on their blog from others. So to prevent such bloggers from copying the content from your blog i will teach you to disable right click on your blog with just simple Javascript. So lets get started.

How to disable right click on blog or website ?

1. Go to your blogger Dashboard and click on Layout.
2. Then click on Add Gadget.
3. Choose Html/Javascript From Popup Window
4. Now Copy and Paste below code into it.

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

5. Now save it and you are done disabling right click on your blog.

Got any problem ?

If you have any problem disabling right click on your blog or have any other question or suggestion then leave a comment below. I will be glad to help you. Don't Forget to subscribe, +1 on Google+ and like us on Facebook.

2013, By: Seo Master

seo Add HTML5 Mp3 Music Player To Your Blog 2013

Seo Master present to you:

Isn't it be cool to have a tune played when someone visit your websites or blog. Specially if your blog is about songs, music, movies and videos then it would be cool to play music automatically when visitors visits your websites. In this tutorial i will show you how to add a HTML5 mp3 music player to your blog. This mp3 player comes with features such as adjusting volume, play and pause button etc. It works on mostly all browsers except some lower version of internet explorer.

Live Demo (Check Below)

How to add HTML5 Mp3 Player ?

1. Go to blogger Dashboard > Layout
2. Then Click on Add Gadget
3. Select HTML/Javascript
4. Copy the below code and Save it. (Any one of 3)

Code For Normal Mp3 Player

<audio controls="controls"><source src="www.matrixar.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

Code to play Automatically

<audio controls autoplay="controls"><source src="www.matrixar.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

Code to play music again and again (Looping)

<audio controls loop="controls"><source src="www.matrixar.com" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>

Note: Replace www.matrixar.com with url of mp3 file you want to play. The url will end with .mp3

5. Now you have working HTML5 Mp3 player on your blog.
6. Place this widget where you want it to appear on your blog.

Have any question ?

If you have any problem implementing HTML5 Mp3 player to your blog or have any other question or suggestion then leave a comment below. I will be glad to help you. Don't Forget to subscribe, +1 on google+ and like us on Facebook.

2013, By: Seo Master

seo How to use cool google custom fonts in your blog ? 2013

Seo Master present to you:

In this post i will teach you how to use cool and stylish fonts in your blog post using Google Font API. Few years back web devlopers has to use fonts that are available in majority of computers or has to go through long and irritating procedure to add custom fonts in their web pages. But with rise in internet technology it has become much more easier to add custom fonts in your webpages. And it does not requires the users to have that fonts intalled in their computer. This technique can be used on blog as well as your personal websites.

Back-Up your Bloggers Template

This will be you first step in each and every post of MBW where you need to customize your template. So in case if something get wrong with your codes you can use downloaded version of your template. To download your template follow below steps

1. From you dashboard go to Templates
2. Click on Backup/Restore (In top right corner)
3. Then click on Download Full Template.

Font Selection

Google has variety of cool and stylish fonts. To use those fonts go to Google Font Directory and select any font of you choice. Then click on quick use button and you will be taken to a new tab.

Step 1: Copy the code as shown below into Notepad

<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>

Step 2: Changing the above copied code. Add forward slash ('/') before closing tag ( ">")

<link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css' />

Step 3: Copy the CSS code that look something like below into Notepad

font-family: 'Carrois Gothic', sans-serif;

Step 4: Now paste the code that we edited in step 2 after the <head> Tag. Make sure that it is the first code after head tag otherwise it may cause problem in Internet Explorer or older version of google chrome or firefox.

Step 5: Now we will add CSS style to change the font style of our post title. To do this search for any of the following code.If you can't find first code try with the second one.

.post h3 OR .post-title h3

Now change font name with the name we copied in Step 3. So code will look something like below.In our case it was 'Carrois Gothic' but it can be any font of your choice.

font-family: 'Carrois Gothic';

If you follow every steps correctly now you will have custom fonts in your blog. You can use this same procedure to change fonts for sidebar,title, posting etc. To do so you only need to change Step 5 and search for any of the following code.

Title: h1
Post title: .post h3 or .post-title
Post font: .post-body
Sidebar: .sidebar h2

Still Confused ?

If you are still confused and not able to get any of the step correctly or have any problem understanding this post leave a comment below i will be glad to help you out.

2013, By: Seo Master

Design by Dev Nasser

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

Creating 404 Error Page

How to check if its Working ?

How To Add Back To Top Button

Back To Top Button #1

Back To Top Button #2

Back To Top Button #3

Back To Top Button #4

Back To Top Button #5

Back To Top Button #6

Back To Top Button #7

Back To Top Button #8

Back To Top Button #9

Back To Top Button #10

Back To Top Button #11

Back To Top Button #12

Back To Top Button #13

Back To Top Button #14

Back To Top Button #15

Back To Top Button #16

Your Feedback

How To Add Drop Down Menu ?

Customizing Above Widget

Any Question ?

Adding Back To Top Button To Bloggers Blog

Images For Back To Top Buttons

Share Your Thoughts!

Addind Facebook Like Box Widget

Adding Visit Our Page Button

More Cool Widgets

Adding Label or Categories Cloud

Animating Label Cloud

Other Usefull Customization For Your Blog

Adding Popular Post Widget To Blog

Styling Popular Post Widget With CSS

Further Customizing The Widget

How to disable right click on blog or website ?

Got any problem ?

Live Demo (Check Below)

How to add HTML5 Mp3 Player ?

Have any question ?

Back-Up your Bloggers Template

Font Selection

Still Confused ?

Labels

Blog Arşivi