Blogger Template Editing

CCS codes part 01

2009-05-30T01:33:00.001-07:00

CCS codes are used at many occasions in the blogger template. If you don't know about these , you may be confused as you see a letter with binary codes. So skip it. For Other , I think these might be very useful at editing your blogger template.

Margin & Padding

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)
}

#div {
margin:0 5px 10px 15px;
(top right bottom left)
}

Border

#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/elements parent color property)
}

#div {
border:5px dotted blue;
}

Background

#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default = repeat)
background-attachment: scroll;
(fixed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}

Font

#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = browse based)
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
font-style: italic;
(normal, italic or oblique) (default = normal)
font-variant: normal;
(normal or small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num or %) (default = normal)
}

List

#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}

* From www.leigeber.com

Adding 4 extra columns to footer

2009-05-28T08:58:00.000-07:00

You can add more and more extra columns to your blog. Now here i am describing you to how to add 4 more columns to your blog's footer. You can add text gadgets and HTML widgets. How ever these gadgets boxes may not appear similar to your excisting gadgets.They may appear like this.

1. Edit your Template
2.Untick the "Expand widgets" tick box if you had ticked it.
3. Now find out

<b:section class='footer' id='footer'/> ( press 'Ctrl' + F to open your browser's search box)

Now paste following code lines by Replacing the line

<b:section class='footer' id='footer'/>

CONFIGURATION :-

TEXT stands for Text gadgets
HTML stands for HTML gadgets

Now follow the Safety Saving Steps.

And

To be continued...................

Adding a Drop down Labels menu

2009-05-26T21:36:00.000-07:00

Labels , they help the reader to find posts under specific category. But , if you are using a single column template or if you are having too many labels , it may be a big problem for you. So , that's why programmers had invented some thing called the Drop Down Menu. Lets add one of it to our blog too.

1. Edit your Template
2. Now find out

<b:loop values='data:labels' var='label'>

( press 'Ctrl' + F to open your browser's search box)

Now you will find a set of code lines similar to following

Now replace above whole code set with the following codes

<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'>
<option>Browse By Labels( Name you want to display as drop down menu's caption )</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Now follow the Safety Saving Steps.

And

Controlling number of posts in Label pages

2009-05-26T20:53:00.000-07:00

As you know , if you click on a label , it will redirect you to a page with all the posts on that label. If there are lots of posts for a specific label , the label page will be so long. This will annoy the reader. Blogger do not give us a simple way to control this label page's posts. So we have to do it manually. Lets see how to ,

1. Edit your Template
2. Now find out

( press 'Ctrl' + F to open your browser's search box)

Now you will find out some code lines as

If you already have deleted the label number count ( learn how to remove label number count ) You may not see code

(<data:label.count/>) line.

Now replace

with

5 stand for the number of posts per a label. Change it to any number ( number of posts that you are willing to show in the label page )

Now follow the Safety Saving Steps.

And

Contact Me

2009-05-26T20:17:00.000-07:00

Do you have any problems on blogging , or do you want to propose me a new trick or ask me how to do a new trick ? Contact me. I am always here to help you.

Contact me on Skype

Contact me on Yahoo Messenger

Send me a Email

Adding a RSS Email subscription form

2009-05-26T09:11:00.001-07:00

Adding a Email subscription form may help you and the reader too. In your side , it will attract the readers and for readers , they can keep in touch with the blog. If you add a new content , an email will automatically send to their mail box and if not no email. This service is given to us by Feed Burner ( Part of the Google ) .As soon as your subscription is active, Feed Burner will send a daily email message if your blog has new content.

Now lest see how to do this. First you have to log in to Feed burner using your Gmail account.
Now you have to go on your own.

just give your blog address and complete the steps. After all , access to your account and select your blog address. Noe select tab Publicize , and select Email Subscriptions from the menu. Now under Subscription Form Code you may see bunch of code lines.

They may similar to these

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggyEdit', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="BloggyEdit" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p>
</form>

You can just paste these but it is just classic , if you want to a form like mine , you have to edit these codes.

For that You have to create a Image. ( Or you can use a text , but if you want to attract more readers , use a Image. ). Here is the my image. I create this one using Power point 2007.

Now , look at these codes

Now edit your code by looking at these , just cut , paste , move and add the image.

Use this

Now ,

1. Edit your Template
2. Now find out

<data:post.body/>

( press 'Ctrl' + F to open your browser's search box)

Paste the code that you edited.

Now follow the Safety Saving Steps.

And

Adding a set of Smilies to comment box

2009-05-26T05:43:00.000-07:00

Here is a cool trick to try. You can embed a yahoo type smiley set to your comment box as i have done in mine. In the reader wants to add a smiley , he just have to look at it , choose the correct symbol for the appropriate smiley and type the symbol. This may also encourage user to leave a comment. Here is how to do it.

1. Edit your Template
2. Now find out

( press 'Ctrl' + F to open your browser's search box)

If you find two or more code lines , select the second one.
It must be look like this.

Now replace this set of code lines with following codes. ( make sure you replace above whole set )

Now find out

</body>

( press 'Ctrl' + F to open your browser's search box)

and paste this code line just above it.

Now follow the Safety Saving Steps.

And

Customizing.....

border: 1px - Border width
solid #cccccc - Border color
padding: 5px - Distance between 2 smilies
background: #eeeddf - Background color of smiles box

Adding Blogger sitemap to google web master

2009-05-26T02:34:00.000-07:00

Submitting the Sitemaps of your blog to Google Webmaster helps the Google search engine to crawl your blog pages easily and more quickly! Now lest see how to do it.

First of all Sign-in to Google Webmaster Tools

Now add your blog address

Now , you have to verify whether site is yours ,

There are two methods to verify ,

1.To create a web page
2.Add a meta tag

we can't create a web page on blog as they say us to do. According to them we have to create a web page in a address of http://yourblogname.blogspot.com/google60xxxx8a156480b.html

It's impossible for blogger , now the second method,

adding a meta tag. When you choose that option they will give you a code to paste.

You can't just paste this at any place of your template,

to paste this

1. Edit your Template
2. Now find out

<b:include data='blog' name='all-head-content'/>

( press 'Ctrl' + F to open your browser's search box)

in some templates it says

<b:include data="blog" name="all-head-content"/>

now paste your meta tag , just above this code line.

Now follow the Safety Saving Steps.

And

Adding a Tag cloud

2009-05-23T01:35:00.000-07:00

Tag cloud is a collection of labels which are beautifully categorized. Hope you may have seen it in many other blogs.Not only in blogger , wordpress but also in web sites too. Now lets see how to add this tag cloud.

1. Edit your Template
2. Now find out

<b:section class='sidebar

( press 'Ctrl' + F to open your browser's search box)

Now you will find a code line similar to

<b:section class='sidebar' id='sidebar' preferred='yes'>

now just after it , paste these code lines

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

<b:includable id='main'>

<b:if cond='data:title != ""'>

</b:if>

</div>

function Magnifytxt() {

var max = 0;

var min = 10000;

<b:loop values='data:labels' var='label'>

if (<data:label.count/> > max)

max = <data:label.count/>;

if (<data:label.count/> < min)

min = <data:label.count/>;

</b:loop>

var display = "";

<b:loop values='data:labels' var='label'>

var delta = <data:label.count/> - min;

var size = 80 + (delta * 100) / (max - min);

display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span> ";

</b:loop>

obj = document.getElementById('Labelcloud');

obj.innerHTML = display;

}

Magnifytxt();

</script>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Now follow the Safety Saving Steps.

And

Showing Gadgets in Specific pages

2009-05-22T22:57:00.000-07:00

If you want to show a specific gadget in a Gadget in Specific pages , there is a way to do that. Now you may think , why should i hide my gadgets in some pages. Now here is the reason. if you are using tons of gadgets , it may slow down you blog's loading time. Specially if you are using Flash gadgets. So , hiding them in posts and showing them in the home page is a cool trick to boot up your blog's loading speed.

First of all , decide which gadget should you hide. It may be a Flash gadget or a Image gadget or any thing.Make your you have provided a name for it. I means, in the visitors gadget , you may have given a name as 'Visitors'.

Now, This trick will help you to show your gadget only in home page
Edit your Template and Search under ( press 'Ctrl' + F to open your browser's search box) that name.

And keep in mind , that if you have used any sign , marks like these , ' . < > " , you can't search them, just change them to another name without those marks temporary and search.

Now you will find some code lines as

<b:widget id='HTML13' locked='false' title=' Your Gadgets Name here ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Now paste these code lines

( <b:if cond='data:blog.pageType == "index" '> , </b:if> )

as shown below

<b:widget id='HTML13' locked='false' title=' Your Gadgets Name here ' type='HTML'>
<b:includable id='main'>

<b:if cond='data:blog.pageType == "index" '>

<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:if>

</b:if>
</b:includable>
</b:widget>

Now follow the Safety Saving Steps.

And

If you want to show your gadget in all post pages but not in the home page , use

<b:if cond='data:blog.pageType == "item" '>

code line instead of using

<b:if cond='data:blog.pageType == "index" '>

If you want to show your gadget in a specific page only , use code line

<b:if cond='data:blog.pageType == " Paste your Page's URL here " '>

instead of using

<b:if cond='data:blog.pageType == "index" '>

And also , remember that even though the gadget is hidden , you may see some thing like this...

Adding a floating “back to top” button

2009-05-22T22:05:00.000-07:00

In long blogs ( such as mine ) , after scrolling down , you may take long time to scroll up again. For that , we have a little gadget to add. You can add a image to automatically scroll up words. Or you can use a text. ( I tried this trick under Microsoft Internet Explorer but it did not work , many graphic tricks sucks under Internet Explorer. Just try to use another web browser as Fire Fox or Chrome). Now lest see how to add this.

1. Edit your Template
2. Now find out

</body>

( press 'Ctrl' + F to open your browser's search box)

Paste following lines just above it.

If you want a Text instead of the Image button, use this code

Now follow the Safety Saving Steps.

And

bottom:5px; - stand for the position , pixels from bottom
left:5px; - stand for the position , pixels from left

Here are some Icons for you,

Image URL - http://dryicons.com/images/icon_sets/stickers_icon_set/png/64x64/up_arrow.png

Image URL - http://dryicons.com/images/icon_sets/blossom/png/64x64/up_arrow.png

Icons by :- http://dryicons.com

Convert Ur blog in to a Magazine blog ( Adding 'Read More' styles)

2009-05-21T07:56:00.000-07:00

Is there a big different between your and my template ? hmm ? oh , yes , in my home page I have a Magazine type template with a Read More buttons and you have a blog with a homepage of posts that show their whole body and take a long time to load. And also it makes your blog more longer. ( If you are posting more than 5 posts per a page ). So , do you want to know how to add 'Read More' buttons and make your blog more profeesional ? so here is the way !

Fisrt of all , go to the Settings tab , then select Formatting tab and go to the option Show. Now add a number more than 5. ( Here in my blog , I keep about 15-20 posts in homepage )

Now

1. Edit your Template
2. Now find out

<data:post.body/>

( press 'Ctrl' + F to open your browser's search box)

Now Replace

<data:post.body/>

with these codes. Make sure that you REPLACE this line. In some templates , I have seen a line as

instead of

<data:post.body/>.

If then replace the whole

line with follwing lines.

Now follow the Safety Saving Steps.

And

That's it , now your blog will too get converted to a Magazine type template as following photo.

Do you like to add a Image too ? like in this photo ?

Then change these two lines of codes

img_thumb_height = 0;
img_thumb_width = 0;

img_thumb_height = 80;
img_thumb_width = 100;

or any hieght and width that you like to have.

If you want to increase your post's height ,

summary_noimg = 400;
summary_img = 300;

change these to any amount you need !

summary_noimg = 400; stand for the post's hieght without a Image.
summary_img = 300; stand for the post's hieght with the Image.

Adding Social Bookmark buttons

2009-05-20T03:49:00.000-07:00

Adding bookmark buttons may help you and the reader in many different ways. It will help you to make your blog more popular and also bring you more traffic. And the reader will be able to share your knowledge with his or her friends and others. And also , adding social bookmark buttons will make your blog ore beautiful and advanced.

Lets see how to add these social bookmarks.Here I have used only few social bookmark buttons. I have seen tons of social bookmarks in some blogs. But , many readers use only few famous sharing web sites such as Digg , Technorati , del.icio.us , Stumbleupon , Reddit and tweeter.So I decided to only to use them.

1. Edit your Template
2. Now find out

<data:post.body/>

( press 'Ctrl' + F to open your browser's search box)

Now paste these code just below it

Now follow the Safety Saving Steps.

And

Don't like my Button ? Then use your own. Just replace your social bookmark button's image URL with the orange color ( given social bookmark button's image URL ) and you are done !

Here are some more Buttons for you to download

http://fasticon.com/freeware/?p=72
Package includes 17 bookmark icons.

http://www.freakgroup.com.ar/pack-de-iconos-sociales-v10/
Package includes 12 social bookmark icons in PNG format.

http://fasticon.com/freeware/?p=65
Package includes 10 social media icons.

Adding a background Image to the Title of post

2009-05-19T21:38:00.001-07:00

If you like , you also can add a background image to your post title's background. The most amazing thing is the resolution. Though you use a short small Image as the background image to your post title's background , it will re sized and posted repeatedly. So better to use a Pattern as the background image.

To do this

1. Edit your Template
2. Now find out

post h3

( press 'Ctrl' + F to open your browser's search box)

Now you will find out several post h3 code lines but use the first post h3

You will see bunch of code lines which are very similar to these

.post h3 {
color:#3E3533; ------------ Post title's color
font-size:20px; ------------ Post title's size
font-weight:bold; --------- Post title's font decoration
line-height:1.4em;
margin:0.25em 0 0;

Now paste this code line just after the code line .post h3 {

background: url( Paste URL of your Image here ) top repeat-x;

ex:-

.post h3 {
background: url( http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg ) top repeat-x;
color:#3E3533;
font-size:20px;

*keep in remember , above code lines will be in a different way according to the template you are using.

Now follow the Safety Saving Steps.

And

Some Header Images for you

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/Segw7tvdsHI/AAAAAAAACHI/iC2CtxXG1gI/s1600/bg_sb_title.jpg

Image URL :- http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg

Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gif

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg

Changing or Removing the 'Delete' Icon

2009-05-17T23:45:00.000-07:00

After every comment that you have posted , you might have seen a tiny recycle bin type icon that directs you to delete your comment. Do you hate it ? I mean , do you want to add your own image to there ? or add a text ? Or you may want to remove this delete icon , once and for all. Now here is the way....

Classic Delete Icon " "

1. Edit your Template
2. Now find out

b:includable id='commentDeleteIcon'

( press 'Ctrl' + F to open your browser's search box)

Now scroll down , you will see a code line as

Most of times , this image is common to every blog. So you even can search directly the code line

Now add replace the existing Image URL with your Image's URL

Or you can add a text instead of a Image , just delete the code line

and type any thing you want. ( Ex:- 'Delete' , 'Remove' ...... ) But I recommend you to not to add a text. I may be feel odd.

now you can continue your search under the code line

and you may find out another code line , which is for delete Backlinks. Change it too. ( If you want to :) )

Now follow the Safety Saving Steps.

And

Adding a Side bar header image to a Imageless Side bar header

2009-05-17T20:47:00.000-07:00

One reader asked me , whether there is a way to add a side bar header image to a side bar that dose not contain a image. After few trials I found out the way. It is really simple. I tried this trick for few of my blogs that haven't a image for it's side bar and it works well. There will be a problem with resolution. Yet , no error was found.

1. Edit your Template
2. Now find out

sidebar h2

( press 'Ctrl' + F to open your browser's search box)

Now you will find out some code lines Very similar to these

.sidebar h2,.rsidebar h2, .lsidebar h2{
color: #515151;
font-size: 16px;
font-family: Lucida sans unicode,Arial, Tahoma, Verdana;
font-weight: normal;
text-transform: titlecase;
margin: 0px 0px 5px;
padding: 3px 5px 5px 5px;
border: 1px solid #DEDBD1;
background: #EBE9E1;

Remember , codes lines can be slightly different from above because code lines varies from template to template.

Now replace

background: ( a color code );

with

background: url( URL of your Image) top repeat-x;

Ex:-

background: url(http://3.bp.blogspot.com/_6pbSFKC8YH4/Sa9yymvvrAI/AAAAAAAAAWc/g97-fHkkEBQ/s1600/sidebar.jpg) top repeat-x;

Before

After

Now follow the Safety Saving Steps.

And

Some Header Images for you

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/Segw7tvdsHI/AAAAAAAACHI/iC2CtxXG1gI/s1600/bg_sb_title.jpg

Image URL :- http://1.bp.blogspot.com/_wa6zL1GRiOs/SdjrkNXWBYI/AAAAAAAACio/MP2Dh1GqvCs/s1600/sidebar-h.jpg

Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/ScH7SRnT2qI/AAAAAAAABlE/E0A3QBmSKYc/s1600/bg_sb1_g.gif

Image URL :- http://2.bp.blogspot.com/_XByc9SCisZM/SbIMdJZNoRI/AAAAAAAABKM/i1iLQZEWRIc/s1600/bg_sb1.jpg

Image URL :- http://4.bp.blogspot.com/_XByc9SCisZM/SbIMdc_Cd3I/AAAAAAAABKU/6KOOmrZup6Y/s1600/bg_sb2.jpg

My web List

2009-05-17T06:16:00.000-07:00

My web list

Watch TV & Radio Online

stuff Arena

X files

Software and GFX Direct links

Today's Cartoons

Sri Lankan music

Want to exchange links ? Contact me.

Adding a Dock menu

2009-05-15T22:43:00.000-07:00

When i was surfing the net , i found some fascinating option that can use in blogger. It's really amazing. It a animating dock. You can see a edited version of it in my blog too ( Update :- 3D dock is removed in order to give a quick load ).it's similar to the dock in Mac OS and also to the Dock of Brico Pack Vista Inspirat update.How ever first all , i must say that any of these amazing codes are not written by me.Now lets see how to add this.

1. Edit your Template
2. Now find out

</head>

( press 'Ctrl' + F to open your browser's search box)

now paste these codes , just after it

Now follow the Safety Saving Steps.

And

Now you have to download some icons.( or use your own ).There are some 3D , vista type icon set for free download at www.vistaicons.com . My Dock icons are too from vistaicons.com

After downloading , upload needed images to a image hosting server or to google pages. Now get thier Image URLs paste in the following code.

*like this you can add any number of dock images and links.

ex:-

Now select "Add a Gadget" from Layout window and select "HTML\JAVA sript"
Now paste follwing codes in it. ( don't give a caption to your gadget )

and paste these code in it.

Now Press Save

Thanks go to jquery.com ,vistaicons.com, iblographics.com , Uvumi LLC , interface.eyecon.ro , mootools.net and also to blogger-template-editng.blogspot.com :)

Templates ( Gallery 1 )

2009-05-13T21:37:00.000-07:00

Here are some advanced and very attractive templates for you to download. These are wordpress templates. They have converted to blogger supporting templates by experts in that field. If you want more templates like these , visit www.Btemplates.com . They have a very large and good template gallery.

Steps to Install a new template

* Download
* Extract
* Go to Layout
* Select "Edit HTML"
* Click on "Browse" and select the XML file ( Downloaded file )
* Select Upload
* Save & Enjoy

Water Color Template

Coffee Desk Template

Craft work Template

Desk Mess Template

Green Scrap Book Template

Sea Breeze Template

Simple Proof Template

Water Color Template

Magazine Template

Adding a "Save page as PDF" button

2009-05-13T03:38:00.000-07:00

PDF stands for Portable Document Format. PDF is the most popular way of online article transactions. It is because PDF needs a less space when comparing to other formats. This button is brought you by web2.pdfonline.com. Now lets see how to add this button below your every post.

Button

1. Edit your Template
2. Now find out

line post-footer-line-3

( press 'Ctrl' + F to open your browser's search box)

Now you will find out a line similar to

now select the PDF saving mode as your wish and paste it below the above code line.

Code to save the page in Landscape mode

Code to save the page in Portrait mode

Now follow the Safety Saving Steps.

And

Adding a PopUp message

2009-05-13T02:13:00.000-07:00

If you want to add a Pop Up message to your blog , you can do it. Lets say , you are blogging about porn or adults only things. Then you may want to add a Pop up message by saying " Adults only , If you are not 18+ please leave this site. " But , don't add a pop up message for your every blog by saying "welcome to my blog" or some thing like that because every one be scared when they see a pop up warning message.They may leave your site even without reading the message.

How ever , here is how to add a pop up message.

1. Edit your Template
2. Now find out

]]></b:skin>

( press 'Ctrl' + F to open your browser's search box)

Now paste following codes between

]]></b:skin>

and

</head>

ex:-

Now follow the Safety Saving Steps.

And

Removing Subscribe to-Posts (atom) link

2009-05-13T02:01:00.000-07:00

Below your post , you can see a link as Subscribe to-Posts (atom). If you are using ADDTHIS buttons ( Learn how to add "AddThis" buttons ) you may don't want to use this link any more.So lets delete it.Its very simple and easy to do.

1. Edit your Template
2. Now find out

b:include name='feedLinks'

Now you will find the following code line, Delete It.

<b:include name='feedLinks'/>

Or you can replace it with a button code. ( Read the button adding lesson. )

Now follow the Safety Saving Steps.

And

Adding a Addthis button

2009-05-13T00:58:00.000-07:00

As bloggers we always like to share our content and get more visitors. And also there are many sites that give us one click access for bookmarking and sharing. And there are buttons , which are created with a collection of sites like those. Here is the way to add them.

1. Edit your Template
2. Now find out

line post-footer-line-3

( press 'Ctrl' + F to open your browser's search box)

Now you will find out a line similar to

Now , now select the button code you want and paste them below the above code line.

Button 1

<div><script type="text/javascript">var addthis_pub="4a0a7d55675e85da";</script>
<a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/sm-share-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script></div>

Button 2

<div><script type="text/javascript">var addthis_pub="4a0a849e74cb3624";</script>
<a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/sm-bookmark-en.gif" width="83" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script></div>

Button 3

<div><script type="text/javascript">var addthis_pub="4a0a82914fe2cdb1";</script>
<a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script></div>

Button 4

<div><script type="text/javascript">var addthis_pub="4a0a842466e5c5c9";</script>
<a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script></div>

Button 5

<div><script type="text/javascript">var addthis_pub="4a0a86776e0cfae7";</script>
<a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/sm-plus.gif" width="16" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script></div>

Now follow the Safety Saving Steps.

And

Posting Author's name below the post

2009-05-12T23:21:00.000-07:00

Some times , you may want to post the author's name below all posts.You also can type you name below all posts.but there is little trick to do this in more quicker and easier way. Instead of a name , you also can use a image as a signature. Here is the way to do it.

1. Edit your Template
2. Now find out

line post-footer-line-3

( press 'Ctrl' + F to open your browser's search box)

Now you will find out a line similar to

Now , paste this code line just below it.

Lessons by <data:post.author/>

Use any thing you want instead of Lessons by. some thing like , written by , post by .......

or if you want a image , instead of the name , paste this code line

ex:-

Here is the image signature that i use in my another blog , instead of the Author's name.

Now follow the Safety Saving Steps.

And

Changing Sidebar header images

2009-05-12T22:30:00.000-07:00

If you are using a some what developed blogger template , you can see a image in the back ground of the caption of your side bar gadgets. Changing these is a some what complicated task. Really , Changing is not complicated , but creating a suitable graphic is the complicated task. If you know graphic designing , this will be easy. For others , it's better to skip this lesson and read the next one.

Here is the side bar header image of one of my blog ( current template don't have a side bar header image )

So , here is the way to change it

First of all , create a suitable sidebar header image.Then upload it to a image hosting site.

Now,

1. Edit your Template
2. Now find out

sidebar h2

( press 'Ctrl' + F to open your browser's search box)

Now scroll down few lines and you will find out a code line STRUCTURE similar to

background:#f5fbfe url( IMAGE URL ) no-repeat top center;

background: url( IMAGE URL ) ;

sidebar h2 { background: transparent url( IMAGE URL ) right no-repeat;

or another code line which is very similar to above code lines

just change background URL to the URL of the image , that you created.

Now follow the Safety Saving Steps.

And

Adding a Background Image

2009-05-12T19:56:00.000-07:00

Adding a background images may make your blog attractive and also slow. If still want to add a background image to your blog , use a image of small size. ( i mean , less in Kilo bytes. If your background image is greater than 1 MB , that will be a hell ) best way is to use a pattern image in gif format. Use google to find out a one.

To add a background image for you blog,

1. Edit your Template
2. Now find out

body {

( press 'Ctrl' + F to open your browser's search box)

Now paste this code line just below it , after adding the URL of your back ground image

background:url( Paste your URL of Background Image );

Background Patterns for you

background:url( http://1.bp.blogspot.com/_kwZVnO9cmMY/R7y2fEP2_tI/AAAAAAAAMLc/DCfWJ_QOAr4/s400/elephant_pattern.gif );

background:url( http://z.about.com/d/graphicssoft/1/0/9/2/5/Textile_Pattern_Set-2.png );

background:url( http://4.bp.blogspot.com/_kwZVnO9cmMY/RjhPuYNM9kI/AAAAAAAAD3k/WCdYjkjURNQ/s400/the+pattern+tester.jpg );

Now follow the Safety Saving Steps.

And

Adding a Email Me button

2009-05-12T19:03:00.000-07:00

If you want to , you can add a "Email me" link or a Image button below your every post. You can also add this code as a HTML\Java script gadget . But if you use that method , there will be a space left between your post and the button. How ever the advanced & best way is adding the codes in to the template.For that

1. Edit your Template
2. Now find out

post-footer-line post-footer-line-3

( press 'Ctrl' + F to open your browser's search box)

In some template , you will find out a code line as

and in most of templates , you will find out a code line as

Now change these code lines by giving your information

* mailto: is essential

Ex:-

Now paste it below the code line

Now you will see a image link like this

If you don't want a image, then add this code

<a href="mailto:Type Your Email Address here">Email me </a>

* mailto: is essential

Now follow the Safety Saving Steps.

And

Copy protection

2009-05-10T05:30:00.000-07:00

If you don't want to get your posts copied by some one and post your posts in others blogs , here is a simple trick that you can use. By this code , right clicking on your site will be denied. How even , yet he can select your text by dragging and pressing Ctrl+C . But many of them try to copy by right clicking and selecting copy.

1. Edit your template ( How to edit your template )
2. Find out the code line

<body>

( press 'Ctrl' + F to open your browser's search box)

Now replace

<body>

with following code line.

Now follow the Safety Saving Steps.

And

Adding Separate Meta Tags for Individual Posts

2009-05-09T04:37:00.000-07:00

Adding Separate Meta Tags is an essential work if you want to make your blog popular. Google and yahoo rank your blog by page by page , separately. So , if you don't feel lazy right now , you can bring your blog to the top of google's search results. Lets start.

1. Edit your Template
2. Now find out

<Head>

( press 'Ctrl' + F to open your browser's search box)

Now paste these code lines just after

<b:if cond='data:blog.url == " your Blog page's URL "'>
<meta content=' Type you post description here. some thing that will describe your post's content. ' name='description'/>
<meta content=' Type your tags here ' name='keywords'/>
</b:if>

that's all , keep in mind that " " is essential before and after your blog post's URL

Now follow the Safety Saving Steps.

And

About

2009-05-08T19:32:00.000-07:00

I started www.blogging-template-editing.com to teach others on blogging. There are many secrets on blogging that many of you don't know. Many professional bloggers didn't like to share them . But my view is that knowledge must be shared among all of us.So I thought to start a blog to teach about the blogging on blogger.com

I choosed www.blogger.com becouse , as i think ( and many of others think ) blogger has the most easiest control panel.

I started blogging in year 2008. And i started this blog on 2nd May 2009. I still continue adding more and more tips and tricks. And also lessons. I hope you all will join with me.

HTML color codes

2009-05-08T04:43:00.000-07:00

In many occasions in editing the blogger template , you will need HTML color codes. So here you go. There are 200 colors and their HTML codes here. In some occasions , it will be a difficult task to find out the correct HTML color code that you need. In those occasions , there is a simple trick . I will teach it in another lesson.

Not clear ? then click here

Special thanks to www.pagetutor.com for this html color code chart.

Highlighting Author Comments

2009-05-07T21:21:00.001-07:00

If you want to , you can highlight your ( i mean , author's ) comments. I have used that trick in my blog too. How ever you can't do this by just clicking some buttons. you have to edit the template of your blog.

All right now lets see how to do this.First of all

1. Edit your Template
2. Find out

</head>

( press 'Ctrl' + F to open your browser's search box)

Now paste following codE lines just above </head>

Now search for this code line

<data:commentPostedByMsg/>

Now paste these code lines just below the above line

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Just after you paste the above code , scroll down. Now you will see some code lines similar to these

Now paste this little peace of code below the end of above lines

</b:if>

Now follow the Safety Saving Steps.

And

Here are some explanations about the author comment changes...

1. background: #FAC090; stands for background color of your comment box
2. color: #000000; font color
3. border-top:1px , border-bottom:1px solid ..... Thickness of border around the comment box
4. border-top:1px solid #971915 border color

Changeing "Post a Comment Link"

2009-05-07T20:19:00.000-07:00

If you are not using the embedded comment form method ( learn how to embed your comment box below your posts ) you make have seen a text link as "Post a Comment". You may like to change it to some thing different and attractive , aren't you ? or you mat like to change it to a image.

Here is what to do.

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search for

<data:postCommentMsg/>

Now you will find out some code lines as

<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if>

now change

<data:postCommentMsg/>

to any thing you want.

( ex:- Tell me your Idea , Post your Ideas )

or you can use a image , just upload an image to a image hoster or use a online image. place your image's URL in this code.

and replace

<data:postCommentMsg/>

with the one you create.

Now follow the Safety Saving Steps.

And

* Here are some images i created for you

code :- <img src='http://sites.google.com/site/dragonzstore/_/rsrc/1241753637533/Home/1.PNG'/>

code :- <img src='http://sites.google.com/site/dragonzstore/_/rsrc/1241753640641/Home/2.PNG'/>

code :- <img src='http://sites.google.com/site/dragonzstore/_/rsrc/1241753644804/Home/3.PNG'/>

code :- <img src='http://sites.google.com/site/dragonzstore/_/rsrc/1241753646435/Home/4.PNG'/>

Embreding a comment box below post body

2009-05-07T18:58:00.000-07:00

I found this trick on Amanda's blog. Really i came very handy to me too. By using this trick you will be able to show your comment box , just below your post body. This is very essential if you want to encourage your readers to comment because many of them feel lazy to do it.

How here is what to do. First go to draft.blogger.com and select your blog.

Now to go the Setting tab
Now you will see a option as Comment Form Placement
In there , select Embedded Below Post

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search for

comment-footer

Now you will find out some code lines similar to

now replace below codes with the above

Now follow the Safety Saving Steps.

And

If this trick didn't work out for you , here are some options to do.

Option 1

Search for

<b:include data='post' name='comments' />

change it with this code

<b:include data='post' name='comment-form'/>

Option 2

Check out whether you haven't un check comments option in layout > Configure Blog Posts

Option 3

check whether you have changed these things using draft.blogger.com

Lesson on Images

2009-05-07T05:25:00.000-07:00

In this lesson , i am going to teach you how to change your existing images of your blog template.This is very useful and also essential for every blogger.

Changing your logo's image

In many blog template , the designer use their own image or a image that they like to use as the logo. But in some occasions you may don't like it. So you have to change it. Here in this lesson i have explained how to change a logo's image. ( Read Lesson )

Not only logo , you may also want change other images.

so here is what to do

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search under some extensions of images.

ex:-

.gif
.png
.gpj

in most occasions , designers use gif images to small images ( because .gif makes big images ugly due to loss of colors )
.png for some what big images

and jpg images are used in small images or rarely in large images. ( designers don't use .jpg as extentions of big images because they need more bytes. )

now when you searching under these extensions you may find out some likes like these

My gadget's back ground image

http://4.bp.blogspot.com/_XByc9SCisZM/SZtAYvicgDI/AAAAAAAAAKM/GmnRIIEXYvE/s1600/widget-title.gif

RSS 's image

http://4.bp.blogspot.com/_XByc9SCisZM/SZtAPA6uMWI/AAAAAAAAAJ8/8zPV0pb5lCs/s1600/rss.gif

Backgound Image

http://4.bp.blogspot.com/_XByc9SCisZM/SZtAPVm5WzI/AAAAAAAAAKE/1xR8C40_Efc/s1600/topbg.png

Header

http://3.bp.blogspot.com/_XByc9SCisZM/SZtAOq3bbEI/AAAAAAAAAJk/0Gfc0G4rzFk/s1600/header.png

Now you just have to copy and paste these links in your browser's address bar and press Enter key.you have the image.

Save it.

Now open it using your Image editing software and edit it.

Don't you know any thing on image editing ? just ask your friend who knows about image editing or you can use MS Paint for this. ( Believe it , my all logos , buttons , headers , images ..all have created using MS Paint and Power Point 2007 )

Now upload your images a image hosting service like Imageshack.us

How ever , lets say your image hoster suddenly vanishes. All gone ! you are done !

so here is what to do.go to sites.google.com

use a existing site or create a new site.Now upload your images to that site.Now select the images you want. ( copy your image's URL ) and paste on existing one in your template.

Now follow the Safety Saving Steps.

And

Change Email Icon

2009-05-07T05:09:00.000-07:00

In many blogs , you may have seen a tiny email button. ( I don't like it . so i removed it ) . If you like to keep a email link button , you may also like to change it to some other image as your wish , so here is how to do it.

First create a image or use a existing image.
Upload it to a image hosting service. ( www.imageshack.us )

now place your image's URL with with code

Now,

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and find

email-post-icon

now you may find out line as

Now replace our special designed code with the above one.

Now follow the Safety Saving Steps.

And

I tried this trick with some of my other blogs and found out some thing. In a one of my blog there isn't a code like above.So I searched under some image formats like .gif , .png and suddenly i saw a image as ' icon18_email.gif '. That was the email image. So as i explained , you may not find above code line. Then , use your brain.

Adding a sentence or Image near the Comment Box

2009-05-07T04:15:00.000-07:00

I wanted to add a text in my comment box to encourage readers to comment on my lessons. After some code pastes , i found the right place to paste my sentence. Now I am going to teach you how to do this.

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

now just place your sentence. or you can place a image too. ( As I have done ) ( UPDATE - I changed it ! )

to paste a image , just upload your image to a image hosting service ( www.imageshack.us )
copy it's image URL.
paste it with this code.

My code

( if you like it , use it ! )

As i have seen , the place to paste this code varies from template to template. so if you want to post your image or sentence on the comment box or below the comment box , paste your code A line below to the code that i gave you to , that means if these are your code lines...

<p class='comment-footer'>

code line 1
code line 2
code line 3
code line 4

First paste your code above code line 1 , then preview your template , now paste your code below code line 1 and above code line 2 and preview your template. Do this until you meet

<data:postCommentMsg/> or <div id='backlinks-container'> .

This may depend on your template and your ability to understand.

Adding more than one blog archive

2009-05-07T00:52:00.000-07:00

Many of bloggers ( i mean , professional bloggers don't use blog archives. ) really it is also not a interesting or attractive gadget. but in a case , if you want to add more than one archive , there may be a problem because once you add a one blog archive you can't adda second one derectly from your layout.

it will show a thing like this.

It says already added and 'Add' button has removed ! but there is a very small trick to add a another blog archive

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

<b:widget id='BlogArchive

Now you will find a code line similar to the below

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

Now copy it and paste again , just below the above line and change BlogArchive1 to any other number as you like.

ex:-

<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>

That's it , now you can add any number of blog archives by pasting that code and changing it's archive number.

Now follow the Safety Saving Steps.

And

Read Me

2009-05-05T23:17:00.000-07:00

Every tips and trick in our blog has been test by few times using different templates. I have written Every possible method to a single trick for different types.

How ever i am not responsible for any harm happen due to trying these tricks.success will depend on your ability of understand and type of your template.

It's better to keep a backup of your template before editing your template and follow my safety saving steps when you save your template.

mainly i have found 3 different types of templates. They have different coding methods. So i applied all these tricks at every one of them and no error was found.

Every external code ( ex:- Subscription button codes ) had registered under my user name. so , they will last until a brake down of their servers. ( which is really impossible )

And every download able file such as template's zip files had uploaded to google sites servers. no there will be no image verifications , delay times or IP denied messages. Every image file had uploaded to a google site under my user name.

If you have any problem , question or a bug ( which is really impossible ) pease keep a comment or contact me @ dilshanzmail@gmail.com.

Blogger-Template-Editing.blogspot.com is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
Based on a work at blogger-template-editing.blogspot.com.
Permissions beyond the scope of this license may be available at http://blogger-template-editing.blogspot.com.

Thank you ! visit us again !

Showing gadgets in selected pages

2009-05-05T22:02:00.000-07:00

All right , now we are stepping to some serious business.Hope you all know about adding a gadget by the layout page. Lets take 'Labels' gadget as a example.

Now lets say you want to show this gadget , labels only in my home page. Then

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search for

<b:widget id

Now you will out many code lines which are starting from ,and finaly you will see a code line similar to

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

just below that you will see a code line as <b:includable id='main'>

Just paste this single code line below that line

<b:if cond='data:blog.homepageUrl == data:blog.url'>

and scroll down until you find out these 2 code lines ( don't use search , just scroll down )

</div>
</b:includable>

remember , you should find out first

</div>

code line after

<b:includable id='main'>

now paste this line just below

</div>

and above

</b:includable>

</b:if>

final result

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:if>
</b:includable>
</b:widget>

Remember , you may have some what different code lines than the above

Now follow the Safety Saving Steps.

And

If you want to apply this trick to your other gadgets too , just search under term

<b:widget id

and you will find plenty of gadgets.

Adding Meta Tags

2009-05-05T09:33:00.001-07:00

Adding tags make your blog to be popular. But it didn't mean that more tags is equal to more popularity. How ever , in some search engines , they ban your site if you add same tag more than 3 times.

ex:- blog tip
blog trick
blog tip and trick

as you can see , blog has been used for 3 times.

So u have to be careful on adding tags.and there is is a another thing , when you are adding meta description , use a one or very few sentences that will attract a reader and describe your whole blog.

Now that's all you have to learn as a newbie. There are many more advanced techniques on tagging. You also can use online tag generators to create your tags. ( just google by ' online tag generator' )

Now lets add our tags

Type toy tags , Site Description , Your_Name and keep it for while.

Now

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search for

data:blog.pageTitle

Now you will find out a code line as

Now paste your tag codes just below this line

Now follow the Safety Saving Steps.

And

Add a Nav Bar

2009-05-05T03:19:00.001-07:00

In advanced blogs , you will be able to see a navigation bar.In some blogs templates , they may provide you a navigation bar. But you may have to edit it. If there is a navigation bar with links as 'home' , 'post-rss' and so on , you have less work. If you don't have such links , then you may have to do some extra work.

This is how the navigation bar of my old template looks like before editing

Now lets see how to edit the navigation bar , if it was provided.

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search under a name of your navigation button , for a example 'Home'

Now press 'Next' until you find some code lines very similar to

<li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href="Paste your URL here"> Example 2 </a></li>

<li><a href="Paste your URL here"> Example 3;/a></li>

you will surely find out

because it is common for every modern blog template.

Now just change these lines to what you want

<li><a href="Paste your URL here"> Button's name </a></li> <li><a href="Paste your URL here"> Button's name ;/a></li>

ex:-

If you want to add navigation button for your post on 'Red mangoes'

<li><a href="http:\\www.friuts.blogspot.com\Red mangoes.html"> Red Mangoes ;/a></li>

Now follow the Safety Saving Steps.

And

If there is no navigational bar provided for you then,

add a page element [ Learn how to add a page element though your template don't have a one )

( If you already have a one like this , no need of editing template )

Now add link list as discribed above

<li><a href="Paste your URL here"> Button's name </a></li> <li><a href="Paste your URL here"> Button's name ;/a></li>

Press

Image instead of Authors Name

2009-05-05T02:24:00.000-07:00

Now lets see how to insert a Image instead of Authors name. In many blogs , you will be able to find the Authors name on the top of the post.

Some times it says Reporter , instead of the classic "Posted by". How ever now lets see how to add a image to the position of Name.

Create a image , it is better if it is smaller. Use Power point or MS paint or any other graphic software for this.

Now Upload it to a Image uploading web site. I recommend www.imageshack.us , it is easy to use and no sign ups.

now get your image's URL and paste in the relevant position of this code.

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

post-author

Now you will find out some code lines similar to

Now paste your edited code as below

Now follow the Safety Saving Steps.

And

Add a Image before Title

2009-04-29T05:27:00.000-07:00

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

2009-04-29T04:24:00.000-07:00

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

2009-04-28T07:08:00.000-07:00

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 , Think , Read & Blog

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 , Elakiri.com community & You

Changing the Newer \ Older post link text

2009-04-28T06:14:00.000-07:00

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

2009-04-28T05:41:00.000-07:00

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;

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

Now follow the Safety Saving Steps.

And

Removing Label Number Count

2009-04-28T04:27:00.000-07:00

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

2009-04-27T19:54:00.000-07:00

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

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'

showaddelement='yes'

Now follow the Safety Saving Steps.

And

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

Changing Author's Name

2009-04-27T19:25:00.000-07:00

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

This stands for your name.

<data:post.author/>

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 '

2009-04-27T19:15:00.000-07:00

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

This line stands for the word 'Labels'. Change this word to any thing you like to

<data:postLabelsLabel/>

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'

2009-04-27T19:02:00.000-07:00

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

2009-04-27T08:37:00.000-07:00

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

2009-04-26T21:16:00.000-07:00

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

1. Edit your Template
2. Copy the Text you want to find out

post.body

Now you will find some codes similar to

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

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

2009-04-26T03:09:00.000-07:00

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

Now Paste following codes just above that Code line.

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

2009-04-26T02:24:00.000-07:00

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

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

If your Icon's formate is .png , use

If your Icon's formate is .gif , use

Now follow the Safety Saving Steps.

And

Removing \ Editing Search bar

2009-04-26T01:40:00.000-07:00

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

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

( 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

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

2009-04-26T00:51:00.000-07:00

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

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

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

Footer Editing

2009-04-25T23:26:00.000-07:00

At your New template's Footer ( Bottom ) , you will find out your Template designer's Name , Team , Web address and so on.I don't think you love to keep other's names , links at your blog. Aren't you. But As I think you should even keep a link you your template creater's web because he is a one who create that beautiful blogger template and given out it totally free.

How even , it's up to you.

Ex:-

It says ' Test Blog by DragonD -CopyRight @ 2008 Designed by Gaganpreet Singh' and there is a link to his blog.

Now lets find out this part in our Templates codes

1. Edit your Template
2. Copy the Text you want to find out and Find it ( 'Ctrl' + F ) ex:- Gaganpreet Singh

It may be at few locations , but the code that we have to change is at the bottom , under Footer section.

Here it is , under div id= footer

These text ( ex;- Test Blog by DragonD -CopyRight @ 2008 Designed by Gaganpreet Singh ) are always inside the

<p>

and

</p>

Now if you know some thing about HTML , you can edit it and Insert what ever links , names as you want.

If you don't know any thing about HTML just find out

<p>

and

</p> .

( <p> and </p> which are inside <div id='footer'> and </div> ) Now Type a Sentence. Some thing like 'This blog is created by [yourname] '.........

Now Follow the Safety Saving Steps

Click