New Most Popular Posts Widget for Blogger

Nov 03, 10 New Most Popular Posts Widget for Blogger
New Most Popular Post_1
Its been a while now since I run on the Design tab of my Blogger blogs, and yet, I was surprised when I hit the “Add a Gadget” link revealing a new “Popular post” widget and “Blog Stat” widget created by Blogger. Ooh, well, immediately I take on the shoes and try it by myself, first impression, this was much efficient and easy to use. Now let’s see on how can we add this cool stuff on your blog, follow after the break.

How to add most popular widget to your Blogger blog:
1. Log on into your Blogger account.
2. Go to Design tab–>Page Elements–>Add Gadget, then a pop-up window will appear.
3. From the pop-up window select “Popular Posts (New!)” widget by clicking the name link or the plus(+) sign on the right side.
4. Then the configuration tab will appear, where you can set up your widget’s Title, Most viewed, and post title with optional, summary, image thumbnails with number of possible post in display with maximum of 10.
5. Then, click the save button, and preview your blog.
New Most Popular Posts Widget for Blogger
I have been testing it recently versus my own Most Popular Post widget using Yahoo pipes, interestingly it was fast and efficient I can say, however, will see later if this will sustained its loading time when bulk of bloggers dip this widget on their blog.
I think the plus factor for this widget is the powerful “most viewed” system that will enable you to show the best topic for a week, a month and all time, this will come handy for your readers. The advantage also is the dynamic update it will come up to expose your trending topics.
One more thing is the added summary and thumbnail beside the title, this was really an A+ when it comes to luring readers to your interesting topics.
Now if you have already drop this widget on your blog, let us know what you think about it, and if you have troubled implementing this widget on your blog let us know, and yes, we’ll try our best to help you.
read more

How to List Tags/Labels in Column/Row Display on Blogger

Do you have a problem that you’re Label or Tag for posts has been over populated and therefore appearing to be a super long list on your blog. And thought that the “cloud-view” or “3D interactive-flash” tag widget isn’t looks great at your layout and mostly you want only the simple looking table like in row/column list. In this post we will be discussing on how you can list your blog’s label or tags in a table-like row/column display.

Mainly, this trick will contribute on a more organized and professionally looking labels/tags display on your blog. I have already implemented this on my other blogs TechGeeze.com and AutoGeeze.com and works really great you may head on and check it out.

Here are the steps on how you can lists your labels/tags by column/row:

1. Log on your Blogger account go to Layout–>Edit HTML.
2. Check what is the width of your sidebar just by searching “sidebar” then find the attributes “width”.
3. After you find it, divide it into your specified column (for example I’ll be using 3). Now you must consider the length of your labels/tags on this.
4. Now find the Label widget, search for this block of code: “type=’Label'” then note for the “id=Label#”.
5. Then search for the code: ]]></b:skin>
6.Immediately before that paste this code below:

#Label1 {
font-size: 11px;
list-style: none;
background: none;
border: none;
}

#Label1 ul {
float: right;
width: 369px;
margin: 0;
padding: 0px 5px 0px 5px;
list-style: none;
background: none;
border: none;
}

#Label1 li {
float: left;
width: 120px;
margin: 0;
padding: 0;
list-style: none;
background: none;
border: none;
}

7. The #Label1 is the id we note at step 4 and the width we note at step 2-3. This is very important so you for the CSS to take effect.
8. I have also avoid all possible design on the list design including bullets, background and border. You can always customized it by yourself if you want.
9. Now save and view your template.

Tips:
You can modify the Label widget for it not to show the number of posts under that label. Like I implemented at Autogeeze.com. You can do it by commenting or deleting the code below. You can find it by ticking first the “Expand Widget Template” at then search for this code block:
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/></span>
</b:if>

Hopefully this works for you, always let me know if you have any questions or problem implementing this tutorial by dropping me a message on the contact or comment form.

read more

Social Networking and Bookmarking site’s buttons that you should install on your blogs

AddThis Bookmarking buttons
The social media has been promising on advertising and marketing through out all corners of the internet. It has been one of the most effective way to take out your products or services in every corners of the world. There’s a saying “that’s internet”, this is where you can discover almost everything. Rumors, news, celebrities, politics and technology comes together. Mainly the way of spreading is viral, where with a single click can take it to millions of eyes around the world, where it will passed from one viewer to another. This is what some bookmarking sites is capable of, therefore in this post we will be discussing what are the appropriate bookmarking buttons you should incorporate in your blog to make an easier access to share your content.
There are several social bookmarking sites that has notably impact readers of the internet, Digg, StumbleUpon, Reddit along with Twitter and Facebook that formally known a social networking and micro-blogging sites but ultimately joins the circulation like a bookmarking sites should be.
In this purpose we see furious act for bookmarking sites to put an ease to its users on how they can have contents in a single click. Accordingly putting an interactive and easy to use buttons for websites or blogging platforms is their simplest way. In return, the sites that will put this buttons sometimes gets readers and more or less traffics from the social bookmarking and networking sites.
As a blogger you may ask now what buttons should I put on my blog? If you will visit few of my blogs like TechGeeze.com or AutoGeeze.com you will notice almost the same bookmarking and networking sites share buttons are installed. But you can limit your options to that as always you can modify to accommodate your needs.

Here the few buttons you can install on your blogs.

AddThis Bookmarking and Share Button

You can opt registration for an AddThis button for your website, Blogger, WordPress and MySpace but you will lose the ability to track the sharing activity but for me it’s not that important. Let’s take the Blogger platform as an example for installation.

1. Log on to your Blogger Account.
2. Go to Layout–>Edit HTML–>Expand Widget Templates.
3. Find this code block:
<p><data:post.body/></p>
<div style='clear: both;'/>

4. The just after this paste this code block immediately.
<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'><a href='http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4bbbe94976f34d07' class='addthis_button_compact'>Share</a>
<span class='addthis_separator'>|</span>
<a class='addthis_button_myspace'></a>
<a class='addthis_button_google'></a>
<a class='addthis_button_twitter'></a>
<a class='addthis_button_digg'/>
<a class='addthis_button_stumbleupon'/>
<a class='addthis_button_reddit'/>
<a class='addthis_button_fark'/>
<a class='addthis_button_mixx'/>
<a class='addthis_button_propeller'/>
<a class='addthis_button_delicious'/>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4bbbe94976f34d07"></script></b:if>
<!-- AddThis Button END -->

5. Save template.
6. You will notice that I have chosen the button with external icons this will create an easy access for your readers. I have also selected few bookmarking sites that I know has massive active users nowadays.

Note: If you will install this, the button will only appear on each post rather than you will see it appear for all posts on the homepage. We just noticed that there is a great difference of loading time if you will loop multiple buttons at once. You can further modify the icons that would appear, learn more here.
You will noticed that I don’t put the Facebook, Twitter and Google Buzz icon on the Addthis button this to make sure nothing is redundant since we will be putting separate buttons for them.

Google Buzz Button
You can jump to its installation tutorial: Google Buzz it Button for Blogger and WordPress Blogs.

ReTweet Button – TweetMeme Chicklet with Counter
You can check out this two tutorials to install the buttons to your Blogger blogs.
1. Integrating the button into Blogger
2. Adding ReTweet button as Blogger Gadget

Facebook Share Button
You can follow the steps on how we install the Addthis button above and simply copy this code, it will show the Facebook share button with counter.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</b:if>

You can also follow how to install the Facebook share button here for further customization.

Hopefully this tutorial helps you. Just let me know if you have any questions or problems ahead, just drop me a mail or comment. Can I request for a fbshare, retweet, digg, stumble, and reddit up now?

read more

Most Popular Post Widget for your Blogger blog (Most Commented Posts)

When I started blogging I get really frustrated why other blog has their Most Popular Post widget in their sidebar, and I can’t do the same. Mostly all of the most popular widget on the internet posting like from BloggerBuster or BloggerTricks aren’t working for me. Maybe with you too? So I decided to dig down Yahoo Pipes where the scripting for this widget is done. So finally I make the widget working that you will see on my sidebar right now. I will now elaborate the steps and make a friendly tutorial for you, for those beginner and mid-blogger who is still wasn’t able to install this wonderful widget.

I might say that this few steps are bit technical so I will make it simple with images for you to follow it well. The main thing about this post is cloning an existing “Pipes” of most popular widget so you can own it, I believe that other pipes that used several times would not work anymore –like what I’ve seen from other most popular widget with a single pipes account on it. So the solution make a copy of your own so other can’t used it and be optimized for your blog only.

Here are few steps you need to do to create your own Yahoo Pipes for the widget:

1. Log on to your Yahoo account. The one you use for your mail and messenger.
2. After you log, go this link where you can find the Yahoo Pipes.
3. When you see the pipes, just click clone and it will automatically copy the pipes to your account. Now we just need to further customized it.

Most Popular Post Widget for your Blogger blog (Most Commented Posts)
4. After you have cloned the pipes, we still need to copy one more pipes next click the “Edit Source” tab.

5. When the pipes appear, then scroll down then find the “Loop” function with [open] Blogger2… then click “open”.

Most Popular Post Widget for your Blogger blog (Most Commented Posts)6. After you clicked open, another set of pipes will appear and you need to save a copy of it. Save a copy by just clicking the “Save” button at the upper right of the Edit Source screen.

Most Popular Post Widget for your Blogger blog (Most Commented Posts)
7. Navigate back to main pipes, you may do two things. Click “Back to My Pipes” or just by simply clicking the tab you will see at the upper section. Demoed below, click the image to enlarge.

Most Popular Post Widget for your Blogger blog (Most Commented Posts)
8. Now let’s further customize the pipes, this the default url when the main pipes are not provided by your blog URL.
9. Test your widget if it’s working by clicking the “Pipe Output” on the bottom of the source pipes screen.

Most Popular Post Widget for your Blogger blog (Most Commented Posts)
10. Now navigate back to the main pipes then change the fields below to look onto your blog:

Most Popular Post Widget for your Blogger blog (Most Commented Posts) a.) blog URL: Place your blog url in the field.
b.) number of comments to consider: no. of comments in your post to count
c.) max no. of posts: max number of post to show

11. Then finally run the pipes, the “List” tab should show the most popular posts with the number of comments.

Now we’re done on the Yahoo Pipes part, now here is the Blogger Part.

1. Log on to your Blogger account.
2. Go to Layout tab then add a HTML gadget.

Most Popular Post Widget for your Blogger blog (Most Commented Posts)

3. Then copy this code below, and paste it on the HTML/Javascript gadget.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}

document.write('</ul>');
}
</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=f08ba75679d13feb4cfa0facb8df173b&blogurl=http://yourblogurl.com&numpost=10" type="text/javascript"></script>
<p style="float:right; padding: 0px 5px 0px 0px; font-size: 8px;line-height:6pt"> Widget by <a style="font-size:8px;line-height:6pt" href="https://www.bloggergeeze.com/" target="_blank">BloggerGeeze</a></p>

4.) Replace http://yourblogurl.com with your blog URL. “numpost=10“, this will give 10 post to display you can alter it to number of posts you desire. Then the crucial part is the Yahoo Pipes id where you should replace it by the id you will find at the “Pipe Web Address” we clone back at step 3. Click the image to enlarge.

Most Popular Post Widget for your Blogger blog (Most Commented Posts)Replace the green highlighted part of the code with your pipes id.

5. Now save the gadget and template. View it and the most popular widget should show on your blog.

Finally we’re done, I believe you would find this really interesting and helpful. If you don’t mind I spend hours making this widget works and sharing it to others is I guess worth the thanks. Please let me know if you have any problem implementing this widget. Just drop it on the comment form. Credit to Techniqueal for the Pipes.
read more

Recent Comments Widget for Blogger

We have already discussed the recent post widget for Blogger (with thumbnail) and I know alongside you want to know how to install the recent comments widget for your Blogger blog. The idea and mechanism is much the same with the recent posts widget, we will be relying on Blogger default feed for comments. Now you just need to follow this few simple steps.

Here are the steps on installing the recent comments widget:

  1. Log on to your Blogger account.
  2. Go to Layout tab, at the Page Elements section decide where to place the widget then click “Add a Gadget“.
  3. When the pop-up screen showed up, scroll down and find the gadget “Feed” then click the blue plus button (+) on the upper right side of the gadget.
  4. At the blank which you will enter your feed URL, enter this “http://yourblog.blogspot.com/feeds/comments/default”. Note that you should replace “yourblog.blogspot.com” with your blog URL.
  5. After you have enter the URL, press continue. The gadget should start retrieving your feed.
  6. You can further customize the widget by entering your desired “Title“, or by ticking “Item dates” (this will show date of each posts), “Item sources/author” (the posts author), “Open Links in new window” (this will open the post in new window when clicked).
  7. Click Save.
After just view your blog and your recent comments widget should appear with the latest comments from your readers. Feel free to contact me anytime when you need help here.

read more

Recent Posts Widget for Blogger

I know some of you might think that having the recent post widget on your blogger blog is that technically complicated. And this could be frightening for those people who just started blogging or somehow has a limited knowledge technically. In this post I will tell you how to install the recent post widget for your Blogger blog in just few simple steps.

Here are the steps to install the recent posts widget:

  1. Log on to your Blogger account.
  2. Go to Layout tab, at the Page Elements section decide where to place the widget then click “Add a Gadget“.
  3. When the pop-up screen showed up, scroll down and find the gadget “Feed” then click the blue plus button (+) on the upper right side of the gadget.
  4. At the blank which you will enter your feed URL, enter this “http://yourblog.blogspot.com/feeds/posts/default”. Note that you should replace “yourblog.blogspot.com” with your blog URL.
  5. After you have enter the URL, press continue. The gadget should start retrieving your feed.
  6. You can further customize the widget by entering your desired “Title“, or by ticking “Item dates” (this will show date of each posts), “Item sources/author” (the posts author), “Open Links in new window” (this will open the post in new window when clicked).
  7. Click Save.
After that try to view your blog and the recent post widget should be showing, like what you will see on my sidebar. The drawback is just it will be showing just five recently posted articles. If you want a more advance recent posts widget, you can try the recent post widget with thumbnails that we have originally designed. The widget is noticeably much faster than the gadget provided on blogger. You will some of the implementation of the recent posts widget with thumbnails in TechGeeze.com and AutoGeeze.com. Please let me know if you have any questions during your installation, just drop it on the comment form below.

read more

New Recent Posts Widget with thumbnails for any Blogging platform


What we got here is another blogging widget that I have been looking for a long time. This is a recent post widget with thumbnails by TechGeeze.com and Bryandel.net. The widget is very advance compare to those widget that have a manually copy and paste on the template instruction for you to install it. This widget is advance crafted that users will just only needs to enter their desired customization in the widget generator.

See the installation above these post. You will need to set your feed in to “Full”, and test if your feed is fully functioning since this widget relies on your feed details. For the thumbnails to appear you should have images on your post. If you don’t have any image a default “no-image” picture will appear.

You can head-on Recent Posts Widget with thumbnails Installation guide to know more of the step by step installation of this wonderful widget.

read more