Free Blogger Templates

To create recent post for your blogger:

1. Go to http://feed2js.org click Build tab and enter your feeds url:

http://your_blogger_name/feeds/posts/default

2. Customize option for your feeds, click Preview Feed to see demo.
3. After your feed look okay. click Generate JavaScript to view code. Copy code and paste to your blogger and done!!!

Very easy, wish you success! ^^

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...!

If you want to create links Read More of your blogger automatically without having to manually use the span (class = fullpost) to prevent parts described and the full posts. It also helps the blogger before it does not read more active can create links that do not need to edit posts.Beside, which support the representative, it will get the first pictures in the article as the images represent.

Installation: Step by step

1. At the 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'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

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

<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'/>

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).

Done!

Note: You can upload js file to your hosting and edit link in the code above.

Wish you success...!

How to register and join the popular and free blogging service, Blogger. Step by step and through to your first post. More later.

This video from The ICE Marketing Group LLC builds on the video about Blogger templates. In this video we show you how to customize the look, feel and color of your blogger template.

Many people still seem to be confused about how to apply new templates to their Blogger blog. It’s not suprising though because Blogger didn’t seem to care about clearly marking the differences between the two when you are at the template editor page in your control panel. They should have used a much better naming convention and put some type of heading on the editor page that CLEARLY says which mode your blog is running in. The fact is that Blogger can run in two different modes, one is called “classic” and the other is often referred to as either “XML” or “beta”. The confusing interface is what causes most of the problems when people try to paste in a new template, with complaints like “I can’t get it to work, I keep getting errors!”.

This tutorial should help you to see the differences between the two modes and how to switch back and forth. First up is how to switch your blog to the new XML or “beta” mode. If your blog is running in “classic” mode already you will see a template editor like the one pictured below, and you will see the words “Customize Design” as pointed out by the red arrow. All you have to do is click it and choose a new template and you will automatically be switched to the “new” or “beta” mode. This will allow you to replace the code in the template editor with a custom template designed to be used in “beta” or “new” mode. “Classic” templates WILL NOT work in this mode!!!!

Now for switching your blog to “classic” mode if it’s already running in “beta” or XML mode. If you look at the image below you’ll see that the template editor page looks different than the one pictured above. The editor is much narrower and there’s a check box that says “Expand Widget Templates”. If you see that then your blog is running in XML or “beta” mode. Switching to “classic” is very easy, however Blogger did a very good job of hiding the link to do the switch over. You have to look underneath the template editor window for the words “Revert to Classic Template”. Once you click the link it will take you to a page where you can select a new template. Once you make the choice and save it you will now be running in “classic” mode. This will allow you to edit the template and install custom templates that are designed for the “classic” mode. Templates designed for XML or “beta” mode WILL NOT work in classic mode!!!!

There are a number of differences between the two modes in how they work, but the most important one when trying to edit your template is determining WHICH mode you are currently in. If you try to edit your template manually and you keep getting XML parse errors you are running in “XML” or “beta” mode. “Classic” mode is much simpler to work with for manually editing your template but the drag and drop widgets are unavailable and will not work and neither will templates designed for “classic” mode.

If you want to use templates designed for “classic” mode you MUST SWITCH your template FIRST or the template WILL NOT WORK. I hope this helps clear up some of the confusion.

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type “head” must be terminated by the matching end-tag “”.

If you got the same problem, don't worry , i will help you and you will fixed the bug ^^!

1. Login to New Blogger with your Google account.
2. On your Dashboard choose blog you want to edit, Click on Layout, you’ll go direct to Template tab where blog you want to Edit.
3. Choose the Template tab of your blog then click on Edit HTML.
4. Next scroll down to the end of your page and choose Revert to Classic Template.
5. Copy all the code of the template you wish and paste it into your blog.
6. Click on SAVE TEMPLATE and you are done!.

Step by step to use new blogger template (XML):

1. Download file .zip from my blog or another link and extract file to your computer. You can use winrar or winzip which is available in windows.

2. Go to Dashboard and click to Layout --> Edit HTML. Click Browse and link to file .xml already download.



3. After choosed file .xml. Click Upload button to upload file. The Click OK to Pop-up



4. Step end, Click to Confirm and Save button to Save Template for your blogger



The end!

Note's: Before you use new template, you should save the current template. Click to Download Full Template to save file xml of the current template in your computer. If the new template errors you can easily restore.



Wish you success...