2011 ~ trick zone

Thursday, October 20, 2011

Decorate your Blog for Christmas

Its Christmas time and here is a Blogger Widget to decorate your blog For Christmas. You can see the demo here this my blog. The Christmas Bells and the Snow Fall are a part of this Widget.

After Adding the Gadget, drag it to someplace in your Footer(This will improve the page load speed).

Click the SAVE button

If you want to remove the Widget, you can click on the Edit Link on the Gadget and click on the Remove button

I will try to add some more Christmas Gadgets to this post if I get time. :) If you have any suggestions, please drop them in.

Blogger Tag Cloud Widget by Categories / Labels

6:16 AM BLOGGER HACKS No Comments

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

Go to Layout >Page Elements .
Click "Add a Gadget" and then add the "Labels" gadget.

Step 3: Locating the "Old Code"

Now go to Layout >Edit HTML
Make sure that the "Expand Widgets Template" box is unchecked.
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"

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.

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(&quot;<data:label.name/>&quot;);
</b:loop>

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

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</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 != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}
</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.

Features and Customization:

The Recent Post Titles
Display Post Thumbnails
Choose which blog posts to display (choose URL).
Display Post Summaries
Length of Summaries
Display Post Date
Display Number of Comments on each post
Display Read More Link
Display separator between posts
Number of Posts do Display
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.

How to Change the Favicon in Blogger

6:13 AM BLOGGER HACKS No Comments

Blogger supplies every blog with the standard orange "B" blogger favicon. Having your own unique favicon is a great way to give your blogger template both a distinct and explicit brand. These small 16X16 pixel images will most definitely help your blog stand out from the rest of the blogspot blogs.

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

First go to Layout >Edit HTML in your Blogger Dashboard.
Backup your existing template before making any changes!
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'/>

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

Creating your own Favicon

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

You can host your own favicon blogger image at sites such as ImageShack; PhotoBucket; Flickr; etc.
Check out this Favicon Generator Tool which allows you to upload an image and it will format it for you!

Change the Title Tags in Blogger for More Search Engine Traffic

6:12 AM SEO No Comments

By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It's important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how to make your post title show up first so that you can reel in more traffic from the search engines.

Why Change the Titles?

It's quite important to have the Post Title + Blog Title arranged accordingly because this is how you would want your blog to be displayed on google's search results. This way more people will click on your link when searching google because the post title is more relevant than your post name.
Example Google Search Results:
You are most likely to click on the bottom image when searching google for the keywords "image reflection generator". The reason being is that your mind reads text from left to right. So it makes sense to have the more important title on the left.

How to Change the Titles:

Go to Layout>edit HTML in your Blogger dashboard.
Search for this tag: <title><data:blog.pageTitle/></title>
Replace this tag with the following code:

<b:if cond='data:blog.pageType == "index"'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

Save your template and you should see the results in your web browser as depicted in the images below.
It may take a few days for the changes to show up on the google search results. I guarantee you that you will start receiving more traffic from google once you are re-indexed!

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

6:11 AM No Comments

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.

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

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

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.

Twitt-Twoo
A WordPress Plugin which displays your twitter status.

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. This is a great twitter widget for myspace!

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.

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.

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

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.

80 Buttons from TwitterButtons.com
Make sure to click "More Twitter Buttons" at the bottom of their site to see the full collection. This follow us on twitter widget is my favorite!

Cute Twitter Bird by The Design SuperHero
3 Variations of the Twitter Bird with 5 different Resolutions.

Twitter Bird by WeFunction
3 more adorable variations of the twitter bird.

The Social Bird Icon Set
20 Wonderfully original twitter icons by popular artists for your inspiration. These icons have been released by InspiredMagazaine.

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

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

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

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.

Weather Widget for Website & Blog

6:09 AM No Comments

Having the latest weather updates on your blog keep your site alive and fresh for your visitors. The easiest way to show off your local weather forecast on your website is with weather widgets, which can easily be implemented in your blog. Each weather widget displays the temperature, wind details, and much more.

Ibegin Weather Widget
Just enter your City, Zip Code, or State to show your local weather forecast. This weather widget will show the current weather and weather forecast with small icons.

WeatherBugWidget
This WeatherBug widget comes in multiple sizes which display your local weather forecast.
50x250, 180x150, 160x600, 300x250 , 125x125 and 728x90.

Weather.com Live Weather Widget
Another nice weather widget by Weather.com, which can easily be implemented in the sidebar of your blog!
WidgetBox Weather Widgets
Choose from a large selection of widgets to show of your local weather.
WeatherReports Widget
Lets you choose the theme of your weather widget.

How to Add these Widgets to your Blog?
Please take note that all of the widgets above can easily be implemented into your blog. These weather widgets are for Blogger, WordPress, Typepad, and all the other blogging platforms. Go to the website and customize the widget, then copy and paste the HTML code into your blog. Then you're done! If you have any questions, please feel free to leave a comment below.

10 Facebook Widgets and Tools for Your Website and Blog

6:08 AM No Comments

Facebook is the largest social networking site with more than 400 million active users and is growing larger every day! Make sure to use these Facebook widgets for your website or blog to connect with your large Facebook audience. You can use these tools to easily share certain profile information, websites, blogs, and businesses with the Facebook community.

Personal Profile Widgets

Like Badge
Display your Facebook pages for all to see.

Profile Badge
Create a Facebook profile badge to share selected profile information on your website. A profile badge will allow your users to easily connect with you and add you as a friend.

Photo Badge
This photo badge allows you to share your Facebook photos on websites and blogs. Choose from a vertical, horizontal, or two-column layout and also choose the number of photos to be displayed.

Basic Widgets for Website or Blog

Like Box
This allows your users to publish their content and activity to Facebook.

Share Button
A powerful facebook widget which allows your visitors to share your content on Facebook! An excellent Facebook widget for blogger.

Page Badge
Lets you share your Facebook page (one that you have created) information on your website.

Twitter Link
Connect your Facebook page with Twitter. Whenever you update your Facebook page, your twitter followers will be updated as well with a tweet. A great Facebook widget for your website!

Developers Widgets for Website or Blog

Like Button
Allows facebook users to share web pages from your website on their profile.

Comments Box
Lets your users comment on your website content with their Facebook account.

Recommendations
Provides your website users with personalized suggestions for pages to visit.

Live Stream
Lets Facebook users to post and share content in real-time.

Activity Feed
Lets users know what their facebook friends are doing on your website through comments and likes.

Login Button
Displays a login button along with profile pictures of facebook friends who have already signed up.

Facepile
Shows profile pictures of people who have liked your facebook page or have signed up for your webpage.

Registration
Another way for users to sign up for your site.

Add Google Buzz Share Button - Widget for Blogger

6:07 AM No Comments

Google Buzz is a great social tool which is very similiar to Twitter and Facebook. It's a wonderful way to engage and interact with your readers! Make sure to implement these Google Buzz buttons into your blogger posts, so that users can easily share your content on Google Buzz.

Add Google Buzz it Button to Blogger

Go to Layout >Edit HTML in your Blogger Dashboard.
Back up your existing Template before making any changes!
Make sure to check the "Expand Widget Templates" box.
Here is the Google Buzz it Code:
<div style="float:right;padding:4px;">
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcTitle=" + data:blog.title+ "&srcURL=" + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>
<img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
</div>
Search for this line of code in your template:
<div class='post-header-line-1'/>
and place the Google Buzz it Code right after the code you searched for above.
If this doesn't work, then search for this code below and place the Google Buzz it Code directlybefore it.
<data:post.body/>
Now save your template and you're done!

Add Google Buzz Button with Share Count to Blogger

Here is the Google Buzz it with Share Count Code
<div style="float:right;padding:4px;"> <script type='text/javascript'> njuice_buzz_url = '<data:post.title/>'; njuice_buzz_title = '<data:post.url/>'; njuice_buzz_share = 'reader'; </script> <script type='text/javascript' src='http://button.njuice.com/buzz.js'/> </div>
Place the Google Buzz it with Share Count Code either
directly after this:
<div class='post-header-line-1'/>
OR
directly before this:
<data:post.body/>
To change the style of the widget add either
njuice_buzz_size = 'small';
or
njuice_buzz_size = 'simple';
just after
njuice_buzz_share = 'reader';
Save your blogger template and you're done!

Google Plus

Pages

Thursday, October 20, 2011

Steps for Implementation

Features and Customization:

Install the Recent Post Widget on Your Blog:

What is a Favicon?

How to Change your Favicon

Creating your own Favicon

Why Change the Titles?

How to Change the Titles:

Twitter Widgets

Twitter Buttons and Icons

Personal Profile Widgets

Basic Widgets for Website or Blog

Developers Widgets for Website or Blog

Add Google Buzz it Button to Blogger

Add Google Buzz Button with Share Count to Blogger

Social Profiles

Popular Posts

LIKE US

Total Pageviews

Tags

Categories

Keep Traveling

+1

About Me

Followers

Blog Archive

Comments

Recent

Contact Form

Author Social Links

Search This Blog

Travel the world

Author Description

Climb the mountains

Advertisement

Travel everywhere!

TRANCELATE IT

ONLINE