Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Saturday, October 9, 2010

How to Add Official Tweet Button to Blog

How to add Tweet Button on Blogger blog?
How to add Tweet Button on Blogspot blog?
How to add official Tweet Button on Blogger blog?
How to add official Tweet Button on Blogspot blog?

You want to add the official Tweet Button at the end (or at the top) of each of your blog post, here's how.

official tweet button

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Then, here's the code to add the Tweet Button.

<div style='align:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='simpleblogrtips' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
<b:if cond='data:post.isFirstPost'>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
</b:if>
</div>

Take note that the code is different from the code generated on Twitter Tweet Button page because it is modified for better performance.

---

Where to add Tweet Button?

To add it above each blog post, add the code before <data:post.body/>.

To add it after each blog post, add the code after <div style='clear: both;'/> <!-- clear for photos floats -->.

To distance the button away from the blog post, add <br/> before or after the Tweet Button code depending on where to put it.

Click "Save Template" and you're done.

---

How to customize Tweet Button?

1) To change button style, change "horizontal" to "vertical" or "none".

twitter button vertical
vertical

twitter button horizontal
horizontal

twitter button
none

2) To change via Twitter account, change "simpleblogrtips" to your preferred Twitter account.

That's all for now!

Saturday, September 18, 2010

How to Add Facebook Like Button on Blogger

How to add Facebook Recommend Button on Blogger blog?
How to add Facebook Like Button on Blogspot blog?
How to customize Facebook Like Button on Blogger?
How to customize Facebook Recommend Button on Blogger?

You want to add the official Facebook Like or Recommend Button at the end (or at the top) of each of your blog post, here's how.

facebook like button

Firstly, go to Dashboard > Design > Edit HTML. Then click Expand Widget Templates.

Search for this code:

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->

Then, here's the code to add the Facebook Like Button.

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&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;'/>

---

Where to add Facebook Like Button?

To add it above each blog post, add the code before <data:post.body/>.

To add it after each blog post, add the code after <div style='clear: both;'/> <!-- clear for photos floats -->.

To distance the button away from the blog post, add <br/> before or after the Facebook Like Button code depending on where to put it.

Click "Save Template" and you're done.

---

How to customize Facebook Like Button?

1) To show Facebook Profile pictures/faces of people who "Liked/Recommended" the blog post, change "false" to "true".

2) To use different action on the Facebook Button, change "like" to "recommend". Decide which is suitable for you.

3) To change the font, change "arial" to either "lucida+grande", "segoe+ui", "tahoma", "trebuchet+ms" or "verdana". Decide which is suitable for you.

4) To change the colour scheme, change between "light", "dark" or "dark". It represents the background colour your blog uses. If it's light colours use "light", if it's dark use "dark" and "evil" is somehow the same.

5) To change the width or height of the button, change them accordingly.

That's all for now!

Monday, September 6, 2010

Blogger in Draft New Widgets - Popular Posts and Blog's Stats

How to add Popular Posts widget on Blogger blog?
How to display popular posts on Blogger blog?
How to show popular posts on Blogspot blog?

How to add Blog Stats widget on Blogger blog?
How to display blog's visitors and page views stats on Blogger blog?
How to show blog traffic statistics on Blogspot blog?

Blogger in Draft is out with 2 new widgets - the Popular Posts widget and Blog's Stats widget.

blogger popular posts and stats new widgets

Take note, they can only be seen when you're on Blogger in Draft. The normal Blogger doesn't have it yet.

On the Popular Posts widget, these are the available settings.

blogger popular posts widget

You can set the most view posts duration period and whether to include an image thumbnail (which is normally the first picture of the blog post) and also the snippet.

Unfortunately you can set the number of displayed blog posts right now. The fixed number is 10. Hopefully Blogger will add in the blog count feature as well later on.

On the Blog's Stats widget, these are the available settings.

blogger stats widget

Here, you can edit the stats style and the options.

That's all for now. Hopefully these additional Blogger widgets are useful for some of you!

Friday, September 3, 2010

How to Add Floating Twitter Button on Blogger Blog

How to add twitter button on Blogger blog?
How to add Follow Me on Twitter badge on Blogspot blog?
How to add Follow Us on Twitter badge on Blogspot blog?
How to add Twitter Follow Me button on blog?
How to add Twitter Follow Us button on blog?
How to add link to Twitter page on Blogger blog?

Firstly, go to Dashboard > Design > Edit HTML.

follow on twitter button

Then search for </b:skin> and add this code before it.

#twitter-follow { border: 0; position: fixed; top: 300px; right: 0;}

To change the position of the Twitter button, you can change "300" (distance from the top) and "right" to "left" if you want the button to be on the left.

Then search for </body> and add this code before it.

<div id='twitter-follow'> <a href='http://twitter.com/username' target='_blank'><img alt='Follow Me on Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeKg0AmdWXOgzJz0JyWO5QasvsrKDYSPnuqeC2K1rWQe5ybvjACGYGD7w83RTTRISQrRS_-O0oRifxW6dm9VELAPytZelI_rmYgP3P33xLLub_m1DiA2VFslKwU_0GUtpEIws53DM4Hc/s1600/twitter+follow+me+button.gif'/></a></div>

twitter follow us button

Remember to change the "username" to your Twitter account username.

If you want it to be "Follow Us on Twitter", use this image link - https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Y0E-SZ3sob3A3dgnKcz4NrxLk5tbYObJcll-XqNoljLbB0BAJtboX_D1QexX89sffI3X_XDxMSaklAojuWLAClIOlcXBLrFRJi4GkkRFqAbkGOMg_i0wvQdUNc3Shz-5za35lP32To8/s1600/twitter+follow+us+button.gif

twitter follow us button

Enjoy and all the best in getting more followers on Twitter!

Wednesday, November 25, 2009

Traffic Tracker and Statistics for Blogs

Traffic and statistics for blogs.
What are the best traffic checker for sites?
What blog statistics tracker suits blogs?

Here are some well-known traffic trackers that you can use for your blog, just to see how your blog's traffic is doing.

1) Google Analytics

google analytics logo

"Google Analytics is the enterprise-class web analytics solution that gives you rich insights into your website traffic and marketing effectiveness. Powerful, flexible and easy-to-use features now let you see and analyze your traffic data in an entirely new way. With Google Analytics, you're more prepared to write better-targeted ads, strengthen your marketing initiatives and create higher converting websites."

Editor's note: This is a must for all blogs.


2) SiteMeter

sitemeter logo

"Site Meter's comprehensive real time website tracking and counter tools give you instant access to vital information and data about your sites audience. With our detailed reporting you'll have a clear picture of who is visiting your site, how they found you, where they came from, what interests them and much more."

Editor's note: This is my favourite among the other traffic trackers (excluding Google Analytics)


3) OneStat (free version)

onestatfree logo

"OneStat Free is the most reliable, fully password-protected tracker available today. We provide you the most detailed web analytics reports and the best of all: it is absolutely free!"


4) StatCounter

statcounter logo

"A free yet reliable invisible web tracker, highly configurable hit counter and real-time detailed web stats. Insert a simple piece of our code on your web page or blog and you will be able to analyse and monitor all the visitors to your website in real-time!"

Monday, June 15, 2009

Top Commenter Widget for Blogger Blogs

How to display list of top commentators on Blogspot blog?
How to add Top Commentator Widget on Blogspot blog?

Follow this link, fill up the available form and add to your blog immediately!

Credit: Blogger Buster

Wednesday, May 20, 2009

Soccer, Alien & Princess Nuffnang XChange Widget

An additional of 3 more themes for Nuffnang XChange widget!

nuffnang soccer theme
Soccer
Certainly for football enthusiasts.

nuffnang alien theme
Alien
Science fiction lover? This should be your choice.

nuffnang princess theme
Princess
A great design for all little princesses.

Check it out on the Nuffnang XChange Page now!

Tuesday, May 12, 2009

New Nuffnang Widget - Nuffnang XChange

A brand new widget created by Nuffnang to drive traffics among Nuffnang blogs.

The widget consists of three tabs:

The RSS tab
Pulls some of the latest posts from blogs that also have the widget on.

The Innit tab
Updates itself with the latest posts from the Nuffnang aggregator INNIT.

The Status tab
Gives Nuffnang users a space to leave a message or thought for the readers. It can be updated from the XChange page of Nuffnang website. However it's a redundant feature as most users prefer it to be integrated with Twitter.

Take notice that it's only accessible by Glitterati members.

Here are 2 ready widgets for Nuffnang users to select:

nuffnang widget

Currently Nuffnang has launched XChange with the Compact and Flower themes. They're also providing skins for the widget for users to choose from to fit their blog theme, and there'll be more to come!

Check out more themes here!

In my personal opinion, the Nuffnang Xchange is a totally awesome widget but it might:
  • slow down the blog loading time.
  • block the blog template if the blog template is really wide, for example: the Flower XChange widget is taking up too much space.
Anyway, do add it up. It's a great service!

Great work Nuffnang!

Related Posts Plugin for WordPress, Blogger...
Follow Me on Twitter