Test Blog by DragonD: April 2009

Add a Image before Title

Here is a way to make your blog more beautiful. You can add a Image before your post's Title like I have done .But you have to remember , always try to add a small image , other wise your blog will become a mess. 60*60 will be the biggest resolution to use.

Create a Image using your Image editing software or Power Point ( Or use a image you like ) and upload it to a Image hosting site. ( For free Image hosting , use www.imageshack.us )

After creating and hosting your image,

1. Edit your template
2. Press 'Ctrl' key and 'F' and find b:if cond='data:post.url'

Now you will find some code lines similar to

<b:if cond='data:post.url'>.

<a expr:href='data:post.url'>.<data:post.title/>.</a>.

Now paste your image's URL with an another code line as follows

<b:if cond='data:post.url'>.

<img src="Paste Your image's URL here"/>.

<a expr:href='data:post.url'><data:post.title/>.</a>.

Now follow the Safety Saving Steps.

And

Remove Blogger Navbar

In many blogger templates ( Mostly in classic blogger templates ) there is a navigational bar , top of the all ! Is makes the blog too much classic ! ( really , it makes the blog quiet ugly )

This is the way to hide it.

1. Edit your template
2. Press 'Ctrl' key and 'F' and find b:skin

Now you will find some codes similar to

<b:skin><!--[CDATA[/*

now paste following lines just after <b:skin><!--[CDATA[/*

#Navbar1
{
margin: 0;
padding: 0;
visibility: hidden;
display: none;
}

Now follow the Safety Saving Steps.

And

About DragonD

This is me

Name

Widanalage Don Dilshan malith sachintha Abeygunawardana.

( Oh , $#it , what a long name ! )

Sex
I’m a Male. Thats for sure

Location

Abeygunawardana gems , No 28 , Kothvila road ,Eheliyagoda ,Rathnapura , Sri Lanka

Who I am?
Just a kid , 16 in age !

I Love
1 .My Parents

2 .My Self

3 .My PC

Not much......... hih hih hee

Am I in a Love with

Nop , not yet

Am I FAN of some thing or some one

yes, I’m a fan Grand Theft Auto , Crysis

, Undertaker , Backstreet Boys , Akon , oh I nearly forgot DragonD

What are My hates?
I hate my old computer

, my fu*king router ( it always stuck !) & Out door games

...........

In my Free Time

I listening to songs

, Thinking

, Reading

, Blogging ......

Religion
I am a Buddhist

Political View

Nop , not interested , I'm never gonna vote !

Family
Me , My bro , Dad , Mom , Tutuu the cat

, my fishes

Friends

Many , School friends , Online friends and few true friends.....

My special thanks to

My parents
Chinthana , Kalhara ( Mr.FOSS ) , Gayan bro , Asanka bro , Susith , Elekiri.com community & You

Changing the Newer \ Older post link text

You may have seen 3 links , under your every post as Newer Posts & Older Posts really , these are too much classical , so lets change these names.

For that,

1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and search under data:olderPageTitle

now you will find some code lines similar to

Type the word you want to use instead of Older posts on <data:olderPageTitle/>

Ex :-

Now to change Newer post link , find out data:newerPageTitle

now you will find some code lines similar to

Type the word you want to use instead of Newer posts on <data:newerPageTitle/>

Ex:-

Now follow the Safety Saving Steps.

And

Removing Title

Blog title and description is very important in every blog. Search engines when indexing your blog use the title and description tags.But there can be occasions that you may not need your Blog's title or description.

For that,

1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and find out header h1

Press Next until you find out some code lines similar to

#header h1 {
margin:5px 5px 0;
padding:10px 20px .35em;
}

add this code line display:none;

as

#header h1 {
margin:5px 5px 0;
padding:10px 20px .35em;
display:none;
}

Now follow the Safety Saving Steps.

And

Removing Label Number Count

When you add the Label gadget , you will able to see the number of labels , in front of the name of the label. Some times , these numbering makes your label gadget some what ugly. And if you have only one tag for certain tag , that reduce your points too.

ex:-

Here is the way to remove that ,

1. Edit your Template
2. Press Ctrl+F and find out data:label.count

Now you will find out some code lines similar to

<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>

Remove this code line

(<data:label.count/>)

Now follow the Safety Saving Steps.

And

Now you are done.

Adding more Page Elements

At some Templates , you will not be able to Add a Gagets below your header because that option will not be available for you at the layout window. Adding a Gadget bar just below your header can help you in many ways.

1. It can act as a Navigational bar
2. you can post Adsense ads
3. Or for any thing else

As you see, there are no Add a Gagets option at the header of this layout.

To add a Add a Gagets option

1. Edit your template ( How to edit your template )
2. Find out the code line section class='header' id='header ( Ctrl+F )

Now you will find out some codes lines similar to

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

To add more Elements change maxwidgets='1' to any number more than 2 ( Or as much as you are willing to add gadgets )

ex : - maxwidgets='5'

and change showaddelement='no' to showaddelement='yes'

Now follow the Safety Saving Steps.

And

Note :- This Trick will not available at every blogger template.

Changing Author's Name

Above your every post , you will see your name ( or the Author's name ).It will always display your Blogger accounts name , But you can change it ! You can use a name of your own as you want to. You can use a cool name as 'Heaven writer' , 'Fun Man' or even 'Unknown'.

For that,

1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and Find ' data:post.author '

Now you will find some code lines simillar to

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>

<data:post.author/> , This stands for your name.

Use what ever you like to use

Ex:-

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> The Heaven's Poster
</b:if>

If you want to remove the word ' Posted by '

remove the line <data:top.authorLabel/>

Now you will get your code lines as

<span class='post-author'>
<b:if cond='data:top.showAuthor'>
The Heaven's Poster
</b:if>

Now follow the Safety Saving Steps.

And

Changing the word ' Labels '

You may have seen the name Labels and bunch of labels that you have given to your post , below or above your post.Don't you feel that it is classic and common ? So , what about a name like My Topics , Categories or some thing like that ?

For that ,

1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and Find out data:postLabelsLabel

Now you will find some code lines similar to

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>

<data:postLabelsLabel/> , This line stands for the word 'Labels'. Change this word to any thing you like to

ex-

<span class='post-labels'>
<b:if cond='data:post.labels'>
Topics
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>

Now follow the Safety Saving Steps.

And

Changing word 'Comments'

Below you every post , there is a counter for comments.It will indicates number of comments you have. Rather than the classical word ' Comments ' , don't you like to use an another word like ' You Ideas ' , ' What do you think ' or some thing like that ?

For that ,

1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and Find out data:top.commentLabel

Now you will find some code lines similar to

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/> <b:else/><data:post.numComments/> <data:top.commentLabelPlural/> </b:if></a>
</b:if>
</b:if>
</span>

<data:top.commentLabel/> means the word ' comment '
<data:top.commentLabelPlural/> means the word ' comments '

Now , change these pair of code lines to what ever you like

ex:-

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 Your Great Idea <b:else/><data:post.numComments/> Your Greate Ideas </b:if></a>
</b:if>
</b:if>
</span>

Now follow the Safety Saving Steps.

And

Removing Newer \ Older Post , Home links

You may have seen 3 links , under your every post as Newer Posts , Older Posts & Home. If you don't like to change it ( see how to change these links ) you can remove it. Really this is very easy and similar to this lesson. But , I recommend you to keep these links. If you don't like the words ( Newer Posts and Older Posts ) , just change them to any thing you want.

Really , these make the blog some what ugly. Isn't it ?

So , lets remove these.

1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and find out ' blog-pager-newer-link '

Now you will find out some code lines similar to

#blog-pager-newer-link {
float: left;
padding-left:30px;
}

#blog-pager-older-link {
float: right;
padding-right:30px;
}

#blog-pager {
text-align: center;
margin-top:15px;
}

Now change those codes lines to

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

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

#blog-pager {
display: none;
}

Now follow the Safety Saving Steps.

And

Adding Adsense Ads on Posts

As we all know we can just add a Adsense Ad as a gadget. But Can we Add our Adsense Ad on our post ? on our every post ? yes. After some editing in the Adsense code we can easily add our Adsense ad in to the body of the post.

How ?

First of all create your own Adsense Ad and copy its codes to Note Pad or any where you like.

now we have to make some changes on our Adsense codes. Don't be scared , these edits do not brake any Adsense Terms or regulation. ( Adsense Terms )

Change

instead of < , type <
instead of > , type &gt;
instead of " , type "

and also add two more lines ( shown in Red Color )

Now you will get some codes similar to this

<div style='float:left;'>

<script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

1. Edit your Template
2. Copy the Text you want to find out post.body ( 'Ctrl' + F )

Now you will find some codes similar to

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

Now just paste your edited Adsense codes ( with Red color codes ) just before these lines.

Now follow the Safety Saving Steps.

And

If you want to post your Adsense ad in right side ( as i have done ) just change <div style='float:left;'> to <div style='float:right;'>

If you want to post your below your post , just paste these edited codes below the post.body code line set.

Adding a Digg Button

Digg :- Digg is a place for people to discover and share content from anywhere on the web. From the biggest online destinations to the most obscure blog, Digg surfaces the best stuff as voted on by our users.You won’t find editors at Digg — we’re here to provide a place where people can collectively determine the value of content and we’re changing the way people consume information online. ( Continue Reading )

Thats what it says in Digg.com ,

Lets see how to add a Digg button to your blog. Hope you know what is Digg.

Though you don't know much on Digg , the reader may be a digger. So lets add a Dig button to every post of your blog.

For that,

1. Edit your template ( How to edit your template )
2. Find out the code line <p><data:post.body/></p>

Now Paste following codes just above that Code line.

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

Now follow the Safety Saving Steps.

And

Now you will be able to see a Digg button in your every Post.

Removing the Blogger Icon

As you know there are separated icons ( favicons ) for every site. They are the symbols represent that site. Wikipedia has a favicon as 'W' , Google has a one as 'G'. You can see this just infront of the address bar of your browser.

For every blog , there is a one common favicon . It is 'B'.

I don't know about you. But I hate it. Don't you like to use a your own icon. yep ! you like it.

As you create the logo using PowerPoint 2007 and paint ,you have to create a icon too. The resolution of the Icon must be 32*32 or 48*48.Upload it to a blog page. Many Image hosting site do not allow .ico image formates.

or you can create a favicon online using

Now,

1. Edit your template ( How to edit your template )
2. Find out the code line <title><data:blog.pageTitle/></title>

Just paste the following code just below the upper code line.

<link href='Your Icon's Image Location' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

If your Icon's formate is .png , use

<link href='Your Icon's Image Location' rel='shortcut icon'
type='image/png'/>

If your Icon's formate is .gif , use

<link href='Your Icon's Image Location' rel='shortcut icon'
type='image/gif'/>

Now follow the Safety Saving Steps.

And

Removing \ Editing Search bar

For every Blogger template , there is a Search Bar. Some times this search bar will be useful , some times not. And this search bar will be a hell if you are a Adsense user becouse you can't use your Adsense search bar.

This is what on one of my other blog's template.It seems beautiful but i want to delete it.

To Edit or Remove this we have to find it's codes.

1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and search under 'Search'.

Now you will find out the codes

click next until you find a code similar to

<form action='/search' id='searchform' method='get'>

Just under it you may find a code similar to

type='text' value=' ' , Type any thing inside '' if you want to see a text inside the search box
type='submit' value='Search' Type an thing instead of 'Search' if you want to change the caption of the search button.

Now follow the Safety Saving Steps.

And

Removing the Search Box

Find and delete the codes <form action='/search' id='searchform' method='get'> to </form>
( these 2 code lines and few other lines between these two lines , there may be 4 -5 lines to delete )

you may delete some similar codes to these

<form action='/search' id='searchform' method='get'>
<input class='txtField' id='s' name='q' type='text' value=' '/>
<input class='btnSearch' id='sbutt' type='submit' value='Search'/>
</form>

Now follow the Safety Saving Steps.

And

Advanced Editing

If you search on your template's codes more you will find out another search box codes above the following. There may be short codes lines as font-size , color and so on. You can change them too.

Changing the Buttons

You may have seen Buttons like 'Home' , 'RSS' , 'About' , just below the header.May be you want them , may be not. Or may be you will like to use your own Buttons or change the buttons.There are some common buttons for every blog as 'Home' , 'Comment-RSS' , 'Post-RSS' and 'Edit'. This edit button is only visible for you.

If you want to remove or change these buttons

For that,

1. Edit your Template
2. Copy the Text you want to find out and Find out a name of a button ( 'Ctrl' + F ) ex:- Home

Now you will find those codes under <div id='navbarleft'> or <div id='navbar'> and above </div>

First of all you will find a code line similar to <li><a expr:href='data:blog.homepageUrl'>Home</a></li>

This is the code line to the Button ' Home '

Below this you will find out the codes to other buttons.Just delete those codes. ( you have to delete the codes below <li><a expr:href='data:blog.homepageUrl'>Home</a></li> and above the first </div> you find )

Now we have to create our own buttons.

<li><a href='The Link of your page'>Button's name</a></li>

ex :- <li><a href='http://blogger-template-editing.blogspot.com/2009/04/footer-editing.html'>Footer Editing</a></li>

That's It. Now you can create your own buttons or Edit the existence.

Now Follow the Safety Saving Steps

Click

Labels

Blog Archive