Yesterday I wrote How to add Page Navigation Menu hack by editing your blogger template. Now today I would like to use a different method to add this Page Navigation Menu to our Blogger Blog. Most Bloggers will prefer this method to add Page navigation Menu , because this method is very easy than editing Blogger Template.
Let us see how to add this Page Navigation Menu Widget :
.
[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]
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!
Max Pool is a software engineer by day - aspiring SEO expert by night. More ideas can be found at his blog codesqueeze.com.
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.
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).
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.
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
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:
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.
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.