How To Remove Low paying Adsense Ads

To increase your Adsense Earnings by removing the lowpaying adsense ads from your account,follow the steps below.

1.First go to www.adsblacklist.com .

2.Now Signup for a account.it's free and very simple.

3.Now login to your account.

4.Now Click on My Account.

5.Now click on 'Add New Domain'

6.Submit your URL,TITLE and Keywords.Look at the example below.

7.Now go to Generate Filter List.

8.Drag and drop your domain name into 'Keywords from selected domains:' box.Then you can see keywords,you give in step 4.

9.Now select 'MFA' and 'LCPC'.

10.Now click on Submit.

11.They will give you lowpaying ads urls.copy these urls.

12.Now login to your Google Adsense Account.

13.Click AdSense Setup.

14.Go to Competitive Ad Filter category.

15.Paste lowpaying ads urls into the box and click save changes.

16.Now google will not display low paying ads in your site.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
Make Money With Adsense Keywords and Blogger
5 Easy Ways to Make Money from Blogger
Bloggers Guide to Google Adsense Myths

Read Full Post ...

How To Host Javascript Or .Js Files On Blogger Itself

How To Host Javascript Or .js files on Blogger, yes as blogger supports javascript which makes blogger support all the possible hacks in this platform, where to host this javascript on blogger.
                                        The Problem we all face is getting an free server with unlimited bandwidth to host these javascripts. As blogger doesn't provide any source to host javascript for blog like it has provided picasa for images.As of before we all were using googlepages to upload the .js files but google closed this service and switched to google sites.As still we can upload these .js files to google sites but just upload it with file extension .txt instead of .js .OR we can upload .js files to Google Code

The best solution to host your javascript on blogger itself

For External Javascript the code is

---

<script src='http://Your-Script-Url/file.js' type='text/javascript'/>

---

Whenever you are trying to implement some hack making use of javascript you would have mostly been asked to download the .js file and upload to your own server,get its url and then replace it with red link in above codes shown above,and then place the whole above codes in blogger html before closing of head tag.

So why don't we upload these javascripts to blogger itself.Just what you have to do is,whenever you are asked to do this kind of above stuff while implementing any hack.

Just use below code in place of above one.

---

<script type='text/javascript'>
//<![CDATA[
<--Paste all code here from .js file -->
//]]>
</script>

---

Just in place of "<--Paste all code here from .js file -->" line in above code what you have to do is just open the .js file (which you are asked to download or upload to your own server) in notepad or on your browser , copy its code and paste it in place of above red line.And your javascript codes are now ready which are now hosted on blogger itself instead of hosting to third party server.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Adding Numbered Page Navigation Bar For Blogger Blogspot Blog

Hi all, today we are going to learn how to add page navigation bar with numbers for blogspot blogs,

i’m sure that most of you have a lot of posts and the default blogger way to navigate between new post and old post is boring. what if your visitors wants to read for your oldest posts?
should he keep clicking on “older posts”, No.
You should apply this hack for your template, it’s one of the most useful blogger tricks ever.

so lets see how to do it.

Caution : Please backup your template (Download Full Template) Before making any changes.

Step 1: Adding The CSS Code.

Log into your blogger account and go to,

Dashboard >> Layout >> Edit html.

And find the following code.

---

]]></b:skin>

---

And just before it Add the next code

---

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

---

Step 2: Adding The Java Code.

Find the next code Or some similar code

---

<b:section class=’main’ id=’main’ showaddelement=’yes’>

<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>

</b:section>

---

And After the </b:section> Tag add the next code.

---

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=10;
  var displayPageNum=6;
  var upPageWord ='Previous';
  var downPageWord ='Next';


function showpageCount(json) {
  var thisUrl = home_page_url;
  var htmlMap = new Array();
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';





for(var i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);


  var title = post.title.$t;

 if(title!=''){
  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
  if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
  }

  if(title!='') postNum++;
  htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;
  }
  }
  itemCount++;

  }

  for(var p =0;p&lt; htmlMap.length;p++){
  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
  if(thisNum==2){
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  if(p==0){
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;';

 }else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }

  if(thisNum&gt;1){
  html = ''+upPageHtml+' '+html +' ';
  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;

  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  }

  if(postNum==1) postNum++;
  html += '&lt;/div&gt;';


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
  html ='';
  }

for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }


}


function showpageCount2(json) {

var thisUrl = home_page_url;
  var htmlMap = new Array();
  var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
  thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= '';
  var upPageHtml ='';
  var downPageHtml ='';



var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
  var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);



  var title = post.title.$t;

 if(title!=''){
  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
  if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
  }

  if(title!='') postNum++;
  htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;

  }
  }
  itemCount++;
  }

  for(var p =0;p&lt; htmlMap.length;p++){
  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
  if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  if(p==0){
  html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';
  }else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }

  if(thisNum&gt;1){
  if(!isLablePage){
  html = ''+upPageHtml+' '+html +' ';
  }else{
  html = ''+upPageHtml+' '+html +' ';
  }
  }

  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;

  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  }

  if(postNum==1) postNum++;
  html += '&lt;/div&gt;';

  var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
  html ='';
  }

for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }

if(blogPager){
  blogPager.innerHTML = html;
  }


}


</script>

<script type='text/javascript'>

 var thisUrl = home_page_url;
  if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
  }

 var home_page = &quot;/&quot;;
  if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
  document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }
  }
  </script>

---

And Click “save template”

Here is the sample how it looks alike after sucessfuly done above steps :

---

In the above code you may only edit four lines to customize your navigation bar.

---

var pageCount=10;

---

In this code Number 10 control the number for posts per page, you can change it to choose how many posts per page you want to display.

Note : This Number value should be the same With in your blogger account settings
The settings can be found by going to Dashboard >> Setting >> Formatting >> Show >> 10 posts

---

var displayPageNum=6;

---

Number 6 here control the number of pages that will be shown in the navigation bar.

---

var upPageWord ='Previous';

var downPageWord ='Next';

---

if you want to change the language or just change it to any thing, please change Previous for example to Older


Final Step

Note: No need to do this final step if your page navigation bar is working fine.

This blogger trick my cause some problems if you use labels in your posts and to solve this problems you have to apply the next step for your template.

1. Add Label Gadget To Your Template by going to Layout >> page elements >> Add Gadget >> Select Labels and add it to your template.

2. go to, Dashboard >> Layout >> Edit html.

And find the following code.

---

<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

---

And replace it with the following code.

---

<script type='text/javascript'>

var lblname = &quot;<data:label.name/>&quot;;

lblname2 = encodeURIComponent(lblname);

var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;;

document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);

</script>

---

And Click “save template”

We are done.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

How To Change Blogger Mouse Cursors In Easy Way

I know a lot of blogger who want to control the look of every part of the blog, from template, to colors, font size, to style, and some people asked about changing the blogger mouse cursor, So today we are gonna talk about it in the easy way,

It can be done in only one step.

How to add it.

Caution : Please backup your template (Download Full Template) Before making any changes.

Go to your blogger account, And navigate to dashboard >> design >> edit html >>
And find the following code,

---

]]></b:skin>

---

And exactly before it, add the following code

---

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}

---

And now click Save Template

The above step will give you a mouse cursor just like the one in the above demo blog, And because the aim of this tutorial is to give you all control over your blog cursor, So you can just change the red part in the above code

http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif

To What ever cursor url you like, So the code should be

---

body, a, a:hover {cursor: url(Cursor-Url), progress;}

---

And the question now is how to get another cursors.

Free sources for +1000 ready to use mouse cursors.

On this 2 links you’ll find more than 1000 free and ready to use cursors well categorized, so you just browse and find your favorite one, once you found your favorite one, replace the red words in the above code with it’s url.

• Totally Free Cursors

• Cursors @ Fun Utilities

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

New Blogger App for mobile phones like iPhone, iPad, iPod Touch

Blogger has announced the new app for iOS (iPhone, iPad, iPod). It has got plenty of features and it really could come in handy for many of Blogger users. I have mentioned all the features of the Blogger App for iOS below.

Comes in Handy when you are on-the-go

The New Blogger App for IOS is useful while you are on-the-go. You can write a new blog post and publish it immediately or save it as a draft right from your iOS device (iPhone, iPad, iPod). You can also open and Edit the Blog Post that you actually started on your PC.

Easy to Add Photos

The New Blogger App for iOS really make it simple to add photos to your blog post. You can either add Photos from the Gallery or take a new App right within the Blogger App (I mean isn't it great news? ).

Add Labels and Location

You can also add Labels and Locations to posts in order to provide more details about a certain post.

Time to Download

You can download the Blogger App for free in the App Store (its for iOS versions 3.2 and above). Although the user interface is only available in English at this time, the app supports blog posts written in all languages. If you are Android user, download the Blogger App from the Android Market.



Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

How to Delete or Remove Posts From Blogger Blogspot Blog

I notice I get a lot of traffic to my blog from Blogger Blogspot webmasters searching for tutorials on how to delete or remove posts from blogspot  so this has prompted me to write this post about deleting a Blogger blog. As most of us are trying to get our blogs up and running this post may not be very useful for you right now however you may have occasion in the future to want to delete a post so read on in case the day comes when you need to know what you do.

How to Delete or Remove Posts From a Blogger Blogspot Blog:
 
1. Login to Blogger if you are not already logged in

2. From the Dashboard select the blog from where you wish to delete or remove posts. Make sure you are in the right place if you have more than one blog

3. Navigate to Postings > Edit Posts


4. There you will find one or more posts, select which post you want to delete and press delete selected or delete as shown in the picture below :

5. A conformation will appear in the next step, press delete to delete post,
    selected posts name will also appear there, check name of the post you want to remove and press cancel if you dont want to remove that post. (picture given below)

In this tutorial we have covered some basic steps involved in actually deleting or removing a post from Blogger Blogspot blog.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

How To Delete a Blogger Blogspot Blog

Read Full Post ...

How to Remove or Change the Blog Title Border in Blogger (Blogspot) - Minima Template

In this Blogger tutorial I discuss how to change the blog title border color or remove the border in a Blogger template (Blogspot template) by changing either the CSS styling of the border manually or by using the Blogger Template Designer feature. 

Lots of bloggers have updated their Blogger template to the new default series of Blogger templates for 2010. There are however many of you who are still using the default Minima template from 2006 (and there are lots of good reasons to do so) so this tutorial is for you and anyone else who is using a custom Blogger template based on Minima.

You will learn how to change the border styling around the blog title to suit your individual requirements. You can either change the border color or remove the border altogether. If you want to remove the border around images in Blogger posts (Blogspot posts) then please refer to my Blogger tutorial How to Add, Change or Remove the Border Image in Blogger Posts

Remove or Change the Blog Title Border in Blogger (Blogspot)
There are two simple ways to remove the border around the blog title in Blogger. We are going to hide the border rather than actually remove the code that creates it by making the border color transparent. I will also show you how to change the border color.

Method 1 discusses how to do this using the Blogger Template Designer while Method 2 describes how to change the blog title border manually by changing the code.

Method 1 - Using Blogger Template Designer

1. Log in to Blogger
2. From the Dashboard go to Design > Template Designer
3. Go to Templates > Advanced > Border Color
   
   
   
4. Choose the down arrow color picker to activate the color palette window
5. Choose transparent which is below the color palette to remove the border around the blog title completely. You now will see the blog title border disappear. Or choose a new color from the color palette to change the color
   
   
   
   
   Remove Blog Title Border
   
   
   Change Blog Title Border Color
6. Click on Apply to Blog to save your changes

Method 2
If the Blogger Template Designer is not working on your template for some reason you can tweak the code in your template to remove the border around the blog title

1. Log in to Blogger
2. From the Dashboard go to Design > Edit HTML
3. Back up your Blogger template
4. Find the border color variable which will be near the top of the template code
   
   
   
5. Change the border color value to transparent to remove the border altogether so that your code now looks like this:
   
   

   ---

   <Variable name="bordercolor" description="Border Color"
   type="color" default="#ccc" value="transparent">
   

   ---

   
   
   or change the value to a color of your choice eg
   
   

   ---

   <Variable name="bordercolor" description="Border Color"
   type="color" default="#ccc" value="#ff7f00">
   

   ---

6. Save your template and view your blog to see that the border around the blog title has been removed or changed color
   
   
   

Tips and Troubleshooting
Below are some tips to help you further customize the blog title border width. You can either remove the inner border, thicken the outer border or thicken both borders around the blog title in Blogger.

1. To change the width of the border around the blog title in Minima change the following:
   
   #header {
   margin: 5px;
   border: 1px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }
   
   to
   
   #header {
   margin: 5px;
   border: 10px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }
   
   This code increases the border width from 1px to 10px
   
2. To remove the inner border around the blog title in Minima change the code to the following:
   
   #header {
   margin: 5px;
   border: 10px solid $bordercolor; (remove this line)
   text-align: center;
   color:$pagetitlecolor;
   }
   
3. To increase the width of the outer border around the blog title in Minima change this code
   
   #header-wrapper {
   width:660px;
   margin:0 auto 10px;
   border:10px solid $bordercolor;
   }

In this Blogger tutorial you have learned two methods to change the color of the border around a blog title in Blogger blog (Blogspot blog). I have also shown you how to increase the size of the border width. This tutorial applies particularly to the default Blogger template Minima but also is relevant for any blogger using a custom Blogger template based on Minima. Good luck!


Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template

Read Full Post ...

Add or Change Background Image of a Blogger Template

In today's Blogger tutorial (Blogspot tutorial) I will show you how to both add a background image to a Blogger template if you don't have one already or change the existing background of your Blogger template.

I have chosen to write this article not because there aren't any how to articles already on the net but because they assume quite a bit of knowledge. I have taken a different tack with this post in that I assume you are an absolute beginner with no knowledge of Blogger templates.

For this reason I have provided some sample backgrounds for you to play around with. By just cutting and pasting these images you can see first hand how dramatically adding a different background to your Blogger template can change it. You will see that replacing your background image with these images isn't that difficult and hopefully it will give the confidence to branch out further and change the background of your Blogger template to suit your own needs. All that is needed is to insert a small snippet of code into the CSS styling section of your Blogger template and hey presto your Blogger template will take on a whole new look.

How to Change the Color of a Blogger Background (Default Templates)
If you are using a default Blogger template then you already have the option to change the background color to your own taste by going to Layout > Fonts and Colors. Some third party custom Blogger templates have this option too but by no means all. For instructions on changing the background color of custom templates see tips and troubleshooting below.

How to Add a Background Image to a Blogger Template

1. Log in to Blogger if not already logged in
   
2. Go to Layout > Edit HTML
   
3. Back up your Blogger template as a precaution by downloading the full template to your computer
   
4. Find the following line in your Blogger template
   
   

   ---

   body {
   

   ---

5. Add the following line directly after this line
   

   ---

   background-image: url(URL address of your image);
   

   ---

   
   Your block of code will now look like this:
   
   

   ---

   body {
   background-image: url(URL address of your image);
   (existing code in this block)
   }
   

   ---

6. Now replace the code in red for the URL address of your image. Choose an image from the selection below to practise with or use your own image. Note if using your own image make sure you read the tips and troubleshooting section below.
   
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgShjUVVU6KrD2wITJSA2Hz9JG9YynKZCuJyMNH5gmcN98pnwUlx4hHq3X7Cf3sBblDxyoiSKNaxqygdvTJRrUwclBzpla598JSg8uGh3L0t2ncE4pwvQzg5zLiPgIdY9RPwtUslXSisfbd/s320/green-paws%255B1%255D.gif
   
   
   
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3hPGYrpKVXKjj9yePNa4ci1SmqDsG79lelMql6fZtoBxhUhksntgD9MglQigl-EOMnmaUtKX_zrKgTooZ4GYeGZ_3VbuvzKWieBRTqzJhVoTr1YvpQpwuNrt48LzSkZh6zowB5aXV5ejP/s320/melody%255B1%255D.gif
   
   
7. Use the Preview button to see the effect of these different backgrounds on your template. It will help you get an idea of the kind of possibilities out there.
   
8. You are welcome to use one of the above Blogger backgrounds as they are all free to use without any restriction. If you decide to use one of these simply click on Save Template and you are in business. Alternatively go ahead and find your own background image on the net and follow the instructions below to insert it into your Blogger template.

Tips and Troubleshooting

• To Add Your Own Image to a Blogger Template
  There are huge number of backgrounds on the net that are suitable for Blogger. Search under free website backgrounds in your favorite search engine to find these.
  
  Simply download your preferred background and save to an image service like Photobucket, Flickr.
  
  Make sure the file format is either a .jpg, .gif or .png and that its size does not exceed 100kbs. As a rule of thumb an image size of around 30kb or less is about right if loading time speed is not to be compromised. Larger images can be resized quickly by using an online resizing service such as Shrink Pictures.
  
  Follow the instructions above to change the URL to that of your image.
  
• To Change the Background Color of Your Custom Blogger Template
  If there is no option to change the background color of your Blogger template in Layout > Fonts and Colors you can still change the color manually.
  
  
  1. Follow steps 1 to 4 as above
     
  2. Find the line beginning with :
     
     

     ---

     background-color: #
     

     ---

  3. The hex color will be different for each template. We will change the color only
     
     

     ---

     background-color: #change hex color code to your chosen color;
     

     ---

  4. Replace the existing hex color code with the value of your chosen hex color. List of web safe hex colors. For example insert the following code to change the background color to:
     
     Denim Blue
     

     ---

     background-color: #336699;
     

     ---

     
     Black
     

     ---

     background-color: #000000;
     

     ---

     
     White
     

     ---

     background-color: #ffffff;
     

     ---

  5. Use the Preview button to see the effect of each color before you save it.
     
  6. Once you are satisfied go ahead and click on Save Template

Today's Blogger tutorial (Blogspot tutorial) aimed at Blogger beginners continues the series on CSS styling for Blogger. You have learned how to add the background image to your Blogger template or change the existing background image. To help you gain confidence in changing the background image I have provided some sample images for you to practise with. Also in this Blogger tutorial you have learned how to change the color of your Blogger background if you prefer a plain solid background color rather than a background image. As always if you strike any problems implementing the tips in this tutorial please let me know.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts

Read Full Post ...

Add a Post Divider Between Blogger Posts

In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create. 

This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.

By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics. Here are some sample dividers you can use to get started:

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8_1EklQciC3zXz2htRixi1q2ZDNNDDfjbRj3X46HWRkavQcMsV6SO-8KhvqMLHww8nX5wo2LhRk4mciyl9cS3WM2uCYg1KnzjTpGZ65V8wGPNSN6FpUKFe2NkYDKKslSuixpqWH_JffD/s320/ribbon%255B1%255D.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-T0h_MRBO7M43KwgfnuiTWEnHFodQTKQImgG1jZVjWFoip5YmQ4j5fU8N_jlThDOrN6Sf855PeYqMxQzTNmLWcr3nIrvERpGMkGLMFrt8O4ICUvfmGwxi2lYSs8wTG-z3AUEtN8CZDTWv/s320/bar1%255B1%255D.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEfRUVTK5IBlCyvkCBfo9TIOiAOnuESPuzVrtDNVbsSV7vnDWMcOY4eGQPvk6xvahYgIHuCFJBmjNTv1VpaxneJjVTG7tZYwWuJ2Qjuk1B5fj0E5LCRQKDqXrJH6spam83Y5dFSt8IcX84/s320/barbsmpl%255B2%255D.jpg

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTnAUsxZzQ3XsRisy8-8Q7SbK_XA1J1CLsHYt0m4Oj1whkivzzoRBDi3C2f2gMImr8bSCQPWLeLVrNDPyOwnZXWQ3r3NkCWMod5LrAcQgDDES9JS0HGbarxN1Ww9_-XtXtwjUSjjp2KKqR/s320/bar47%255B1%255D.gif

How to Add a Divider Between Posts in Blogger

1. Login to Blogger if not already logged in
   
2. From the Dashboard navigate to Layout > Edit HTML
   
3. Back up your Blogger template as a precaution by downloading it to your computer
   
4. Find the following line of code in your template:
   
   

   ---

   .post {
   
   
   You are likely to have something like this in your template already:
   
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   }
   

   ---

5. Paste the following lines of code to this block making sure you paste them before the closing curly bracket:
   
   

   ---

   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8_1EklQciC3zXz2htRixi1q2ZDNNDDfjbRj3X46HWRkavQcMsV6SO-8KhvqMLHww8nX5wo2LhRk4mciyl9cS3WM2uCYg1KnzjTpGZ65V8wGPNSN6FpUKFe2NkYDKKslSuixpqWH_JffD/s320/ribbon%255B1%255D.gif);
   background-repeat: no-repeat;
   background-position: bottom center;
   margin:.5em 0 1.5em;
   padding-bottom:1.5em;
   

   ---

6. If any lines are duplicated remove them.
   
7. Remove any line beginning with: border-bottom: eg
   
   

   ---

   border-bottom:1px dotted $bordercolor;
   

   ---

8. You will now have a block of code which looks like this plus any extra lines from the existing code in this block:
   
   

   ---

   .post {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr8_1EklQciC3zXz2htRixi1q2ZDNNDDfjbRj3X46HWRkavQcMsV6SO-8KhvqMLHww8nX5wo2LhRk4mciyl9cS3WM2uCYg1KnzjTpGZ65V8wGPNSN6FpUKFe2NkYDKKslSuixpqWH_JffD/s320/ribbon%255B1%255D.gif);
   background-repeat: no-repeat;
   background-position: bottom center;
   margin:.5em 0 1.5em;
   padding-bottom:1.5em;
   }
   

   ---

9. Click on Save Template to save your changes
   
10. Click on View Blog to see your new post divider between posts

Tips and Troubleshooting

• To change the divider to one of the above replace the URL address of the image (in red) with the URL address of the new image you want to use.
  
• To use your own divider image download to your computer from the internet and then save the image to a photo image service like Photobucket. Replace the divider image URL address (in red) with the URL address of your new image
  
• To increase the padding around the divider change the following line of code:
  
  

  ---

  padding-bottom:1.5em;
  
  
  to
  
  
  padding-bottom:2.5em;
  

  ---

In today's Blogger tutorial you have learned how to insert a divider between your Blogger posts to enhance the look of your Blogger template (Blogspot template). You can either make your own post divider or download one from the myriad of free website dividers available on the net.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger

Read Full Post ...

How to Align and Justify Blogger Posts

This is the second article in a series about CSS styling tricks and tips for Blogger written with Blogger beginners and novices in mind but suitable for all bloggers who want to customize their existing Blogger template. While the first article dealt with how to add or remove image borders in Blogger today I show you how to align and justify Blogger posts.

Skill Level: Beginner

Rating: Easy

Time: 1 Minute

Many of the questions that my readers ask me are about how to customize various features of their Blogger template (Blogspot template). Over the coming weeks I will be focusing on some simple CSS styling tricks and tips to help you get more out of your Blogger template. Much can be achieved by learning a little about CSS. So before you rush off to download a custom Blogger template consider customizing your existing Blogger template.

This tutorial is part of a series of articles that I will publishing over the coming weeks about customizing your Blogger template using CSS styling. I will be targeting beginner bloggers and newbies to Blogger as well as more seasoned bloggers so if you want to spice up your Blogger template please read along.

How to Justify Blogger Posts (Blogspot Posts) Using CSS
It is easy to change the text alignment of your Blogger posts with the addition of one extra line in the CSS styling section of your Blogger template (Blogspot template). By default the alignment is set to left align so that the text aligns to the left while the right edge is ragged. You can also have right alignment where the text aligns to the right and the left edge is ragged.

Another not so common option is to justify the text so that both left and right edges are straight. Users of MS Word and other word processing programs will be familiar with justify as an alignment choice. Justify stretches out the text so that each line has an equal width similar to what you will find in newspapers and magazines. I have found justifying my Blogger posts to be a useful feature on several of my blogs and thought some of you might to. Below are instructions on how to justify your Blogger posts so that all your blog's articles are justified but first take a look at the difference in presentation of these 2 blog posts just by justifying the alignment of the text. Makes a big difference don't you think?

---

1. Before you start check how text is currently aligned on your Blogger posts. If it is left aligned you will be able to follow this trick to justify it. If it is already justified no need to go any further.
   
2. Login to Blogger if not already logged in
   
3. From the Dashboard click the Layout link for your blog and then click on Edit HTML
   
4. Back up your template by downloading it in full as a precaution
   
5. Use CTRL + F to find the code block beginning with .post in the CSS styling section of your Blogger template. As templates will differ greatly there are no hard and fast rules about what styling will be in this block. Here is a typical code block taken from the default Minima Blogger template
   
   

   ---

   .post {

   margin:.5em 0 1.5em;

   border-bottom:1px dotted $bordercolor;

   padding-bottom:1.5em;

   }

   ---

6. Add the following line to the code block before the end brace (the end curly bracket)
   
   

   ---

   text-align:justify;

   
   

   so that your code now looks like:

   
   

   .post {

   margin:.5em 0 1.5em;

   border-bottom:1px dotted $bordercolor;

   padding-bottom:1.5em;

   text-align:justify;
   

   }

   ---

7. Click on Save Template
   
8. Click View Blog to see the alignment of all your posts has now changed to justified

Tips and Troubleshooting

1. If your Blogger template justifies posts and you would like to left align them find the code beginning with .post in your Blogger template and add the following line to the block:
   
   

   ---

   text-align:left;

   
   

   so that your code now looks like:

   
   

   .post {

   margin:.5em 0 1.5em;

   border-bottom:1px dotted $bordercolor;

   padding-bottom:1.5em;

   text-align:left;
   

   }

   ---

2. If you want the posts right aligned you would substitute the word right for left.

In this tutorial you have learned how to justify your Blogger posts to create a straight rather than ragged margin edge. By using this tip to add one line of code to your Blogger template you can enhance the look of your Blogger posts. This tweak only takes a minute but can markedly improve the presentation of your Blogger posts. Please keep reading along for more CSS tips and tweaks in the coming weeks.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders

Read Full Post ...

Guide to Blogger Blogspot FAQs

Guide to Blogger Blogspot FAQs. When you are looking for help with Blogger Blogspot you want to get that help as fast as possible that's why I have created a list of the most commonly asked questions by visitors to my blog. Use this post as a ready resource for all your frequently asked questions about blogging using the Blogger Blogspot blogging platform.

• Banners and Advertising
• Building Site Traffic
• Common Blogger Problems Fixes
• Customize Blogger
• Gadgetize Blogger
• Google Adsense
• Monetize Blogger
• Posting and Commenting
• Publicize Blogger
• Search Engine Optimization
• Social Media
• Tracking Site Visitors

Banners and Advertising FAQ
Where can I post a banner on Blogger Blogspot?
It is possible to add an affiliate banner to Blogger in a number of places. You can add a banner to the Blogger, above the header, above the first post, within a post, below a post, in a sidebar, and in a footer.

How do I place an advertising banner in a Blogger header?
Add an Affiliate Banner to the Blogger Header

How do I place an advertising banner in a Blogger sidebar?
Add an Affiliate Banner to Blogger Sidebar

How do I place an advertising banner above the Blogger header?
Add Google Adsense or banner above the Blogger header


Build Site Traffic
How do I encourage more visitors to my blog?
Find 10 hot tips to help you get visitors to your Blogger Blogspot blog
10 Tips to Build Traffic to a Blogspot Blog

Why do I need to add my blog to blog directories?
It is not essential to add your Blogger blog to blog direcories but it is a good idea since they are a valuable link and a ready source of traffic for your blog and Submit a Blogger Blog to Blog Directories

What blog directories should I add my blog to?
There are many blog directories on the net and more springing up all the time. For some recommended blog directories check out this article:
Submit a Blogger Blog to Blog Directories


Common Blogger Problem Fixes
How do I remove the navbar from Blogger?
You can't actually remove the Blogger navbar but there is a trick to hide it.
Hide Remove Blogger Navbar

How do I reinstate a deleted Blogger navbar?
I am often asked how to fix a deleted Blogger navbar. Find the solution in:
Hide Remove Blogger Navbar

How do I fix the missing comments form below posts? 
Many custom templates were created prior to Blogger embedding the comments form below posts. For details on how to upgrade your Blogger template to include an embedded comments form below posts on the single post page please refer to:
Add Missing Embedded Comments Form to Blogger

How do I fix the missing add a gadget in the layout screen?
If you can no longer see Add a Gadget in Layout > Page Elements then there is very likely a problem with your browser cache. Check out:
Missing Add a Gadget Solution in Blogger


Customize Blogger
How do I add categories to Blogger?
Blogger doesn't have categories only labels. If you want to add a categories section you can using a linked list but you will need to update it manually.
Add a Categories Section to Blogger

How do I add a list of recent posts to Blogger?
By making use of your blog's feed you can display the 5 most recent posts on your blog.
Add a Recent Posts Feed to Blogger

How do I display a list of recent comments on Blogger?
By making use of your blog's feed you can display the 5 most recent comments on your blog.
Add a Recent Comments Feed to Blogger


Gadgetize Blogger
How do I add a Live Traffic feed to my blogger Blogspot blog?
If you insert a free live traffic feed like Feedjit on your blog you will be able to watch visitors arrive at your blog in real time and gather information about where they came from, where they exited to, eearch engine keywords and keyword phrases used to access your blog.
Add Feedjit Live Traffic Feed to Blogger

How do I add a ratings widget to Blogger?
If you've seen star ratings on blogs you've visited lately and you would like to add one to your blog check out my article on the Outbrain ratings widget:
Add Outbrain Ratings Widget to Blogger

How do I add a bookmarking button to my blog?
Your visitors can share your posts with friends and add an online bookmark with an Add This Social Bookmarking button
Add a Social Bookmarking Button to Blogger

How can visitors subscribe to my blog?
You can encourage readers to sign up to regular updates of your blog by adding a subscribe button or link to your blog.
Add an Email Subscription Form and Links to Blogger Blogspot Blog


Google Adsense FAQ
Can I put Google Adsense on my Blogger Blogspot blog?
Yes you most certainly can. Unlike other online blogging platforms like Wordpress Blogger permits Blogger publishers to add Google Adsense to any Blogger blog. However be aware that spam blogs - that is blogs specifically set up to make money from Google Adsense are prohibited by Blogger.

How much money can I make from Google Adsense?
If your blog receives enough traffic (75+ visitors per day) you will be well placed to earn revenue from your Blogger Blogspot blog. Want to know more refer to:
Google Adsense Myths for Blogger Blogs

How Many Google Adsense Ad Units Can I Place on a Blogger Blog?
Google allows 3 content ads, 3 link ads and 2 search boxes on any given page. These rules are subject to change so if in doubt check Google Adsense FAQ.

How do I add Google Adsense to Blogger?
You will find many tips on the basics of adding Google Adsense to Blogger in this article:
Google Adsense Tips for Blogger

Where should I place Google Adsense on Blogger?
Better Placement of Google Adsense on Blogger
Blogger Guide to Google Adsense Placement


Monetize Blogger
How do I add a donate button?
Adding a Paypal donate button to a Blogger Blogspot blog will encourage satisfied visitors to say thanks.
Add a Paypal Donate Button to Blogger

How do I make money from my Blogger blog?
5 Easy Ways to Make Money from a Blogger blog


Posting and Commenting in Blogger
Why do the links to my post titles get shortened?
When you publish an article in Blogger a permalink gets created. If the title of your post is longer than about 35-40 characters Blogger shortens it. Check out this article for ideas on how to work around this issue
How to Create Search Engine Friendly Permalinks

How do I post date my posts?
Blogger allows publishers to post date their posts. Read the following article to find out more about how to set a future publishing date for a post
Choose Your Own Blogger Post Date

How do I date my posts with a date that has already passed?
Blogger will let you set a date for a post in the past, present or future. Find out more by reading the following article:
Choose Your Own Blogger Post Date


Publicize Blogger
Why is it important to burn my Blogger feed?
there are quite a few reasons reasons why it is a good idea to burn your Blogger Blogspot feed at Feedburner check out this article to find out more:
Blogger RSS Feeds and Feedburner

How do I burn my Blogger feed at Feedburner?
If you would like to burn your Blogger feed at Feedburner to build readership of your blog then this indepth article will show you how:
Burn Blogger RSS Feeds at Feedburner

How do I add a FeedFlare to a Blogger feed?
Not only will a Feedburner FeedFlare encourage your visitors to share your posts on various social media sites it will also copyright your material if you add this notice to the bottom of your posts. Learn more about Feedburner FeedFlares:
Add a Feedburner FeedFlare to a Blogger Feed


Search Engine Optimization
How do I get my Blogger Blogspot blog listed by major search engines?
If you wait for search engines to crawl your blog it may take a long time to appear in search engine results. You can speed up this process by submitting your blog and a sitemap to major search engines. Find out more:
Add Your Blog to Major Search Engines

How do I get listed by Yahoo?
For instructions on how to let Yahoo know about your blog and add a Blogger sitemap to Yahoo follow this guide:
Submit Your Blogspot Blog to Yahoo


Social Media
How do I add bookmarking button to my blog?
There are a number of ways to add social media to your blog. One easy way is add an all in one social bookmarking button by Add This.
Add a Social Bookmarking Button to Blogger

How do I add Twitter Links to Blogger?
How to Add a Twitter badge to Blogger
How to Add a Twitter Followers Counter to Blogger


Tracking Site Visitors
How do I know who is viewing my Blogger Blogspot blog?
There are a number of programs that can help you track visitors to your blog. One of the best, Google Analytics is provided free by Google. For more about Adding Google Analytics to a Blogger Blog

What gadget lets me watch visitors as they arrive?
If you want to see visitors arrive at your Blogger Blogspot blog you can put a free Feedjit live traffic feed widget on your Blogger sidebar.
Add Feedjit Live Traffic Feed to Blogger


Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...