Blogger Template Editing

Adding a meta description to blogger

in short, meta description will tell the search engine's crawler what is on the certain blog
it is also picked us as snippets in the search result and as the description when you share the post on Google+, Facebook, Twitter and other social networks.If you properly write a meta description your post will be on the top of the search results and get more visit.

Steps

1.go to blogger Dashboard
2.go to your Settings and Search preferences
3.under Meta tags go to Description and click the Edit
4.Click the ‘Yes’ button.
5.Enter the meta description for your blog.
6.Click ‘Save Changes’ button.

and that is it... now your blog is more visible for searches.

Adding custom domain to blogger

0. Go to godaddy and buy a domain ( how to buy a godaddy domian )

then go to DNS and enter these values

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

click on Add and you can enter these values

in the second CNAME section ( which is erased in the pic ) is particular to your blog and your Google Account, and is therefore different for each person, you can find it by following the step 2.

1. First go to settings, then to basic

2. Now click + Setup a 3rd party URL for your blog - Point your own registered URL to your blog.

3. Now enter your domain that you bought ( here in the example i bought a domian from godaddy )

4. Press save and you are good to go.

and yes, .com domians are more likable by search engines.

Adding a Facebook share button

Many of you have may seen a facebook share button in almost every website or blog, mainly this is because facebook is the best way to expand your number of viewers and you can have a wide access to a larger audience than any other social media network.

let's get to it without further talk shall we?

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
by pasting these codes below, the share button will appear at the end of your post, if you want it to appear on the top of your post, just paste them above the 'post.body' code.

<div class="facebook-share">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow'
type='BUTTON-TYPE'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'
type='text/javascript'/>
</div>

there are 6 layouts for facebook share button.

box_count

button_count

button

icon_link

icon

link

now replace 'BUTTON-TYPE' with your choice from these 6 and you are done.

CCS codes part 01

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

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

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

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

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

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

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

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

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

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

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)

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.