Sadhycia: October 2009

Friday, October 30, 2009

How to Add Amazon Associates to Blogger

Not very long ago Blogger.com introduced a new and cool feature which enable us to add Amazon product listings easily to our posts.

It is easy to do, you can follow the steps below if you are interested to add Amazon products to your posts fast and easy without having to bother opening Amazon site in a new tab and searching the product you want, copy the link and paste it on your post.

First thing to do is you need to register or signup as an amazon affiliate.
Go to your Blogger dashboard and then click Monetize.

Under the Monetize menu, click on the Amazon Associates tab.
Fill in the Amazon affiliate ID in the text field provided.
After that follow the instruction on that page if you want to add product previews to your posts.
After that click Save Settings.

Now when you go to make a new post, you can see there is an Amazon box at the right side of the page (see the screenshot below).

How to add amazon products to your blogger post

You can search and choose the Amazon product from there. You can also choose whether you only want the link to appear on your post, the image or both the link and image. Point the cursor on your post where you want the product to appear and then click one of the three option (link, image or link+image) and the product will automatically appear on that chosen spot. You can see the example i did on the right side.

See how easy it is to use this new feature to add Amazon product to our post.

Swap blog title with page title in Blogger blog

By default, Blogger will place the title of your blog before the title of the article in the title bar. According to Search Engine Optimization, it is much better if our keywords in the title bar should comes first followed by the title of the blog. This to ensure that search engine robot or spider will read the keywords before anything else, so that our site is lkely to be placed higher in search engine result.

Fortunately, there is a good hack to rectify this problem. By simply swapping the position of the page title with the blog title, we can obtain significant improvement in the search engine result.

To swap the position of the blog title with the page title:

Always backup your template before changing anything to avoid any undesired outcome. Click ‘download full template’ and save it into your harddisk.

Replace this following line of code:

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

With this one:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

After that click on ‘Save template’ and you’re done.

Try to view your blog, your page title should now appear before the blog title and is separated by the ‘hyphen icon’. This should works even if you view your entire pages of your blog.

Add meta tags to each Blogger posts

Meta tag is an HTML tag which resides in the <head> section of a web page. Meta tags is not visible when seen in a browser, so visitors never see them. Meta tag is very valuable because of the fact that search engines are going to use it to describe our site in the search result. Meta tags are also used as an information for the search engine as whether your site is the one that users are looking for. Ignoring on-site search engine ranking factors can be costly because things like keyword-rich titles and solid internal linking can produce a very significant impact. Since Meta keywords and Meta description are not automatically generated for Blogger templates, we have to add them to the HTML markup of our Blogger templates.

How to add meta tags to each of your Blogger page:

Login and open the dashboard of your Blogger blog
Click Layout and Edit HTML
Before making any changes to your template, always backup your current template.
Find the following code:

<title><data:blog.pageTitle/></title>
Copy the following code snippet below, and after that paste it below the 'grey' code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/>
</b:if>
So finally it will look like this:

<title><data:blog.pageTitle/></title>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/>
</b:if>

That will add the meta tags for your homepage of your blog.
Replace the DESCRIPTION with a description about your homepage (keep it less than 150 character).
Replace the word KEYWORDS with your keywords, each keyword separated by commas and make it relevant for your homepage (keep word repetition less than 3 in order to avoid keyword spamming).
To create and add another meta tags to each of your Blogger posts, copy this following code:

<b:if cond='data:blog.url == "URL-OF-YOUR-PAGE"'>
<meta content='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/>
</b:if>

place the code just below the homepage code that you just entered. You need to repeat the step above in order to create another meta tags for your next individual post.
You can check whether you've add the meta tags correctly without any mistake with any meta tag analizer provided on the web like submit express or seo centro.

How to Stop or Turn Off Commenting Feature on Blogger

Most bloggers love comments, especially useful ones. But when people flood your posts with spams, it would be tiring for you to manually delete all those unwanted comments that could hurt your blog.

In Blogger, by default, comments enabled for all our posts. Have you ever wanted to turn off or disable commenting on your specific post on your Blogger post? In fact, you are allowed to do so, here’s how:

How to remove date, time and author on Blogger posts

There are many reason for blogger to hide their post date, post time and post author. It might appear less cluttered to them or simply they want to make their blog looks cleaner and tidier. Now Blogger provides an easy and fast way for you to hide those options without having to edit your HTML template and involve in HTML codes. You can choose to hide only post time, post date, or post author, or all of them, and even to hide some other options like label, comments, Show Quick Editing and etc . Ok lets we begin the tutorial:

First thing to do is of course sign to your blogger account and go to your Layout from your dashboard, then at the bottom of the Blog Posts box, click an edit button and a pop up box will appear.

how to remove date, time and author on Blogger posts

Now all you have to do is uncheck the radio button next to each Post Page options to hide the menu and check it again to re-show it on your blog.

how to hide date, time and author on Blogger posts

When you’re finished with your settings, click save and the task is done.

You can also check the date of an article or web page and find out when it was first published.

Remove Subscribe to: Posts (Atom) link

You will see there is “Subscribe to: Posts (Atom)” link in every new Blogger blog that enable visitors to subscribe to your Atom feeds. On the main page, this will link to your main site feed, whereas on post pages, this wiill link to the comments feed for a partricular post. However many bloggers choose to remove it because it occupies space at the bottom of the template so it does not look nice. Moreover, blog owners who try to make their blog looks more like a website will definitely choose to eliminate those links. To remove the “Subscribe to: Posts (Atom)” links:

Save a copy of your current template, just in case if you do something wrong.

Find and choose one of the following codes below and delete it:

<b:include data='feedLinks' name='feedLinksBody'/>

Or

<b:include name='feedLinks'/>

To be sure this has worked, preview the blog template and save the settings, the “Subscribe to: Posts (Atom)” link wont be there anymore on your blog.

Remove Newer or Older Post Links

If you want to make your Blogger blog looks like a website, one of the things you need to remove is the “Newer Post”, "Home", and “Older Post” links from Blogspot post footer. Besides removing them you actually can change them or add images instead of “Newer Post” and “Older Post” links. There are two ways to do it and these hack are easy to perform and will take only few seconds.

How do i get rid of "Older Posts" - "Home" - "Newer Post" links?

From your Blogger dashboard click on Layout > Edit HTML > tick Expand Full Templates box.

Don’t forget to backup your template, many bloggers made mistakes in this hack.

Search for the following code:

<data:newerPageTitle/>
and
<data:olderPageTitle/>

Now simply delete above codes or replace with anything you want to write, to add picture just place the image URL before the Previous Page and Next Page. Remember to preview changes before saving it.

The second method is:

Go to Layout > Edit HTML > tick Expand Full Templates box.

Again, backup your template.

Find these codes below:

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

Add "display: none;" inside every curly braces, it will then looks like this:

#blog-pager-newer-link {
float: $startSide;
display: none;
}

#blog-pager-older-link {
float: $endSide;
display: none;
}

#blog-pager {
text-align: center;
display: none;
}

Preview the changes and click save template.

How to change Blogger URL address

Simple steps on how to rename your Blog’s URL:

On your dashboard, click on “Settings”

On your Basic Settings page, switch to “Publishing” tab

On Publishing Setings page, you have 2 options to change the URL of your blog. The first one is to enter a purchased domain name which will omit the “blogspot” in your URL. The second option is to type in the input box provided with your new URL ending still with “blogspot.com”. You will need to checkfor availability just as you did when you first created your URL. If the new address is available, your blog will be republished on the spot, under that address.

Complete the word verification and save your settings.

Important:
There are many disadvantages of changing your blog URL especially if you have a well-established blog and has been on the Web for a long time. If you changed your blogger’s URL, any existing incoming links will become dead, therefore you will lose your loyal visitors who frequently visit your blog, except they are informed beforehand. These dead links include those bookmark links that you received from your social bookmarking websites and the links from Favorites and Bookmarks of your visitor's browser. Secondly, you can say bye- bye to your Alexa ranking and your Google pagerank which solely depends on your blog’s URL. You will have to wait for your new URL to be indexed by the search engines all over again.

So before changing your blog URL think it carefully, do it if it is absolutely necessary for you.

How to add Favicon to Blogger blog

Favicon stands for “favourite icon”, (also known as a bookmark icon, shortcut icon or website icon). It is a 16 X 16 pixels icon which appears next to a website’s URL in the address bar, it also appears next to the page’s title in a tabbed document interface and in bookmarks. Adding a favicon to your own blog is a good way to distinguish your blog from millions of other blogs.

There are many free online tools which can help you generate a favicon. As for me, i use http://www.html-kit.com/favicon/ for my favicons. When you upload your favicon image to HTML kit’s they will automatically give you two 16 X 16 favicons to download, one is still image and the other one is animated version. You also can create your own image for your favicon from any image manipulation softwares like Gimp or Photoshop, just by selecting the dimension to be 16 X 16. I know there are still many sites that many people recommend to generate a favicon, but i dont have time yet to explore them.

To add favicon to your Blogger:

You can upload your favicon image to an external web host, such as Photobucket or your Google Picasa album. Login to your Picasa photo album and Click upload button to upload your image. Once your image is sent, copy the URL by clicking “Link to this photo” on the right side of the screen. To copy your image URL, you also can do it by right-click on the image and select “Copy Image Location”.

Perform your back-up.

Find the following code:

</head>

Just above the code (or in between <head> and </head> tags), add the following HTML code:

<link rel="shortcut icon" href="Your-Favicon-Image-URL" >

or

<link href='Your-Favicon-Image-Url' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Replace the red text above with your favicon image URL. Once you're done, the code should finally appear like this (i take mine for an example):

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAK7V9Xnb759Kcso_g_BRPRljqrEBkIqzf3rBY2tGc5QxXihzecnkc4zOx77F9b4iHLb_hRyrBe4f51yuAXAroL7pIuq0NvoZBPQgzRho4L8kz_OO_fWTMXVS37g4J3t36FPRlkS5yvI9n/' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
</head>

Save your template and test.

If the favicon still doesn’t appear, clear your browser’s cache file and restart the browser. After that renavigate to your blog.

Thursday, October 29, 2009

How to remove navigation bar in Blogger blog

You will see a navigation bar of every blogger blog, the colored stripe across the top that consists of Blogger search box used to search your posts, a link to your dashbord, a place to sign in, make a new post, and customize your blog option. Sometimes, the color of the Navbar does not fit for your Blogger design or template and Blogger does not provide any option for us to remove it. As many Blogger do not like to have it and choose to remove this bar in order to make their blog look more professional and does not look like the rest, and you need not try to match your blog’s colours to the limited colour palet which the Navbars come in. Secondly when your readers click on “Next Blog” on the navbar, they will be redirect to some other blog on the same window and your blog will disappear from the view.

How to remove navigation bar from your Blogger blog (actually it is just hidden), it’s easy to implement. Here are the steps:

Sign to your Blogger, from the dashboard click Layout > Edit HTML.

As usual, it is always recomended that you back up the template before changing anything. To perform the back up, just click “Download Full Template” and save it to your computer.

Now look for the following code:

/* Variable definitions

Immediately above that line, insert this following code:

#navbar-iframe {
display:none;
}

Click “Save Template” orange button to save the changes.

Done :)

Wednesday, October 14, 2009

How to Modify and Delete Borders in Blogger

For those using Blogger with Minima template, you can actually remove or change the borders from the header or sidebar. But if you just simply want to change the color of your borders, the easiest way is through Dashboard --> Design --> Template Designer --> Advanced.

How to Change and Remove Borders in Blogger

From there you can choose the color you like, or make the color of the border the same as your blog background in order to ‘hide’ them. After that you can press “Apply to Blog”.

To alter other border such as header, you need to go to dashboard --> Design --> Edit HTML, then search for these lines:

/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center; color:$pagetitlecolor;
}

To change the size (height and witdh) of the border, you can insert the following line/s inside the curly brackets of the header-wrapper:

height:140px; (this is for the height)
width:780px; (this is for the width)

Just change the amount of pixel you want for your border.
If you want to remove the border around your image, you can just delete the whole line that i highlight in green (see below).

/* Header
-----------------------------------------------
*/

#header-wrapper {
height:140px;
width:780px;
margin:0 2% 10px;
border:1px solid $bordercolor;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

In the Minima template, the below codes create the border at the bottom of your every widget including the bottom of your main post:

.sidebar .widget, .main .widget {
border-bottom:5px dotted $bordercolor;
margin:0 0 1.5em; padding:0 0 1.5em;
}

If you want your border at the bottom of your sidebar to be different from the border at the bottom of your main post, you can split the above codes like this:

.sidebar .widget {
border-bottom: 3px dashed $bordercolor;
margin:0 0 1.5em; padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

you can change the style of your border to Dots, Solid, Groove, Double, Dashed etc.
If you change the -bottom above to -top, -left, -right, that setting will apply to border only in those areas.

You can actually steal other template's border and add it to your template so that you can have similar border style from the template you taken from.

How to modify or change image border in Blogger

In previous post you probably have read my post about how to remove image border from your Blogger posts, in addition here i want to show you how to modify, change, add styles or effects to the border of your images as well.

There are number of methods to change the color of the image border in Blogger. Here is one of them:

From your Blogger dashboard, go to Layout – Edit HTML (no need to check the Expand Widgets Template box).

Find the following code, you can use Ctrl + F to find them via your browser finder:

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

or

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

The code above is the tag for your images style. After you found it, change the following line:

border:1px solid $bordercolor;
to
border:1px solid #FF00FF;

Replace the red color text above with your own color HTML code. For example if you want it to be dark red: border:1px solid #B40404; or if you want it to be light green: border:1px solid #A9F5A9.

After you’re done click Save Template button to save your changes.

To change the border line style around your image from solid line to dotted line you can simply change the word like this:

border:1px dotted $bordercolor;

To change the border line style around your image from solid line to dashed line you can simply change the word like this:

border:1px dashed $bordercolor;

Dashed style.

The word control the type of your image border, and other types of line style that you can use as a border are "groove", "inset", "outset", "double", "ridge" and "hidden". Try replace with those words and see how it looks like.

border 8px Groove, padding 2 px	border 8px Double, padding 2px
border 8px Inset	border 8px Outset
border 8px Ridge, padding 2px	border 8px Dotted

What is padding? Padding is a space between your border and your image. To increase or decrease the space between your border and image you can change the pixel number from this following line:

padding: 5px;

To add a background to your image as border:
To add a background effect you must have your padding on, after you add your padding then you can add this following line to your code:

background: url(Image Location);

Replace the Image Location text to your image URL. Your code should then look like this:

.post img {
border: 6px solid #FF0080;
padding: 12px;
background: url(Http://www.pichost.com/myimage.gif);
}

how to add a background to your image as border

Tuesday, October 13, 2009

How to remove image border in Blogger

In certain Blogger templates such as Minima template, there is an image border given automatically everytime you upload your photos or images to your blog. Sometimes you need to remove it or change it all the image borders around all your images that appear in your posts.

Here are the example of image with border and without border:

How to remove image border in Blogger, here are the steps:

On the dashboard, navigate to Layout – Edit HTML.

Download your existing Blogger template for your back up by clicking “Download Full Template” button.

Find the below code in your template (no need to tick the Expand Widgets Templates box). Note: the code in Blogger blog templates varies but the code below is the code we will find on a Blogger Minima template or most other default Blogger templates.

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

or if you could not find those code, find these code below:

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

When you have found it, you have two ways to delete or remove the unwanted border image code. You can either delete the following line:

border:1px solid $bordercolor;

or change the border pixel to zero, like this:

border:0px

After that dont forget to click "Save Template" button and start to admire your new post images without the image border.

To increase the width of your image border, just simply change the pixel number from 1px to 2px or 3px etc.

How to remove the border of an image of a single post and leaving the rest alone with their borders?
In this case then you can edit your post which contains the image that you want to remove its border, go to "Edit Html" mode and insert this following code inside the image source tag of the image:

style="border:none;"

so the code should then appear like this:

Find out also how to modify, change, add effects and styles to image border in Blogger.

Monday, October 12, 2009

How to back up your Blogger blog

Perhaps one of the most important thing about Blogger is to know how to back up your entire blog especially when you have put so many effort and had so many posts in it. There can be nothing worse than to find your blogger blog gone one day, either being hacked, corrupted, deleted or any other unforseen error. In the past backing up our posts, comments, pictures or images and links was almost impossible and requires some kind of third party software. Blogger changed a lot and always come up with new features, this time i want to write about their ‘backup’ function. Now we can create a complete backup of our Blogger blog on to the hard drive easily and fast, just in a clicks. At least now you dont have to worry if you accidentally delete some of your old blog post.

To start backing up your Blogger blog, first sign in to your account.

From your dashboard click setting.

On the basic tab click Export blog.

A new page will load, click “Download Blog” and the download manager will appear, save your XML file to your hard disc.

Done.

If something terrible happened to your Blogger blog, you can always go to Setting > Basic, but this time you click "Import blog", then click "Browse" and go to where you stored your backup Blogger XML file, fill in the captcha (word verification) and click "IMPORT BLOG".

This export import features can also be used to export all of your Blogger blog to other blogging platform like Live Journal, Wordpress, etc.., or to import your blogs from Wordpress, etc.., into your Blogger blog.

Thursday, October 8, 2009

How to add adsense after the posts

Many people believe that having adsense ads just before the blog posts and after the blog posts will best optimize their performance. How to show adsense adds at the end of Blogger posts, as you probably all had known about how to put adsense adds in the beginning of the posts below the title (as for those who dont know you can read my previous post on how to put adsense in the beginning of the posts, under the heading). To put adsense adds at the end of the posts is as easy as putting it under the heading, its only that you need to place the adsense code slightly at different position. Lets get started before you get confused..

First you need to parse your adsense code. You will not contravene adsense terms and conditions by parsing the code (parse means to substitute the < and > for the HTML encoding for these characters). You can go to http://blogcrowds.com/resources/parse_html.php to parse your code, its easier and faster so that you need not to change it manually.

Tick “Expand Widget Templates” box. Make sure that you backup your template before making any changes.

Find below code (its easier using your browser built-in search feature):

<data:post.body/>

To feature ads at the end of each posts, paste your parsed adsense code below the above code. To feature ads after your post titles, insert your parsed Google adsense code just before the above code in your template.

Dont forget to save the template and start to see the ads in action.

Wednesday, October 7, 2009

How to add AdSense Adds in the middle of Blogger posts

Is it possible to add Google adsense ads in the middle of your posts? Yes it is possible and not only that, you also can choose where you want to put your adsense ad in your blog post. Besides it looked more professional, many blogger use this hack in the hope of getting more clicks on their adsense so that they earn more money.
Ok lets get started..

First step, of course you need to login inside your Blogger account using your username and password.

Then, on your dashboard, click Layout > Edit HTML and tick Expand Widget Templates above the template HTML box.

Press Ctrl + F to find this code:

<data:post.body/>

and replace the above code with all the codes below:

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">

PLACE YOUR ADSENSE CODE HERE

</div>

<div expr:id='"aim2" + data:post.id'>

<data:post.body/>

</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Before you insert your Google adsense ads code, you need to parse it first. Click here to find out what is meant by parsing the code. To parse your adsense code you can simply go to http://blogcrowds.com/resources/parse_html.php

Note: if you have the “Read More” hack installed on your blog, you will find two similar code of <data:post.body/> then you change or replace the first one.

After that save your template and its done!

You now can write your post as usual and when you want to place your adsense ads somewhere in the post, just insert this tag  and your adsense ads will automatically appear on that spot.

How to put your adsense below the title

Many say that put advertisements under the headings, visitors will be more inclined to click your ads. In the page element setting on Blogger there is no option that we can put adsense under the title and above the posts. Here are the alternative steps you can try to do it (these steps are for Layout template or new Blogger template).

Note that the adsense code cannot be pasted directly in the blogger’s XML template because error message will appear like this:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly. XML error message: The processing instruction target matching "[xX][mM][lL]" is not allowed.

So before you put your adsense code in your blog, you need to parse the code. What is meant by parse the code? Parse means making your adsense code standarded XML and that is made by replacing aall the HTML character such as (<) with (<), (>) with (>) and (") with ("). Parsing your adsense code will not violet any Blogger or Adsense regulations and parsing the code is necessary in order to put the code in Blogger's XML template. You can replace them one by one manually or by using text editor to replace all the HTML. There is a Parse HTML tool used for parsing your adsense code and is free and easy, that is:

http://blogcrowds.com/resources/parse_html.php

Paste the adsense code and click “Parse”. Now copy the parse result and save it. When you’re done follow the steps below:

Login to your Blogger.
Click Layout.
Click Edit HTML (it is always a good idea to backup your templlate, so that you can revert if you mess things up).
Check mark “Expand Widget Templates” above the template HTML box.
Now If you want to put your adsense above posts and below the page title, then paste your parsed adsense code above this tag:
<data:post.body/> or <p><data:post.body/></p>

To set the position of your adsense to the right or left of the blog article content, you can add the float tag before the adsense code, like this:

<div style='float: alignment (right or left)?;'> Your adsense code here </div>

(Example), If you want it on the left:

<div style='float:left;'>
AdSense Code
</div>

When you are done click “Save Template” and do check your blog to make sure your adsense ads are right where you want it.

Tuesday, October 6, 2009

How to prevent accidental clicks on your own AdSense Ads

Not a few of the bloggers who accidentally click on their own Google adsense ads. This accidental click often happens when they are updating, changing or modifying their blog, in part because of their negligence too and errors of the computer or Blogger itself. Because of this they can get themselves being banned from that Google adsense program. One of the things probably you should do when you caught yourself accidentally clicking on your own Google adsense ads is to contact Google straight away, email them before they email you, provide more information such as the date and time when this happen.

One of the good way that i can find to prevent yourself from this accidental click is perhaps using this free script who was developed by Michael Hampton.

To implement it, you need the latest Firefox installed in your computer.

After that download and install GreaseMonkey add on to your browser to apply the script (old versions of GreaseMonkey are not tested and not supported).

For the script itself you can get it by clicking Here. After installing the script, the first time you see your adsense ad unit, it will pop up with a box to ask for your adsense publisher ID which can be found in your adsense account, look out for your Google adsense code and find this code PUB-XXXXXXX. This is needed to let the script knows which ads to prevent clicks from.

To find out whether you’d successfully install the script is to test by clicking on the “Ads by Google” link in your ad units, if it does not go anywhere then it is working.

Monday, October 5, 2009

How to remove label number count in Blogger

If you have read my previous post about deleting or hiding the number of posts shown in Blogger archive, here you might also want to know how to remove the number of posts shown from your blog label in your sidebar. For some, hiding all label counts from their Blogger blog can be a very good idea especially for those who are new to blogging or have a limited number of posts. Even so many old bloggers with hundred of their posts assigned to each label choose to remove the label counts because they think it is no use of showing all of those things and removing label number counts will give them a cleaner and professional look of a blog.

If you are interested of removing it also, you can follow these steps:

On your Blogger dashboard click Layout >> Page Elements tab.

See if you have a label widget ( a widget to show all your labels) there, if you do not have then activate it by clicking on Add a Gadget > select Labels and click SAVE.

Next, click Edit HTML and tick Expand Widget Templates box.

Remember, it is always a good idea to create a back up copy of your template before you start making any changes for your template.

Press Ctrl + F on your keyboard to find this code:

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

After you have found it, scroll down a bit to find the following piece of code and delete it:

(<data:label.count/>)

Click SAVE TEMPLATE and done!

There will be no more post count after each label in your list.

Sunday, October 4, 2009

How to remove the number of posts shown in Blogger

By default, your blog posts archive will have an automatic count of the number of posts. The number of posts will be displayed next to the name of the months, you can remove those counts. This step by step instructions below is the simple hack to remove post count from Blogger archive.
Let’s look at this Blogger archive list before the hack:

And after the hack the archive will look like this:

How to hide number of posts shown in Blogger

If you notice there are many blogs you will see that are using this hack or trick, ok lets we begin..

First, as usual, login to your Blogger account and from the dashboard click Layout.

On Edit Layout page, click Edit HTML and your template HTML codes will appear.

I suggest you that you better back up your template first by clicking “Download Full Template” link above the HTML column and save it to your computer, if you make a mistake or an error occurs and you do not know how to fix it, you can always upload the template and go back to how it originally was.

Tick Expand Widget Templates box

Press Ctrl + F and search for the below code (before that, make sure you are using your blog archive in your sidebar, if not you will not find the code):

(<data:i.post-count/>)

you will find the above code 3 times in your template, delete all the three and after that click SAVE TEMPLATE.

Done. Enjoy your new blog archive.

Do you know that the number of posts shown in Blogger label can be removed too?

Saturday, October 3, 2009

How to add emoticons to Blogger

One of the many things to blogging that people like and are not provided by Blogger itself is using emoticons, adding emoticons on the posts can make our blogs become more expressive. Fortunately in Blogger there's always an alternative way to do it. For those who love emoticons, here's how to do it...

First you need to have the latest Firefox installed in your computer. Click Here to install it.
After installing firefox is done, now install GreaseMonkey Extension (a browser plugin). Click Here to download and allow your Firefox to install and restart the browser.

What is GreaseMonkey? GreaseMonkey is an add on for Mozilla Firefox. It is a third party firefox extension which allows users to customize the way webpages function and look by using little scripts (called userscripts) that are executed each time you visit a particular page. The scripts do not actually change the website itself, but it does change the way Firefox interacts with the HTML on a webpage. With GreaseMonkey, you can create scripts which will alter a website before it is loaded on the system. GreaseMonkey is used for many purposes: to fix bugs, get rid of the informations that the user does not need, embedding features into website and combining data from 2 pages. (well, those are the advantages of using Firefox instead of Internet Explorer too).

Next, install the emoticon GreaseMonkey script by clicking Here.

After its done now you should be able to add emoticons during your blog writing by simply clicking on them in compose mode. For those who are using “Read More” function, be aware as the script might alter your tag.

Lastly, to remove a border of your emoticons, go to Layout from your dashboard, click Edit HTML and just add the following script:

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Put the above script just before the code:
]]></b:skin>

Done.

Sadhycia

Blog Archive

Followers

Labels