Showing posts with label blogger tricks. Show all posts
Showing posts with label blogger tricks. Show all posts

Sunday, December 12, 2010

Background Image for Blogger Template

Background Image for Blogger TemplateBackground Image for Blogger Template

With this guide, you would be able to add a background image or picture to your Blog, customize the position of your image, and have a static background image that stays in place when you scroll through the contents of your blog.

Flash Music Player

Flash Music Player and Music PlaylistsFlash Music Player and Music Playlists

In our earlier article, Add Music to Blogspot Blog, we talked about how music can be played in the background of the blog or through a hyperlink or music console player. Readers had requested for an option to play more than one song via a playlist. We have been looking at cross-browser music players that allow us to display a music playlist of selected musical pieces for Blog readers to listen to. Here, we shall discuss what we believe is a good music player that can be played in both Firefox and Internet Explorer. The following are the instructions on how to embed the music player into the Blogger blog.

Feedburner

Feedburner - FeedCount Chicklet Text

Feedburner is a very popular feed aggregator and provides a host of services which you can tap on to publicize and promote your Blog. One widely used service is their FeedCount Chicklet which displays your Blog Feed's circulation statistics. The chicklet can be static (displaying the number of “readers”) or animated (showing the number of “readers” via feed). Although you can change the background and text color for the graphic display, there is no option for you to change the text. This hack will explain how to change and personalize the FeedCount Chicklet text as well as to change the animation settings so that it rolls the text more than once.

For those who have yet to sign up for a Feedburner account, consider doing so right away. Now that it is under the Google family, there is an easy way for you to channel all your Blogger feed subscribers to Feedburner. Login to Blogger, and under Settings -> Site Feed, enter your Blog's Feedburner Feed address into the box beside “Post Feed Redirect URL.” Readers who click the “Subscribe to: Posts (Atom)” link or the RSS icon in their browsers will be redirected to your Feedburner Feed.

Add Favicon icon to Blogger URL

Add Favicon icon to Blogger URL

Have you wondered how these little icons appear next to the web addresses, like the one you see above? When you visit the sites or bookmark them, these icons will make these URLs stand out. These are “Favicons” or “Favorite Icons”.

You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.

Add the Facebook Like Button Below every Post


  Facebook has come up with  a new set of Social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. You can see a demo of the like button  on this page. The Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post . Here is a little Demo of what you will see 

If you are already having the like button on your blog, and wish to upgrade to the newerdesign of the like button, the read the Upgrade Instructions 

How to Add the Facebook Like Button Below every Post

1. First Generate the Facebook code using the options below. (Code will be updated with these details)
Demo:
Button Type                  
Text on the Like Button 
Color Scheme               
Font                              
Float                             
Location                        
Display                          


<b:if cond='data:blog.pageType == &quot;item&quot;'><div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></div>
</b:if>


Add Google Buzz Buttons To Blogger Blog


google-buzz-buttons-for-bloggerGoogle Buzz is a social tool from Google and it is much similar to Twitter and Facebook :). Google Buzz is a new way to start conversations about the things you find interesting. You can read more about Google Buzz at the official Google Blog . You might have seen the Google Buzz buttons on Mashable. You can see a demo of this button in this post page. :) . Now Google has officially released the Share Counters, So here are the steps to get the Buzz button on your blog.

1. This is the Google Buzz it Code. Copy it.
<div style="float:right;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.url'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>
2. Login to your Blogger Account and navigate to Layout > Edit HTML and Expand your widget templates.

Add a Digg Button to Your Blogger Blog

How to Add a Digg Button to Your Blogger Blog
1. Sign in to your Blogger blog, then go to Dashboard --> Design --> Edit HTML.
2. Back up your template (unless you are absolutely sure what you are doing).
3. Click on „Expand Widget Templates“.
4. Now search for (Ctrl + F) the following line of code:
<data:post.body/>
5. Add the following code directly before said line:
<!-- DIGG --><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>
6. Save your template. The Digg button will now appear on the top right side of your posts.
Customization:
If you want the Digg button to be shown on the left side you need to change <div style="'float:right;"> to <div style="'float:left;">.
That wasn´t so hard, was it?
Good luck!
P.S.: If, for whatever reason, the code under 5. does not work on your blog, then try this one instead:
<div style='float:right; margin-left:10px;'><script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>
You might also like: