New Most Popular Posts Widget for Blogger
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 moreSocial Networking and Bookmarking site’s buttons that you should install on your blogs
Here the few buttons you can install on your blogs.
AddThis Bookmarking and Share Button
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 == "item"'>
<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&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.
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 == "item"'>
<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>
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?
Most Popular Post Widget for your Blogger blog (Most Commented Posts)
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.
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”.
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.
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.
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.
10. Now navigate back to the main pipes then change the fields below to look onto your blog:
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.
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.
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.
Recent Comments Widget for Blogger
Here are the steps on installing the recent comments widget:
- Log on to your Blogger account.
- Go to Layout tab, at the Page Elements section decide where to place the widget then click “Add a Gadget“.
- 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.
- 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.
- After you have enter the URL, press continue. The gadget should start retrieving your feed.
- 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).
- Click Save.
Recent Posts Widget for Blogger
Here are the steps to install the recent posts widget:
- Log on to your Blogger account.
- Go to Layout tab, at the Page Elements section decide where to place the widget then click “Add a Gadget“.
- 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.
- 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.
- After you have enter the URL, press continue. The gadget should start retrieving your feed.
- 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).
- Click Save.
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
