Whatzap

Welcome 2 KeyboardBaby!!!
Showing posts with label Blogger Tips. Show all posts
Showing posts with label Blogger Tips. Show all posts

Blog Statistics Widget for Blogger / Blogspot

Share



By blog statistics, i meant the number of blog posts and number of reader comments on your blog.The blog statistics widget displays the total number of posts and the total number of comments made on your blog as a beautiful sidebar widget.

This widget works using javascript ( the json feeds) which finds the number of comments and posts from your blogs feed..

To get a blog statistics widget you can use this widget installer.When you use the widget installer make sure that you dont add the http:// part to the url because it is automatically added by the widget installer..Also don't add a slash at the end of the url
Add Blog Statistics Widget

Readmore »»

Add columns to Blogger Footer: How to Add Three Columns to Blogger Footer Section?

Share

The default Blogger template has only one column footer. If you surfing Internet frequently, you will see that many websites and blogs has three column footer. This three column footer is becoming very popular and spreading rapidly in Web 2.0. It's quite easy to implement this type of three column footer in your Blogger template. Moreover, if you do so then you will see some of the good advantages like:
  • You will get enough valuable space for your widgets.
  • You can add/replace more gadgets/widgets.
  • You can rearrange all the gadgets/widgets.
  • If you place all the biggest gadgets at the footer section, the main content will be loaded faster.
  • It will also contribute your blog design as the modern Web 2.0.

This page contains information related to add three columns to your Blogger footer section.

Steps to add three columns to Blogger footer section

Follow the following steps to add three column to Blogger footer section:

Step 1: Back-up your existing blog

Before any type of modification of your blog template code, it's very essential to back-up your existing blog template. You may take backup only the template or the widgets (gadgets) only or you may take the complete back-up of your blogger blog. I already discussed the process of back-up in other pages. To know the process of back-up, you may follow the following pages:

Step 2: Remove all widgets (gadgets) from the footer section

Before doing any change of your Blogger template code, go to your blog's layout and just see whether there is any widget to the footer section. If there is any widget (gadget) then please remove them from the footer section. Alternately, you can drag-and-drop all the widgets form the footer section to anywhere (sidebars or below the main blog post etc.) to the template. After removing all the widgets from the footer, follow the following steps.

Step 3: Adding CSS code for the footer section

This section of code will be the definition of your blog's footer column. All these are used for all the columns design. In this page, I just mentioned the code of the footer columns. You may customize according to your wish by using several colors, lines etc. All these will be discussed in the next tutorial.
Now, go to your template code section. For details, How to find and edit blogspot template code?
Before adding CSS code to your blog footer, first find the following two lines of code:
You may use Ctrl + F key to find those texts in Firefox. Please, copy the following code and paste the code before the searched texts i.e. the code ]]> .
1]]>b:skin>
2
3head>
01/*
02 Code is developed by: 
04 Blogspot Tutorial Index:
06 Code Description: 
07  Codes for adding columns (3 columns) in the blogger footer section
08*/

Readmore »»

Blogger Tag Cloud Widget by Categories / Labels

Share

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.



    1
    <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:



    01
    <b:widget id='Label1' locked='false' title='Tags' type='Label'>
    02
    <b:includable id='main'>
    03
    <b:if cond='data:title'>
    04
    <h2><data:title/>h2>
    05
    b:if>
    06
    <div class='widget-content' style='text-align: justify;'>
    07
    <script type='text/javascript'>
    08
    /*
    09
    Simple Blogger Tag Cloud Widget
    10
    by Raymond May Jr.
    12
    Released to the Public Domain
    13
    */
    14

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

    21

    22
    //Begin code:
    23
    var range = max - min;
    24

    25
    //Build label Array
    26
    var labels = new Array();
    27
    <b:loop values='data:labels' var='label'>
    28
    labels.push("<data:label.name/>");
    29
    b:loop>
    30

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

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

    43
    //Number sort funtion (high to low)
    44
    function sortNumber(a, b)
    45
    {
    46
    return b - a;
    47
    }
    48

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

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

    55
    //Begin HTML output
    56
    for (x in labels)
    57
    {
    58
    if(x != "peek" && x != "forEach" && counts[x] >= minCount)
    59
    {
    60
    //Calculate textSize
    61
    var textSize = min + Math.floor((counts[x]/most) * range);
    62
    //Show counts?
    63
    if(showCount)
    64
    {
    65
    var count = "(" + counts[x] + ")";
    66
    }else{
    67
    var count = "";
    68
    }
    69
    //Output
    70
    document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "a>span> " );
    71
    }
    72
    }
    73
    script>
    74

    75

    76
    <span style="font-size:80%;float:right;">Powered by <a href="http://www.widgetsforfree.blogspot.com">Blogger Widgetsa>span>
    77
    div>
    78
    b:includable>
    79
    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.

Readmore »»

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

Share

Display beautifully crafted links to Recent Posts on your blog with this widget. You can easily customize whether or not you would like to display thumbnails, post summaries, and the number of comments for each post along side the titles.


 


Features and Customization:

  1. The Recent Post Titles
  2. Display Post Thumbnails
  3. Choose which blog posts to display (choose URL).
  4. Display Post Summaries
  5. Length of Summaries
  6. Display Post Date
  7. Display Number of Comments on each post
  8. Display Read More Link
  9. Display separator between posts
  10. Number of Posts do Display
  11. Determine height
Install the Recent Post Widget on Your Blog:
This widget is very simple to install. Just simply click the button below to choose which blog you would like to implement it on.

add to blogger

Many thanks to Blogger Plugins!

Readmore »»

Add Digg Vote Button Counter Widget to Blogger

Share


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:

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


  4. Now Preview and Save your Template!

Readmore »»

Twitter Widget Tools, Buttons, and Icons for Engaging your Followers

Share

Twitter is continuing to grow at a most overwhelming rate. As more and more people use twitter...be sure to utilize these twitter resources on your blog or website as a tool to to expand and connect with your twitter community.



Widgets and buttons are a great way to grab your readers attention and hence increase your twitter community. Below you will find links to different sites where you can attain the source code for these widgets and icons. Please enjoy thoroughly!





Twitter Widgets

ReTweet Button


A powerful twitter widget which allows your readers to easily share your blog posts. The button also displays a live count of the amount of times the post has been tweeted! ReTweet allows you to choose from two different sizes of buttons.







TweetMeMe Button

This twitter widget is very similar to the ReTweet Button but is stylized with a green interface.





BackType TweetCount Widget

The widget also counts the number times a certain URL has been tweeted. The great thing about this counter is that you can fully customize it. Choose the background color, border color, text color, etc.






Twittley

Yet another twitter button which displays the number count of tweets in real-time.





TwitterCounter

This widget shows off how many people are following you on twitter. Surely, you'll be able to impress a few tweeters.


TwitterCounter for @bsaves





TwitterRemote

This widget shows which twitter users recently visited your blog or website.

twitter icon picture



TwitStamp

This badge displays your latest tweet with many different styles to choose from.

twitter icon picture



Chris' Original Twitter Badge

Chris has created a snazzy looking twitter badge which loads in no time.






TwitGif

Create a twitter badge for your blog which scrolls through your most recent tweets.

Twitter / bsaves



Twitt-Twoo

A WordPress Plugin which displays your twitter status.

twitter icon picture



Twitter Tag

Here is an automatic updating twitter image for your website or blog.






TwitSig Badge

This twitter image updates with your latest tweet by creating a new image every time you update your status. With this in mind, the twitter badge shouldn't take too much time to load on your blog.





Official Twitter Profile Widget

This widget loops through your tweets and has a full range of customization options. The twitter widget allows you to choose the color scheme, dimensions, and whether or not to loop through your old tweets as well.



Add Twitter to MySpace


The MySpace Flash Widget integrates Twitter into your MySpace profile page.

twitter icon picture



Twitter Gadget for Blogger

Simply display your recent updates on twitter as a list with this gadget. Also featuring a "Follow me On Twitter" link at the bottom of the widget.

twitter icon picture



Go2Web20 Badge

A simple image which floats on the side of your blog and directs readers to your twitter page when clicked on. Choose whether or not to display "Follow Us", "Follow Me", "Follow", or "My Twitter" in the image. Most people choose the Follow Me on twitter widget instead of the follow us on twitter button because it sounds more personal. You may also customize whether or not to display the twitter widget on the left or right side of your webpage.

twitter icon picture



TweetSnap


TweetSnap creates an image for your twitter account which will always display your latest tweet.

Bsaves



TwitterSticker

Another website which creates an image of your latest tweet. TweetSticker allows you to customize the font color, font size, text padding, and text wrap.





Twitterati Badge

A unique twitter widget which displays your twitter friends. Click on one of your friends and you'll be directed to their actual website.




Twitter Buttons and Icons

225 Buttons from TwitButtons.com


TwitButtons allows you to easily copy and paste their button code into your site.

Twitter Button from twitbuttons.com



80 Buttons from TwitterButtons.com

Make sure to click "More Twitter Buttons" at the bottom of their site to see the full collection.





Cute Twitter Bird by The Design SuperHero

3 Variations of the Twitter Bird with 5 different Resolutions.

twitter icon picture



Twitter Bird by WeFunction


3 more adorable variations of the twitter bird.

twitter icon picture



The Social Bird Icon Set

20 Wonderfully original twitter icons by popular artists for your inspiration. These icons have been released by InspiredMagazaine.

twitter icon picture



TweetBird Icon

1 icon which comes in 512×512, 256×256, 128×128, 64×64 and 32×32 pixel sizes.


twitter icon picture



TweetaBird Icon Set

2 more cute icons by LittleBoxOfIdeas. Featuring a twitter bird cheerleaders and a queen twitter bird.

twitter logo picture



Twitter Icon Promo Pack

53 Twitter Icons by WebTreats for you to grab and use on your site.

twitter logo picture



German Twitter Buttons by MTS

10 more twitter buttons for you to enjoy!






Twitter Graphics by Graphic Leftovers

16 twitter graphics in different shapes and forms; such as eggs,lightbulbs,bottle caps, and more.





Twitter Birds by Inaliblast

8 flying twitter bird icons.





Twitter Bird Icon Set by ProductiveDreams

6 High Quality transparent PNG twitter birds.






Free Tweet Tweet Vector Icon Set

1 Twitter bird with 4 differnet poses, created by ProductiveDreams as well.





Randa Clay Twitter Graphics

18 twitter buttons for gaining new followers.





Happy Birds by WebDesignFM

4 Happy go lucky twitter birds that will encourage both your faithful followers and potential followers.






Twitter Buttons by Blog Marketing Web

31 attractive buttons to enhance the twitter experience.






Is that Everything?

If there are any useful twitter resources that I've missed, please feel free to let us know by leaving a comment. Also, don't forget to subscribe because we'll be coming out with the The Best Twitter Apps and Tools in the near future... Stay Tuned!

Readmore »»

15 Beautiful Google PageRank Display Button Widgets

Share

PageRanking of a website is a very important factor when it comes to Search Engine Optimization, Advertising, and most importantly, trustability. So these handy little widgets will help build a great reputation for your website by openly sharing your PageRank with your readers.

  • The widgets display the PageRank of the current page being viewed.
  • You're bound to find at least one that matches your website, of the selection below.
How to Implement the Widgets?
Simply click the "add to blogger" button if you're blog is powered by google blogger. If not, copy and paste the code into your webpage. Simply click on the code and it will highlight automatically. Make sure the code is placed between the two body tags of your template. If you have any questions regarding installation, please feel free to comment below!

Readmore »»

Social Bookmarking Widget

Share

Sociofluid as Blogger Widget

Sociofluid can be embedded in blogger sites. To install the blogger widget follow the instructions:
  1. Go to sociofluid page and preview the widget:


  2.  If you are not happy with it customize it, scroll down at the end of the page and press
    generate widget button:


  3. Preview the widget on top of the page and if you like it Click on 'Add to Blogger':


  4. You'll be directed to your blogger page "Import Page Element". Click Add Widget.
  5. Select the position in the layout. I prefer it on the big column under each post.
  6. Save it and check your blogger page.

Add Sociofluid Widget to Blogger

Readmore »»

Add Sudoku Puzzle Widget To Blogspot

Share


The Sudoku widget generates random puzzles with five different levels of difficulty and shows when you have entered an incorrect answer. It can also check to see if you got the puzzle right. And many players think that the best part of this widget is that you can make it solve it self.







1
<iframe scrolling="no" frameborder="0" width="200" src="http://free-sudokus.blogspot.com" height="230">iframe><div style="margin:-8px 0;background:#fff;text-align:center;width:234px"><a style="font-size:75%;text-decoration:none;" href="http://widgetsforfree.blogspot.com/2008/01/sudoku-widget_500.html">Sudoku Widgeta>div

Readmore »»

Blogger Search Bar Form

Share



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.





1

Readmore »»
Share

Let your readers easily translate your blog with this highly compact widget. This blog translator is powered by Google Translate. The languages available at the click of a flag are Chinese, German, French, Japanese, Korean, Russian, and Spanish.

It can easily be added to any blog platform or website! Just click "get this translation widget" below to get yourself started.




For Google Powered Bloggers:




The html code:

 

Readmore »»

Live Website Chat Widget

Share

http://www.yaplet.com/images/buttons/w-3.png
A chat room is a great way to get your readers more involved in your blog. If you think about it, your visitors may end up spending the night chatting with other visitors. Now that's a great thought... The answer is Yaplet, which adds a chat room to every site on the internet!

For Example, here is the WidgetsForFree™ Chat Room . All you need to do is create a visible link or button to your site's chat room just like I have done above. Go to Yaplet.com to find your blog's chat room.


  • You can also create a pop-up version
  • If you go to yaplet's website, you will find some nice buttons which can be placed on your blog.
All the things this Widget can be used for:
  • Chat with friends
  • Make new friends
  • Build new communities
  • Collaborate on group work
  • Telepresent
  • Provide customer service
  • Offer real-time support
  • Educate over distance
  • Play games
  • Read/write reviews
  • and more...
Get this Widget

Readmore »»

Random Posts Widget for Blogger / Blogspot

Share

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:



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

Readmore »»

Floating "Top of Page" Icon Widget

Share

Some blogs and webpages have obnoxiously long pages that go on forever... and that's where this widget comes in handy. As you can see, there is a small floating arrow at the bottom-right of this page. It always maintains the same position. Scroll down a little in your template, then if you click on it, it will take you to the very top of the page.

Why it's a good thing?

  • Saves your visitors from an unnecessary hassle of scrolling up.
  • The icon does not interfere with your content.
  • You can use your own image in order to blend in with your own blog.


For Google Bloggers:




The html code:

Customizing the Icon Image:
  • If you wish to change the arrow image to something else, then find this line below and replace it with another image url
http://img119.imageshack.us/img119/8589/arrowupcx2.gif

Readmore »»

Show Related Stories Under Each Post with Picture!

Share

Install Widget on Blogger



1. Click to open Blogger in a new window, and follow the steps below in that window. Please login if necessary.

2. Select a blog if you have more than one, then click on Add Widget.





3. (Optional) For better performance, Drag and Drop the LinkWithin box under the "Blog Posts" box.


4. Click on Save.

Readmore »»

Free Facebook Toolbar for blog and joomla

Share



Wibiya is a tool, primarily for publishers and bloggers that places a thin bar across the foot of the respected site, similar to in many respects to Facebook Connect bar. Aside from its name, Wibiya stands out because it provides a wonderful mix of functionality, clean UI and ease of use that I have to see elsewhere – interestingly.
Wibiya mini-entegrate your forum or -blog to facebook.
I like it, not more regular and have some issues but these problems only for now. I think this project is very nice.. I’m not spammer, and this is not adversite. I want to share this.

Boost your blog with rich and interactive features.
  1. No coding needed
  2. Add it in two minutes
  3. Totally free
Create a Facebook Community
  1. Create a blog community using Facebook Connect
  2. Real profiles of real people
  3. Track your community growth as readers invite their friends
  4. Communicate with your community and learn what they like
Increase Page Views
  1. Gain traffic from Facebook through your members news feed
  2. Engage readers and raise pageviews with applications such as post navigator and blog search
  3. Track your traffic growth through simple analytics tools
Communicate With Your Readers
  1. Share your tweets with your readers in real time
  2. Send short alerts to your readers with each entry to your blog
  3. Direct channel to your Facebook community members
Power Tools
  1. Discover a growing range of applications to enrich your readers experience
  2. Full tracking and management system for each application and effectiveness to your blog
  3. Add and remove applications in just one click
http://www.wibiya.com/

Readmore »»