[Translations by other bloggers: Spanish, Malaysian]
I got a specific request from a blogger asking whether 3-column templates are possible with Blogger Beta. If you have a lot of items in your sidebar, you would naturally want 3 columns like him so that you can balance your items across 2 sidebars. I found that it is in fact easier to convert Beta templates to 3 columns than older templates. This is because the condensed form of template shown by Beta is easier to work with. In addition, once you add another sidebar, you can move page elements between the two sidebars easily using the Layout editor.
If you need a 3-column template for a new blog or just want to try 3-columns with a test blog, you can right-click, save one of these templates and upload it to Blogger. If you want to use these with your active blog, please note that it doesn't have all your widgets. So, you will have to add them again.
3-column Minima
3-column Denim
3-column Dotsdark
If you already have a functional Beta blog with some other template, here are the steps that you could use to convert your template to 3-columns.
Disclaimer 1: I am assuming that you have already played with CSS a bit.
Disclaimer 2: You may need to do additional adjustments in CSS like adjusting width, margin etc if one of the sidebars is pushed downwards. This instruction is just to highlight the general method of converting to 3-columns. As I don't have much free time nowadays, I may not be able to help you there.
1. Beta template has 3 CSS wrapper definitions as follows:
#outer-wrapper - This defines the entire blog
#main-wrapper - This defines the main column
#sidebar-wrapper - This defines the sidebar.
Now, to insert a new column, we need to define a new wrapper, say #newsidebar-wrapper. Find the definition of #sidebar-wrapper, copy/paste and rename it to create this new wrapper.
2. These wrappers might have different widths depending on your template. We need to fix the widths of these 4 wrappers so that they appear as expected. I suggest setting the width of outer-wrapper as 750px, main-wrapper as 400px and each sidebar-wrapper as 150px (750 > 400+150+150).
3. We should also set the float property of these wrappers appropriately. i.e. if sidebar-wrapper was set as float:right, we should set the newsidebar-wrapper as float:left and vice versa (unless you want both of them on one side). Also, setting the left or right margin of main-wrapper ensures there's space between the new sidebar and the main column.
Summarizing, here is an example of settings:
#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}
In the definitions above, ... refers to all other properties within the wrapper.
4. Now that our CSS is ready, let's get to the changes needed in the body of the template. Find the div sections with main-wrapper and sidebar-wrapper and add the code in red either above or below the main-wrapper (i.e. if sidebar-wrapper is below, newsidebar-wrapper goes above and vice versa).
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
If you now goto Template->Page Elements, you will see two sidebars. You could move elements between them and add new elements too. Have fun :)
[If you are visiting my blog for the first time, don't miss these other nice things I offer:
1. A Digg-like blog sharing website to promote your blog - bvibes.com.
2. AJAX-driven fast template - Neo]
19 June 2008
3-column templates for new Blogger
13 June 2008
Blog Setup: 40 Practical Tips
One of our readers, Max Pool, was kind enough to send a guest post with 40 practical tips to setup and optimize your blog. All the tips are actually links to previously published articles on Daily Blog Tips. Enjoy!
WordPress Setup
- Do your homework first and read about others’ mistakes
- Choose a reliable web host
- Choose a good domain name
- If you need inspiration, check this list
- Register and keep your domain name with a registrar
- Always install WordPress in the root directory
- Update your ping list
Themes & Design
- Choose a professional theme
- Remove unnecessary information from your theme
- Add a favicon
- Place an RSS icon at the end of single posts
- Create a functional footer for your blog
- Organize your categories
- Optimize the “About” page
- Speed up your site
Check & Validate
- Make sure your blog works in different browsers
- Check the load time of your site
- Test the SEO aspects
- Validate your website
- Keep a maintenance checklist
Plugins
- Install Akismet
- Install WordPress Database Backup
- Install Subscribe to Comments but leave it unchecked
- Install Chunk URLs
- Install Related Enteries and consider setting it to 3
- Install Custom Query String
- Install Jerome's Keywords
- Install sig2feed
SEO & Analytics
- Install Google Sitemap Generator
- Install Enforce www Preference
- Optimize your Meta Description Tag
- Setup an optimal URL structure
- Make category pages display excerpts
- Setup any needed 301 Redirects
- Create a robots.txt file (and here is a collection of different ones)
- Modify your title tag to be optimal
- Remove the hyperlink from the single post titles
- Offer email subscriptions
- Install the Feedburner Replacement plugin
- Add the Google Analytics plugin and track your stats
Max Pool is a software engineer by day - aspiring SEO expert by night. More ideas can be found at his blog codesqueeze.com.
Blog Project: 30 Traffic Generation Tips
First of all a big “thank you” for every one who participated. As I said before the number of entries surprised me (and the quality as well, I will definitely apply some of those tips myself).
Now, without further delay, the 30 Traffic Generation Tips:
1. Sridhar Katakam
Keep track of blogs and leave comments on them. A good way to keep the conversation going is to install a MyBlogLog widget and visit the blog of people visiting your site.
2. Ian Delaney
Nothing creates long-term traffic more than value. Consider writing posts with resources or explaining how things work. Useful things get linked to and they get onto del.icio.us, which is far better long-term than a digg front page.
3. Scott Townsend
Inform search engines and aggregators like Technorati (using the ping functionality) when your blog is updated, this should ensure maximum traffic coming from those sources. (check the List of Ping Services)
4. Kyle
Simplify. Pay attention to complex issues in your field of work. It may be a big long publication that is hard to wade through or a concept that is hard to grasp. Reference it and make a shorter “for dummies” version with your own lessons learned and relevant tips. When doing this, I have been surprised to find that the simplified post will appear before the more complex version in search results. Perhaps this is why it results in increased traffic; people looking for more help or clarification on the subject will land on your blog.
5. Grant Gerver
Try to be polemic. I write obsessively about all-things political from the left-wing perspective in the form of humorous, sarcastic one-liners.
6. Daniel
A simple tip that will probably boost your page views: install a translator plugin. I decided to use a paid plugin for this, but if I am not wrong there are some free ones as well. The translation is not very good, as you can imagine, but it helps to attract readers that are not fluent in English.
7. Rory
Submit articles to blog carnivals (http://blogcarnival.com) that are related to your niche. Your article almost always gets posted, and it must generate a handful of visitors, at least.
8. Ramen Junkie
Newsgroups. I always see a spike when I post a review to a newsgroup.
9. Eric Atkins
Create a new design for your website. Not only will it be more attractive to your regular readers, but you can submit it to some CSS gallery showcase sites that feature great designs. This will give you exposure on those sites while generating a lot of traffic and backlinks from those types of sites.
10. Megan Taylor
Participate in conversations on related blogs. Start conversations on your own blog. Don’t just post about a story and leave it at that, engage your audience, ask questions and call to action.
11. Guido
Comment on blogs, write useful content and make good friends on forums.
12. Brian Auer
You must be active to generate traffic. I post comments on other blogs that are related to mine, and I post my site link in my signature at the forums. Spread the word about your blog and it will certainly attract readers.
13. Shankar Ganesh
Just browse around MyBlogLog.com and you will surely get visitors to your blog. Also try to join as many communities as possible that are related to your topic.
14. Andrew Timberlake
A great tip for generating traffic is off-line by including your url in all your off-line liturature from business cards, letterheads, pamphlets, adverts through in-store signage if applicable. I even have our website on my vehicle.
15. Cory OBrien
Read lots of other blogs. Leave trackbacks. Make sure your blog is optimized for search engines. Leverage social bookmarking sites like digg (both for new ideas and for traffic).
16. Jester
Leave comments on other blogs. If you’re already reading them, it takes
just a couple of seconds to leave a message agreeing or disagreeing
with the author, you get to leave a link to your site, and you will almost
ALWAYS get traffic from your comments.
17. Goerge Manty
Post 3-5 times a day. Use ping services like pingomatic or set up wordpress to ping some of the ping services. Engage your readers. Put up polls, ask them questions, give them quizes, free tools, etc. Make them want to come back and tell their friends about you.
18. Engtech
Community. It’s one word but it is the most important one when it comes to blogging. The only “blog metric” that makes sense is the vibrant community of readers it has. Building a community around your blog will bring you increased traffic, but how do you start? The boilerplate response to building traffic is always “SEO, social networking sites, and commenting on blogs” but it can be simplified to “be part of a community”. The easiest way to seed your blog is with an already existing community. But the only way to do that is to be part of the community yourself.
19. Chris
Squidoo Lenses are a good way to generate traffic. By using a lense,
you can generate your own custom “community” of webpages, including some
of the more popular pages in your “neighborhood.” Including your own
webpage in such a list is a good way of generating traffic.
20. Splork
I’ve had good success writing articles and submitting them to EzineArticles. Articles that have been written from well-researched keyword phrases and accepted by EzineArticles tend to rank very high in Google for that search term. Placing anchor text in the footer of those articles so the reader can visit my relevant website has always increased my site traffic.
21. Jen Gordon
I came upon some unexpected traffic when my blog popped up on some css design portals like www.cssmania.com and www.webcreme.com. If you can put some time into the concept behind and design for your blog, I’d recommend submitting your site to a design portal not only for
additional traffic but to build an additional community around your site.
22. Kat
I’ve recently gotten involved with several “MySpace-like” community sites that focus on my target audience. I share my thoughts in their forums, post intros to my real blog on their system blog and I’ve even created a group for my specific niche. It’s been very, very successful for me.
23. Inspirationbit
Well, obviously everyone knows that social bookmarking sites like Digg, del.icio.us, etc. bring lots of traffic. But I’m now submitting some of my articles to blogg-buzz.com (a digg like site for bloggers), and I always get not a bad traffic from there.
24. Mark Alves
Participate in Yahoo Answers and LinkedIn Answers where you can demonstrate your expertise, get associated with relevant keywords and put your URL out there.
25. Tillerman
Be the first to write a post about the ‘Top Ten Blogs’ in your niche. The post will rank highly in any general search for blogs in your niche and other bloggers in your niche write about the post and link to it.
26. Nick
Participating in forums is a great way to get loyal readers. Either link baiting people in your signature or posting great advice and tips will give you high quality traffic, which will result in return visitors.
27. Brandon Wood
A simple trick I’ve used to increase traffic to my blog is participate in group writing projects. In fact, that’s what I’m doing right now.
28. Alan Thomas
Don’t forget your archives. I just posted a roundup of all interviews I did over the past seven months. One of them generated a new link and a big traffic spike from a group of users that look like they will be loyal readers now.
29. KWiz
Write something controversial. I don’t think it’s good to write something controversial just for the purpose of getting traffic necessarily (especially if it’s only for that purpose and you’re being disingenuous), but it works.
30. Dennis Coughlin
Find the best blogs on your niche and contact the authors. Introduce yourself and send a link of your blog. This might help them to discover your blog, read it and possibly link to it.
Customize the Feedburner Chicklet
This tip is easy to implement but it can be very useful if you are trying to customize the text on your Feedburner Feed Count Chicklet. Just look into the HTML code that Feedburner provided you for the Chicklet and locate the address of the image:
src="http://feeds.feedburner.com/~fc/
blogname?bg=246cb0&fg=000000&anim=0"
Now you will need to add the follow attribute to that address:
&label=yourtext
Therefore the final line will look like this:
src="http://feeds.feedburner.com/~fc/
blogname?bg=246cb0&fg=000000&anim=0&label=yourtext"
You can use this feature to display something more catchy than “readers” like “fans” or “addicts”. Alternatively if you have two of more feeds on your blog (i.e. one for entries and one for comments or one for each language) you can also customize the text to differentiate them (an example can be seen on Andrea’s blog).
How to add bookmarker widgets in Blogger
This tutorial will explain simple way to add cool social bookmarker widgets to Blogger pages. In this case we'll use simple Blogger Plugin from BlogSocializer. This plugin allows us to add nine popular bookmarkers button on every pages of our blog. Including Digg, Technorati, Delicious, Yahoo! MyWeb, Google Fusion, Blink, Furl, Simpy, and Stumble upon. Here we go..
1. Go to your Blogger Dashboard. Than click manage layout of your desired blog.
2. You'll be in Template page at Page Element Tab. Now click [Add a Page Element]. Just choose where you'll place the widget is. In this case I set it at bottom of every post, so I'll place it below Posting Blog coloumn (See picture).
3. A popup window will appear. There you can choose what kind of page element you want to add. Now select [HTML/JavaScript] element. Than click [Add to Blog] button. A 'Configure HTML/JavaScript' page will appear, leave it first.
4. Go to BlogSocializer and get the code there. Click and copy the given code.
5. Go to popup window again. Fill in title of element first than paste the code at 'Content' area (Right click and paste). Lastly, just click [Save Changes] button.
6. Now open your blog and test the widget. Below is example of working BlogSocializer in my blog. You can try how easy this widget in use by submitting this page to Digg, Technorati, and Delicious.
Conclusion.
BlogSocializer is the easiest and simple way to add bookmarker widget in Blogger based page. This Blogger plugin is free to use. I know there are other bookmarker plugins such AddThis.com and Sharethis.com but I still suggest you to use BlogSocializer. Why? because with BlogSocializer we can display the true buttons of originally bookmarker sites. Not other flip button. So benefit of displaying those buttons is to make our blog looked like more cool. Just as Wordpress bookmarker plugin.
Hexadecimal HTML Color Codes and Names
Under the Template tab, you see “Fonts and Colors”. Clicking that, you will be able to change the colors, font types, and font size. However the available colors on the screen are limited. If you cannot find the color you want, you may want to copy the appropriate hex codes of the colors below, and paste them into the “color hex code” box and press Enter. Try out different combinations, and change them as and when you like.
Hexadecimal HTML Color Codes and Names
How to Highlight Author Comments
Highlighting author comments using a different background color, border or different style of text helps readers understand when you have personally posted a response.
So far, "How to Highlight Author Comments" has been the most requested article in my Skribit widget, so in this post I'll explain how you can change comments which you have posted yourself to distinguish these from other comments on your posts.
The main obstacle I've faced in writing up this article so far is that different Blogger templates code the comments section differently.
While the easiest method for me to write would have been to say "Find this code and replace it with this", such a method would only be usable by bloggers whose template matches the code.
Instead, my explanation may be a little more complicated than usual, though I hope this explanation will ensure anyone using a Blogger template will understand how to implement the highlighted author comments hack!
Backup your Blogger Template!Before even attempting to customize your Blogger template, the first thing you should do is back up your template. This ensures you can easily restore your original template if something goes wrong. Also, as most of us cannot see comments unless we are viewing a post page, it would be impossible to see if code changes have adversely affected the comments section.
To make a backup of your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard, and click on the "Download Full Template" link. This will save your existing template as an XML file which you could use to restore your blog, just in case :)
Finding the Comments Block in your Blogger TemplateThe first thing we need to do in order to implement this hack is to locate the "comments block" within your Blogger template.
To find the comments section, you will need to tick the "expand widget templates" box as this code is contained within your main "Blog Posts" widget.
As I've already pointed out, the section of code used to display comments varies in different templates, so in order to find this section, you may need to search for some specific tags rather than complete sections of code.
To give you an idea of what you are searching for, here is the complete comments-block code from the Minima template:
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
If you are using Minima (or a similar template) you should be able to locate this section of code easily. However, some templates use <ul> and <li> instead of <dl> and <dd> tags, in which case the code you are looking for may look more like the section on this page instead, or could even be wrapped in simple
If you are having trouble locating the comments section in your blog's HTML code, do a CTRL+F (or CMD+F for Mac users) search within your template code for the following template tags:
* <b:loop values='data:post.comments' var='comment'>
* <data:comment.author/>
* <data:comment.body/>
The comments section of your blog's HTML code should contain all three of these template tags. Simply locate these tags and the surrounding code in your template, then work out where this section begins and ends using your discretion.
Generally speaking, this section will usually begin with
- or
- Copy the code above to your clipboard
- Highlight the entire section of your comment code in your Blogger template
- Paste the code from your clipboard in place of the existing code by keying CTRL+V (or CMD+V).
- or
Once you have located your comments section in your blog's HTML code, you will need to highlight this entire section of code and replace it with the following section of code instead:
<ul class='commentlist' style='margin: 0; padding: 0;'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<li class='author-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>
<b:else/>
<li class='general-comments' style='margin: 0 0 10px 0;'>
<b:if cond='data:post.dateHeader'>
<div class='commentcount'/>
</b:if>
<cite>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
</cite>
<br/>
<div style='clear: both;'/>
<b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
<div class='commentlink-date'><a class='commentlink' expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a></div>
<div class='clear'/>
</li>
</b:if>
</b:loop>
</ul>
The simplest way to change your comment code is to follow these steps:
One quick method to check if you have made code errors is to preview your template. If you have accidentally omitted some code, you will receive an error message. In this case, you should press the "clear edits" button and begin again.
If you don't get an error message, you can then proceed to save your template.
Adding style for author comments
At this stage, your own comments will still appear in the same style as other comments. To highlight author comments, we need to add some style code to your blog template.
This step is much easier than locating and changing the comment section. Simply locate the closing tag in your Blogger template, and immedietly before this, paste the following section of code:
.author-comments {
background: #cccccc;
border: 1px solid #333333;
padding: 5px;
}If you prefer, you can change the hex colors (#cccccc and #333333) to match the color scheme of your own template (discover the color codes for your preferred schemes using the web color calculator).
Then save your template.
Now when you make a comment on your blog while signed in to your Blogger account, your comments will have a different border and background color to comments posted by your readers.
Adding a RSS subscribtion message under posts
A friend of mine wanted to know how to add RSS subscription messages under the posts like mine , i saw this messages on BlogOhBlog.com and i wanted to do the same , here how to do it.
If you want a rss subscription message same as mine, go to edit html , expand your widgets and , copy and paste the codes below after this line
<p><data:post.body/></p>
<br/>
<br/>
<div style='padding:5px; border:1px solid #999999; background-color:#efc954; margin-top:1px;'><img align='left' src='http://sdf789zzxx.googlepages.com/rss_tekil.png'/>If
you enjoyed this post,<a href='YOUR-FEED-URL-GOES-HERE'><b>
make sure you subscribe to my RSS feed! </b></a></div>
Tips
- You had better host this image on your googlepages,photobucket or imageshack account to prevent bandwith from exceeding.
- You can change border color and background color also the message and image align , thats why i coloured changable lines.
- Before saving template , preview it , if you like it then save it . This trick will not cause any problem in your blogger template.
- This can be used in blogger classic templates and blogger xml templates.
- Do not hesisate to ask question :)
12 June 2008
Blogger Images: Two Steps Forward, One Step Back
Aside from the always ongoing image issues that pop up with Blogger most of the time, it seems that in trying to solve one bug, they have introduced another. Just speaking from what I'm seeing.
The Bug
When Blogger introduced the ability to upload a header image directly from the Layouts screen it was a good deal. Makes something that is relatively confusing easy to do. But there has always been a problem with header images uploaded this way when using a Custom Domain and it relates to some of the issues involved with using Picasa Web Albums as the image host for Blogger.
To try and make a long story short, Picasa Web Albums restricts images over 800px in size from displaying on outside domains, EXCEPT apparently blogspot.com is allowed through. PWA defines different images sizes/features by the folder in which images are accessed from (a bit more on that from an earlier post). So when you use the layouts feature to upload a header image, the code generated is using the full original size folder for that image (even if the image is less than 800px). Since this is blocked on outside domains, folks using the custom domain in Blogger and using this feature would find their header images disappearing (To confuse matters more, if it was in the persons browser cache already it would show for a bit, but to everyone else it was no go).
The Fix
So after all this time Blogger finally caught on, and seem to have put in a new folder that can be accessed from outside domains, and now the image header will upload to that directory. Here's an example url.
http://3.bp.blogspot.com/_KFUscpI6LaQ/R0-ljp6nQBI/
AAAAAAAAAkU/SIm-MYc35us/s1600-R/hamster2.jpg
The key part is the s1600-R folder, which is the new one. Previously the folder used was s1600. So the new -R folder apparently is only used by Blogger for the headers, and doesn't suffer the domain restrictions, so it should solve the problem for header images for custom domains. If someone has a problem with one previously uploaded, just reload it and it will use the new folder.
The New Bug
Well, that's all fine and dandy, but now images uploaded to the post editor for posts are using that same s1600-R folder for the large/linked size. Which is incorrect, and due to other oddities of the PWA setup will prompt for a download when accessed like that, instead of showing the image full size. Here's an example.
If you look at the code produced, the linked image again is going to the s1600-R folder. Previously, linked images that should be displayed went to the s1600-h folder. This is all part of the convoluted ways that PWA restricts access to their images. The -h folder is supposed to show a webpage with the image embedded. And that is what was previously used for the large size posted images.
I assume this is system wide, and not a fluke with my account as I'm seeing it other places. At some point I also assume they will correct this.
Update
This is now marked as a Known Issue with a "workaround".
Getting an OpenID and using your blogspot url
Blogger talks about enabling support for using your blogspot (or custom domain) urls available (probably by becoming an OpenID provider as well as a consumer). But if you want it now, you can. There are several free, open, easy places to get an OpenID that you can use anywhere that supports it. MyOpenID is one, but there are others. Takes just a minute to sign up.
So to use that in a Blogger comment, you would select Any OpenID and enter in your OpenID url in the url field. For example I got one that is http://phydeaux3.myopenid.com and I can login and authenticate through MyOpenID in a similar manner as above. Only thing is, the comment links to http://phydeaux3.myopenid.com instead of here. How to change?
Well a quick google found OpenID Delegation which gives the code you can add to your blogspot template so it can function as your OpenID url. This is specific to myopenid, but other OpenID providers would be similar.
<link rel="openid.delegate" href="http://XXXXXXXXX.myopenid.com"/> <!-- For delegating OpenID v1.x-->
<meta http-equiv="X-XRDS-Location" content="http://XXXXXXXX.myopenid.com/xrds"/> <!-- For delegating OpenID v2.x-->
Just copy and paste the above in the head of your template. Change the XXXXXXXXX's to whatever your openid name is. Now, if I choose Any OpenID from the dropdown, I can put in http://phydeaux3.blogspot.com as the url. It will then show as the link in the comment.
While there seems to be a heated debate about Blogger removing the URL field from anonymous comments, I think this is a better system. If a little more complicated. Now I'm the only person who can use phydeaux3.blogspot.com in a Blogger comment link, so no one can impersonate me (Not like that's been a problem for me). If Blogger goes through and becomes an OpenID provider as well, and integrates it into your Blog a little easier, then it will be even better. One would hope anyway.
Blogger Feeling Lucky Widget (Random Post)
I wouldn't have thought many people would think something like this would be useful, but a recent post on Techcrunch goes ape over wordpress having a 'random post' widget now. I figured if wordpress has one, New Blogger should as well.
With that in mind, here is the Blogger Feeling Lucky widget. Since we are in the Google family, I thought using the 'feeling lucky' nomenclature was appropriate. It's a silly little widget that adds a link to a random post on your blog. It is available in one-click add a widget to your Layouts template, or for classic templates the raw code is available to add that works as well. Also, a slightly tweaked version of the code also allows FTP Blogger blogs to join in the fun. All the things you need to install are explained on the setup page, although it's pretty simple. Currently I have it installed under the sidebar search box, via the manual code provided for exact placement.
Blogger Feeling Lucky Widget Install Page
Ricardo Santos has made a Portuguese translation available at Widgets para o blogger - Phydeaux3
Notes
For those that may be interested, here's how it works. Nothing really earth shattering going on. In the initial page load, the scripts make a json call to the feed url. Here I'm only interested in getting the total number of posts in the blog, so the call is made to the summary feed (to keep load time minimal) and with only one entry returned. The total number of posts is returned in New Blogger in the openSearch:totalResults field, so take the total number of posts and then use standard means to generate a random number within that range. Then the link is created using that number as it's variable.Now at this point we don't have a valid url yet, just a number. So when the link is clicked, another quick json call is made, using the random number generated as the start-index parameter to get that entry in the feed only, a quick parse of the results to grab that entries url, then good old document.location (Thanks to Pete changed to window.location and a few other small tweaks to keep the back button working) to switch to it.
Old Blogger did have a similar tweak by Mario Brhemenz, but like a lot of our Old Blogger stuff relied on an outside service (del.icio.us)to work. I don't know that I've seen one for New Blogger before.
I think everything works as it should, but if you find any issues lemme know.
New Blogger Widget for Picasa Web Albums
Everything here still works, but the native flash presentation from Picasa Web Albums is slicker and probably what you want to use if you want a slideshow.
To follow up on my previous post about Picasa Web Albums now making their data available in JSON, I've gone ahead and worked up a customizable (somewhat) one-click widget creator for the New Blogger.
The widget will work for either displaying your public albums, or for listing images from one particular album. Right now only one of these PWA widgets can be displayed on a page.
I've tried to keep it somewhat simple on the options, but here is the complete rundown of what each option means.
The first input box is where you type in your Picasa Web Albums username. Your Picasa Web Albums username is usually(the first part before the @)of your google account username, but can be changed. If you are unsure, goto Picasa Web Albums and sign in. Click on SETTINGS in the UPPER RIGHT of the page and then scroll down to your Gallery URL. Your current gallery url will be in the format
http://picasaweb.google.com/USERNAME
After you enter in your Picasa Web Albums username, then click the Submit link. The page will then fetch the list of albums and display their names in a drop down menu. Select the album you want to display from that list, or choose the Show All Albums option.
Display the Widgets Title -- Select whether or not to display the actual name of the widget on your blog. Defaults to displayed. The default name is Picasa Web Albums but it can be changed when adding.
Show as SlideShow -- This is a poor man's slideshow. Will display one image at a time, rotating them with their links. Is set to default to the SlideShow.
If the SlideShow is deslected, then two additional options appear. To show as either a Vertical or Horizontal strip. They do what they say. If you want a vertical strip of images choose vertical, if you want the images to line up horizontally, then choose horizontal.
Show Album Title as Header -- This sets whether to display the title at Picasa Web Albums for the selected group as a header. Defaults to displayed.
Show Border Around Image -- Sets whether to show a border around the images.
Slide Show Speed in Seconds(10 max) -- If the slideshow is selected, then this sets the interval for displaying the next image. Defaults to 5 secs. 10 seconds is the max.
Number of Images to Display (20 max) -- Sets how many images (or albums) to display. Default is All but the upper limit is 20.
Size of Thumbnails -- Sets the size of the displayed images, you have 3 choices. The default is 160px, a small 64px size, and an extra small 48px.
Border Color (in Hex) -- Sets the color of the images borders (if shown) in hexadecimal format. Default is black (#000). You can use either 3 or 6 hex numbers. The # should not be entered.
After you are satisfied with the settings, click the "Generate Widget and Code" button. You can view or use the raw code if you want (could be used on any webpage) but if you are in New Blogger then click on the "Add Picasa Web Album Widget" button.
If you have never added a one-click widget before you may want to read first the Blogger Help page "How do I add third-party page elements to my layout?" but it's pretty simple. Once the widget has been added you can drag it wherever it's needed.
The widget creator has been tested to work in will probably work from most browsers, has been tested in IE7, Firefox 2 and Opera 9. The displayed widget tested in all those and appears to work in Safari as well. I don't think it would be an issue for any browser, but you never know. Also I think I've tested just about ever possible combination of options, but I may have missed something.
So if you got this far then here is the widget creator. Widget Creator for Picasa Web Albums and New Blogger
Ricardo Santos has made a Portuguese translation available at Widgets para o blogger - Phydeaux3
Note - May 14, 2007 Post was rewritten to update the instructions for a sligtly updated version of the widget maker
Note - 4-24-07 Moved my personal Widget out of the sidebar into this post, as I need the sidebar real estate for other stuff. :-)
Note Added-3-22-07 Widget Maker Updated to work with new Picasa Web Albums API changes. Widgets made before this date most likely need to be remade to work fully.
Picasa Web Albums Example Widget
Code for New Blogger Tag Cloud / Label Cloud
Due to overwhelming demand (ok, it was one person) I've gone ahead and wrote up the code and explanations on how to setup and use the highly desireable Label Cloud for New Blogger. Because everyone wants a tag cloud for Blogger. I think everything is correct there, but if you try to set it up and run into any problems I blame Avatar. :-)
I've set the page up off-site since I don't feel like mucking with code in the Blogger post editor at the moment. And if you have any questions feel free to ask. Pay close attention to the BACKUP YOUR TEMPLATE before proceding notice. Here's the link to the setup and instructions...
New Blogger Tag Cloud / Label Cloud Setup and Instructions
One thing I might add, the cloud is done with javascript so it will only display when javascript is enabled. But the widget includes a noscript section so that users without javascript enabled will still get a normal label listing.
Blogger Archive Calendar
I had built an archive calendar for New Blogger and had it mostly finished around the end of January and put it up here soon after. I always intended to polish it off, and put up the instructions but I kind of got a little lazy on that. I've had more than one person commenting on it the last few weeks, so here it is. Finally. I think I have pretty much tested it out, so it should work ok (although who knows). Personally I have tested it in Firefox, Opera 9 and IE7, so it at least works in those browsers. An old version worked in IE6, so I assume this one does as well (if someone can verify that it would be nice). Safari, Konqueror etc, well you guys will just have to let me know (Not that I'll do anything about it, just nice to know).
As per my usual, the setup page is offsite at my googlepage. If you run into issues with the instructions or the script than let me know. Caveats : This is for New Blogger and Layouts templates only. Classic Templates aren't supported (at least not yet). FTP blogs can't use it. Private blogs can't use it. Also, the JSON calls I use are throttled at 100 entries each, and I didn't think it was worthwhile to check for more. So if you blog more than 100 posts in a month, this isn't for you.
Blogger Archive Calendar Setup
Is the main page, with supplemental ones for styles, and configuration options.
Styles Page
Settings Page
Optimize your Blogger title for better SEO
Title's and meta tag's effect on serp is incredible , so what can we do to improve serp and seo for blogger blogs? The codes below will display the name of a particular entry without bringing the name of the blog in first position and this will affect our serp since titles are important for google spiders.Here're the codes :
- Goto Edit Html and find the codes below
<title> <data:blog.pageTitle/> </ title>
- And change with this
<b:if cond='data:blog.pageType == "item"'> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <title> <data:blog.pageTitle/> </title> </b:if>
- and save .Thats all , now wait for results ....
Feedburner - FeedCount Chicklet Text
For those who have yet to sign up for a Feedburner account, consider doing so right away. Now that it is under the Google family, there is an easy way for you to channel all your Blogger feed
subscribers to Feedburner. Login to Blogger, and under Settings ->Site Feed, enter your Blog's Feedburner Feed address into the box beside “Post Feed Redirect URL.” Readers who click the “Subscribe to: Posts (Atom)” link or the RSS icon in their browsers will be redirected
to your Feedburner Feed.
FeedCount Chicklet
When you are logged into Feedburner account and are viewing your Feed details, click the Publicize -> FeedCount tab. This is where you can generate a code to display a chicklet in your Blog which shows the subscriber count. Whether or not you already have a high number of
subscribers doesn't really matter. A nice chicklet can draw readers' attention and make it easy for them to click the Feed link.
Choose the custom colors of the body and text and click “Activate”. You will be given a HTML code for the Chicklet. We have to edit this code. Open MS Notepad (usually found under All Programs -> Accessories in Microsoft Windows) or a word processor program. Copy and paste this code.
Static FeedCount HTML Code
The static FeedCount code will look something like this:-
<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&fg=444444& anim=0" height="26" width="88" style="border:0" alt="" /></a></p> |
|---|
This is the standard FeedCount chicklet you see:-
To change the word “readers” to some other text such as “Viewers”, insert this other code (shown in red). You can change the word “Viewers” to other text, but because of the space constraint, keep it to no more than 7 characters.
<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&fg=444444& anim=0&label=Viewers" height="26" width="88" style="border:0" alt="" /></a></p> |
|---|
The FeedCount chicklet now looks like this:-
You
can change the text to capital letters or include characters, e.g.,“*FANS*”, and your new FeedCount Chicklet will look like this:-
Animated FeedCount HTML Code
The animated FeedCount code is rather similar except that the animation value is set as “1” instead of “0”.
<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&fg=444444& anim=1" height="26" width="88" style="border:0" alt="" /></a></p> |
|---|
When the page is loaded, viewers will see a one-time rolling text of number of “readers” via feed.
The word “readers” can be changed to other text like “Members” by inserting the code (shown in red):-
<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&fg=444444& anim=1&label=Members" height="26" width="88" style="border:0" alt="" /></a></p> |
|---|
This is the new FeedCount Chicklet you will see. Insert the relevant text that suits your Blog.
Animation to play more than once
Other than the change in text, you can also set the animation to play more than once by changing the anim value to something greater than 1. Since readers are unlikely to stay on a page for too long, it need not be too big a value. When the page is refreshed, the animation count will start all over again.
<p><a href="http://feeds.feedburner.com/ TipsForNewBloggers"><img src="http://feeds.feedburner.com/~fc/ TipsForNewBloggers?bg=99CCFF&fg=444444& anim=50&label=Friends" height="26" width="88" style="border:0" alt="" /></a></p> |
|---|
Our animated FeedCount Chicklet will now look like this:-
Further reading:-
Another useful service that Feedburner has is their Headline Animator. You can create a nice animated banner that automatically displays the titles of your recent posts. Read more about it in our guide at Animated Banner with Rotating Headlines.
11 June 2008
Sliding Sidebar Widget ( Hack ) For Blogger
Hi! I have good news to tell you nice people , i have found how to add sliding sidebar menu to blogger xml templates , I'm sure you're going to boost your ads and referral income with this amazing blogger widget , you know what to do , click Read More button to read rest of this article!
Check Demo of This blogger widget ( look right sidebar of template )
Before telling you how to use this blogger widget i want to tell what can you do with this blogger widget :
- You can put a referral images to get revenue from your visitors.
- You can add image or text ads.
- You can add page elements.
- Can be added to right or left side of your template
- It slides down as your visitors scroll down their mouse
- Can easily be added to blogger xml templates
- Go to Edit HTML from your blogger dashboard
- Leave widgets NOT expanded
- And add the codes shown in red like this :
.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
position: absolute;
}
* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}
.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}
]]></b:skin>
<script src='http://goasou.googlepages.com/smenu.js' type='text/javascript'/>
</head>
Adding Sidebar Div :
- Now add the codes shown in red like this :
- If you want to show sliding bar on left change the "right" text in blue , to left.
</body>
</html>
Result :
Do not forget to subscribe for latest articles!