bloggerable

Blogger Search Bar Form

noreply@blogger.com (Syafdillah) — Sat, 21 Nov 2009 02:33:00 +0700

Add a search engine in the sidebar of your blogger blog. This searches all the posts on your blog, and displays them by latest posts first. Inside the search bar you will find the text "Search this Site", this can easily be changed to any text you desire. Such as "Search my Site", "Search", "Type and Hit Enter", etc. Just simply replace the code. You can also change the text "Go" on the button to something like "Search", "Find", etc.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>

source:WidgetsForFree

Contact Me Widget

noreply@blogger.com (Syafdillah) — Sat, 21 Nov 2009 01:39:00 +0700

Kontactr is a one-click free contact form service. With Kontactr, you can fight against the amount of spam that you receive daily. Protect your email address by using this highly secure contact form. All you need to do is sign up for a free account and your users will be able to email you right from your website.

Get this widget

source:WidgetsForFree

Add Digg Vote Button Counter Widget to Blogger

noreply@blogger.com (Syafdillah) — Sat, 21 Nov 2009 01:35:00 +0700

This tutorial explains how to integrate a Digg Button into your blogger template, which will be displayed in each of your blogger posts. The button displays the amount of times each post has been dugg and lets users digg directly from your blog.

Here are the Steps:

1. Make sure to Backup your Template!
2. Open your blogger template, click Expand Widget Templates, and search for the code below:

<data:post.body/>

3. Add this code below directly above the searched code above:

<div style="'float:right;"><script type="'text/javascript'">digg_url = '<data:post.url/>';</script><script src="'http://digg.com/tools/diggthis.js'" type="'text/javascript'/"></div>

4. Now Preview and Save your Template!

source:WidgetsForFree

What is a Favicon?

A favicon is a small 16X16 image located at the top of your browser in the url bar.

How to Change your Favicon

1. First go to Layout >Edit HTML in your Blogger Dashboard.
2. Backup your existing template before making any changes!
3. Place the code below directly below the </head> tag in your template.

<link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' />
<link href='http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico' rel='icon'/>

4. Now save your template.
5. Once your template is saved view your blog and make sure to refresh the page and delete your cookies.

Creating your own Favicon

1. Replace the image URL (2X) with your own 16 pixel by 16 pixel image hosted on the internet.
http://bsaves.com/HowHero/Blogger%20Templates/moonspot/images/favicon.ico
2. You can host your own favicon blogger image at sites such as ImageShack; PhotoBucket; Flickr; etc.
3. Check out this Favicon Generator Tool which allows you to upload an image and it will format it for you!

source:WidgetsForFree

Random Posts Widget for Blogger / Blogspot

noreply@blogger.com (Syafdillah) — Thu, 19 Nov 2009 23:51:00 +0700

This widget can definitely bring some excitement to your blogger powered blog. Letting your readers surf your blog to the fullest extent by creating a link to a random post in your blog's sidebar. Besides providing fun for your blog, hopefully your visitors will stay on your site for longer periods of time.

Installation and Customization:

Click button below to complete Installation:
<div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'View Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>
Once you have installed the widget, you can change the link text. The default value is "View Random Post". To change this, view the code and search for "View Random Post", and change it to any desired text.

Those are all the steps necessary to implement the Random Post Widget to blogger. I hope you and your readers thoroughly enjoy it!

source:WidgetsForFree

Blogger Tag Cloud Widget by Categories / Labels

noreply@blogger.com (Syafdillah) — Thu, 19 Nov 2009 23:34:00 +0700

This widget is perfect for blogspot users who desire a simple tag cloud for their Categories. The Labels Cloud can easily be implemented within the sidebar of your blog and will match your template wonderfully.

Steps for Implementation

Step 1: Back it Up
Always make sure to back up your Blogger Template before doing anything else!

Step 2: The Labels Gadget
Make sure that you have the Labels Page Element installed. If you haven't already...
1. Go to Layout >Page Elements .
2. Click "Add a Gadget" and then add the "Labels" gadget.

Step 3: Locating the "Old Code"
1. Now go to Layout >Edit HTML
2. Make sure that the "Expand Widgets Template" box is unchecked.
3. Now we need to search for the code that looks like this.

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

Your code may look a little different. So try using your browser's search tool to find type='Label'.

Step 4: Replacing the "Old Code" with the "New Code"
1. Once you've located type='Label', remove the whole line of code that looks just like the code mentioned in part 3 of step 3.
2. Replace this code that you've just deleted with the code below:

/*
Distributed by John Smith at WidgetsForFree.blogspot.com
*/ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false; // show counts? true for yes, false for no
var minCount = 1; // what is the minimum count for a tag to be shown? 1 for all

//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push("<data:label.name/>");
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push("<data:label.url/>");
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push("<data:label.count/>");
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
if(x != "peek" && x != "forEach" && counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = "(" + counts[x] + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "</a></span> " );
}
}
</script>
<br/>
<span style="font-size:80%;float:right;">Powered by <a href="http://www.widgetsforfree.blogspot.com">Blogger Widgets</a></span>
</div>
</b:includable>
</b:widget>

Step 5: Previewing the New Tag Cloud
Before saving the template make sure to click preview. The new tag cloud should now be visible. If not, make sure that you've completed all the steps correctly.

source:WidgetsForFree

20+ Useful Blogger Widgets and Hacks

noreply@blogger.com (Syafdillah) — Thu, 19 Nov 2009 23:21:00 +0700

Blogger is a great free blog platform that is improving every day. New useful hacks and widgets are being created on a regular basis. Here is a list of some of the very best blogger widgets and blogger hacks that will improve the usability of your blog.

Random Posts Button

This widget creates a link for your template that directs users to a random post when clicked on.

Change the Favicon

Are you tired of the regular organge favicon provided by blogger? This tutorial will teach you how to display your own customized favicon.

Top Commentators Widget

Reward your readers for commenting on your blog with this widget. The widget displays the names of the top commentators and will direct you to their website when clicked on.

Change the Title Tags for More Search Engine Traffic

This tutorial teaches you how to make your post title show up before your blog title in Google search results. This is very important when it comes to Search Engine Optimization!

Currently Online Readers Widget

A small widget which display how many users are currently online. The widget also indicates which pages are currently being looked at.

Digg Vote Button

Let your Digg readers Digg your posts directly from your blog with this handy little widget.

Contact Admin Widget

Let your users stay in touch with you with this contact form.

Search Bar for Blogger

This widget displays a small search bar in your blog's footer. Your readers will be able to easily search your blog for specific content.

Change Your Template

Choose from a huge list of custom blog templates. Providing your blog with a new design will make it look fresh and new.

Post Ratings by Outbrain

Let your users give your post a star rating from one to five.

Allow your readers to easily navigate through your site with an interactive Table of Contents.

Social Bookmarking Widget

This widget lets your users to easily bookmark your blog posts at the bottom of each post.

PageRank Buttons

Showoff your blog's Google PageRank with this small widget.

Google Talk Chat Back Badge

A Google Talk chatback badge will let visitors to your web page chat with you. They'll be able to chat with you whenever you're signed in to Google Talk.

Twitter Widget Tools

A great post containg 502 twitter widget tools, buttons, and icons for Engaging your followers.

PayPal Donation Button

If you've got a loyal reader community that might be willing to sponsor you as a blogger, this would be the way.

Performancing Ads Widget

Another way to make some money from your blog by letting others advertise on your site.

Sudoku Puzzle Widget

Have some fun on your blog with this interactive sudoku game that will easily go in the sidebar. The sudoku has five different levels of difficulty.

source:WidgetsForFree

bloggerable

Blogger Search Bar Form

Contact Me Widget

Add Digg Vote Button Counter Widget to Blogger

Here are the Steps:

Recent Comments Widget for Blogger

Recent Posts Widget for Blogger with Thumbnails, Summaries, Comments, etc

Features and Customization:

Install the Recent Post Widget on Your Blog:

How to Change the Favicon in Blogger