How to Add A Favicon-Blogger Hack

You have to create one first. You can create a favicon in an icon editor software or generate one online. One useful free program to create it in is IconEdit32. Search for it in Google and download and install it. It can create 16×16 icons and 32×32 icons. The first is very small and so it is better to create one of the latter size.

A Favicon is actually short for “Favourite Icon” and serves as a sort of symbol for the site. You can have a text Favicon made up of the first letters of your site or a symbolic favicon which denotes the subject of your site. It also serves to markout your site in your bookmark list. You can also make an animated favicon and a scrolling favicon which scrolls your blog title one letter at a time.

To make one online a free favicon generator is available at :
http://www.html-kit.com/favicon/

After downloading the favicon to your PC upload the icon file to a freeserver like Googlepages. Copy down the URL of the icon at Googlepages. Then login to Dashboard of your blog and go to Edit Html subtab under the Template tab. Copy the following code just below <title>…</title> tags

<link rel=”shortcut icon” href=”URL OF YOUR ICON AT GOOGLEPAGES” />

Save Template. Republish if necessary. Refresh Cache and view blog.

If you want to add an animated favicon add the following code in the same position :

<link rel=”shortcut icon” href=”URL OF YOUR ICON AT GOOGLEPAGES” />
<link rel=”icon” href=”URL OF YOUR ICON AT GOOGLEPAGES” type=”image/gif” />

Save Template.

Another site to make a favicon is :
My Favatar

A calender Archive Widget for Blogger

Here is a New Way of Showing Archive!

A calendar archive widget

Just click the image to view a working example & get the instructions.

[via Purple Moggy]

13 more built in online bookmarks for blogger

Here is 13 more built in bookmarkers you can use on your blogger / blogspot blog. There are Furl.net, ma.gnolia.com, blinkbits.com, meneame.net, simpy.com, myweb2.search.yahoo.com, digg.com, del.icio.us, ocio.fresqui.com, reddit.com, blinklist.com, netvouz.com, and of course technorati.com

here is the demo:

---

I have created 2 different version of this trick for you. that is the one for bookmarkers inside your post, and the another one is bookmarkers for outside of your post.on the download zip below, you will find 2 separated files, there are

1. blogger-bookmark-inside-post.txt
2. blogger-bookmark-outside-post.txt

What is the different?

1. blogger-bookmark-inside-post.txt is only applicable inside of a post widgets. while the blogger-bookmark-outside-post.txt is applicable anywhere.

so the outside-post is better then the inside post? well it depends. the outside codes will grabs the current link, and the current title of the browser. What does that means? It means, on default configuration, the title would be something like this: Your Blog Title Here : Then Your Post Title Here.

While on the inside code, it will just Your Post Title Here.

Are you confuse now? Good. then just download this codes below, and try it your self, so you’ll understand. Don’t forget to backup your template first. thanks!

• DOWNLOAD HERE

[via Jack Book]

A Comment Form Below the Posts-Widget For Blogger?

(Click image for Clean Priview)

Sorry for Not Updating my Blog Yesterday.I have Some Problems While Posting in Blogger and There Was Problem in Our House Electricity.So, Today I Find a Very Simple and Very Easy Way To have A comment Form Below Every Post!I Dont Think That it is a Widget or Trick..You Suggest!

Did you Notice The Picture Above?

Now you Blogger / blogspot users can have a comment form under your post. this mean your readers can leave and write a comment exactly under your post. without clicking and open a new page / window.

How to Do That?Sooo Easy:-
1. This is a free service from haloscan.com, so what you need to do is just register for a new account on haloscan.com, and about seconds, you’re registered.
2. Login to haloscan
3. Click the SubMenu “Install”
4. Choose your blog type, and because we’re talking about blogger, so blogger it is.
5. Click Next and follow the instructions.
6. Done, and congratulation

With this haloscan free services, we can have a better great comment system on our blogger / blogspot blog.

there are many great points about this services.
1. We can easily integrate it with cocoment.com service, so you can track your comments
2. You can customize the header of your comment from
3. it’s free. that’s the most important
so what are you waiting for?

I think You Have Noticed This Comment Form in My Blog!

Have an easy way to leave a comment Quickly!

Popular Post Widget for Blogger

After some searching for a “Popular Posts” widget for Blogger, I discovered AffiliateBrand’s widget. This widget is free to use, and displays your most popular posts based on tracking of page impressions.

The default widget provided by AffiliateBrand looks something like this:

The widget is very simple to install, and now you don’t even need to sign up to AffiliateBrand membership to be able to use it! You will need to register your blog’s address though, in order to ensure that your most popular posts are tracked. Here’s how to get this widget for your own blog:

1. Visit AffiliateBrand.com and click on “Blog Window-Create/Edit” in the left sidebar.
2. Add your blog URL into the box provided, and click “Add Blog”. Your blog’s URL will then appear in the window beneath.
3. In order to get the javascript code you need to create your widget, you will need to click on the “edit” link beside your blog’s URL. You will then be directed to the page from which you can copy the code. Paste this into Notepad or something similar.
4. It may be a good idea to configure the width and height of the widget before you install it into your blog’s template (if you decide to register with AffiliateBrand, you can do this later). To do this, click on “Customize” and choose your specifications for the widget’s width, height, how many posts to display, etc. You can also specify a stylesheet for the widget, which I shall explain later. Then click “Save changes.
5. Now, go to Template>Layout and add a new HTML/Javascript element to your sidebar. Paste the javascript code from AffiliateBrand and save your widget. Now when you view your blog, you will see the “popular posts” widget appear in your sidebar. At first, it will display a message rather than any posts as it takes a short time to begin collecting data of your most popular posts. To speed this up, click on a few of your post pages and you should soon see the results begin to appear.

As mentioned, if you create an AffiliateBrand account, you will easily be able to edit your widget later, as the javascript code is dynamically updated from the remote server. Also, you will be able to receive detailed analytics reports of your blog activity.

If you prefer, you can also specify a style-sheet to alter the appearance of your widget, which is explained most fully in the Stylesheet FAQ.

Another advantage of using this widget is that you can associate your Amazon Associated publisher ID and display relevant ads beneath your widget to help you earn money from your blog. To do this, click on “edit” beside your blog’s URL, and then on “Advertising”. On the following page, you should enter your Amazon Associates ID.

For a great tutorial of how you could customise this widget to better suit your blog’s style, take a look at this post by Webweaver, which offers excellent advice.

As yet, I’m still learning about the configuration and usability of this widget, and will probably post again in a couple of days regarding my customisations and experience. In the meantime, feel free to leave your comments and opinions or email me if you prefer.

Blog Theme Switcher-Widget For Blogger

Theme changer or Theme switcher is a really a little complicated thing when comapared to the other hacks here..Here i introduce a theme changer for our blogger beta.

Here is the method to do it

Goto your Blogger Template>Edit Html and back up your Template by downloading it..
Now In the Template code find

<b:skin><![CDATA[

you will notice some variable defenitions and some style defenitions below it

copy all the data below the above code till

]]></b:skin>

and save the copied text as a text file on your desktop.

Now in the text file you will see codes like

<Variable name=”sidebarTitleBgColor” description=”Sidebar Title Background Color”

type=”color” default=”#ffd595″ value=”#eed595″>

This means that the variable “sidebarTitleBgColor” by default has the value #ffd595 and now you are using the value #eed595

To use theme switcher you will have to replace each occurance of this variable by its value in the text file..

That is you should replace all occurances of $sidebarTitleBgColor with #eed595

Similarly all the variables(like $borderColor,$Sidebartextcolor $mainBgColoretc..) should be replaced by their values.

Now consider the declaration of the font variables
<Variable name=”bodyFont” description=”Text Font”

type=”font” default=”normal normal 100% Verdana, Arial, Sans-serif;” value=”normal normal 100% Verdana, Arial, Sans-serif;”>
Here the $bodyFont variable should be replaced by normal normal 100% Verdana, Arial, Sans-serif;

Similarly all variables should be replaced by the text enclosed in its corresponding value=”……..” declaration..
Now remove all the variable defenitions from the text file..
Variable defenitions will look like this
/* Variable definitions

====================
========Defenitions here====================
*/

So delete every thing between /* and */

Now your default style sheet is ready.Save this test file as default.css

Now make another style sheet and save it as custom.css.The great thing about this script is that you don’t have to make a completely new stylesheet. You only have to define those rules that are different from the default stylesheet (although you can include all the options that are the same too if you want).
Similarly you can make as many style sheets as you want (say custom2.css,custom3.css etc).

Now upload all of your stylesheets somewhere(maybe google pages).
Now in your Blogger Template>Edit Html delete everything below the variable defenitions and above

]]></b:skin>

Now just below find the following code
&lt;/head&gt;

and replace it with
<script src=’http://simpletricksblog.googlepages.com/styleswitch.js’ type=’text/javascript’/>
</script>
<link href=’url of default.css’ rel=’stylesheet’ type=’text/css’/>
<link href=’url of custom.css’ media=’screen’ rel=’alternate stylesheet’ title=’custom-theme-1′ type=’text/css’/>
<script type=’text/javascript’>
window.onload=function(){
var formref=document.getElementById(“switchform”);
indicateSelected(formref.choice);
}

</script>
</head>

(Dont Forget to replace url of default.css and custom.css with its actual urls.)

Now some where in the sidebar add the Theme switcher Button code below.

<form id=”switchform”>
<input value=”none” name=”choice” onclick=”chooseStyle(this.value, 60)” type=”radio”/>Default Theme<br/>
<input value=”custom-theme-1″ name=”choice” onclick=”chooseStyle(this.value, 60)” type=”radio”/>Custom Theme 1
</form>

To add more themes you should add similar link href= tags for each of your stylesheet and add the button code for each of them..

The awesome javascript for this hack was developed by Dynamic Drive.

If you have any doubts feel free to contact me or comment here..

How to Add a Signature to Your Blogger Posts-Blogger Hack

If u Want to Pretty Up Your Post,There Are many Things,But to Add Signiture to your Blogger Post is Much Fun.Well,Below i am Showing a Tutorial How to Add a Signature to Your Blogger Post!

You must first have a signature that you want to have at the bottom of your post. This signature will be in the form of an image. To get that image, you can look online for sites that help create signagtures, or you can make your own using GIMP as I did. If you need help making a signature, read some of my posts on design and graphics. After you have your signature, upload it to your web host…I use Ripway.

Open your Dashboard/ Settings/ Formatting/ Post Template. Put this code in the Post Template box:

<p><image class="centered"alt="post signature" src="SIGNATURE URL" /></p>

Replace SIGNATURE URL With The Image URL!
Enjoy!!

How to Install Invisible Music Player-Widget For Blogger

For an example of a blog with an invisible music player, go to Invisible background music player with your speakers turned on.

I don’t recommend this, but there are bloggers who want it, so I will describe how first and explain why I advice against it later.

How to install an invisible music player to your blog

The very first thing you have to do is to upload your music file to a online file host which will put your music file online and not those that let you upload the music file and require anyone to listen to the music to click on a link to download the music file.

Once you have uploaded the music file to the web, get its URL.

Sign into blogger.com (Dashboard) and you will see a list of blogs you have created. Of course if you only have created one blog, you will see only one. Whatever it is, click LAYOUT and in any section, I recommend the footer, click “Add a Page Element”, and in the “pop-up”, select HTML/Javascript, then add this script into the HTML/Javascript box:

<embed style=”width:1px; height:1px; visibility:hidden” autostart=”true” loop=”true” src=”URL of music”/></embed>

You will of course have to substitute URL of music with the URL of your own music which had been uploaded to the web.

The attribute loop=”true” play continuously. If you want it to play only once, you will have to change it to loop=”false”.

[UPDATE]

Why I don’t advice adding music that automatically start to a blog or any other websites

When you install an invisible music player, that means there will be no button to click to start the music. Therefore you must make the music play automatically for it to make any sense. That is why there is the attribute autostart=”true” in the script.

A surfer may visit your site in the middle of the night while others are sleeping, or with a sleeping baby beside him or her, or in a public library, or he or she may already have his or her favorite music playing in the background. Once your music start, the visitor may be forced to quickly surf away from your site to stop the music and you lose a visitor. And if a surfer has already his or her favorite music playing, your music will replace that, and that may cause irritation. There will be no button anywhere for the visitor to click to stop the music.

Still want to install an invisible music player. Well, everyone have their own preferences and opinions and what they think is good or no good. The choice is yours.

Add Weather Report Widget for Blogger to your Blog

Widgetizing your Blog is the new thing to explore here on Blogger TTT. Ramani shows how to add random Einstein quotes to your Blog. Phydeaux3 started all this showing Flickr Puppies, and even Hoctro now shows a Flickr Zeitgeist widget. So it is time that Beautiful Beta follows these fellows, with a useful Weather Forecast Widget. And ofcourse a tutorial on how to create this widget on your own Blog and make it easy-to-install for your readers.

You have to follow 3 easy steps:

1. Create the widget
2. Add it to your Blog
3. Add an Install-button to your Blog

Step 1: Create the Widget

Go to WeatherReports.com, scroll down and click Add WeatherReports To Your Site.
In the next screen, enter your city, select the colors and style of the weatherbox. After entering all your selections, you will go to the next screen automatically. Take a look at the preview, and select and copy the HTML-code.

Step 2: Add the Widget to your Blog

Add an new HTML page element to the sidebar of your Blog. Paste the code that you copied into the page element, and set its title to “Weather Report”.

Don’t save it yet, but go to step 3.

Step 3: Add an Install-button

Now we are going to add a button, that installs the widget on your visitors blog when it is clicked. In fact, we’ll add a form with several input fields, but only the button will be visible. Here we go.

<form action=”http://beta.blogger.com/add-widget” method=”post”>
<input value=”Weather Report” name=”widget.title” type=”hidden”/>
<textarea style=”display:none;” name=”widget.content”>
&lt;script type=”text/javascript” language=”javascript1.2″ src=”http://weatherreports.com/jscript.html?width=125&height=125&theme=brand&location=Amsterdam%2C%20Netherlands&units=c”&gt;</script>&lt;div><a href=”http://www.weatherreports.com/”&gt;<small&gt;Free Weather Reports&lt;/small&gt;</a></div>
</textarea>
<input value=”Install to Blog” name=”go” type=”submit”/>
</form>

The text between the <textarea>-tags is the html of your widget. Please notice that each is replaced with >.

Now save the page element and view your Blog.
If you want more information on how to add third-party widgets to your blog, take a look at these help pages.