How Blog Works (www.howblogworks.com): Blogger Tutorials

Showing posts with label Blogger Tutorials. Show all posts

Thursday, October 06, 2011

How to Setup Your own Domain to Blogger Blogspot Blog

                               Today I am bit excited to get my new domain www.howblogworks.com, I just buy domain to teach you how to setup your own domain to blogger, as in previous tutorial I taught you How to Buy Custom Domain For Your Blogspot Blog Via Blogger and in this tutorial we will learn How to Setup Your own Domain to Blog Blogger Blogspot.

There are 2 ways to do it,

    1. Point your already owned and registered domain name to your blog.
    2. Buy new domain name via your blogger account.

Note:backup your template as well as your posts for precautions.

We’ll now talk about number 1.

1. Login to Blogger and navigate to Settings > Publishing.

2. FIND: Switch to: • Custom Domain

3. And click Custom Domain

for more detail check next image.

4. And click Switch to advance settings

5. Fill your domain name with www (eg. www.howblogworks.com) and click save settings.

6. At very next same on this page and check "Redirect" and save settings again.

Now you are all done.

7. Now you hav to setup your domain
you are just 1 step away

How to create a CNAME record for my custom domain

i am going to give you these two links that will guide you step by step according to your domain owner:
http://www.google.com/support/blogger/bin/static.py?page=ts.cs&ts=1233381
http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=58317

Note:after setting up cname, your domain will take minimum 2 hours to work, so be calm and your site will be down during these setup(2 hours).

Now your custom domain is setup.
You are done.

And of course you can use any domain owned for you from another web company, But in choosing custom domains, be sure to secure your sites with the best Web Hosting Solutions.

Note: after changing your domain remember to add/replace your new domain to feedburner,webmasters tool, google analytics as well as on all related SEO tools where you registered with your old domain, and google also redirect all your visitors who use old domain, so no need to worry about loosing visitors.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Buy Custom Domain For Your Blogspot Blog Via Blogger

Read Full Post ...

Sunday, October 02, 2011

Add background music to your blog

I was asked many times, how to embed background music in a blog. It's actually quite simple to do this, and there are various methods you can use.

In this post, I'll concentrate on actually embedding the music (rather than adding widgets such as Last.fm playlists). You can see an example of embedded background music here and also further down this page...

The easiest method of adding background sound is

Login to Blogger if not already logged in
Go to Design > Edit HTML
Back up your Blogger template as a precaution by downloading the full template to your computer
Expand Widget Templates by checking the box on the right hand side
Find the following line in your Blogger template by using CTRL + F:

<body>
Include a line like following in your blog template,just after the opening <body> tag.

<bgsound src="http://yoursite.com/yoursound.mp3" loop=infinite>

where the URL is that of the background music you wish to use. This method works perfectly well, but visitors to your site will not be able to switch the music off if it becomes distracting.

So instead, you may prefer to use this method instead, which is compatible with all browsers (press the play icon to start music):

This is achieved by including the following code somewhere in your template (eg: the sidebar widget):

<embed width="200" src="http://yoursite.com/yourmusic.mp3" autostart="false" loop="false" height="50"></embed>

You can change some of the variables to suit your needs:

autostart: set to "true" to make the music begin as soon as the page is loaded, or "false" to ensure the user has to press the play icon
loop: set to "true" to have the music play over and over, or "false" so that it plays only once.
height: if this is set to "40", only the play options will be visible. You can make this larger if you prefer, in which case blank space will be visible.

Using either method, you can link to .mp3, .mid or .wav music files. However, you must be aware of copyright restrictions, and ensure you have the appropriate permission for use for the music you decide to use!

Here are some sites I've used for copyright-free music you could use in your blog:

FreePlay Music
MonkeyFilter Wiki: contains links to many sites offering free music downloads.
FreeSound

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Saturday, October 01, 2011

How to Buy Custom Domain For Your Blogspot Blog Via Blogger

Many of us using blogger blogspot blog for blogging, because it is easy to use and editable, but after a while you want to your blog look more professional and more credible by Publish on a custom domain .Because some people think that yourblogname.blogspot.com used by newbies only. That’s not always true, of course.

There are 2 ways to do it,

Point your already owned and registered domain name to your blog.
Buy new domain name via your blogger account.

We’ll now talk about number 2.

Buy new domain name via your blogger account.
Now blogger makes it easier to convert your Blogspot Account into a .com Domain.
When you register a domain name via blogger account your Domain will be registered through a Google partner and cost $10 (USD) for one year.and as part of registration, you will also get a Google Apps account for your new domain.
and the great deal here is that YourBlogName.blogspot.com will redirect to your new custom domain. So you won’t leave your readers behind!

The first thing to do is to log into your blogger account,
Then got to Settings >> Publishing
FIND : Switch to: • Custom Domain
and click Custom Domain
for more detail check next image.

FIND : What address would you like your blog to have? Next to this you’ll find a small text filed, fill it by your custom domain name, and click Check Availability.

If the name you entered is Available you will navigate to
Choose a domain name (step 1 of 3) page
Click continue to registration
After that you’ll navigate to Sign up (step 2 of 3) page.
Enter the domain registration information for your chosen domain name.
(Note: This information will be listed in whois directory.)
Then click i accept, process to Google checkout.
If you already have credit card added to your Google account, you can easily press agree and continue
Or you have to add your billing information, credit card number and details to your current Google account.
Once you are finished press agree and continue.
Next review your purchase and press place your order now.
Now your custom domain is setup.
You are finish.
Note: it may take 2 for 3 days to your blog to transformation to your new domain.

Finally here is video helps you to do it in the right way:

And of course you can use any domain owned for you from another web company, But in choosing custom domains, be sure to secure your sites with the best Web Hosting Solutions.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Tuesday, September 27, 2011

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+'&max-results='+pageCount;
}
}
itemCount++;

}

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

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

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

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

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

if(postNum==1) postNum++;
html += '</div>';

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

if(postNum <= 2){
html ='';
}

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

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

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

}

function showpageCount2(json) {

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

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
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+'&max-results='+pageCount;

}
}
itemCount++;
}

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

fFlag++;
}

if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}

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

html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

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

if(postNum==1) postNum++;
html += '</div>';

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

if(postNum <= 2){
html ='';
}

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

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

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

}

</script>

<script type='text/javascript'>

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

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</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 = "<data:label.name/>";

lblname2 = encodeURIComponent(lblname);
var feedlink = '/search/label/' + lblname2+'?&max-results=10';
document.write('<a href="' + feedlink + '">'+lblname+'</a>');
</script>

And Click “save template”

We are done.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Monday, September 26, 2011

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

Thursday, September 22, 2011

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

Friday, September 02, 2011

How To Delete a 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 their blog 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 blog so read on in case the day comes when you need to know what you do.

Why Might I Want to Delete a Blogger Blogspot Blog?
There a variety of reasons why you might decide to delete your blog. Here are some common ones:

You have set up a test blog and have now finished with it

You are unhappy with the name you have chosen for your blog and wish to change it. Please note you can change the name of your Blogger blogspot.com subdomain for another subdomain name provided the address is available on Blogger. Or you can change to a custom .com domain name and have Blogger redirect your blog traffic to your new address. You may want to consider these options first before proceeding with deletion)

You have tried blogging and it is not for you and you want to get rid of your blog all together

How to Delete a Blogger Blogspot Blog
1. Login to Blogger if you are not already logged in

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

3. Navigate to Settings > Basic

4. If you think you may want to come back to your blog at a later date you can use the export tool to export your blog before you delete it. To export your blog click on Export Blog in the Blog Tools menu. If you aren't interested in exporting a copy of your blog to your home computer skip this step

5. Under the first heading Blog Tools click on the Delete Blog link

6. You will be taken to the Delete Blog screen in Blogger. Check again you have the right blog displayed by checking the name which should appear just above the row of menu tabs.

7. A warning message like the one pictured below will be displaying:

8. If you wish to proceed with the deletion then click on the Delete This Blog button

9. You will now be returned to the Dashboard. Notice that your blog is no longer displayed in the list of blogs. If you wish to view your deleted blog you can click on the Show All link at the bottom of the Manage Blogs list in the Dashboard

10. You will now be able to see your deleted blog including details of its deletion date. Follow the link provided to undelete this blog. Blogger allows you 90 days grace.

In this tutorial we have covered some basic reasons why you might want to delete a blog and the steps involved in actually deleting a Blogger Blogspot blog.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How To Delete or Remove Posts From Blogger Blogspot Blog

Read Full Post ...

Solution to Missing Add a Gadget Feature in Blogger

If you are experiencing problems with the Add a Gadget feature not showing up in the Layout Screen of your Blogger Blogspot blog then read on as I have found the solution to this annoying problem.

The other day I discovered to my horror I had lost the option to Add a Gadget in the layout screen of all my blogs in Blogger. Typically it couldn't have happened at a worse time as I had just planned to sit down to write some new posts. I looked in the Blogger help section for the solution but could find no reference to the problem. I eventually found the answer, after about 15 minutes, buried in the Blogger Help Group section. I thought I would therefore post a short tip for anyone out there looking for a quick answer to the loss of the Add a Gadget function from the Layout Screen.

Clear Your Browser's Cache
When the Add a Gadget feature is missing from you Layout screen and you have tried refreshing it probably means you need to clear the cache of your browser. In Internet Explorer 6 you would go to the Tools menu and choose Internet Options from the drop down menu. In the dialog box that appears select the General tab and then click on the Delete Files from the Temporary Internet Files Section (middle). Once done close the dialog box and refresh the Layout Screen in Blogger. With any luck you will now be able to see the Add a Gadget option once again. For other browsers follow the directions in the browser's help section on clearing the cache or check out Bloggers Help Article about clearing cache.

A short tip on how to fix the problem of add a gadget missing from the layout screen in Blogger.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Add 3 Column or 4 Column Footer to Blogger

In this Blogspot tutorial you will learn how to convert your existing Blogger footer (Blogspot footer) into a 3 column footer or a 4 column footer. With more columns in your Blogger footer you will be have the extra room to accommodate more widgets such as Flickr photos and Twitter updates. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first.

This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns or 4 columns. The tutorial is not beyond the capabilities of Blogger newbies and webmasters with intermediate skills but care needs to be taken when modifying your Blogger template so back up before you start. For best results a Blogger template with a width of around 900px is best.

How to Add a 3 Column Footer to Blogger

Log in to Blogger if not already logged in
Navigate to Layout > Page Elements
Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes
Navigate to Layout > Edit HTML
Back up your template as a precaution by downloading it to your computer
Find the following section in your Blogger template

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
To Add a 3 Column Footer to Blogger
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

To Add a 3 Column Footer to Blogger with a Lower Footer Section
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p/>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

To Add a 4 Column Footer to Blogger
Replace all the code located in Step 6 with the following

<div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Save changes to your Blogger template.
Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.
Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.
Click View Blog to admire your new footer section

Tips and Troubleshooting

To Add Padding Between Footer Columns in Blogger
To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.

#footer-columns {
clear:both;
}

.footer-column {
padding: 10px;
}
To Add a Border to the 3 or 4 Column Blogger Footer
- For Top Border Only of the 3 or 4 Column Footer
  Paste the following code before the </b:skin> tag
  
  #footer-columns{
  border-top:1px dotted $bordercolor;
  clear:both;
  margin:0 auto;
  }
  
  Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
  
  #footer-columns{
  border-top:1px dotted #113355;
  clear:both;
  margin:0 auto;
  }
- For a Box Border Around the 3 or 4 Column Footer
  
  #footer-columns{
  border:1px dotted $bordercolor;
  clear:both;
  margin:0 auto;
  }
  
  Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example
  
  #footer-columns{
  border-top:1px dotted #113355;
  clear:both;
  margin:0 auto;
  }

In today's Blogger tutorial you have learned how to add a 3 column footer or a 4 column footer to your Blogger template (Blogspot template). You have also learned how to add some styling such as a border above the footer and around the footer. As always I am available to answer questions if you need assistance. Good luck!

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
Customize Blogger Tips

Read Full Post ...

Add Email This Post Link to Blogger

In this article you will learn how to place an email this post link or button at the bottom of each post in a Blogger Blogspot blog.

You may have noticed that some blogs give readers the option below their posts to email the article to themselves or a friend via a link or button. This affords readers yet another way to have access to your posts and a link for them to find you if they want to call back.

This email link should not be confused with the subscribe by email link which once a reader is signed up to will give them regular updates of each post you publish. This email link on the other hand only emails the reader the single post they are interested in.

There are several ways to place an email this post link on your Blogger Blogspot blog. Here are three methods known to me.

Add Email This Post to Blogger - Method 1
The easiest method. Adds an email button to the end of each post.

1. Login to Blogger if not already logged in

2. Navigate to Layout > Page Elements

3. Within the template click the Edit link on Blog Posts

4. A pop up menu will open. Under Select Items check the box labelled Show Email Post Links

5. Click Save

6. Click on View Blog and scroll to the end of your post to see the envelope button which has now appeared.

Add Email This Post to Blogger - Method 2

Another method of adding an email this post link to your blog is to add an all-in-one social bookmarking button to your Blogger Blogspot blog. All in one social bookmarking buttons are minimalist and reduce the clutter of having lots of buttons. Read the following article for information about how to add an Add This Social Bookmarking Button to your Blogger blog

Add Email This Post to Blogger - Method 3
By far the most advanced method and requires a change to your Blogger template. Yet another way to add an email this post link to your Blogger blog is to make use of your Feedburner FeedFlare if you have one. For information about getting a Feedburner FeedFlare for a Blogger feed and configuring it please refer to my article Add a Feedburner FeedFlare to a Blogger Feed

Assuming that you already have a burned feed at Feedburner (if not then read my article on how to Burn a Blogger RSS Feed at Feedburner and a FeedFlare set up follow these instructions to add an email this post link.

1. Click the My Account link at the top right corner of the Blogger navbar and then select Feedburner from the list of Google services or sign in to Feedburner directly.

2. Select your blog feed from the My Feeds List on the My Feeds page

3. From the Feedburner dashboard select the Optimize tab.

4. From the left sidebar menu select FeedFlare

5. On the FeedFlare page enable Email This by checking the box under the Site column. (Note the first column is what appears in the feed and the second column is what will appear on your blog). If you don't have your FeedFlare set up yet you can set up the FeedFlare options for both site and feed together at the same time. Follow my article about adding a Feedburner FeedFlare to Blogger for more on this.

6. Once you have checked the Email This option under Site and added any other options to the FeedFlare in the feed or site that you would like then click on Save. If this is a new FeedFlare then you will click on a button marked Activate instead.

7. After activating or saving you need to get the code to add to Blogger. Do this by clicking on the dropdown menu labelled Get the HTML code to put FeedFlare on your site and selecting Blogger from the list.

8. A pop up window entitled Adding FeedFlare to your Blogger blog will open with instructions on how to make the necessary changes to your blog. These are a bit confusing so I will break them down a bit here. Don't close this window yet as we will return

9. Login into Blogger if not already logged in

10. Navigate to Layout > Edit HTML.

11. Check the Expand Widgets Template

12. As a precaution back up you template

13. Scroll down to the following code or use CTRL + F to bring up the search tool.

<div class='post-footer'>

Note assumes you are using layout in Blogger. If you don't have this code you are likely to be using a custom template and will need to read the advanced instructions. Any problems just ask.

14. Copy the layout code in the Feedburner pop up window and paste it directly below this line <div class='post-footer'>

15. Click Save Template to save changes

16. Click View Blog to see the link in the footer of your blog posts

In this article I have suggested three different methods to add an Email This Post link to a Blogger Blogspot blog to give readers the option of emailing their favorite articles directly to themselves. If you get stuck or have problems with any of these methods please just ask and I will try to help.

Related Articles
Add Email Subscription Links to Your Blogger Blogspot Blog
Add a Social Bookmarking Button to your Blogger Blog
Add a Feedburner FeedFlare to a Blogger Feed
Burn a Blogger RSS Feed at Feedburner
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

How to Change Bullet Point Style in Blogger (Blogspot) Lists

In Part 1 of this three part series of Blogger tutorials I discuss how to change bullet point styles of lists you may want to include in Blogger posts. This first Blogger tutorial deals with unordered lists and how these can be styled using CSS in Blogger (Blogspot). The second part of these tutorials will deal with ordered lists while part 3 discusses bullet point changes you can make to your sidebar, footer and menus.

Today you will learn how to:

change the style of bullet points in unordered lists

add bullet points to unordered lists if they are absent

add an image instead of a bullet to lists in your Blogger posts

This tutorial is rated easy and is designed so that even Blogger newbies can make the changes they want to their Blogger template. Changing the bullet point style involves changing the CSS styling in your Blogger template (Blogspot template). Join me as I walk you through this step by step guide.

How to Add Bullet Points to a Blogger Post
If you are still using the old Blogger editor you will need to add bullet points manually to any unordered lists you create in Blogger posts. If you are using the new editor the work is done for you. Either way though this is the type of code that generates unordered lists:

<ul><li>Create your own list markers in Blogger</li>
<li>Create unordered lists in Blogger</li>
<li>Create bullet points in Blogger</li>
</ul>

Any text can be placed between the two <li></li> tags. Simply copy this list into a Blogger post and substitute your text for mine and you will have an unordered list.

Circular Bullet Points
Circular bullets (also known as markers or discs) are displayed in Blogger by default whenever unordered lists appear. This means that whenever the <ul></ul> tags are used in Blogger posts a leader dot or disc will appear before each line of text denoted by <li>. (Note I will discuss ordered lists <ol></ol> tags in part two of this tutorial).

An unordered list in a Blogger post using the <ul></ul> tags would appear like this:

Change Bullet Point Style in Blogger
Add Bullets to Blogger
Changing the look of unordered lists in Blogger

We can make lots of changes to the look of these filled discs or filled circles by changing the CSS styling in Blogger. For instance we can have squares, or we can choose to have no bullet point at all. Here's how.

To Add Square Bullet Points to Blogger (Blogspot)
The following code will replace the filled circle bullet points with squares instead:

Login to Blogger if not already logged in
From the Dashboard go to Design >Edit HTML
Back up your template
Find the posts section of your CSS stylesheet which will be before ]]></b:skin> tag
For the following default Blogger templates eg "Simple" add the following CSS code to the post section like this

.post ul li {
list-style: square;
}
Save template and view blog post to see the circular bullet points have been replaced by square ones

To Add Circle Bullet Points to Blogger (Blogspot)
To add unfilled circle list markers or bullet points to Blogger posts do the following:

Follow steps 1-4 as per square bullets
Add the following code to the posts section of the CSS stylesheet of your Blogger template by entering the following code:

.post ul li {
list-style: circle;
}
Save the changes to your template and view a blog post to see the empty circle bullet points

How To Indent Bullet Points in Blogger
There are two ways to increase the indentation of list style markers or bullet points.

Using the Inside or Outside Element
The indentation of bullet points can be varied using the "inside" element. By default the list will be "outside" unless the "inside element" is used. The following code shifts the indentation of the list further to the right.

.post ul li {
list-style: circle inside;
}
Custom Indentation CSS Styling
It is also possible to add custom indentation styling to lists. For instance here I have added a 2.5em indent using the following code to the circles example:

.post ul li {
list-style: circle;
margin-left: 2.5em;
}

How To Replace Bullet Points with an Image in Blogger (Blogspot)
Sometimes you may prefer to have an image list marker or icon instead of a bullet point. You will need to host your image somewhere such as a free image hosting service eg Flickr or Photo Bucket. Follow the steps below to replace bullet points in your Blogger posts with an image

Follow steps 1-4 as per square bullets
In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:

.post ul li {
list-style: url("http://URLaddressofImage.gif");
}
Replace URLaddressofImage with the URL address of the image you have uploaded to an image hosting service. Note in most cases the file will have a .gif extension. If the extension is anything other than .gif you will need to change this too.
Save the changes to your Blogger template and navigate to a post page to see your image list marker installed

How to Remove the Bullet Points from Blogger Posts
If you are going for a minimalist look you may prefer to have no bullet points in the lists in your Blogger posts. In this case:

Follow steps 1-4 as per square bullets
In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:

.post ul li {
list-style: none;
}

Read Full Post ...

Show Date Above Blogger Post Title

Sometimes you may download a Blogger Blogspot template which does not display the date header above the post title. I recently struck a free Blogger template like this and it took some time to find the right part of the template to fix the date. Plus the answer was not as far as I could tell listed in Blogger help. So to help anyone desperately struggling to find the solution to this problem I have decided to share this information in this article.

To Display the Date Header Above Post Title

1. Log in to Blogger

2. Go to Layout > Edit HTML

3. Back up your template before attempting any changes

4. Type the following into the search box (CTRL + F) to find the block of code beginning with this line:

<data:adStart/>

5. Paste the following lines of code

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

into the code block as shown here:

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>

7. Click the Save Template button

8. View Blog to see the date above the header

Today's Blogger Blogspot tip has shown you how to add the date above the post title on a Blogger Blogspot blog. The date above the post is often missing among slightly older Blogger templates but thankfully the fix is fairly easy.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs

Read Full Post ...

Blogger Post Image Borders Change or Remove

Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default Blogger template (Blogspot template). In this Blogger tutorial you will learn how easy it is to make changes to your template so that you can get rid of unwanted image borders around all the images that appear in your blog posts or around a single image in a blog post.

You will also learn how to enhance your Blogger template (Blogspot template) by changing the line color and line style of the existing image borders.

Note this Blogger tutorial applies to custom templates and the previous generation of Blogger templates. If you are using the new default Blogger Template Simple please refer to my Blogger tutorial How to Remove the Image Border in Blogger template Simple for instructions

This Blogspot tutorial is rated easy. It involves making minor alterations to your Blogger template (Blogspot template) but this is well within the capabilities of beginner bloggers and newbies. The changes will take less than 5 minutes to complete and can make the world of difference to your Blogger template.

How to Delete, Remove, Get Rid of the Image Border in Blogger Posts
The following instructions will remove the little border around the images in your Blogger posts.

Login into Blogger if not already logged in
From the Dashboard navigate to your blog. Go to Design > Edit HTML by clicking on the Design tab and then choosing the Edit HTML link
Back up your existing Blogger template by clicking on the Download Full Template button
Find the following code in your Blogger template (no need to check the Expand Widgets Template box as we are only working with the CSS Style Sheet). Note: the code in Blogger templates varies but this is the code you will find on a Blogger Minima template and most other default Blogger templates.

.post img {
padding:4px;
border:1px solid $bordercolor;
}

If you do not have this code look for the following:

img{
padding: 4px;
border:1px solid $bordercolor;
}
There are two ways to get rid of the unwanted border image code. You can either:
- Remove the following line:
  
  border:1px solid $bordercolor;
  
  or
- Change it to the following
  
  border:0px;
Click on the Save Template button
Click View Blog to admire your post images minus any image border.

How to Change the Color of the Image Border Around Posts in a Blogger Template
The following instructions will show you how to change the color of the border which appears around images in your Blogger posts

Follow Steps 1 to 4 as per removing the image border from Blogger posts.
There are several methods to change the color of the image border but the easiest is to
- Change the following line:
  
  border:1px solid $bordercolor;
  
  to
  
  border:1px solid #6698FF;
  
  The above change will make the border line color sky blue. To change the color (in red) to your own color choice replace with the hex color code for your chosen color
Click the Save Template button to save your changes
Click on View Blog to admire the new color around the images in your Blogger posts

Tips and Troubleshooting

To change the image border line style from a solid line to a dotted line change the word solid to dotted eg

border:1px dotted $bordercolor;
To change the image border line style from a solid line to a dashed line change the word solid to dashed eg

border:1px dashed $bordercolor;
To increase the width of the image border change the size from 1px to 2px or 3px eg

border:3px solid $bordercolor;
To Remove The Image Border Around Only One Image paste the following into your image code in your Blogger post:

style="border:none"

eg
<img style="cursor:pointer; cursor:hand;width: 126px; height: 22px;" src="http://3.bp.blogspot.com/_vLeiVavkV_M/SrRp2wb1I_I/AAAAAAAAAAA/XXXXXXXXX/s200/download-now.png" border="0" style="border:none" alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXXXX" />

In this Blogger tutorial you have learned how to remove, delete and get rid of the line border which appears around images in your Blogger posts (Blogspot posts). You have also learned how to change the line color of the border image to your own chosen hex color. In addition I have shown you how to change the line style from solid to dotted or dashed and to remove the border around a single image. As always any problems with making these changes please let me know. Good luck!

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Remove the Image Border in Blogger Simple Template

Read Full Post ...

How Blog Works (www.howblogworks.com)

Thursday, October 06, 2011

How to Setup Your own Domain to Blogger Blogspot Blog

How to create a CNAME record for my custom domain

Sunday, October 02, 2011

Add background music to your blog

Saturday, October 01, 2011

How to Buy Custom Domain For Your Blogspot Blog Via Blogger

Tuesday, September 27, 2011

How To Host Javascript Or .Js Files On Blogger Itself

Adding Numbered Page Navigation Bar For Blogger Blogspot Blog

Monday, September 26, 2011

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

Comes in Handy when you are on-the-go

Easy to Add Photos

Add Labels and Location

Time to Download

Thursday, September 22, 2011

How to Delete or Remove Posts From Blogger Blogspot Blog

Friday, September 02, 2011

How To Delete a Blogger Blogspot Blog

Solution to Missing Add a Gadget Feature in Blogger

Add 3 Column or 4 Column Footer to Blogger

Add Email This Post Link to Blogger

How to Change Bullet Point Style in Blogger (Blogspot) Lists

Show Date Above Blogger Post Title

Blogger Post Image Borders Change or Remove

Best Tutorial Links

Labels

Support us by Donation

Blog Archive

Followers