Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 30, 2007

Digg This Story

Add Scrollbars to Blog Widgets

This tutorial shows you how to create widgets or boxes with scrollbars. When the contents in the widget exceed a certain specified height or width, there will be a vertical or horizontal scrollbar to enable users to read the contents that overflow or exceed the box area. This scrolling element is especially useful for our Link List or Labels widget which may be very lengthy. It reduces the total height of the widget and yet allows readers the option of scrolling through and viewing the entire content. We shall discuss how to customize the template design to include the scrollbars and the various modifications that can be made to the stylesheet.

The “overflow” style property

Let us first explain what the code is about. We use the “overflow” property to create the scrollbars in CSS or the stylesheet. There are several values that can be assigned to it, although not all are useful for our purposes.

1. overflow:visible

This is the default value. The extra content is either rendered outside the box or the length of the box is extended to include the extra content. Don't bother to use this in Blogger blogs because you will see the contents of the widgets overlapped like this:-

Add Scrollbars to Blog Widgets

2. overflow:hidden

This will cut off the extra content that overflows and there will be no scrollbar to the box. It doesn't serve our purpose as well.

Add Scrollbars to Blog Widgets

3. overflow:scroll

The content is clipped but there will be scrollbars at the sides.

Add Scrollbars to Blog Widgets

4. overflow:auto

We like this attribute. Basically, it tells the browser to display a scrollbar only when necessary i.e., when the content overflows the width and height settings.

Add Scrollbars to Blog Widgets

Scrollbar in All Widgets

Now that we know what the code does, we can apply it to our template. If we have many widgets in our sidebar, we can specify a fixed height for all the widgets. Carefully planned, our layout can look very neat since all the widgets will have the same height.

Login and go to Template -> Edit HTML. Insert this piece of code. For easy reference, we have added it under the /* Sidebar Content */ :-

/* Sidebar Content */
.sidebar .widget{
height:200px;
overflow:auto;
}


Add Scrollbars to Blog Widgets

In our example, we applied a height of 200px to the widgets. This can be changed to other values. Look at both sidebars. Notice the neatness and symmetry. Be careful though if you have AdSense Ads in the sidebars. It is against AdSense TOS to cut off the Ads and put scrollbars to their Ad Units.

Scrollbar in Widgets of One Sidebar

Let us assume for our discussion that you have modified your template to include an additional sidebar using our Three Column Template guides. We may have all the AdSense Ads in one sidebar and we want to add the scrollbars into the widgets of the other sidebar. The style that can be inserted into the template will be this:-

/* Sidebar Content */
#newsidebar .widget{
height:200px;
overflow:auto;
}


Or this:-

/* Sidebar Content */
#sidebar .widget{
height:200px;
overflow:auto;
}


depending on which sidebar your widgets are at. Preview the template and if it is what you want, save the Template and refresh your Blog.

Scrollbar in One Widget only

We can add the scrollbar only to one or several of the widgets. To do that, we must first know the ID of the widget. When we are at Template -> Edit HTML, scroll towards the bottom of the template code. You will see something like this:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='General' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
</b:section>
</div>


In this example, we have added a Link List Page Element into our Sidebar and the ID for this widget is “Linklist1”. If we have more link lists, the IDs will be “Linklist2”, “Linklist3” and so on. Also, we have inserted a HTML/JavaScript Page Element and the ID is “HTML1”. The third widget we added is a Label list and the ID is “Label1”. Look at your template and identify the widget. Take note of the widget ID.

With the ID, we can now add the overflow property into the stylesheet under /* Sidebar Content */:-

/* Sidebar Content */
#Label1{
height:200px;
overflow:auto;
}


Add Scrollbars to Blog Widgets

This will add the scroll-bar to the Labels widget only without affecting the other widgets. Insert the relevant ID of your widget into the portion shown in red.

Scrollbar in All Widgets except One

A further variation is to add scrollbars to all the Widgets except one or two. As mentioned earlier, AdSense widgets should not have scrollbars and it might be your intention to have scrollbars in the rest of the widgets.

Follow the guide above to insert scrollbars into all the widgets. After that for the ones that you do not want scrollbars to appear, specify a bigger value for the height:-

/* Sidebar Content */
#AdSense1{
height:600px;
}


For example, if your AdSense unit is a 160x600 Vertical Wide Banner, put the height of the widget as 600px. Since the contents fit nicely into this size, the scrollbars should not appear. Change the widget ID accordingly to point to the widget that you want to exclude and adjust the height value.

Scrollbar for Links and Labels

We need scrollbars usually for Label lists and Blogrolls created using Link lists because these are usually lengthy. You may have noticed that using the above codes, the entire widget is included in the scroll. Supposing we want the title to remain static and have a scrollbar only for the links or labels, we can insert a code as follows (remember to enter the relevant ID into the part shown in red):-

/* Sidebar Content */
#LinkList1 ul{
height:200px;
overflow:auto;
}


Add Scrollbars to Blog Widgets

Scrollbar for Blog Posts

Should you want the scrollbars for each of your blog posts, scroll to where you see this code and add the portion (shown in red):-

.post {
height:200px;
overflow:auto;
}


Scrollbar for text within Blog Posts

Perhaps you might not want to have scrollbars for all the Blog Posts, but only for a piece of text within a Blog Post. You can follow the steps in this guide to insert scrollbars to text within the post.

Scrollbar for Long Text

If you have a long piece of text like those found in the usual Terms of Service, User Agreements, Rules, Privacy Policy, etc., scrollbars will be very useful in minimizing the text area and yet allowing readers to view the full contents.

Under Template -> Edit HTML, /* Sidebar Content */ , define a class as follows:-

.scrollingtext {
height:200px;
width:200px;
border:0;
overflow:auto;
}


What we have done is to specify that the text will be contained in a box with scrollbars automatically added if the text overflows the 200px x 200px area. The values of the border, height and width can be changed to suit your needs.

We can now type the text. This text can either appear in a Blog Post, or as an element in the Template. If it is in a Blog Post, after you have typed the TEXT in the Post Editor, switch to “Edit HTML” mode and insert these tags (shown in blue):-

<div class="scrollingtext">TEXT</div>


The TEXT can be inserted directly into the template via Template -> Page Elements -> Text. Similarly, if you have typed it in the rich editor mode, you can click the “Edit HTML” link at the top right corner and insert the above tags.

After publishing the post or saving the page element, you will be able to see the TEXT within a box and the scrollbars automatically inserted.

Add Scrollbars to Blog Widgets

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Aug 28, 2007

Digg This Story

Three Columns Dots Template

If your Blog is using a Dots or Dots Dark Template, you can consider adding another sidebar, making it a 3 column Dots Template. Because the dots in the background image are well-spaced, we thought it won't look nice having another column. However, after inserting the third column and making adjustments to several settings, we were pleased to see that a three column Dots or Dots Dark Template actually looks very chic and nice. Since a number of readers had requested for this, here is the how-to tutorial to modify your layout into a three column Dots layout. Note that this guide is for the standard Blogger templates. If you have customized your template or are using one that is already customized, compare what is written here with the template code that you have and make the adjustments accordingly.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Minima Template;
3. Three Columns Rounders Template;
4. Three Columns Rounders 2 Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


Dots and Dots Dark Templates

Except for one part, the steps for converting both templates are about the same. The new Three Column Dots Template will look like this:-

Three Columns Dots Template

Whereas the Three Columns Dots Dark Template will be this:-

Three Columns Dots Template

Before any modification, we must always remember to backup the template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Dots Template

This is for the Dots Template users. Those who have Dots Dark Templates can look at the next section. After we have a backup, we can scroll to these lines:-

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


Change or amend the above to the following code (note in particular the parts shown in red):-

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


We have left the sidebar hover styles unchanged. The same style will apply to the new sidebar.

Dots Dark Template

For Dots Dark Template users, you will see these lines:-

#outer-wrapper {
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


Change or amend the above to these (note the parts in red):-

#outer-wrapper {
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}
#sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
margin-left:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}


Both Dots and Dots Dark Templates

The following changes and modifications apply to BOTH the Dots and Dots Dark Templates.

Further down the template, we see the layout editor tweaks:-

/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar, body#layout #sidebar-wrapper {
padding: 0;
width: 240px;
}


Change the above to this:-

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper,
body#layout #main {
width: 400px;
padding: 0px;
margin: 0px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper,
body#layout #sidebar,
body#layout #newsidebar {
width: 150px;
padding: 0px;
}


Next, under the <body> section of the template, look for <div id='main-wrapper'> and change/insert the codes as follows:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


Now, Preview the Template. You should see the new sidebar on the right with your Profile. (If you have disabled sharing of your Profile, go to Edit Profile in the Dashboard and enable it temporarily.) If you are pleased with the new three column layout, click “Save Template”. Remove the Profile page element under Template -> Page Elements. Refresh the Blog. You have now a new Three Columns Dots Template or Three Columns Dots Dark Template!

Align Header Title and Description

The Header title and description are in the left sidebar by default. This is the way the template is designed. Since the space is narrow, there is little alignment that you need to do. The text will be aligned to the left.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Aug 27, 2007

Digg This Story

Feedburner - FeedCount Chicklet Text

Feedburner is a very popular feed aggregator and provides a host of services which you can tap on to publicize and promote your Blog. One widely used service is their FeedCount Chicklet which displays your Blog Feed's circulation statistics. The chicklet can be static (displaying the number of “readers”) or animated (showing the number of “readers” via feed). Although you can change the background and text color for the graphic display, there is no option for you to change the text. This hack will explain how to change and personalize the FeedCount Chicklet text as well as to change the animation settings so that it rolls the text more than once.

For those who have yet to sign up for a Feedburner account, consider doing so right away. Now that it is under the Google family, there is an easy way for you to channel all your Blogger feed subscribers to Feedburner. Login to Blogger, and under Settings -> Site Feed, enter your Blog's Feedburner Feed address into the box beside “Post Feed Redirect URL.” Readers who click the “Subscribe to: Posts (Atom)” link or the RSS icon in their browsers will be redirected to your Feedburner Feed.

FeedCount Chicklet

When you are logged into Feedburner account and are viewing your Feed details, click the Publicize -> FeedCount tab. This is where you can generate a code to display a chicklet in your Blog which shows the subscriber count. Whether or not you already have a high number of subscribers doesn't really matter. A nice chicklet can draw readers' attention and make it easy for them to click the Feed link.

Choose the custom colors of the body and text and click “Activate”. You will be given a HTML code for the Chicklet. We have to edit this code. Open MS Notepad (usually found under All Programs -> Accessories in Microsoft Windows) or a word processor program. Copy and paste this code.

Static FeedCount HTML Code

The static FeedCount code will look something like this:-

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=0" height="26" width="88" style="border:0" alt="" /></a></p>


This is the standard FeedCount chicklet you see:-

Feedburner - FeedCount Chicklet Text

To change the word “readers” to some other text such as “Viewers”, insert this other code (shown in red). You can change the word “Viewers” to other text, but because of the space constraint, keep it to no more than 7 characters.

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=0&amp;label=Viewers" height="26" width="88" style="border:0" alt="" /></a></p>


The FeedCount chicklet now looks like this:-

Feedburner - FeedCount Chicklet Text

You can change the text to capital letters or include characters, e.g., “*FANS*”, and your new FeedCount Chicklet will look like this:-

Feedburner - FeedCount Chicklet Text

Animated FeedCount HTML Code

The animated FeedCount code is rather similar except that the animation value is set as “1” instead of “0”.

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=1" height="26" width="88" style="border:0" alt="" /></a></p>


When the page is loaded, viewers will see a one-time rolling text of number of “readers” via feed.

Tips for New Bloggers

The word “readers” can be changed to other text like “Members” by inserting the code (shown in red):-

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=1&amp;label=Members" height="26" width="88" style="border:0" alt="" /></a></p>

This is the new FeedCount Chicklet you will see. Insert the relevant text that suits your Blog.

Tips for New Bloggers

Animation to play more than once

Other than the change in text, you can also set the animation to play more than once by changing the anim value to something greater than 1. Since readers are unlikely to stay on a page for too long, it need not be too big a value. When the page is refreshed, the animation count will start all over again.

<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&amp;fg=444444& anim=50&amp;label=Friends" height="26" width="88" style="border:0" alt="" /></a></p>

Our animated FeedCount Chicklet will now look like this:-

Tips for New Bloggers

Further reading:-

Another useful service that Feedburner has is their Headline Animator. You can create a nice animated banner that automatically displays the titles of your recent posts. Read more about it in our guide at Animated Banner with Rotating Headlines.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Digg This Story

Three Columns Sand Dollar Template

The Blogger Sand Dollar template takes up the full browser width and has a nice color scheme. Some people may find that the empty space in the sidebar can be put to better use. We can add another sidebar to the right and this tutorial will show you how to convert your Sand Dollar layout into a three column template.

Here, we are specifically dealing with 3 column Sand Dollar templates. If you are not sure what your template is, under Template -> Edit HTML, look for the “Blogger Template Style” name. If it is “Sand Dollar” follow this guide to customize your template.

For other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Minima Template;
4. Three Columns Rounders Template;
5. Three Columns Rounders 2 Template;
6. Three Columns Rounders 3 Template;
7. Three Columns Rounders 4 Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.


This is how the eventual Three Column Sand Dollar template should look in Firefox:-

Three Columns Sand Dollar Template

Or in Internet Explorer. Notice the text indent in the sidebars:-

Three Columns Sand Dollar Template

Even without any addition of a third column, this difference already exists when you view your Sand Dollar template blog in the 2 browsers. This is one of the several template designs which is not interpreted in the same manner by the different browsers. Since there may be people who are interested in having a consistent layout especially in Firefox and IE, we shall further explore this in a separate article. For this article, we shall focus our discussion on converting the template into a three column template.

Before you begin to do any modification, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Login to your Dashboard and scroll to these lines:-

@media all {
div#main {
float:right;
width:66%;
padding:30px 0 10px 1em;
border-left:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 31%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
}


Amend the above to this (take note of the portions in red):-

@media all {
div#main {
float:left;
width:49%;
margin:0 1%;
padding:30px 1em 10px 1em;
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 23%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
div#newsidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: right;
width: 23%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
}


Further down the template, you can see these lines. Insert the portions of the code, including the commas (shown in red):-

#sidebar h2,#newsidebar h2 {
color:$sidebarcolor;
margin:0px;
padding:0px;
font:$headerfont;
}

#sidebar .widget,#newsidebar .widget {
margin:0px 0px 33px 0px;
padding:0px 0px 0px 0px;
font-size:95%;
}

#sidebar ul,#newsidebar ul {
list-style-type:none;
padding-left: 0;
margin-top: 0;
}

#sidebar li,#newsidebar li {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
font-size:95%;
}


Also, insert the CSS codes (in red) to these lines:-

#sidebar a:link,#newsidebar a:link {
color:$sidebarlinkcolor;
text-decoration:none;
}

#sidebar a:active,#newsidebar a:active {
color:#ff0000;
text-decoration:none;
}

#sidebar a:visited,#newsidebar a:visited {
color:sidebarlinkcolor;
text-decoration:none;
}

#sidebar a:hover,#newsidebar a:hover {
color:$sidebarcolor;
text-decoration:none;
}


Note that we have adhered to the same link and hover styles for both the sidebars. If you have already customized your existing sidebar to display rollover and hover effects, they will apply as well to the new sidebar.

Amend the layout editor tweaks by adding this code (in red):-

body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
margin-top: 10px;
padding-top: 0;
}


After that, we move on to the <body> section of the template. Look for <div id='main-wrapper'> and change/insert the codes as follows:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


In so doing, there will be a Profile in the new right sidebar. This can be removed later. “Preview” the template to view the changes and if you like the new three column layout, click “Save Template”. Go back to Template -> Page Elements, remove the Profile page element. Refresh your Blog to see your new Three Column Sand Dollar layout!

Align Header Title and Description

The Header title and description in the Sand Dollar templates are aligned to the left. To adjust them to the center or a fixed position in the Header, read the guidelines at Header Image and Title Alignment (II).

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Aug 25, 2007

Digg This Story

Customize Video Upload in Blogger

We wrote an article some time back suggesting how you can Add Video to Blogs. We highlighted two popular video hosts – Google Video and YouTube. Just yesterday (Aug 24, 2007) Blogger released its new Video Upload feature from its Blogger in Draft. There is now an icon in your Post Editor allowing you to upload a video into your post, in the same manner as you would for photos. At the moment, the feature is only available in the Post Editor and not as a Page element. However, we shall explain how you can insert the video into the Sidebar Page Element and not merely have it in the Post. As well, you will learn how to resize and align the uploaded Blogger video.

Upload Video

When creating a New Post, you can see a new “Add Video” icon in the toolbar:-

Customize Video Upload in Blogger

Write the post and when you want to add a video, click this link. You will be asked to upload a video file from your computer. This file has to be in AVI, MPEG, QuickTime, Realplayer, and Windows Media formats and should not exceed 100MB in size. We don't know if there are bugs but we tried uploading 10 videos in different formats and were not successful in 8 of them. If you do see an error message, you can report it to Blogger Support citing the incident ID and try to upload it again. At the same time, assign a title to the video.

Customize Video Upload in Blogger

Video Upload Terms and Conditions

At the bottom, you will have to check the box to indicate that you have read and agreed to the Upload Terms and Conditions. These are the terms imposed by Google Video which Blogger is using for their video upload function. Most of us would not have bothered to read the standard terms. Nevertheless, from a layman's perspective, some salient terms are worth noting:-

1. Google has a non-exclusive, world-wide, royalty-free license to use your name, logo and brand for advertising or promotional purposes.

2. If Google offers a service whereby you may charge end users to download or view your videos, you will receive only seventy percent (70%) of the gross revenues.

3. You warrant that you have the right to use and upload the video. Among other things:-

a. You are at least 18 years of age and are legally allowed to enter into the Agreement and grant license rights.

b. The video is not, in whole or in part, pornographic or obscene.

c. You own all the necessary rights, such as copyrights, trademark rights and rights of publicity in the videos.

d. The display or use of the videos do not and will not violate any applicable laws or regulations and will not be in breach of any rights of persons or intellectual property. (Bear in mind that YouTube has faced many threats of actions and lawsuits by notable figures around the world for illegal videos uploaded onto their site.)

4. If there should be any liability imposed on Google, you have to indemnify them.

Storage Space for Videos

Once you are done, the upload process will start, and since the files are usually big, it will take much longer than photos. You can in the meantime continue to work on the remaining contents of your Post. We had mentioned in Manage Blogger Image Storage Space that there is a 1GB storage limit for photos and images uploaded into your Blog. Since videos are hosted under Google Video and not Picasa Web Album, the video files will not be taking up this storage space. The Google Video terms do not seem to stipulate a storage limit for uploaded videos.

Resize Video

The Blogger video has a width of 320px and a height of 280px. This should fit nicely into the Blog Post segment of all standard Blogger templates. Some people may have customized their Blog layouts and reduced or extended the width of the Blog Posts. To adjust the size of the uploaded videos, after uploading it, view the post under “Edit HTML” mode instead of “Compose” mode.

Customize Video Upload in Blogger

Locate the video code. It should look something like this:-

<object id="BLOG_video-f4854f080ae662a4" class="BLOG_video_class" contentid="f4854f080ae662a4" height="280" width="320"></object>


You can change the width and the height (shown in red). Just ensure that the width does not exceed the width of the main post column, which is usually found under the #main-wrapper or #main-wrap of the template source code.

Align Video to Center or Right

By default the video is aligned to the left of the post. If you want it in the center, you may add this code (in blue) to the above video code.

<div align="center"><object id="BLOG_video-f4854f080ae662a4" class="BLOG_video_class" contentid="f4854f080ae662a4" height="280" width="320"></object></div>


Change the word "center" to "right" if you want it on the right side of the post.

Place Video in Sidebar

As mentioned above, there is presently no “Add Video” option under “Add a Page Element”. To have a Blogger video in the sidebar, we have to first create a post. It can be a temporary post which you can delete later. Upload the video and follow the above guidelines to resize it to a small screen. For example, we resized our test video to a width of "200" and height of "180". Publish the post.

Refresh your Blog. You should see the temporary post together with the small video. View the source code of your Blog. For Firefox users, in your browser toolbar, go to View -> Page Source or press Ctrl+U. For Internet Explorer users, View -> Source. Next, press Ctrl+F, enter the word “video” to search for the video code. It is a rather long code and looks something like this:-

<object classid="..." id="BLOG_video-f4854f080ae662a4" codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0" width="180" height="200" class="BLOG_video_class"> <param name="movie" value="..."> <param name="bgcolor" value="#FFFFFF"> <embed width="180" src="..." type="application/x-shockwave-flash" height="200"></embed> </object>


Block copy this entire piece of code. Now go to Template -> Page Elements -> Add a Page Element in the sidebar, and choose “HTML/JavaScript”. Paste this code. If you want the video to be in the center of the sidebar, add the alignment tags outlined in the earlier section. After saving, drag and drop the element to the part of the sidebar where you want it to appear and Save the Template. You may go to Posting -> Edit Posts to delete the temporary post. View your Blog to see the Video in the Sidebar!

Customize Video Upload in Blogger

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Aug 23, 2007

Digg This Story

Images not shown in Internet Explorer

Sometimes, the photos, images, pictures or graphics do not show or display in a website in Internet Explorer (“IE”) browser or an email in MS Outlook Express. Instead, where the pictures ought to be, there is a Red X or a placeholder.

Images not shown in Internet Explorer

Several factors could have caused this problem of images not being displayed in IE. In this Help guide, we'll look at these reasons and the solutions to show images in IE. Some of the possible causes may only be resolved by the webmaster. If you are an owner of a Blog or a webmaster, these tips might be useful to note when you are uploading images onto your Blog or webpage.

1. Image type not supported by IE

When you see a red X or placeholder, right-click on it to view the “Properties” of the image. Look at the image “Type” and “Address (URL”). IE supports images with .art, .avi, .bmp, .emf, .gif, .jpeg, .jpg, .mov, .mpeg, .mpg, .png, .wmf, and .xbm extensions. As a webmaster, if you have to put images on your website, try to stick to the usual image formats or have alternative images in these formats.

2. “Show Pictures” option in IE not selected

If you are using IE 7, under Tools -> Internet Options -> Advanced tab, there is an option called “Show pictures” under the “Multimedia” heading. Select this option and press OK to save the change. In other IE versions, the option may fall under a different heading.

3. Scripts disabled in IE

Webmasters may use Active scripts, Scriptlets, Java applet, ActiveX control, or cookies to display the images on their sites. If the security setting in IE browser is set to “High”, these features may be blocked. To enable them, go to Tools -> Internet Options -> Security tab. View the “Internet” zone and under “Security level for this zone” change it to “Medium” or “Medium-high”. You can also reset the zone to “Default” level. Likewise, under Tools -> Internet Options -> Privacy tab where you define the cookie settings, you may set it to “Default” level. Click OK to save.

4. Scripts disabled by Firewall

Other than IE, the configurations in your Firewall program (Norton Personal Firewall, Zonealarm, McAfee, BitDefender, etc.) may have disabled some of these scripts. View the help file of the program you are using and follow their instructions to enable some of these scripts. For this reason, webmasters should avoid using too many scripts for the main contents of the sites. Consider adding text using <noscript> tags to cater to those who have scripts disabled.

5. Web bugs

Be careful when you are configuring the above settings. The web pages you view or emails you receive may sometimes contain hidden web bugs. These are usually small little graphics 1px by 1px that track user statistics like location, usage, pages visited, or whether an email has been read. This is even used in organizations and companies to find out how many times a message is forwarded or read by the staff. They do not pose major threats, but there are those who do not like this infringement of privacy. Take a stand and configure your security and privacy settings accordingly.

6. Images blocked in Outlook Express

We touch briefly on the problem of images not displayed in Outlook Express email program. When you are in Outlook Express, go to Tools -> Options -> Security and you'll see a “Download Images” configuration. If you want to view images in your email, do not tick the “Block images and other external content in HTML e-mail” option. Click OK and save the change. You should now be able to view images in Outlook and not see the red X symbol.

7. Images not sent in Outlook Express

Also, if you are sending email with images, you could have disabled these images in the configuration. Those receiving your email will only see the red X or placeholders rather than the images. The solution to this is to go to your Outlook Express Tools -> Options -> Send tab. The “Mail Sending Format” should be “HTML” and not “Plain Text”. Click the “HTML Settings” button and check the box next to “Send pictures with messages.” Click OK to save.

8. Character Set not recognized by IE

This sounds rather technical. In layman terms, the browser interprets the code page or encoding of the web page. If your IE browser does not recognize this character set, or if a file in your browser software is corrupted or missing, the images may not be displayed when viewing the web page. For instance, the web page may be in a foreign language. If so, see that this language has been added to the browser settings. In IE, go to Tools -> Internet Options -> General. Under “Appearance” there is a “Languages” button. (In other versions of IE, the Language option may be under a different heading.) Add the languages that you would use to read the web page and click OK to save. If you are still unable to view the page, it is possible that a file or registry key is corrupted or missing. To resolve this, you may follow the Microsoft Help guide on your desktop to restore or repair your Windows software.

9. Image Server is down

Since free blogging platforms including Blogger.com have limits on the amount of storage space taken up by the Blog photos, images and graphics, it is worth considering hosting these images on an external server and linking to them from your Blog. We wrote about using free hosts like Google Page Creator and Google Groups. These too have limits on space and bandwidth. There is a comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space which may provide a bigger storage space. All servers, even Blogger.com, can have downtimes. When these image hosts are busy, undergoing maintenance, temporarily suspended, offline, or when the download bandwidth has been exceeded, the images linked to the Blog will not be displayed. The problem could be temporary, and should you need to see these images on a particular Blog, revisit the Blog an hour or so later.

10. Image links are broken or dead

Since the images are hosted on another platform and linked, there could be instances when the webmasters typed a wrong URL, placed the " at the wrong places or omitted the closing image tags. The image HTML code and attributes are discussed in Hyperlinks and Image Links. The image links could be broken or dead when webmasters delete the images from the server or switch image servers without updating the image links. It is also possible that the image is not hotlinked. By this we mean that when the image is stored on the image server, the link given is not a direct link to the image, but a page containing the image and other contents. Hotlinking takes up bandwidth and some image servers do not provide that service. If such URL is used in the image HTML code, the image will not show.

11. Cache not cleared

The Browser cache stores web page content of the sites you have visited on your hard disk. These are the Temporary Internet Files which supposedly speed up the page download when you revisit a site since some of the contents are already stored. However, these files can comprise cookies and JavaScripts too. Make it a habit to clear the cache regularly to remove these files. In IE, go to Tools -> Internet Options -> General and under “Browsing history” click “Delete” button. Delete all the Files and offline content. These are temporary files that can be removed. If you are unable to view images, sometimes deleting these Temporary Internet Files may solve the problem.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Aug 21, 2007

Digg This Story

Customize and Modify Poll Widget

In this article, we shall suggest some modifications to the CSS template to change the appearance of the Poll widget to something eye-catching and attention-grabbing. For example, we can add background colors or images to the Polls widget and change the font and border colors. These should draw the attention of your readers to the Poll and put some buzz into the Blog.

In case you are not aware, Blogger recently introduced a Polls Page Element allowing you to add a Poll to your sidebar. You determine the question and answers, and readers cast their votes within the Poll period set by you. It sounds like a nice feature, except that the look of this Poll widget is plain and unexciting as it blends into the background of your sidebar. With a bit of effort, we can change all that.

Set up a Poll

To set up a Poll, go to Template -> Page Elements and Add a Page Element in your sidebar. Select “Poll”. Enter the Question and insert all the possible answers. Tick if you allow multiple answers and set a date for the Poll to end. When you refresh your Blog, this is the Poll widget you see.

Customize and Modify Poll Widget

It follows the sidebar styles and blends with the sidebar background color. It is plain and many readers may not even notice it there.

Add Border and Colors

Let us now add a border and background color to it. Go to Template -> Edit HTML, scroll to any early part of the CSS template and insert the following code (shown in red). For easy reference, let's put the code under /* Sidebar Content */

/* Sidebar Content */
#Poll1{
background:#FFFF00;
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}


Note:

1. When a Poll is created, Blogger will assign an ID to the widget. If this is the only poll, it will be named Poll1. If there is another poll in the Blog, that second poll will be named Poll2 and you should change the reference accordingly.

2. We have given it a yellow background color (#FFFF00). Change it to any other color by inserting the relevant color code from our Color Code Chart.

3. By default, there is no frame border to the widget. To make it stand out, we added a border of 3px. You can reduce it to 1px if you want a narrow border. Also, the color of the border is blue (#736AFF) in this example.

4. If the Poll widget is placed in the sidebar, it takes up 100% of the sidebar width. To narrow it, we can insert a width setting.

5. The padding is to give a space of 10px to the left and right of the contents, so that the border does not come too close to the wordings.

After saving the above modification to the template, this is the new look of our Poll widget. Doesn't it catch your attention right away?

Customize and Modify Poll Widget

Change Title Font

If this is not enough, let us change the font of the Title to make it different from the other widgets in the sidebar. Where we inserted the earlier code, we add this other definition (shown in red) into the template:-

/* Sidebar Content */
#Poll1{
background:#FFFF00;
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}

#Poll1 h2{
text-align:center;
font-size:140%;
color:#F87431;
font-family:arial;
font-weight:bold;
}


Note:

1. The text-align property shifts the Title to the center. If you are happy having the Title aligned to the left, remove this line.

2. You don't need a font-size that large. This is to show you how you can adjust the font-size if you want to.

3. Again, you can assign a different color code to the color of the text.

4. Under font-family, you can change the font face of the Poll Title. Usual font families in Blogger include – arial, courier new, georgia, lucida grande, times new roman, trebuchet ms, verdana.

5. We made the Title bold by adding a font-weight. If you want it in italic, you can add another line of code - font-style: italic; - before the sign }

With the above code, readers should clearly see the new Poll widget:-

Customize and Modify Poll Widget

Add Background Image

Instead of a background color, we can use an image as a backdrop to our Poll widget. First create an image and upload it onto a free server like Google Page Creator and Google Groups. You may also refer to our rather comprehensive list of free Image Hosts and File Hosting Services in the article on Manage Blogger Image Storage Space. Take note of the IMAGE URL.

Next, go to Template -> Edit HTML and insert the background image as follows:-

/* Sidebar Content */
#Poll1{
background:url(IMAGE URL);
border:3px solid #736AFF;
width:150px;
padding:0 10px;
}

#Poll1 h2{
text-align:center;
font-size:140%;
color:#F87431;
font-family:arial;
font-weight:bold;
}


The IMAGE URL is the address of the image uploaded onto the web server. There are more attributes you can add to adjust the image position or repeat it. If you need to know more, you can refer to our guide at Background Image for Blogger Template.

With a background image, the Poll widget can look truly outstanding and inviting like this:-

Customize and Modify Poll Widget

Finally, together with this article, we have created a new Poll to ask you what Blogger template you are using. Although we are using the Minima template, we have received many queries by users pertaining to their other templates. To reply to their queries, we have also created test blogs in other Blogger template formats. Some of our articles, such as the ones on Blog Title alignment and Three Columns Templates, are catered to different template users. If you could let us know what Blogger template you have, we could bear that in mind in our future articles and discuss the changes to be made in relation to these other templates. Have fun creating and designing your own Poll widget!

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Aug 20, 2007

Digg This Story

Sticky Posts in Blogger

In this article, we learn how to create sticky posts or have an article permanently displayed on your Home page and above the Blog Posts. This is useful if you want readers to see a particular post, message, announcement or text whenever they visit the site. It could be an earlier popular post. In all Blog platforms, new posts are always shown first and older posts are archived. With a simple trick, we can have this earlier post remain on the Home page, above all the new posts.

Create a Page Element Method

One recommended way to have a piece of writing permanently on top of the Blog Posts is to work it into the template by creating a Page Element.

1. Follow our article in Add Page Element to Blogger Header and Blog Posts. Enable the “Add a Page Element” function in the Blog Posts and if you'd like, the space between the Header and the Blog Posts. This is an interesting location, because it is right after the Header and yet does not follow the style settings of the Header. For people who want to insert a Horizontal Menu and Navigation Bar, this might be an ideal location. Once you have done that, you should be able to add new elements above the Blog Posts or right underneath the Header.

2. The second step is to create the Post. Login, go to “Posting” and create a New Post under the “Compose” mode. If you don't see a “Compose” mode, go to Settings -> Basic and at the bottom, to the question “Show Compose Mode for all your blogs?” choose “Yes” and save the settings. Type your Post contents, upload your pictures, create your links, etc. While you don't have to insert the labels, put in the Title of the article within the contents. Make the title large, bold or change the font color. Preview the post and if you are satisfied with it, you can save the draft Post and go to the next step. [Note: To check the Post Title font-size and color code settings, go to Template -> Edit HTML and look for .post h3{ You would be able to see the font-size, font-weight (if any) and color. Apply the same style to the Title that you have typed in the contents of your draft Post.]

3. Click to view the post under the “Edit HTML” mode.

Sticky Posts in Blogger

4. There are some things you must do. If in your Settings -> Formatting -> Convert line breaks you have chosen “Yes”, whenever you press the “Enter” or “Return” key on your keyboard, the Post Editor will convert that into the HTML tag <br/>. We must now enter these tags into the HTML of the draft Post. Go to your draft Post under the “Edit HTML” mode.

Example 1:

At the places where you press an “Enter” key to create a line break, add the HTML tags as follows:-

Line One <br/>
Line Two


Example 2:

Between each new paragraph, add this HTML tag:-

Paragraph One <br/><br/>
Paragraph Two


Example 3:

You can also add this instead:-

Paragraph One <p>
Paragraph Two </p>


5. Once these are added to the Post, we can now block copy the entire chunk of the draft Post HTML code. Go to Template -> Page Elements -> Add a Page Element in the Blog Posts section and choose “HTML/JavaScript”. Paste the entire draft Post HTML code and save. View your Home page, and you will see the Sticky Post permanently displayed above the Blog Posts.

6. Finally, we can delete the draft Post. If you have uploaded pictures, you will be asked whether you want the pictures deleted. Since you are using these pictures in your Sticky Post, uncheck the box to keep the pictures in your Picasa Web Album.

Change the Post Date Method

When you are creating a new post, you can see at the bottom left of the Post Editor a “Post Options” link. When you click that, you will be able to amend the “Post time and date.” If you want the post to be always on top of all the other new posts, change this date to a future date like the year 2015. Once the post is published, the post, being the latest post in the reverse chronological date order, will always appear on the Home page as the first post.

Sticky Posts in Blogger

Important Notes:

i) In the new Blogger platform, the URL of Posts follow the month and year that are specified in the “Post month and date” option. In our example, we specified the month as August and the year as 2015. The Post URL will be http://BLOG URL/2015/08/TITLE.html. This URL will remain unchanged even if you edit the post and alter the date. Good for us. It means that we can change the date of an earlier post without affecting the backlinks to that post. People who linked to that URL will not have to change the link address.

ii) You can therefore alter an existing post in the same manner. Edit the Post. Change the year to a much later year and the post will always appear on your Home page.

iii) The other point to note is that when the year 2015 arrives, you may have to alter the post date yet again to another later date. Who knows, perhaps by then you may not want that post to appear on your Home Page anymore.

iv) If you want a recent post to be stored somewhere at the end of your archive list, and never to appear in the list of recent posts, use the same method but change the date to an earlier date, a year like 1950.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

Aug 19, 2007

Digg This Story

Make Blog Private and Unsearchable

Many people write blogs to share their thoughts with everybody and anybody. However, you may also use your Blog as an online diary, penning very personal and private thoughts. Like all diaries, you can either allow a select few persons to view the Blog or allow no one but yourself the right to view it. Also, you may not want it to be indexed by search engines, so that people searching for it on the net will not find it in the search results.

This article lets you know how to create private Blogs. If your intentions are the exact opposite, and you want to publicize your Blog to the whole world, follow our other guides to submit your Blog to Blog Directories, Google, Yahoo and Feed Directories.

First the caveat. These guidelines will only show you how to make your Blogger blog as private as you can get. As we shall explain, there is no guarantee that search engine spiders will never find your Blog because any site that is available on the net will be crawled by search engines. What we can do is to minimize that possibility.

Note that these steps are to be taken BEFORE you create the blog. If you already have an existing Blog, it has in all likelihood been indexed. These tips will at best prevent future contents from being seen.

Title and Blog URL

Do not want people to associate that Blog to you? When you create a new Blog, select a Blog URL and Title carefully; choose words that have no bearing or relation to you or what you do. After the Blog is created, DO NOT post. Post only after you have completed the following steps.

Permission

We start with the most crucial and essential step. Blogger has made it easy for you to create private Blogs. When you are logged in, go to Settings -> Permissions. You can restrict your Blog Readers to only people you choose or only the blog authors.

People who enter the Blog URL into their browsers can still see the Blog Title but will be prompted to enter their Google account particulars and password. If they are not given the rights to view the Blog, a message will be shown: “It doesn't look like you have been invited to read this blog. If you think this is a mistake, you might want to contact the blog author and request an invitation.

While the contents cannot be seen, people do know that this Blog URL with that Blog Title exist and it is a private blog. As we had mentioned, if you don't want anybody to know this Blog is yours, it is important to have a Blog URL and Title that are not obviously connected to you.

Listing on Blogger.com

These are the further steps to take, just to be sure. Under Settings -> Basic, you can see a “Add your Blog to our listings?” option. Choose “No”. Click “Save Settings” at the bottom. This will do three things –

i) Your Blog will not appear when people search Blogger.com.

ii) This Blog will not be shown in the Blog List on your Profle page.

iii) The Blogger homepage showcases a list of recently updated blogs but this Blog will not be shown.

Ping Setting

Go to Settings -> Publishing and under the “Send Ping” option, choose “No”. Save the Setting. Whenever a Blog is updated, Google will notify some of the tracking services of the updates. If your Blog is private, there is no reason why these services ought to know of your Blog updates.

Site Feed

Your Blog contents can be read through your Site's Atom and RSS Feeds. People can catch up on news and articles by subscribing to these Feeds and viewing the material using their Feed readers. If you do not want your contents to be read or syndicated, go to Settings -> Site Feed and to the question “Allow Blog Feed?” select “None” and click “Save Settings”.

Meta Tag

Now that we have altered the settings for the Blog, we can add a further meta tag into our template to tell search engines not to index the site. Click Template ->Edit HTML and you can see the source code. Somewhere at the top, just below <head>, insert this line (shown in red):-

<head>
<meta name="robots" content="noindex,nofollow" />


Leave this tag there. Search engine robots which visit your site will not index the Blog pages and contents.

Profile

We thought we should cover this for completeness. In the top right corner of your Dashboard, you can go to the “Edit Profile” page. Under “Show my blogs”, if you see a blog that you do not want people to know about, remove it from the listing. People who view your Profile will not know about the Blog. You can also choose not to share information about your Profile by not ticking the box next to “Share my profile”.

External Links

The steps outlined above are within your control but this one is not. It is also the reason why we said we can only minimize but not eliminate the possibility that people know of your Blog. Anybody can link to your Blog URL since it is a valid URL. If your friends happen to know about your Blog and write a post mentioning your Blog or linking to your Blog, there will be an external link to your Blog. Whatever they write about it will be public knowledge. Hence, to have an online diary that only you know about, remember that a secret shared by two persons is no longer a secret.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button