Official "Follow by Email" Feedburner Widget for Blogger

Now Blogger has introduced "Follow by Email" Feedburner email subscription widget for blogger blogs. So you don't want to add your site to the Feedburner manually. It will save your time.To add this widget to your blog,1.Log in to your dashboard --> Design -->Page Elements.2.Click on 'Add a Gadget' on the sidebar.3.Select "Follow by Email".4.Now if you want you can add "FeedBurner URL" manually.

How To Add Disqus Comment System to Blogger

DISQUS is a comments platform that helps you build an active community from your website's audience. It has awesome features, powerful tools, and it's easy to install.Before this I have explain how to add IntenseDebate comment system to blogger blog and now I am going to explain how to add Disqus comment system to your blogger blog.There are lot of good features with Disqus comment system when we

How To Add IntenseDebate Comment System to Blogger

IntenseDebate is one of the most popular a feature-rich comment system for WordPress, Blogger, Tumblr and many other blogging/CMS platforms.In this tutorial I am going to explain how to add IntenseDebate comment system to Blogger blog.With IntenseDebate,you can do many things than your default comment system.These are some main features of IntenseDebate comments.IntenseDebate features:Comment

How To Embed Yahoo Media Player to Blogger

Yahoo Media Player is one of the easiest way to play audio files from your website or blog.It is very easy to embed into your site and only display when you click on the audio file name.Yahoo Media Player is not spend long time to load and someone can play all audio files of your website/blog using Play-list.These are the main features of Yahoo Media Player:Adds audio to your site with one line

21 Amazing jQuery Tabs Collection

Using jQuery,we can do many things very easily than normal JavaScript.So jQuery has became the most popular JavaScript library in use today.I wrote my previous article about popular jQuery featured content sliders,that are used by web designers.In this article I am going to show you a better jQuery Tabs collection you can use for your websites or blogs.When we go to websites,we can see different

How To Add Twitter Official Tweet Buttons to Blogger

Few days ago Twitter has introduced their own tweet buttons for web masters.Now you can use this twitter button directly share your posts through twitter without any third party web site.So you and your visitors don't want to authenticate any third party web site to access your Twitter account.These new tweet button loads very fast and anyone can share your article with in few seconds.There are 3

How To Display Recent Twitter Tweets Using JQuery

Do you want to show your recent tweets inside your website or blogger blog?Then,this tutorial will helpful for you, to add recent tweets into your website using Jquery.Your recent tweets will load fast using jquery and also you can change number of tweets must display very easily.If you want you can read advanced details about tutorial from here: http://www.thewebsqueeze.com/web-design-tutorials/

Trouble shoot sidebar slide to bottom of page problem: An example

I have previously published two posts on the "sidebar slide to bottom of page" problem at Sidebar pushed to bottom of page: What to do? and Trouble shooting sidebar sliding to bottom of page problem (click BACK button to get back to this page). Problems like this are most frequent in Internet Explorer, but while they may not cause the sidebar to slide to the bottom of the page with other browsers like FireFox, they can cause other problems.

A blog reader recently asked for assistance for this problem and I thought it would be good to use his problem on how to go about solving the problem. His sidebar is at the moment at the bottom of the page and here is a screenshot of the cause of the problem:



I have used the red error to show where his sidebar end, and the screenshot clearly shows the width of the "Favorite Songs" far exceeding the sidebar width. If I have access to his Blogger account, I will open the Page Element (widget) that had been added to display that "Favorite Songs" and also open the template editor to check what is the exact width of the sidebar. See How to find the width of the blog Header, main column (posts) and sidebar (click BACK button to get back to this page).


However, I have no access to his Blogger account, so I have to do the next best thing, that is, click VIEW > PAGE SOURCE in the menu bar at the top of the browser while at his blog. This is what the page source revealed:

#sidebar-wrapper {
display: inline; /* fixes a strange ie margin bug */
float: right;
margin: 0 3px 0 0;
width: 269px
color: #1c4676;
background: url(http://www.blogblog.com/thisaway_blue/bg_sidebar.gif) repeat-x left top;
}

The part in red tells me that the width of his sidebar is 268 pixels. Further down the page source is this script which is used to display the "Favorite Songs"

<h2 class="sidebar-title">FAVOURITE SONGS</h2>

<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;"><embed style="width:435px; visibility:visible; height:270px;" allowScriptAccess="never" src="http://www.profileplaylist.net/mc/mp3player-othersite.swf?config=http://www.profileplaylist.net/mc/config/config_blue.xml&mywidth=435&myheight=270&playlist_url=http://www.profileplaylist.net/loadplaylist.php?playlist=18021445" menu="false" quality="high" width="435" height="270" name="mp3player" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/><BR><a href=http://www.profileplaylist.net><img src=http://www.profileplaylist.net/mc/images/create_blue.jpg border=0></a><a href=http://www.profileplaylist.net/standalone/18021445 target=_blank><img src=http://www.profileplaylist.net/mc/images/launch_blue.jpg border=0></a><a href=http://www.profileplaylist.net/download/18021445><img src=http://www.profileplaylist.net/mc/images/get_blue.jpg border=0></a> </div>

There are 4 widths there highlighted in red (you will scroll horizontally to see the hidden one) and the problem here is I don't know which width to change. I would probably first leave the first one alone, and change the width of the other 3 so that it is equal or less than 268. If that still don't work, I will change the first width as well.

So now, all I can do is to refer that blogger to this post and hope he can solve his problem. As for you, I hope you have learned something about how go about solving similar problems.

Update 17 September 2010: A reader solved her "sidebar at the bottom" problem by reducing the number of posts in the homepage from 25 posts to 10. Each of those 15 posts was published individually (permalink) and was found to not have caused the sidebar to slide to the bottom. Thus the possibility of content in one or more of those 15 posts causing the sidebar at bottom of page problem was eliminated.

If you have many posts in your homepage and your sidebar is at the bottom of the page, you may want to try having less posts on your homepage.

"Add This" bookmarking button with drop-down menu

Got an email from David of New "Add This" bookmarking widget works on Blogger. He alerted me to the fact that "Add This" now has a new version of their very convenient bookmarking widget which has the new cool feature of showing a drop-down menu. "Add This" site says a new version for Blogger and TypePad will be coming soon, implying currently the script they provide would not yet work for Blogger. David however said with a little modification the new cool "Add This" script, it can be made to work in Blogger.

Amazon products for Search Engine Optimization (SEO)

I tested this in Natural Remedies and found that it works. Go to this blog and hover your mouse over the "Add This" bookmarking button and observe.

I think the easiest way to explain is to give you the original script given by "Add This" which I will put in the scroll box below:

<!-- AddThis Bookmark Button BEGIN -->
<script type="text/javascript">
addthis_url = location.href;
addthis_title = document.title;
addthis_pub = 'enviroman';
</script><script type="text/javascript" src="http://s7.addthis.com/js/addthis_widget.php?v=12" ></script>
<!-- AddThis Bookmark Button END -->

Here is the edited script with the addition colored red. You will only see one red addition in the scroll box. You will have to scroll down to see the other:

<div>
<!-- AddThis Bookmark Button BEGIN -->
<script type="text/javascript">
addthis_url = location.href;
addthis_title = document.title;
addthis_pub = 'enviroman';
</script><script type="text/javascript" src="http://s7.addthis.com/js/addthis_widget.php?v=12" ></script>
<!-- AddThis Bookmark Button END -->
</div class='post-footer>

Also, note that it has the line:

addthis_pub = 'enviroman';

which identifies my account with this "Add This" bookmarking widget. You cannot use the script above directly. You will have to go to Add This site, sign up for your own account, get your own script, and if you want to get it to work straight away with Blogger, just add the codes colored red above.

Most popular posts widget for your blog

For an example of a most popular posts widget in a blog, have a look at Generating Revenue from your website. The "most popular posts" widget is near the bottom of the right sidebar. To see all the posts, you will have to use the vertical scrollbar.

This widget was installed using the most popular posts widget by affiliatebrand.com/. Sign up for an account, sign in, click "Learn more....", register your blog, add blog, click "Edit". If you want to customize, click "Customize" tab and then you can change width (in pixels), height, over how many days, widget title (default is "Most Popular Posts" and this to me seem to be the most appropriate), stylesheet URL (you can just use the default, otherwise you will have to create your own stylesheet, upload it and type in the URL), char's (characters) to cut off from LEFT (default 0) and char's to cut off from RIGHT. Otherwise, just copy the script given into clipboard, go into your blog LAYOUT, click ADD A PAGE ELEMENT and select HTML/Javascript. Paste the script into the window, click "Add to blog". It will appear at the top of the section. If that is where you want it, your job is done. Otherwise, drag it to where you want it and click "Save" at the top right of the page.

More widgets (news headlines) for your blog

Want more content for your blog. Here are some widgets you may want to consider adding to your blog. The first one I tested was a scrolling headlines horizontal bar for news related to Australia at the blog Guide to Australia. It is just below the title of the blog and the Javascript code was obtained from Widgetmate News Widgets. The one for the above scrolling news headline bar was the last of the various alternatives there. All you have to do is to click on "Customize". chose your various options like keywords, type, height and width, link color, etc. I changed the default 525px width to 900px because from the template of that blog:

#outer-wrapper {
position:relative;
top:4px;
left:4px;
background: #889977;
width:995px;
margin:10px auto;
text-align:left;
font: $bodyFont;

it shows that my blog, and hence my header, is 995px wide. I can safely put the width as 900.

Further, you may want to customize the color for the background, link color, text color. For this, ColorPic (use the searchbox to find the site to download this useful tool) will be very helpful.

There are also other widgets that is suitable for the blog sidebar if customized (for width, etc.). When you change the keywords, you may have to click "Refresh". For example, I customized a widget for scrolling headlines with keyword "Search Engine Optimization" and "Site Promotion" for the sidebar of Generating revenue from your site, but when the Javascript was generated, I found that the keywords were still Bush, Iraq (var keyword='bush%2C+iraq';). I supposed the script can be edited, but I think it is too much trouble for something which is not important to me, so I deleted the widget.

Recent posts widget using feed and script generator

Note: A number of inconsitencies have been found as I am editing this post. I will have to do many tests later and reedit this post. Please be patient.

A reader asked for a hack for RECENT POSTS for the New Blogger (formerly beta). Have a look at this list of posts in this blog Natural Remedies. The RECENT POSTS is at the second from the bottom of the right sidebar, just above the "Contact Me" link.

You can generate a Javascript to put into your Page Element to display any number of posts you want, including all. The script generator is at http://itde.vccs.edu/rss2js/build.php.

You will have to enter the feed URL for your blog which will take the form of
http://yourblog.blogspot.com/rss.xml or
http://yourblog.blogspot.com/feeds/posts/default?alt=rss or

(substituting "yourblog" with the actual URL of your blog and respond to a number of choices as shown in the screenshot below (click to enlarge):



If you select the number of items to display to zero, then all the posts will be listed. I have limited it to 8 as showing all posts will give a very long list. Putting "Show item descriptions?" as 0 will give no description, 1 will give full description, and n>1 will display the first n characters of the description. The rest are self-explanatory.

I chosed "1=show full description text". When you are finished, click "Generate Javascript", highlight all the script by clicking inside the script box and press ctrl+A keys (or right-click and select "copy") to copy the script into the clipboard.

It will be good if you are using a browser like FireFox which has tabbed browsing (FireFox is also recommended by Blogger). Then you can open a new tab and log into your Blogger account to get to the Dashboard which will show a list of all your blogs. Click LAYOUT for the relevant blog and click ADD A PAGE ELEMENT in the section you want the "Recent Posts" to be (most likely in the sidebar). Select HTML/Javascript and paste the script from the clipboard into the box. Preferably type in something like "Recent Posts" or something like that in the title, then click "Save Changes". This new Page Element will appear at the top of the section. If you want it elsewhere, hover your mouse cursor over the new Page Element. The cursor will change to a cross. Drag it to wherever you want. In the above case, I dragged it to the second last in the right sidebar section,. Click "Save" at the top of the LAYOUT and if you want to see the result, click VIEW BLOG.

I used
http://foodasmedicine.blogspot.com/feeds/posts/default?alt=rss
for Natural Remedies and tested adding a new post. When I view the blog after publishing the new post, I could not see the latest post in the list of "Recent Posts", so I tried again with another blog Medical Matters using

http://medical-products.blogspot.com/rss.xml

and also this time chose "Show title and description"

(the "Recent Posts" is at the second from the bottom of the right sidebar, just above the Profile. I published a new





http://foodasmedicine.blogspot.com/?










copy the generated script, go to the Layout of your blog, click "Add a Page Element", then select HTML/Javascript, and paste the script into the pop-up window. In the pop-up for the "Add a Page Element" widget, put in the TITLE "List of Post" so that your list of post will have a visible heading.

Just a little note. Whenever you add a script into a Page Element, it is good to add a comment (not seen on the web) which tells what the script is for. This is so that when you know what the script is for. In my case, I have added the comment
<!-- list of posts hack --> at the top of the script so that I will know what the script is for. Comments are not displayed on the Webs, and are good to document codes so that one will not forget what it is for.

<!-- list of posts hack -->
<script language="JavaScript" src="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffood-drinks-and-recipe.blogspot.com%2Frss.xml&chan=n&num=0&desc=0&date=n&targ=n" type="text/javascript"></script>

<noscript>
<a href="http://itde.vccs.edu/rss2js/feed2js.php?src=http%3A%2F%2Ffood-drinks-and-recipe.blogspot.com%2Frss.xml&chan=n&num=0&desc=0&date=n&targ=n&html=y">View RSS feed</a>
</noscript>

UPDATE: This hack does not seem to be working. Using the above feed URL, a List of Post is produced which does not show new posts added. I tried another URL, in this case, http://food-drinks-and-recipe.blogspot.com/feeds/posts/full. The first time, it was added, it showed a list of post. The moment a new post is added, all the post titles disappeared.

UPDATE 23 January 2007: Someone commented in this post about using JSON. Did a Google search for "JSON blogger beta" and found this: JSON on New Blogger and a backlink to Blogger Hack for recent comments and posts. Added what I found in that blog, changed "comment" to "post" and got a list of post but with the title RECENT COMMENTS". Anyone knows how to change that to RECENT POSTS?

UPDATE 23 January 2007: Found another hack at Beautiful Beta: Widget Installation and download page. The result of the hack is at the bottom of the left sidebar at Food, Drinks and Recipe. So now, you have 3 methods of adding List of Recent Posts.

NEWER POST

HOME

OLDER POST