Add Recent Posts Banner on Blog

If you want to display the last post on your blog in the form of banners which you can adjust your own size and color, then you come to the place because this tutorial will discuss about how to create and install the Feed Headline Animator! If you do this tutorial to complete the end you will get an animated picture. GIF which will dynamically display your blog updates the server based on data from Feedburner and of course the animation will show your recent posts like this:

Follow the steps below:

---

1. Log in to Feedburner.com (use your Google account)!
2. Select Your Blog (Blog Feed)!
3. Then select the tab Publicize!
4. Now select Headline Animator then "Create new ..."
5. Now create and save your animated banners. Click the "Activate" and copy the code!

If you're new to the Feedburner, You should read this tutorial First "How to Create Email Form Subscription"!

Use Blogger to Host Your Images - Unlimited Bandwidth

Several days ago I had explained how to hosting javascript in blogger with unlimited bandwidth, So now I will explain how to host image on blogspot with unlimited bandwidth of course :)

And of course this is a distinct advantage for those who like to use image on their blogger template, beside do not have to worry about running out of bandwidth, loading blogs will also be faster because the images hosted on blogger body immediately!

Here are the steps:

---

1. SIGN IN to Blogger.com, and enter Dashboard » New Entry!
2. In a post template select upload pictures , the you upload the picture you want to use!

3. If the picture is complete upload and then click Preview! Then right click on the image and select Copy Image Location in Firefox (Other browsers follow)!

Suppose you get a picture like this Location:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdEAE6_l8OvH1xaLROQtD0HsnuDJNRMOsiuO9yxDu_8J5BVUiJ_a5sEN3qfHnewU3ZJz-QVnXGEE9YzrglJwfx5o-qe8E2xkqa7uPlJznaRRVzEQ3JzdGxkO7ewCkM_-XgQFFi0XQ8eu-0/s1600/2008-05-28_124414.jpg

4. Now you can use the location of the image as you wish!

Note:
To post you use to upload images so you can save posts as drafts and never published!

Top Commentators Widget for Blogger

This is a perfect widget to show our loyalty to our blog readers. This widget will show who has the most comments on our blog! So this could trigger a quality comment on our blog! Top commentators widget will also include links top commentators of our blog. And just as important this widget installation can also be practically easy!

Here are the steps to make it:

---

1. SIGN IN to Blogger.com.
2. After you enter the Dashboard page click on the Layout link.
3. Select Page Elements, Then click Add a gadget.
4. Next you select HTML/Java Script.
5. In the dialog box HTML/Java Script add code below to make a top commentators widget:

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL=http%3A%2F%2FYourBlogAddress.blogspot.com&number=5&Nametobeexcluded=YourName" type="text/javascript"></script>
<div align="center" style="font-size:80%;";>powered by <a href="http://alrevis.blogspot.com">Alrevis</a></div>

Description:

• Change YourBlogAddress.blogspot.com with the address of your blog!


• Figures 5 shows how much top commenters will be displayed, change according to your desire!


• Change YourName with your display name on the blog so that your name won't included and won't displayed in the widget top commenters!

How to Back Up Your Blog

The results from google search with Keyword loss blog on blogger showed a lot of results. Many people who lost their posts, comments, templates/widgets, and the worst of losing of their blogs!

Usually they are on the block blog by Blogger because of abusive content on their blog, but you can also see there are many bloggers who realized that their content has been violated TOS and when they want to fix all of it, it was too late because they were not able to access their blogs!

Read and follow all the rules in the TOS that Blogger is very important, but just in case if you doing some back up of Your blog to avoid unwanted things!

Here's how to back up your blog and put it in your PC or Laptop!

1. Here are the steps to Back Up your post!
Sign in to your dashboard » Settings » Basic » Export blog!

2. Here is how to Back Up the Template and Widget!
From Dashboard » Layout » Edit HTML » Download Full Template!

Create Drop Cap

In MS Word there are facilities that can be used to create large letters at the beginning of the sentence, called Drop Cap. So what if we want to implement something similar to the post on the blog? Of course it can be done by adding some CSS style on the Edit HTML page.

Following steps below:

---

1. Go to Layout menu and select Edit HTML.
2. Enter the following CSS script before the tag ]]></b:skin>:

.dropcaps {
float:left;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px;
}

3. Then click SAVE TEMPLATE!
5. If you want to put it on a post, then at the beginning you have to type:

<span class="dropcaps">Your text</span>

For Example:

<span class="dropcaps">L</span>

6. If you're already published, will look like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl.

Good luck :)

How to Host JavaScript on Blogger with Unlimited Bandwidth

You are bored with free hosting such as geocities, ripway, mydatanest, and other free hosting because they have a limited bandwidth? Then why you don't host your files directly in Blogger, especialy file type like javascript!

Normally to use javascript in blogger you must use tags like this <script src="Your File Location" type="text/javascript"></script> which means your files are hosted by using third-party services that have limit in bandwidth :( Since there was a problem like that then I am going to explain you how to host the javascript file directly in blogger with Unlimited Bandwidth!

Here are the steps:

---

1. Copy the entire script in your javascript file and paste in a text editor program, such as WordPad or Notepad.
2. Make a tag like this on your blog template if you want to host the javascript file, where is this tag will paste is depend in your needs!

<script type='text/javascript'>

//<![CDATA[

PASTE YOUR JAVASCRIPT CODE HERE

//]]>

</script>

Copy the javascript code before that you have saved as a text editor program and then paste in the text PASTE YOUR JAVASCRIPT CODE HERE!

3. Save!

Congratulations you have successfully host your javascript file in your own blog!

For example you can see its use in my previous post about how to display related articles, You can understand it by yourself :)

Benefits of this trick:
» No file size limitations
» No bandwith limitations
» Super fast page loading (coz files are stored in blogger itself)

Like the trick ? comment.. :)

Add "Loading Icon" Before Images Appear

Let's say you have a large picture in your blog, and you want when the image was in load a preload icon appears which shows that the images was in load, for this trick you can use a little trick of css :)

You can only use java script for this trick but if you use java script tricks then your blog will be heavier to open. Okay, the choice is yours, to use java script trick or css trick? But in this post I will explain the css tricks only :D

Here are the steps:

---

Step 1: Prepare a preload images!
Prepare a preload images like this , to preload images you can make an online here. But remember not to make the image size too big because if too much preload images may not appear when the main image is in load! You do not want that to happen right!?

Step 2: Input to the template CSS!
Go to the tab Edit HTML and look for the code ]]></b:skin> and input the code below before the code ]]></b:skin>!

.load{background:url(images/youricon.gif) no-repeat center;}

Do not forget to replace the red colored text with your preload images address!

Step 3: How to use the code.
The easiest way to use this trick is to add a div tag on every image in your blog, and also write down the length and width of the image that is loaded, for example like this:

<div class="load" style="width:200px;height:200px">
<img src="http://www.dynamixlabs.com/images/largeimage.bmp" alt="alternate text" /></div>

For example after the code added to images, like this:
You must clear the cache and reload this page first! Or you can see it here :D

Note:
This trick can be used in browsers Internet Explorer 5.5, 6, 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).

SEE FINAL RESULT HERE