Free Blogger Templates

Astro is a colorful wordpress theme original designed by UnoDesignStudio and was converted to xml Blogger/Blogspot Templates by me. This theme is great for any blog looking for a dreamy feel.


Features included :

* Two columns with right sidebar
* Nice header image
* Built-in RSS feed

After downloading the template and installing it, you have to do a few things...

1.First,change the navigation links at the top.

Scroll down the template code and find this piece :

<div id="'foxmenu'"> <ul><li class="'pageitem'"><a href="'YOURLINKHERE'">Home</a></li><li class="'pageitem'"><a href="'YOURLINKHERE'">Pictures</a></li><li class="'pageitem'"><a href="'YOURLINKHERE'">Videos</a></li><br /><br /> </ul> </div>

and Change the links and the corresponding text there.

2.Next, change the Rss feed link to yours

Search for this code and change the feed url to yours.

</span></span></span></span><span id="fullpost"><span id="fullpost"><span><span id="fullpost"> <div class="'rss'"> <a href="'YOURFEEDLINKHERE'"><img alt="'Subscribe'" src="'http://myblogtalk.com/bloggertemplates/pepper/images/rss.jpg'" style="'vertical-align:middle'/" /></a> </div>

3.Third one is, if you hav sites like 'make money online etc,.. you can put the advertisers banners in that place.. otherwise, you can put some clickable pictures in that area.
just look for this code

<div id="'imagelist'"><ul><br /><br /><li><a href="'#'" rel="'bookmark'" title="'Permanent"><img src="'http://myblogtalk.com/bloggertemplates/pepper/images/ad.gif'/" /></a></li> <li><a href="'#'" rel="'bookmark'" title="'Permanent"><img src="'http://myblogtalk.com/bloggertemplates/pepper/images/ad.gif'/" /></a></li><li><a href="'#'" rel="'bookmark'" title="'Permanent"><img src="'http://myblogtalk.com/bloggertemplates/pepper/images/ad.gif'/" /></a></li><br /><br /></ul><br /><br /></div>

Blogger.com is one of the most popular blogging platforms on the Internet, yet if you have a blog with them you are often stuck with the default Blogger.com favicon. Hard to brand your blog with your own personal touch when you have the Blogger.com favicon on the address bar. If people bookmark your blog they won’t see your favicon and might quickly forget about your website. There is no reason why you can’t change the favicon on your Blogger.com blog to one of your own design. You just need to follow these easy steps and soon your Blogger.com blog will sport your great new custom made favicon.

Step by step:

1. First thing you need to do is create your own custom made favicon. You can use Photoshop or Icon Suite to make icon.

Here I've created a icon . Png

Next, Goto your Blogger.com blog and create a new post. It does not matter what you call it since you don’t need to publish it. Once you have created a new post use the image upload button to upload your favicon to your Blogger.com blog.



When you have uploaded the image, you will need to switch to “Edit HTML” mode if you are using the “Compose” mode.You will see something like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CAuIgZjQuCeuaRIce60rgr-rcMA8kcvVHGRhm1dZ_HiZr8RqsQAGs-1wg9aZe5HwBT_FxviF-1K-y8ApBWC1rZGpHgdGXMJLED3o9kCPqump98mZkr5NneDeJP8XIAzm5ZG07fjdL14/s1600-h/favicon.png"><img style="cursor: pointer; width: 41px; height: 42px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CAuIgZjQuCeuaRIce60rgr-rcMA8kcvVHGRhm1dZ_HiZr8RqsQAGs-1wg9aZe5HwBT_FxviF-1K-y8ApBWC1rZGpHgdGXMJLED3o9kCPqump98mZkr5NneDeJP8XIAzm5ZG07fjdL14/s400/favicon.png" alt="" id="BLOGGER_PHOTO_ID_5283203052390631746" border="0" /></a>

You need to highlight and copy the part in quotes right after src=". In this case it would be: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CAuIgZjQuCeuaRIce60rgr-rcMA8kcvVHGRhm1dZ_HiZr8RqsQAGs-1wg9aZe5HwBT_FxviF-1K-y8ApBWC1rZGpHgdGXMJLED3o9kCPqump98mZkr5NneDeJP8XIAzm5ZG07fjdL14/s400/favicon.png . You should paste it into Notepad or another text editor. You don’t want to lose this and you will be closing the Blogger.com editing window next.

2. Go to Dashboard - Layout - Edit HTML and find:

</head>

Paste the following code on the above:

<link href='images link' rel='shortcut icon'/>
<link href='images link' rel='icon' type='image/png'/>

, And the code like:

<link href='images link' rel='shortcut icon'/>
<link href='images link' rel='icon' type='image/png'/>
</head>

3. Now, you must replace 'images link' with the image link was copy in step 1

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CAuIgZjQuCeuaRIce60rgr-rcMA8kcvVHGRhm1dZ_HiZr8RqsQAGs-1wg9aZe5HwBT_FxviF-1K-y8ApBWC1rZGpHgdGXMJLED3o9kCPqump98mZkr5NneDeJP8XIAzm5ZG07fjdL14/s400/favicon.png' rel='shortcut icon' />
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5CAuIgZjQuCeuaRIce60rgr-rcMA8kcvVHGRhm1dZ_HiZr8RqsQAGs-1wg9aZe5HwBT_FxviF-1K-y8ApBWC1rZGpHgdGXMJLED3o9kCPqump98mZkr5NneDeJP8XIAzm5ZG07fjdL14/s400/favicon.png' rel='icon' type='image/png' />
</head>

And, finished!


Wish you success...!

This post will help you add yahoo emoticon into your blogger.

Note: emoticon only appear on blogger after blogger loaded success!

How: Ok, let's go...

Step 1:

You open the Edit HTML in the blog. (Dashboard -> Layout -> Edit HTML )

Step 2:

Find the following code: <head> and add this line below <head>

<script src='http://site.gman.googlepages.com/Emoticon.js ' type='text/javascript'/>

Find the line to: <body> and edit to:

<body onload='replaceText();'>

Continue search:

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

Edit to:

<div id='emoticon'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div> <!-- end emoticon -->

then save the template. So then it is finished.

Wish you success!

you can see more about version 2.0 here.

New Feature in Version 3.0: Use version 3.0 you can optionally be shown 2 types:

1. Show as ver 2.0, meaning Thumbnail Summary on the left and right.
2. Display Thumbnail above (flat margins between) and Summary below, this very beautiful for the collection site and images site.

Demo: my blog

Installation:

Installation is easy and fast, nearly version 2.0 installed.

If you have installed version 2.0, the upgrade conducted as follows:

Search for code format and length of the Thumbnail:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://www33.websamba.com/anhvosite/blogger/js/summary-post-v20-test.js' type='text/javascript'/>

Add the following code in the above:

var thumbnail_mode = "no-float" ;
summary_noimg = 430;
...

Continue to change link in the code:

http://www33.websamba.com/anhvosite/blogger/js/summary-post-v20-test.js
to
http://www33.websamba.com/anhvosite/blogger/js/summary-post-v30.js

it is finished.

Row

var thumbnail_mode = "no-float" ;

is the show's Readmore. Default is no-float: that is displayed in the Thumbnail and Summary below. When you use this mode, the variables and img_thumb_height img_thumb_width will be the largest width and largest height of Thumbnail. If you want to show Thumbnail Summary right and left, the fix-it float to float.

If you have not installed version 2.0 (never installed):

At Template - Edit HTML, Expand widget, to find <data:post.body/>

and replace it with the following code:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

In addition you must also code below into the HEAD (<head> ... </ head>) of the template:

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

With:

• summary_noimg is number of the character description for the items are not representative.
• summary_img is number of the character description for items with the representatives.
• img_thumb_height : height of the avatar (pixels).
• img_thumb_width : width of the avatar (pixels).

Wishing you happy, especially the long time you fly "expect" this version!

Source:vietwebguide.com translated by Joker_H

This article introduces knowledge very basic about the post code in your post.

Sample:

<a href="http://template-4u4me.blogspot.com" title="Free Blogger Template,Turorials,tips">Free Blogger Template For You And For Me</a>

If you write code on as normal , it display:

Free Blogger Template For You And For Me

However, If you want to display the code in your message, you need to transfer it to text format. There are a few basic ways to move the code into text form:

1/ Use sites provide convenient transfer code into text form. http://www.simplebits.com/ - provide tranfer code into text form very easily and quickly.


Then you input the code need a tranfer into ENTER Makeup --->And click Process.
Copy the code in the Cut n 'Paste and paste it into your post...Done!

2 / The best way ^^! . Use tag <textarea> code HTML </textarea>.
Copy code into tag and your code will be display.
Demo:
</span><span class="fullpost"><a href="http://template-4u4me.blogspot.com" alt="free blogger templates for you and for me"><b>Free blogger templates</b></a>

You can optimize tag by adding some attributes:

<textarea rows=x cols =y></textarea>

With:

• x : numbers of row
• y : number of column (number of character will be display)

I'm usually use x = 5 and y = 60:
And it look like:
</span><span class="fullpost"><a href="http://template-4u4me.blogspot.com" alt="free blogger templates for you and for me"><b>Free blogger templates</b></a>

Ok final, wish you success...!

Step by step to add-on another domain for your blogger: Use free domain .co.cc and everydns.net

1. Login to your Dashboard, go to Settings --> Publishing and click Custom Domain:



2. You already have a domain. Click Switch to advanced settings



3. Input domain info and click Save settings:



4. Go to the Your Domain control panel and edit DNS Name server :



5. Go to everydns.net and login (if you don't have account you can register very easily). Enter the domain name into Add new basic domain and click to Basic button



6. Click to domain name has been added, in the Current Records will appear as two records CNAME and A with the parameters of default. Your job is to remove items to A by clicking on the Delete button on your right.



At the Add a Record: www you fill in the box Full Qualified Domain Name, Record Type box select value is CNAME, and cell Record Value fill the ghs.google.com



If successful, it will be like the following:



You mission is waiting to DNS update....and Done!

Note: If you have domain you can go to domain control panel and edit dns name server : ghs

Wish you success...!