Blog Blogger Training

How to Add Colorful Author Comments to Free Blog Blogger Posts Increase Traffic

noreply@blogger.com (GM Qazi) — Wed, 22 Feb 2012 10:19:00 +0000

Summary: This article is about Author Comments on your blogger posts, some blogger have lot of author comments and you want to show separate Author comments in colorful design this article help you about this great Technique

By this useful article you teach that how to add colorful and designed author comments to your free blog blogger posts and increase traffic. Lot of my friends and blogger owners write emails to me and said that they have read lot of articles in this regard but they did not understand and also suggest me that I write a simple article to understand easy for every body that how they show colorful designed and different author comments on their blogger posts. Now I want to advice you step by step read the following useful procedure.

1. First go to your blogger blog Dashboard than Design and Edit HTML and check Expand Widget Template Box and search the following code on your blogger template.

<dl id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

said...

</dt>

(Paste your Code here)
<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

<p><data:comment.body/></p>

</b:if>

</dd>

(Add your Code line here)

<dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

2. In view of the above code I have checked lot of blogger templates that this code is used for author comments. It is very easy search above code on your blogger templates. Add the following code line on the place of (Paste your code here) in green colors of the above code.

<b:if cond='data:comment.author == data:post.author'>

<dd class='comment-body-author'>

<p><data:comment.body/></p>

</dd>

<b:else/>

3. Once again add this (</b:if>) code line on the place of (Add your Code line here) in green colors shown in above code.

4. Now another try to find following codeline to your blogger template like same ways mentioned above.

]]></b:skin>

5. Paste the following code before the above code line.

.comment-body-author {
background: #E6E6E6; /*For changing Background color*/
color: #FACC2E; /* Text color*/
border: 2px dotted #0101DF; /* for border*/
margin:0;
padding:0 0 0 20px; /* Position*/
}

6. Now change the above CSS style code values according your blogger templates for example change background colors, font colors, border shades etc which I have mentioned in green colors in the above CSS Style code.

Finally save your blogger template and enjoy with good result and increase traffic.

Please leave your comments.

How to Increase Traffic from Your Old Blogger to New Free Blog Blogger

noreply@blogger.com (GM Qazi) — Mon, 13 Feb 2012 09:23:00 +0000

Summary: You have old blogger blog and much traffic on it and you have made new blog want to increase traffic from your old blog to new blog this article teach you about great Technique to move traffic easily to your new blog

By this useful article you teach that How to increase traffic from your old blogger to new blog. You have made new blog want to increase traffic but all your efforts are in vein, you can move traffic from your older blogger blog or Website. For this purpose you need a code in your blogger template Edit HTML area. Now search the following code in your blogger template with Ctr +F command.

<b:include data='blog' name='all-head-content'/>

Now add the following code line after the above code with carefully.

<meta content='0;url=YOUR BLOG URL' http-equiv='refresh'/>

For more guidance see the picture has given below for better understanding for new blogger owners specially.

First think that you have applied code properly, some blogger templates need to parse the code, if you want to parse HTML code click here. After that save your blogger template and increase traffic from your older blogger blog.

How to Move Free Blog Blogger Title and Description from Blogger Header Increase Traffic

noreply@blogger.com (GM Qazi) — Tue, 07 Feb 2012 07:31:00 +0000

Summary: Some Bloggers want to move Blogger Title and Description from Blogger Header and want to add new image header with new Blogger Title and new Description to attract visitors and increase traffic more, because blogger header is very important to view best look

By this useful article you teach that how to move Blogger title and description from blogger header, increase traffic to show good look to your blogger header. I have found that lot of visitors required new images header and want to use title and description fonts and colors according their choice. Now I introduce following two codes about title and description these codes are available in your blogger template.

1. Go to Blogger Dashboard, then Design, Edit HTML and search the following codes in your blogger template, some blogger templates looking very different but no problem you can add simply.

This code for Blogger Title

#header h1 {
margin:4px 4px 0;
padding:16px 22px .25em;
line-height:1.3em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal normal 200% Georgia, Serif;
display:none;
}

This code for Blogger Description

#header .description {
margin:0 4px 4px;
padding:0 22px 16px;
max-width:690px;
text-transform:uppercase;
letter-spacing:.3em;
line-height: 1.5em;
font: normal normal 80% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
color: #FFFFFF;
display:none;
}

In view of the above codes add the lines shown in red color the code display:none; and then save your blogger template and now check that your blogger title and description moved properly from your blogger header and now you can adjust your own blogger title and description according your choice and enjoy.

Please leave your comments and suggestions.

How to Improve Background Free Blog Blogger Header for better SEO Tips

noreply@blogger.com (GM Qazi) — Tue, 07 Feb 2012 05:57:00 +0000

Summary: Blogger Header is very important to attract your blogger for visitors and readers and also for better SEO tips, lot of new blogger owners upload different types of blogger templates and want to improve free Blog Blogger Header, in this regard this article is very useful

By this useful article you teach that How to improve background free blog blogger header for better SEO tips and also suggested to new blogger owners and other visitors they want to change blogger header and also you can adjust an image according your choice. Follow the tips given below:

1. Go to blogger blog Dashboard then Design and go to Edit HTML and search the following code in your blogger template, it is very necessary that first make backup of your blogger template.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>

2. Now change the above code with following code with carefully, change red color lines specially.

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='My Blog (Header)' type='Header'/>

3. Once again go to blogger blog Dashboard then Design and go to Edit HTML and find another following useful code in your blogger template.

#header-wrapper {
width:690px;
margin:0 auto 12px;
border:1px solid $bordercolor;
background:url(YOUR IMAGE URL) no-repeat;
height:250px;
}

4. In view of the above code change the above red colors according your blogger template or your monitor screen setup. If you have a beautiful background want to add in your blogger header for better SEO tips. I have found that lot of free hosting image sites are available online one is better www.photobucket.com and upload your image there and take direct link and the link of your image paste it (YOUR IMAGE URL) and save your template and enjoy.

Please leave your comments and suggestions.

How to Add Highlight Button to HTML Code in Blogger Posts for Better SEO Tips

noreply@blogger.com (GM Qazi) — Wed, 01 Feb 2012 11:24:00 +0000

Summary: Highlight Button to HTML code for blogger blog posts is very necessary to copy HTML code and also this is very nice tip for new bloggers and other blogger owners

By this useful article you teach that how you add highlight button to HTML code in free blog Blogger posts for better SEO tips. I have checked that lot of blogger owners want to copy HTML code from other area, but create problems but when you click on highlight button your HTML code you will be select easily HTML code and you can copy it where you place. Now note the following suggestions and tips.

1. Go to www.blogger.com and then Dashboard and then New Post and after that click on Edit HTML and use the following simple code any place of your blogger post.

<div><form name="copy"><div align="center"><input value="Highlight" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button">

<textarea rows="1" cols="22" name="txt" >Blog Blogger Training</textarea></div></form></div>

2. In view of the above see the following code as a result now change the width of rows and columns according your choice and keep your code on the place of red colors Blog Blogger Training.

If you like please leave your comments.

How to Add Wonderful Borders Around HTML Code to Free Blog Blogger Posts

noreply@blogger.com (GM Qazi) — Tue, 31 Jan 2012 07:30:00 +0000

Summary: Borders Around in HTML code to Blogger post is very important to show your HTML code separate in blogger post, it is necessary to make your blogger post better and also for better SEO Tips

By this useful article you teach that How to add wonderful stylish border around HTML code to free blog blogger posts to make your blogger blog post beautiful and shows HTML codes separately and also this procedure is better for SEO Tips. Some new blogger owners and other visitors like this useful tip how they add borders to HTML code in blogger posts. Now I want to give you suggestions step by step.

1. Go to www.blogger.com and then Dashboard and chose new post when start to write your new post and where place you want to add HTML code and want to around border. This is very simple that go to Edit HTML and paste the following code where place do want to add HTML code with border.

2. It is very necessary that first before applying you should parsed your HTML code in Blogger post first parsed it how to parse your code click here.

<div style="width:405px;height:150px;border:1px solid green;">
Blog Blogger Training
</div>

In view of the above border change the width, height and also colors to match with your blogger template for your blogger post. Now add parsed HTML code at the place of Red color in the above box replace of Blog Bogger training. But do not forget to parse your HTML code otherwise you can not see your HTML code in the box.

I hope you have understood above method if you like it please leave your comments.

How to Add Wonderful Label Clouds to Free Blog Blogger Sidebar for Better SEO Tips

noreply@blogger.com (GM Qazi) — Tue, 31 Jan 2012 05:57:00 +0000

Summary: Blogger Clouds gives professional look to your blogger blog and also for better SEO Tips and attract your visitors and readers and also you can customize your fonts and colors to look better your blogger sidebar

By this useful article you teach that how to add wonderful stylish label clouds to free blog blogger sidebar for better SEO Tips. Blogger clouds widget gives professional look to your blogger blog. I have received some emails from new visitors and other friends they said that they want to add simple and easy label clouds widget to blogger sidebar. Now I guide you easily step by step how you add it.

1. Go to www.blogger.com then Dashboard and click on Design tab after that Edit HTML. I advice that before applying all codes you should be keep a backup of your blogger template any place of your computer.

2. Do not hurry up search the following code line to use Ctr+F command.

]]></b:skin>

3. Now paste the code shown below before the above code line.

/* Start Label Cloud CSS by www.ravisaive.in */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}

#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}

#labelCloud li a{}

#labelCloud .label-cloud {}

#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}

#labelCloud .label-cloud li:before{content:"" !important}

/* End Label Cloud CSS by www.ravisaive.in */

4. Once again search the following code line to use Ctr+ F command in Edit HTML area.

</head>

5. Paste the following code before the above code line with carefully.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [0,0,250];
var minFontSize = 20;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

6. After that finally search following useful code in your blogger template to use Ctr+F Command.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

7. Finally replace following long code with above code with sensibility.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<div id='labelCloud'/>

<script type='text/javascript'>

// Don't change anything past this point -----------------

// Cloud function s() ripped from del.icio.us

function s(a,b,i,x){

if(a>b){

var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}

else{

var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}

return v

}

var c=[];

var labelCount = new Array();

var ts = new Object;

<b:loop values='data:labels' var='label'>

var theName = "<data:label.name/>";

ts[theName] = <data:label.count/>;

</b:loop>

for (t in ts){

if (!labelCount[ts[t]]){

labelCount[ts[t]] = new Array(ts[t])

}

var ta=cloudMin-1;

tz = labelCount.length - cloudMin;

lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){

if(ts[t] < cloudMin){

continue;

}

for (var i=0;3 > i;i++) {

c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

}

var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

li = document.createElement('li');

li.style.fontSize = fs+'px';

li.style.lineHeight = '1';

a = document.createElement('a');

a.title = ts[t]+' Posts in '+t;

a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

a.href = '/search/label/'+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement('span');

span.innerHTML = '('+ts[t]+') ';

span.className = 'label-count';

a.appendChild(document.createTextNode(t));

li.appendChild(a);

li.appendChild(span);

}

else {

a.appendChild(document.createTextNode(t));

li.appendChild(a);

}

ul.appendChild(li);

abnk = document.createTextNode(' ');

ul.appendChild(abnk);

}

lc2.appendChild(ul);

</script>

<noscript>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>

</noscript>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

8. One thing note that you should be customize your code with para-5 above according your choice that what type of sizes do you like to change i.e var maxFontSize, var maxColor, var minFontSize,var minColor. Now save your template and see the result in your blogger sidebar. One thing note that it is very necessary that show your label widget in blogger templates sidebar.

I hope you like the above simple step by step guide line regarding how to add cloud labels to your blogger blog sidebar for better SEO tips. If you like this article please your comments.

How to Add Wonderful Google Pulse One Button to Free Blog to Get Better Backlinks

noreply@blogger.com (GM Qazi) — Mon, 30 Jan 2012 08:26:00 +0000

Summary: Google Plus One is very popular lately if you stay any of these websites and blogs and like it, you are free to provide your Google Plus One to it and raise the popularity of that certain blog or website. Recently I have found that lot of Google plus one seo uses. It is a recognized information that if you want to obtain high rankings on SERP you need and also backlinks

By this useful article you teach that how you add Sizable wonderful Google Plus one Button to free blog blogger drive traffic and to get better backlinks and also better for SEO tips. Google needs to recognize whether your free blog blogger is liked and accepted by the people who have visited it or have used your services free. Really Google Pluse one offers you the chance to reach superior rankings and get the frame of your participants. I have seen lot of popular blog and websites Google Pluse one is key roll to get backlinks.This is great that do not waste your chance to get your free blog blogger on top. Now I suggest your step by step how to add Google Pluse One Button to your blogger template.

1. Open Blogger blog and then go to Dashboard, Design and Edit HTML after that click in the box Expand Widget Templates and find the following code line.

</head>

2. Now paste the following code before the above code line with carefully.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">

{lang: 'en-US'}

</script>

3. Once again search the following code in your blogger template.

<data:post.body/>

4. Now paste the following code below of the above code with sensibility.

<div>

<g:plusone size="standard" expr:href="data:post.url"/>

</div>

It is suggested that save your blogger template and make your blogger blog backlinks high.

If you like this article please leave your comments.

How to add Only Post Details with Images to Free Blog Blogger Home Page for Better SEO Tips

noreply@blogger.com (GM Qazi) — Wed, 25 Jan 2012 08:40:00 +0000

Summary: This article teaches you about how to add only posts details with images to free blog blogger home page, this tip is really better for SEO tips and also to provide good speed to open your home page of blogger blog

By this useful article you teach that how to add only post details with images to free blog blogger, this Technic would provide you lot of benefits, one is that you can open your blogger blog speedy and also it is better SEO tips and looking nice on your home page. I have found that lot of blogger templates and other templates like Wordpress, CSS3 and other stylish professional templates shown above Technic on the home page of blog. If you have old free blogger template and or not facilitate so you can use this Technic. Now read the following useful codes and how to place it with carefully.

1. Go to blogger blog Dashboard and then Design and Edit HTML and find the following code line.

</head>

2. After that paste the following code with above code line to use this great Technic.

3. Once again find the following code line in your blogger template with sensibility

<data:post.body/>

4. Replace the following code with above code line.

<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <div style='clear: both;'/> <span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span> </b:if> </b:if>

5. If you want to change summary_ noming, summary_image, Image_thumb_height and image_thumb_width in the above code I have changed it according my blogger template see the following picture of blog blogger training Image with post summary detail for better SEO Tips.

6. Now save your blogger template and see the result and enjoy, if you like this please leave your comments.

How to Add Wonderful Page Counting Buttons to Free Blog Blogger Better SEO Tips

noreply@blogger.com (GM Qazi) — Fri, 20 Jan 2012 07:03:00 +0000

Summary: Page Counting Buttons are very interested and beautiful looking in the footer of the free Blog Blogger Posts and and you can look view nice and also this facility to provide page counting to your visitors and readers that how much pages related with your blogger blog and also called better SEO Tips

By this important article you teach that how to add Wonderful Page Counting Buttons to free Blog Blogger, lot of new blogger owners and visitors have lot of pages on their precious blogs and want to count and settle pages on one page this procedure will be very easy to count your blogger pages and posts. Now I want to present following useful code for solve this simple problem.

1. Go to www. blogger.com and then Design after that Edit HTML and following code line with carefully.

</body>

2. Now paste the following useful code before the above code line with sensibility.

<style type="text/css">

.showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}

.showpage a {float:left;background:url(https://lh3.googleusercontent.com/-ssoShc5LRzw/TYB4mmwQxOI/AAAAAAAAAeI/VE8IzBS7JzA/way2blogging-button.gif) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}

.showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}

.showpageOf{float:left;padding-top : 6px;}

.showpageNum a {background:url(https://lh4.googleusercontent.com/-mhmA2xKtrzc/TYB4m5bcS0I/AAAAAAAAAeM/uPZU2s1pe8M/way2blogging-pagenum.gif) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}

.showpageNum a:hover {background : url(https://lh4.googleusercontent.com/-mhmA2xKtrzc/TYB4m5bcS0I/AAAAAAAAAeM/uPZU2s1pe8M/way2blogging-pagenum.gif) no-repeat 0 100%;color : #fff;}

.showpagePoint {background : url(https://lh4.googleusercontent.com/-mhmA2xKtrzc/TYB4m5bcS0I/AAAAAAAAAeM/uPZU2s1pe8M/way2blogging-pagenum.gif) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}

.showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}

</style>

<script style='text/javascript'>

var pageCount=7;

var displayPageNum=1;

var upPageWord="Previous";

var downPageWord="Next";

</script>

<script type='text/javascript' src="http://bloggerblogwidgets.googlecode.com/files/BeautifulPageNavi.js"/>

In view of the above code, if you want to change number of posts on the page as you like and change figures in the above code in green colors and then save your template and check your blogger blog and enjoy. See the following sample of Page counting buttons on Blog Blogger Training.

If you like this article please leave your comments.

How to Add AlertPay Donate Button to Free Blog Blogger for Better Page Rank

noreply@blogger.com (GM Qazi) — Thu, 05 Jan 2012 10:36:00 +0000

Summary: This article is very useful for Blogger owners they want to add AlertPay Donate Button on their Blogs because, if you want to take some donate from your visitors or readers, Alert Pay is very popular and providing best free service in all over the world because lot of countries have not facility of PayPal

By this useful article I teach you that how to add AlertPay Donate Button on free Blog Blogger, I have judged that lot of visitors and readers like to donate a little amount to Blogger owners who are providing free service online to teach something about blogging and also I say that this is right of blogger owners. If you have a blog and want to take a little donate from your respectable readers and visitors, read following the instructions has given below:

1. Go to AlerPay, if you have not opened an account yet click here. and then find "Business Tools" when you find it, further go to "Standard Integration" and then you will see "Manage Donations / Generate "Donate Now" button" and click on it and you will find a form, and now fill up form and then AlertPay will get a code for you see the example has given below:

2. Copy the code like above and paste it on your Blogger Sidebar or any place of your Blogger Template, now your AlertPay Donate button is ready for working.

3. Blog Blogger Training is providing Free Training for the visitors and readers, if you want to donate this blog, I will be highly obliged click the following Button.

Ok friend thanks, if you like this article please leave your comments.

How to Add Eye Catching Images to Free Blog Blogger Increase Traffic

noreply@blogger.com (GM Qazi) — Thu, 05 Jan 2012 09:54:00 +0000

Summary: This article is about How to add Eye Catching Images to Free Blog Blogger and Increase Traffic, some images like RSS Feed, Facebook buttons, Twitter Buttons etc and give your concerned link, these images looking awesome on your blogger sidebar or as you like any place.

By this useful article I tell you that I am free now and this time is my blogging time, I have taken some time for readers and visitors of Blog Blogger Training Today. I am writing an article for readers and visitors of Blog Blogger Training. You have read lot of articles about RSS Feeds and other Social Media Buttons and I have checked lot of methods, suggestions and tips have been shown on different Websites and Blogs. My Blog is very popular for its simplicity and due to original content, now I am introduce a new way how to add beautiful icons, images, social media buttons etc, to free blog blogger and how you add hyperlink support on the image.

I have made an easy and simple code in HTML and now I want to introduce to other readers that how this code work for you and how you insert an images links on it. So do not worry if you are looking too bore, take a cup of tea or one tablet of headache, oh oh no no this is not confused code but very easy for more information copy following code in Notepad and made some changes on it.

<a href="URL OF YOUR REQUIRED LINK"><img src="

YOUR IMAGE URL

" alt="Banner-2" width="50" height="50" border="0" /></a>

1. Now look the above simple code I have already made for your easiness and how you work on it, no problem I guide you that first select your required link, for example you want to add RSS Feed icon and you require its Feed URL. If you have not yet been made RSS Feed of your blogger blog in Feedburner click here, otherwise paste your RSS Feed address on link in Blue color in above code.

2. After that you require image URL you should be select Icon Finder Search Engine in this regard, if you want to search better images, icons, pictures click here or go to http://www.iconfinder.com/ and find your required icon as you like according your wish and right click on selected icon then copy image URL for example see the picture has given below:

3. When you will complete this procedure and then paste URL on the above code in green color and now you should be set width and height of the icon according your blogger template and now decide that which place is suitable for you. Now show my code is given below I have already inserted on Blog Blogger Training.

<a href="http://feeds.feedburner.com/BlogBloggerTraining"><img src="

http://cdn3.iconfinder.com/data/icons/sphericalcons/128/rss.png

" alt="Banner-2" width="50" height="50" border="0" /></a>

OK friend now you are done see the above code of Blog Blogger Training and it is very easy and simple and now you intend to paste another icon, like Face Book, Twitter etc, select icon from Iconfinder.com search engine, copy and code above code and paste it after this and change required fields and enjoy. Look the following images I have already done for examples and for your easiness:

Ok, friend bye now but do not forget me and Blog Blogger Training, if you like this article leave your comments.

How to Add Stylish Fresh Posts Marque Gadget to Free Blog Blogger Increase Traffic

noreply@blogger.com (GM Qazi) — Tue, 03 Jan 2012 08:58:00 +0000

Summary: This article about adding of Stylish Fresh Posts Marque Gadget to Free Blog Blogger, this is very useful to show your fresh blogger posts on your blogger template with new style and scrolling, really this is great tip to increase traffic for blogger blog easily

By this useful article you teach that how you add stylish fresh posts Marque Gadget to Free Blog Blogger increase traffic. In my experience I have seen lot of successful blogs online and also discussed with their author they said to show your new and older posts for your visitors and readers in front or below of blogger headers, really marque scrolling gadget attract your visitors to your blogger blog. My blog Blogger training is very popular in all over the world, because I use original and fresh content on it and I work hard myself to make HTML codes and write useful article for the readers and visitors of Blog Blogger Training. Now I describe step by step how to add marque scroll stylish fresh posts gadget to your blogger template.

1. Now see the following code add it any place of your blogger template and change its colors and value according instructions.

<script type='text/javascript'>

var w2bWidth="100";

var w2bScrollAmount="1";

var w2bScrollDelay="1";

var w2bDirection="left";

var w2btargetlink="yes";

var w2bnumPosts="10";

var w2bBulletchar =">>>";

var w2bimagebullet="yes";

var w2bimgurl="http://www.123mycodes.com/onlinenowicon/icons/2512.gif";

var w2bfontsize="16";

var w2bbgcolor="0B0B61";

var w2blinkcolor="FFFFFF";

var w2blinkhovercolor="FFFFFF";

</script>

<script type='text/javascript' src='http://nitinmaheta.googlecode.com/files/makingdifferent2.js' ></script>

<script type='text/javascript' src=" YOUR BLOGGER URL HERE/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=30" ></script>

<noscript><a href="http://gj37765.blogspot.com/2011/06/add-auto-scrolling-recent-posts-widget.html">Grab this Widget</a></noscript>

In view of the above code change colors and scrolling speed according your requirement and change your blogger url save your template and see the result. For more information look demo on front page of Blog Blogger Training.

I hope you like it but do not forget me and leave your comments.

How to Add All Posts Gadget to Free Blog Blogger Sidebar Drive Traffic

noreply@blogger.com (GM Qazi) — Tue, 03 Jan 2012 07:10:00 +0000

Summary: By this most useful article you teach that how to add Free Blog Blogger All Posts Gadget to Sidebar and Drive Traffic, really this is very useful and best tip for to drive traffic easily, if your blogger posts shown in the side bar visitors and readers can find easily according their requirement

By this useful article I describe that I have found lot of tips online but very difficult to understand. Now I have decided that I want to make easy for readers and visitors of Blog Blogger Training, how they add All posts Gadget to free blog blogger sidebar very easily and you can drive traffic more and more to use this fantastic tip which was made simple for you, because Blog Blogger Training is very popular for its simplicity and original content and very easy to understand well.

1. Now Code converts your blogger site feed with 800 posts, see the following code and convert it according y;our site feed and how much posts you want to add.

http://YOUR BLOG.blogspot.com/feeds/posts/default?start-index=1&max-results=800

In light of the above line replace your blogger URL with green colors and change posts how much posts on your blog change orange color amount. Now make complete code of above site feed click here .

I thinks you are free and ready to generate your site feed code on the free site when you will complete all fields according instructions given on the site and code would be generate for you like this see the code has given below:

<script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=www.teachblogspot.blogspot.com&chan=n&num=800&desc=800&date=n&targ=n" type="text/javascript"></script>

<noscript>

<ahref="http://itde.vccs.edu/rss2js/feed2js.php?src=www.teachblogspot.blogspot.com&chan=n&num=800&desc=800&date=n&targ=n&html=y">View RSS feed</a>

</noscript>

After that when you have generated your site feed code on free site converter your code looking like above and now see the following code with care fully.

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="All Posts From YOUR BLOG.COM" name="widget.title" type="hidden"/>

<textarea style="display:none;" name="widget.content">

PASTE SITE FEED CODE HERE

</textarea>

<input

value http://YOUR BLOGGER URL="name=" infourl type="hidden"/>

<input

value = name="logoUrl" http://www.blogger.com/img/icon_logo32.gif type="hidden"/>

<div style="text-align:center;">

<input src=" URL OF YOUR IMAGE" name="image" type="image"/>

</div></input

value></input

value></form>

<div style="text-align:center;">

It is suggested that see the above code and change green color fields according your requirement and write your blogger url and make image url if you want to make your image url lot of free image host services are available online one is best free host site click here. Now paste your site feed generated code you have already generate from free site shown above and place it on orange color of the above code. The result when you will look like Blog Blogger Training site feed your full code will be look like see the following complete result.

<form action="http://beta.blogger.com/add-widget" method="POST">

<input value="All Posts From " name="widget.title" type="hidden"/>http://www.teachblogspot.blogspot.com <textarea style="display:none;" name="widget.content">

<script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=www.teachblogspot.blogspot.com&chan=n&num=800&desc=800&date=n&targ=n" type="text/javascript"></script>

<noscript>

<ahref="http://itde.vccs.edu/rss2js/feed2js.php?src=www.teachblogspot.blogspot.com&chan=n&num=800&desc=800&date=n&targ=n&html=y">View RSS feed</a>

</noscript>

</textarea>

<input

value http://www.teachblogspot.blogspot.com="name=" infourl type="hidden"/>

<input

value = name="logoUrl" http://www.blogger.com/img/icon_logo32.gif type="hidden"/>

<div style="text-align:center;">

<input src=" http://i40.photobucket.com/albums/mm4/gmqazi1973/.gif" name="image" type="image"/>

</div></input

value></input

value></form>

<div style="text-align:center;">

Once again you will judge that I have made full code the same code I have made for Blog Blogger Training and I want to tell you that I have changed all fields and see the above code with carefully and I hope you will be make it easy for your own blogger blog. You will display purple lines of the above code these lines are the code of site feed which was generated by me from free site for Blog Blogger Training.

Finally you will see on the "Add Page Element" click on the widget "Add to Blogger" and select your blogger blog and you will show list of your blogger posts on side bar and manage it according your choice and move it on "Add Page Element" and keep it on suitable place of your blogger sidebar. If you find any problem you can ask me any question, but do not forget me if you like this article please leave your comments.

How to Modify Correct Width Free Blog Blogger Templates for Better SEO Tips

noreply@blogger.com (GM Qazi) — Fri, 30 Dec 2011 05:40:00 +0000

Summary: This useful article you learn that how to change width of Free Blog Blogger Templates, some blogger owners like one blogger template and want to change width according their choice this article is very useful in this regard

By this useful article you teach that how to modify correct width of free blog blogger templates according your monitor or LCD screen. I have received some emails and calls in this regard, no problem I want to solve this problem and I want to give you step by step suggestions and tips to change correct width of free blog blogger templates. Take a cup of tea be relax and read this article with carefully. Now go to your blogger Layout and then Edit HTML and search following codes. For more information read this useful article click here.

#header-wrapper {
width:760px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
..................................

#outer-wrapper {
width: 760px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
..................................

#main-wrapper {
width: 440px;
float: $startSide;
..................................

#sidebar-wrapper {
width: 270px; float: $endSide;
..................................

#footer {
width:760px;
clear:both;

In light of the above code now you identify that header -wrapper is header, Outer Wrapper is main section of blogger template, Main-wrapper for post section Sidebar-Wrapper for Sidebar and Footer-wrapper for footer, keep these things in your mind carefully and change above codes see the following codes I have changed.

#header-wrapper {
width:790px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
..................................

#outer-wrapper {
width: 790px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
..................................

#main-wrapper {
width: 470px;
float: $startSide;
..................................

#sidebar-wrapper {
width: 290px; float: $endSide;
..................................

#footer {
width:790px;
clear:both;

Finally I want to give you an example that I want to change my post section Main-wrapper 440px to 470px and also I did same for main section Outer Wrapper modify 760px to 790px and if you want to change sidebar width according your choice like same way and also I have changed header -wrapper from 760px to 790px and Footer-wrapper from 760px to 790px. One thing note that change the width according your blogger template as you like, I have given an example only.

I hope you like this tip and do not forget me if you like it please leave your comments.

How to Display High Page Rank to Free Blog Blogger in Top Search Engines for Better SEO Tips

noreply@blogger.com (GM Qazi) — Thu, 29 Dec 2011 10:33:00 +0000

Summary: This useful article about how to show high page rank of free blog blogger to Google this article is very important for new bloggers and those bloggers who are not aware about SEO Tips and Tricks and want to boost more traffic for blogger

By this useful article I want to say that I have received lot of emails and calls from my friends and readers of Blog blogger Training that their blogs still did not reach better Google Page Rank, they have tried to their best. Now I explain that lot of reasons comes that lot of blogger owners did not completely understand this tough procedure. I think some peoples in the world who completely understand it. I have taken advice from SEO specialists, but one my friend Mark James said that Google maintains the secrets of its page rank algorithm very secured. If you are still not get good page rank read this useful and important article with carefully. If you want to know more about blogging SEO tips and tricks click here.

1. Open MS Word and Write Quality Contents

No problem you are not good writer but try to write yourself and select one topic belonging to your blogger, really if you have good original content, people always want to link it. Please save yourself and do not copy content from other blogs or websites. If your blog found duplicate Google's algorithm credit and downgrade your blog and you will receive zero traffic to your blogger blog. You do not know that Google acts cruelly toward any kind of content scuffing, even if you are completely blameless. Once your page rank is demoted, it can be nearly not possible to obtain it back up again. Visits popular blogs and sign up new forums and leave comments on other blogs and got traffic. If you have quality content really you have succeeded as a half battle.

2. Link your Blogger Posts with each other

This is great way to drive traffic and good page rank that link your blogger posts with each other and move your blogger blog on good strength of page rank. One thing important is that give reference of your old posts beneath of the post like related blogger posts. If you want to know about it click here.

3. Use SEO tips and Tricks

This is very important for all bloggers that if you want to get Page Rank High in Google and other search engines you should be keep knowledge about SEO Tips and Tricks if you want to know more about blogger tips and tricks click here.

4. Leave Comments on other Blogs

This is very important and necessary to leave your comments on other blogs, but do not write short comments and leave good comments like, ask questions from Blogger authors and give the link of your blogger blog and I hope you can get more traffic and also good page rank for blogger blog. If you want to your page rank more better click here.

5. Change Title Code

This is great source of getting good page rank in search engines, change title code of your blogger blog, now go to Blogger dashboard then Layout, Edit HTML and sarch the following code line with carefully.

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

In light of the above replace the above code with following code and wait for some days your Google page rank will be high and you will get total control on it but patience and implement on above points.

<b:if cond='data:blog.pageType == "index"'>

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

<b:else/>

<title><data:blog.pageName/> | <data:blog.title/></title>

</b:if>

I think you have read and understand the above SEO tips and tricks, but do not forget me, if you like it please leave your comments

How to Add Beautiful Subscription Box Below of Free Blog Blogger Posts Drive Traffic

noreply@blogger.com (GM Qazi) — Wed, 28 Dec 2011 10:01:00 +0000

Summary: This useful article teach you that how to add beautiful Subscription Box below of each blogger post drive traffic, if your visitors and readers like your blogger post this is very easy for your visitors and readers to subscribe your post easily

By this useful article you teach that How to subscribe your blogger post by your visitors and readers, no doubt you are good writer and you have good blogger posts, if your readers and visitors like your posts and want to subscribe it, so I have solved this problem do not worry this is very simple code really HTML code is magic it has solved lot of problems to use blogger blog. Now I give you step by step suggestions and tips in this regard follow the following instructions.

I think before applying this code on your blogger template you want to see demo of subscription box no problem I want to see you demo of subscription Box which is included with Blog Blogger Training posts. See the picture has given below:

Now go to www.blogger.com then go to Design and then Edit HTML and check "Expand widget template" and search the following codeline:

<data:post.body/>

You have succeeded and now ready to add main code do not hurry up after that paste the following code below of the code line shown above with care fully.

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed ID here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='border:1px solid #DDD;padding:3px;text-align:center;background:# FF0000;' target='popupwindow'><span style='margin:0 auto; padding-left:24px; position:relative;background: url(http://3.bp.blogspot.com/_b0xJ7qk6DTc/TEg2iHmUivI/AAAAAAAAAu0/j9tIV5fjTXw/s1600/myrss.gif) right center no-repeat;'/>Get Free Updates: <input name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = ""}' style='width:176px;height:18px; background: #ffffff url(http://1.bp.blogspot.com/_b0xJ7qk6DTc/TInWwRjgSUI/AAAAAAAABC0/DWQZc1mUvaU/s1600/new-email.png) left no-repeat;padding: 1px 0px 1px 24px;border: 10px solid #8cafe3;' type='text' value='Enter your email'/><input name='uri' type='hidden' value=' Feed ID here'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><br /> <center><i>*Please click on the confirmation link sent in your Spam folder of Email*</i></center><br /> </form><br />

In light of the above code search the word (Feed ID here) and replace your Blogger Feed ID with carefully and also change backgrounds colors according your blogger template. Now finally save your template and enjoy it.

If you like this article please leave your comments.

How to Use Substitute Google Adsense Ways to Make Money from Free Blog Blogger

noreply@blogger.com (GM Qazi) — Wed, 28 Dec 2011 08:12:00 +0000

Summary: This useful and most important article teach you that how you to make money from substitute of adsense, lot of persons complaint that Google Adsense rejected or banned their accounts due to some reasons please read this article to use other resources for income

By this useful article you teach that how you make money from Blogger Blog to use other substitute Google Adsense resources, I want to know something in your knowledge that due to the tough TOS policy of Google Asense lot of Blogger owners searching other resources of income for their blogs. I have searched on line that lot of person’s complaint against Adsense for banned of theirs accounts due to some reasons. To see the situation now I am writing this useful article for those bloggers and new visitors of Blog Blogger Training and also I have received lot of emails is this regard. Now decided that what is the other resources of income systems from Blogger Blog. Please follow the following most popular 05 Google Adsense substitute programs details has given below:

1. Adbrite: This old company is very famous in all over the world and best for UK and US related traffic. The network of this company allows you to make money from your blogger blog. Different other background advertising networks, the company is dedicated to sell advertisements on blogger blog by showing a banner ads. The readers and visitors if likes to put an ad on their blogs can easily put on view advertisement. I have tested that it is very simple to utilize for everyone, and it’s completely free. One thing important that Adbrite gives us 24 hours time to check their ad on your blogger blog if your ad content required on their policy they approved. If you want to open account click here.

2. Clicksor: It is very popular and useful network and nice for publishers and advertisers. Clicksor allow you to make money on different format type of ads as you like on your blogger templates and select banners and text sizes and publish on your blogger blog and make money more and more. You can take income up to 60% and above depending on the performance the advertisers get from your blogger placements and clicks. In my experience I have compared Clicksor with other networks but clicksor is better than others and also it depends on your blogger traffic if you want to increase traffic for blogger blog click here. There is very good payment procedure of Clicksor you can receive payment either Paypal or Check when your reached at 50 dollars. If you want to open account click here.

3. Chitika: I have tested that Chitika has very good reputation and well advertising company leading blog advertising company with a network of blogs and websites with also product advertisers and merchants. I have used it and also earned some money. Another good thing is that it also permits you to make money from affiliate program where we can make 10% amount and also facilitate to referral earnings. One thing note that if you are owner of product blog you can earn more and more from Chitika if you want blogger traffic click here. The payment procedure of Chitika is very nice through PayPal and Checks you can request for payment when you reached on target of 50 dollars by check and 10 dollar by PayPal, but PayPal facility is not available in Pakistan, I request to PayPal in this regard no problem you can take cash through check.

4. Infolinks: There is no doubt Infolinks is very popular and famous company and provide service specially In-Text advertising and also indexes pages of blogger blog looking for keywords and phrases that are not at this time linked and converts those words into advertising links. One this is important that when you have published your article post to blogger blog Infolinks automatically selected important words and underlined words for advertising. One important and best thing is that you be able to use Infolinks ads to tribute your other advertising programs as you like and as you wish. This is very easy and simple and you can take huge profit it is real and original money making system and substitute of Google Adsense. When your amount reached at 50 dollars you can cash it through Wire transfrer and PayPal. If you want to open account click here.

5. Bidvertiser: It is old company and very popular and good profitable, if your blogger contents are original you can take more profit. It is professional contextual advertising network that offers only contextual and feed advertisements like Google AdSense. I give you good advice that drive traffic and make money from Bidvertiser specially, if you want more traffic for blogger blog click here. One important thing is that when you reached an amount of 10 dollars you can cash out through check and PayPal this is very good offer. If you want to open account on Bidvertiser click here.

I hope you like this article and if you want to give me more suggestion and tips kindly leave your comments.

How to Adjust Advance H1 Tag for Better SEO tips to Free Blog Blogger

noreply@blogger.com (GM Qazi) — Mon, 26 Dec 2011 08:43:00 +0000

Summary: This most useful article about how to adjust H1 tag for blogger blog, this is great fun to drive traffic for blogger blog and also great SEO Tips and Tricks to move Search engines friendly H1 tag is very important for SEO

By this useful article I teach you that H1 (Heading) Tag is very important. In my experience I have searched and tested that blogger and all of blogger widgets has been using h2 or h3 heading tag for post title. It is very important if you want your blogger blog SEO based you should be use h1 tag for your blogger post title, this is magic, are you believe or not I have tested this tag for post title and found search engine friendly. Now go to www. blogger.com and login to blogger dashboard, open layout and then Edit HTML and click on "Expand Widget Templates" and find following code in your blogger template with carefully:

<b:if cond='data:post.title'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h3></b:if><br />

In light of the above code see h3 in above and change it with h1 and replace the above code with following code with carefully:

<b:if cond='data:post.title'><h1 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></b:if></h1></b:if>

Now once again paste the following code before this code line ]]></b:skin> with carefully:

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 {border-bottom:0px Dotted #ffffff;border-top:0px Dotted #000000;margin:.25em 0 0;padding:0 0 4px;font-size:160%;font-weight:normal;line-height:1.4em;color:#FFD700;}

Now see the above code and modify colors and fonts according your blogger template and then save your blogger template and view blog and wait some days your blogger post titles would be search engine friendly.

If you like this useful article please your comments.

How to Add Extra Add Gadget to Page Elements to Free Blog Blogger for Better SEO Tips

noreply@blogger.com (GM Qazi) — Mon, 26 Dec 2011 07:01:00 +0000

Summary: This useful article is about add additional Gadget to Page Element section of free blog blogger for better SEO Tips, lot of blogger owner requirement extra gadget for ads and other functions, this is necessary to include add gadget to the page element

By this use article you teach that how to add additional and extra add Gadget to Page Elements, this is very necessary for blog owners and this requirement is very important if you want to ads or Marque under the page headers specially, some of of my friends tell me to write article in this regard. Now I want to know in your knowledge that how to add an additional Gadget under and above and as you like of blog blogger header, really this is simple and very simple for an example see the picture has given below:

In light of above picture see the marked red portion there is no add gadget on this area, if you wan to add gadget search the code word "showaddelement" in HTML section of your blogger template and now you should change this word (showaddelement='no') to (showaddelement='yes'), and then you will see (maxwidgets='1') alongwith showaddelement modify it into (maxwidgets='2') if you require more gadget change it into 3 or 4.

One thing note that if you have another blogger template search the above words like showaddelement and maxwidgets separately in Edit HTML section and change it into the method shown above after that you will see extra Gadgets in the area already shown in read marks of above picture. Now you have applied above lines with successfully you will the result like this follow the picture shown below:

In view of the above picture see the red marked area 02 Gadget are shown and now you are ready to work and enjoy, if you like this article leave your comments.

How to Get Some Extra Secret Make Money Plan to use Free Blog Blogger

noreply@blogger.com (GM Qazi) — Fri, 23 Dec 2011 09:01:00 +0000

Summary: This useful and very important article will teach you that how you to make money real plan to use blogger blog and also original technical points has been pointed out in this article, if you have original contents want some money in extra time read this very useful points:

By this useful article you teach that how you make money to use blogger blog from online with easy and simple. In my experience I have found lot of scam and fraud to offer online work at home. I have received lot of emails and calls from my friends and other visitors of Blog Blogger Training they have lost their hard earning money to use different make money systems online. Now I am forced to write this article about violence of new comers on internet and other who have lost their money. I have checked on Google millions of complains against those defaulters and fraudulent persons they have cheated money to give offer on line work to the simple and innocent persons.

Now I advice that do not waste your hard money to use online work, through this article I give you some tips and real suggestions how you earn money. I did not claim that you will be rich in one day but you have started work continued with simple 20 minutes you will be success soon from real work. If you have little money you can reach on high step by step because penny converted into cents, cents converted into dollars, no problem but patience and hardworking is must. Now read the following useful and original tips in this regard.

1. Google Adsense: First create your free blog blogger click here and then post original content when you have reached minimum 50 posts apply for Google Adsense and puts ads on your blogger blog and make money with real methods, but Google is very active do not use extra sources to click on the ads, otherwise your adsense account would be closed. If you want to get Adsense account approval tips click here.

2. Real PTC Sites: I have 06 years experience in this field lot of PTC sites are totally scam and fraud, when you reached on the target you did not get any penny from your hardworking. I have researched on PTC sites, I have found only 10 PTC sites are real and actual paid little money to the clients, I have already discussed that you will not be rich in one day but have patience and get more referrals to earn money from these real PTC sites, if you have not referral but no problem clicking should be continued every day. Now I am showing following genuine PTC sites you can join without any hesitation you can earn little money but you will have to make plan you can earn more and more. If you want to make me referral and click on these sites I would be get more profit alongwith you and also I will be thankful on this act.

In light of the above real PTC sites click on the above banners join and register yourself and click on the ads daily and properly and make a plan and earn little money, but no tension wait and patience some time and try to get more referrals and earn money.

3. Alert Pay: This is online genuine and well reputable company you can open free account on it when you will earn from above PTC sites you can transfer your money to Alert pay and also you have facility to transfer your amount through your Bank any corner of the World. If you want to open account on Alert pay click here. For more details click on the Banner has given below:

I hope you like this article and if you want to give me more suggestions and advice please leave your comments.

How to add Elegant Menubar to Free Blog Blogger Header for Better Backlinks

noreply@blogger.com (GM Qazi) — Thu, 22 Dec 2011 11:20:00 +0000

Summary: This profitable and most important article guide you that How to add beautiful stylish Menu bar to Blogger Blog, you should be add Menu bar for best styling system of your blogger header and template Menu bar gives you facility and more links

By this most important article you teach that How you add stylish and beautiful Manu bar to free blog blogger header, I have checked and judged that lot of blogger owners using Menu bar to Blogger headers and this looks very nice and also you can add main and important links for the easiness of your visitors and readers and you would be success to drive traffic more to your blogger blog. This is very simple and easy now I am describing following use codes.

1. Open your blogger blog go to Design and after that Edit HTML and then search following code in your Edit HTML area with care fully and paste before this code line]]></b:skin>.

/*URL: http://www.teachblogspot.blogspot.com/ */<br /> <br /> .basictab{<br /> padding: 3px 0;<br /> margin-left: 0;<br /> font: bold 12px Verdana;<br /> border-bottom: 1px solid gray;<br /> list-style-type: none;<br /> text-align: left; /*set to left to align the menu as desired*/<br /> }<br /> <br /> .basictab li{<br /> display: inline;<br /> margin: 0;<br /> }<br /> <br /> .basictab li a{<br /> text-decoration: none;<br /> padding: 3px 7px;<br /> margin-right: 3px;<br /> border: 1px solid gray;<br /> border-bottom: none;<br /> background-color: #FFD700;<br /> color: #FFD700;<br /> }<br /> <br /> .basictab li a:visited{<br /> color: #0000FF;<br /> }<br /> <br /> .basictab li a:hover{<br /> background-color: #000000;<br /> color: black;<br /> }<br /> <br /> .basictab li a:active{<br /> color: black;<br /> }<br /> <br /> .basictab li.selected a{ /*selected tab effect*/<br /> position: relative;<br /> top: 1px;<br /> padding-top: 4px;<br /> background-color: #FFD700;<br /> color: black;<br /> }<br />

After that go to your Blogger Dashboard, Layout Page Elements and now above blog posts area, click add gadget see the picture has given below:

In light of above now choose add HTML/JavaScript you should leave vacant content area insert following code:

<ul class="basictab"><li class="selected"><a href="http://www.teachblogspot.blogspot.com"> Main Home</a></li> <li><a href="http://teachblogspot.blogspot.com/2011/03/free-blog-template-blogger-seo-friendly.html">SEO Friendly Blogger Templates</a></li> <li><a href="http://teachblogspot.blogspot.com/2011/03/submit-blog-in-100-search-engines.html">Free 100 Search Engines</a></li> <li><a href="http://teachblogspot.blogspot.com/2011/04/add-affiliate-banners-in-free-blog.html">Make Money</a></li> <li><a href="#">Edit</a></li> <li><a href="#">Edit</a></li> <li><a href="#">Edit</a></li> <li><a href="#">Edit</a></li> </ul>

Now change your links alongwith and color in above codes according your blogger template and save your blogger template and view blog.

If you like this leave your comments.

How to Add Beautiful Solid Borders to Free Blog Blogger Sidebars

noreply@blogger.com (GM Qazi) — Thu, 22 Dec 2011 09:07:00 +0000

Summary: This useful and important article guide you that How to add beautiful borders in side bar of your blogger blog templates, this useful tip guide you and would make your blogger side bars more beautiful and awesome

By this important article you teach that How you add beautiful borders to free blog blogger sidebars, I have checked that blogger sidebars are pillar of the blogger backgrounds, this useful article guide you about making handsome style of your blogger side bar and the look of your blogger template draw attraction to your visitors and readers. I think your blogger blog sidebars looking beautiful to visitors and they could be stay some time on your free blog blogger. If you want to add borders in Blogger header click here Now see the following tips and guidance.

1. Open your blogger blog go to Design and then Edit HTML and then search following code in your Edit HTML area.

.sidebar-wrap {
border: 5px solid #000033;
width:230px;
float:left;
margin:20px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

In light of above code add the above red code line in the above code and change the border colors according your blogger backgrounds sidebar for more guidance see the picture has given below I have already given black borders of my Blog Blogger Training side bar.

In view of the above change color HTML codes according your blogger templates, no problem if you have other blogger templates add only this line border: 5px solid #000033; in the above code if you want HTML color codes click here. Now save your blogger template and click on view blog your blogger blog sidebar looking more beautiful.

If you like this article and you like my suggestions please leave your comments.

How to Add Stylish Borders Around Free Blog Blogger Header

noreply@blogger.com (GM Qazi) — Thu, 22 Dec 2011 08:38:00 +0000

Summary: This article is about How to add Stylish and Awesome Borders around your blogger Header, really if you want to make more beautiful your blogger header this tip is very useful and profitable for new blogger owners and others

By this useful article you teach that How you add Stylish and Handsome borders to free blog blogger headers, in my experience blogger header is very useful and give attraction to your visitors and readers. If your blogger blog header is beautiful your readers and visitors could be stay some time on your blogger blog. So now you are ready to give shades and stylish border to your blogger blog I am describing and and giving some tips to you see the following suggestion.

1. first go to www.blogger.com and than Design and Edit HTML and then serarch following code in your Edit HTML area with carefully.

#header-wrapper {
background:$titleBgColor url("http://img403.imageshack.us/img403/1308/rounders3topcornercq4.jpg") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
border: 5px solid #FFD700;
height:200px;
color:$titleTextColor;
background: url(http://media.smashingmagazine.com/images/header-contest/fireball.jpg)
}

In view of the above code see the blue line of the above code and change the border colors according your blogger backgrounds see the following example:

border: 5px solid #FFFFFF;

According the above code line I have changed colors of my Blog Blogger Training header from Gold to White first the colors was in the above complete code line is gold #FFD700; and then I have changed colors in white #FFFFFF; if you want HTML color codes click here . One thing important is that if you are using other templates no problem search the above code and add the above blue line only, when you will see stylish borders around your blogger header for more guidance see the picture has given below header of Blog Blogger Training.

I hope you like this article please leave your suggestions and comments.

How to Modify Colors and Fonts to Free Blogger Templates for Better SEO Tips

noreply@blogger.com (GM Qazi) — Fri, 25 Nov 2011 05:00:00 +0000

Summary: This useful article about how to modify fonts and colors of free blogger templates for better SEO tips with easy and simple ways this article will be very useful for new blogger owners and you can take more profit , specially you have new blogger templates and want to change font and colors you can take advantage from this useful article

By this useful article you teach that how to modify fonts and colors of free blogger templates and blogger backgrounds with easy and simply, lot of visitors and blogger owners have new blogger templates and they like it and want to change fonts and colors of the templates with easy way. Now I am describing 02 main step by step suggestions and tips about modifying of colors and fonts of blogger templates.

1. No.1 Simple Way

Now go to www.blogger.com and then Design after that Edit HTML and check mark on "Expand Widget Templates" and search the following "Variable definitions" codes.

/* Variable definitions<br /> ====================<br /> <Variable name="mainBgColor" description="Main Background Color" type="color" default="#eec" value="#FFD700"><br /> <Variable name="mainTextColor" description="Text Color" type="color" default="#333" value="#333333"><br /> <Variable name="postTitleColor" description="Post Title Color" type="color" default="#333" value="#333333"><br /> <Variable name="dateHeaderColor" description="Date Header Color" type="color" default="#586" value="#558866"><br /> <Variable name="borderColor" description="Post Border Color" type="color" default="#bbb" value="#bbbbbb"><br /> <br /> <br /> <Variable name="mainLinkColor" description="Link Color" type="color" default="#456" value="#445566"><br /> <Variable name="mainVisitedLinkColor" description="Visited Link Color" type="color" default="#234" value="#223344"><br /> <br /> <Variable name="titleBgColor" description="Page Header Background Color" type="color" default="#357" value="#335577"><br /> <Variable name="titleTextColor" description="Blog Title Color" type="color" default="#fff" value="#ffffff"><br /> <br /> <Variable name="topSidebarHeaderColor" description="Top Sidebar Title Color" type="color" default="#fff" value="#ffffff"><br /> <Variable name="topSidebarBgColor" description="Top Sidebar Background Color" type="color" default="#586" value="#558866"><br /> <Variable name="topSidebarTextColor" description="Top Sidebar Text Color" type="color" default="#fff" value="#ffffff"><br /> <Variable name="topSidebarLinkColor" description="Top Sidebar Link Color" type="color" default="#fff" value="#ffffff"><br /> <Variable name="topSidebarVisitedLinkColor" description="Top Sidebar Visited Link Color" type="color" default="#fff" value="#ffffff"><br /> <Variable name="bottomSidebarHeaderColor" description="Bottom Sidebar Title Color" type="color" default="#abc" value="#aabbcc"><br /> <br /> <Variable name="bottomSidebarLinkColor" description="Bottom Sidebar Link Color"type="color" default="#99ddbb" value="#99ddbb"><br /> <Variable name="bottomSidebarVisitedLinkColor" description="Bottom Sidebar Visited Link Color" type="color" default="#ffffff" value="#ffffff"><br /> <Variable name="bodyFont" description="Text Font" type="font" default="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif"><br /><Variable name="pageTitleFont" description="Blog Title Font" type="font" default="normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif"><br /> lt;Variable name="descriptionFont" description="Description Font" type="font" default="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif"><br /> <Variable name="headerFont" description="Sidebar Title Font" type="font" default="normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif"><br /><Variable name="postTitleFont" description="Post Title Font" type="font" default="normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif" value="normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif"><br /> */<br />

I advice that see above HTML Variable definitions codes all the colors of blogger like back ground color, description color, link, title color, and many other colors related with blogger templates and all have been defined and most of the font types used in blogger too are defined. I have tested that this is the position to describe the colors in blogger codes and has been prepared easy in to adjust excessively. At the present time we are using professional free blogger templates designed by different bloggers. So they typically describe only some colors here according to there design and most are given while when they are writing codes for exacting part like for header or sidebar.

This is great lesson if you read carefully above codes, you can easily read and see the words like text color, bgcolor, link color defining background color of template, text color of template and link color of template etc are very essential to adjust your free blogger template. In the same way all the below lines too, you can read and understand for which part it is defining the colors. Now you should be think that and keep in thing in mind you want to change colors above Variable definitions codes what you have to do, do not worry read the following with carefully.

<Variable name="bgcolor" description="

Page Background Color"

type="color" default="# 586"

value="# 558866 ">

This is very easy now you want to change page background color just you have to modify the green code in above line with your color code you want, like as #558866 is for green and #3E0ACB is for Blue. How to change more HTML color codes click here.

2. No.2 Simple Way

No problem my friend it it is very easy way to change the colors of blogger templates go to Design after that Edit HTML and search following code in your blogger template.

body {
background:$bgcolor;

Ok no problem you have search above code and want to change background colors now you require HTML color code click here and select the HTML color code according your requirement and you have selected this HTML color code #558866, now how change above code see the following examples like:

body {

background-color:#558866;

It is Ok you have succeeded to change back ground color and want to change Sidebar color see the following code and example for your guidance.

#sidebar-wrapper {

background-color:#558866;

After that if you want to change main post column color see the following example:

#main-wrapper {

background-color:#558866;

If you like this article please leave your comments.