Display Custom Search results on a separate page

How did you do to display the search results on separate page of your blog like that? That’s a question asked by a reader recently. (If you don’t have the slightest idea what the reader was talking about, see the results page in action by searching something using the search box above. You’ll know what he meant). This tutorial will answer that question. It will explain how to make your Google

Blogger is now mobile friendly –activate your blog now

That’s right, Blogger is now mobile-friendly. Once activated, Blogger will automatically redirect to a mobile template (with a specially formatted layout suited for small screen sizes), whenever a visitor access your blog from a mobile device. To enjoy this new feature, all you have to do is activate the mobile template option. I. How to enable mobile template Log in to Blogger (opens in a

Blogger adds 40 Google Web Fonts to Template Designer!

Update Jan 2011: Blogger has since added more fonts, making the total of 77 web fonts! It also made them accessible to all Blogger users, instead of only to Blogger In Draft previously. When it comes to font selection, the Web has always been limited to web-safe fonts. In other words, you are stuck with a few most commonly installed fonts such as Arial, Courier, Georgia, Impact, Times New

Add Twitter tweet button to Blogger posts

This time we will show you how to add the official Twitter tweet button to each Blogger post. This button will let people share your posts without leaving your blog, similar to the TweetMeme retweet button. However, it comes with a few additional features worth considering. The one feature that I like most about Twitter tweet button is that you can choose to recommend up to two Twitter

How to mass unfollow on Twitter using ManageFlitter

You have your own reasons for wanting to unfollow. Maybe you want to lose those hyperactive Twitter users who are hijacking your timeline by tweeting every other second, or maybe you want to raise your followers-to-following ratio by unfollowing people who don’t follow you back. Or maybe you just want to declutter your Twitter account. Unfollowing a few people is easy enough, but what if you

10 Tips for Writing Better Blog Posts

This is a guest post by James Adams. Building a successful blog is one of the most challenging endeavors a writer can embark upon, but it's also one of the most rewarding. Building a like-minded community based around what you write can be a thrilling experience. However, your blog won't go anywhere without quality content and regular postings. While promotion and networking is vastly important,

Facebook share showing wrong description –solved!

Normally, when you share a blog post on Facebook, it would pull the first few lines of the post and use it as content description (a.k.a. snippet or summary). However for most Blogger blogs, especially the ones built by Template Designer, Facebook seems to pull something completely random. On some blogs it pulls texts from the comments, from blog description or from the sidebar, while on others

10 ways to Make your Blog More Authoritative

This is a guest post by James Adams. If you are struggling to get more readers and traffic to your blog, then you have probably tried many different techniques. Although it may seem as if the stardom that comes with having a top blog is out of reach, it actually is not that hard to achieve. One of the easiest ways to get there is to emulate the style of the blogs that are already authoritative

How to make a Facebook landing page

By default new visitors (just like everyone else) to your Facebook fan or business page will land on the Wall. This is not necessarily a bad thing. However, if you’re out to impress do consider creating a special landing page just for them. So rather than letting them land on a just-another-generic-Facebook wall, you take them to a more personalized, more welcoming page. You create this by

Jumping to a different location on the same page

I received a few emails on how to do an internal page jump. You know a link that when clicked will take you to a different section or part on the same page. Like this example: This link will take you to the bottom of this post I thought I might as well write a post about it. Hopefully this post will be helpful for those asking the same thing. This in-page linking or bookmarking is a great way of

What is and how to improve Alexa rank

Alexa traffic rank is a rank provided by Alexa.com to your blog or a site based on its level of traffic. Unlike Google PageRank where it relies more on the number of (quality) backlinks to your blog, Alexa rank is based solely on the amount traffic your blog receives. It is calculated based on the data collected from Alexa Toolbar users over a period of the past three months. Getting to

Free unlimited bandwidth image hosting for Blogger blogs

This tutorial is about hosting images that are used in parts of your layout –images for backgrounds, buttons, badges etc. We usually host them on a free image host because Blogger does not provide hosting for images other than the main background image, images in your posts, header and picture gadgets. But do you know there is a trick you can use to make Blogger host these images? Now why would

SEO (Search engine optimization) friendly Blogger page title

Page title is the band of text that appears at the top of your web browser. More importantly is also the clickable link that shows up on the search engine results page (SERP). From an SEO (Search Engine Optimization) perspective, page title is the single most important element in your blog in terms of ranking well in search engines. A keyword-rich, well-constructed page title can help boost your

Add a drop cap to each post using CSS

A drop cap is an enlarged first (capital) letter of a paragraph. The letter is dropped several lines deep and the top of the letter is usually flush with the top of the first line of rest of the text. Drop caps are used to lead the readers eye to the start of an article or a chapter. You can find them in most magazines and newspapers. This tutorial will show you how to turn the first letter of

Navbar peekaboo: Hide and make it appear on hover

This tutorial will show you how to make Blogger navbar invisible and have it reappear when you mouse over the top of your blog. The end result of this hack is slightly is different from other navbar peek-a-boo hacks available on the net. Most hacks will: Hide the navbar, but leave it’s footprint visible in normal view, or Look good during normal view, but push the rest of you blog page

How to put Adsense ads on a Blogger blog

Google Adsense in one of the more popular ways to monetize your blog. When implemented, Adsense will display targeted Google advertisements on your blog. The content of the ads is often relevant to your blog page’s content and audience. This tutorial will show you the three ways how you can add Adsense ads to your blog. Of course to be able to do all this, you have to Sign up to Adsense first.

Import multiple blogs into Facebook via NetworkedBlogs

Sharing your blog posts/entries on Facebook is a great way to increase your online presence. If you had a Facebook share button installed, sharing a post is just a couple of clicks away. Easy right? Yet here I am telling you there is an even easier way to share your blog posts on Facebook. It’s a “set it once and forget it” kind of way -by importing your blog feeds into Facebook, using Networked

Blogger Related Posts with Thumbnails: LinkWithin

Keep your readers engaged with LinkWithin related posts with thumbnails widget. The related posts thumbnails will appear under each post, linking to related stories from your blog archive. It will make your old posts accessible to new or casual readers of your blog, thus increasing traffic. This tutorial will show you how to install LinkWithin widget to a Blogger blog. I’m splitting this

Targeting specific pages/URLs with conditional tags

Conditional tags are Blogger template tags that allow you to specify parts of your template to appear only under certain conditions. One particularly useful application of conditional tags is in specifying on which page or pages a HTML element should appear. Ever wish you could display only relevant widgets onto a page, hide sidebars on certain pages, display different buttons on different pages,

Using custom/nonstandard fonts with Google Web Fonts API

Let’s face it, the choice of fonts you can use in your blog or web page is rather limited. While you may have tons of fonts installed in your computer, that doesn’t mean you can use all of them. Well, technically you can apply them in your blog, but what your readers see is limited to only the fonts installed in their computers. That is why Blogger plays it safe by integrating only (web-safe)

Add Facebook Like button to Blogger

This tutorial will show you how to add a Facebook Like button to each blog post in Blogger. Clicking this button will like the containing post. It should work on all pages -home page, individual/post page or any other pages. The Like button lets your reader share your content with his/her friends on Facebook. When clicked, a story appears in his/her friends' News Feed with a link back to your

Template Designer: Change the style / appearance of page tabs

So you want to change the appearance of your horizontal Pages gadget tabs, but not sure where to start? Well, you came to the right place. This article will show you how to change layout, colors, fonts etc. (If you want to style only a single tab, read this post: Styling individual page tabs on Blogger) Some elements can be styled in Advanced menu while others require addition of custom CSS code

Adding floating social media sharing buttons

As promised to some of my readers, here’s a tutorial on how to add a floating social media bar to a blog. I made it into a widget, so you don’t have to go into your template HTML to install (or remove) them. Just drop the whole code into a HTML/Javascript gadget. I have included Facebook Share Like, Retweet, StumbleUpon, Google Buzz, Digg This and Google+1 buttons in the bar and each of them

How to import a blog into Facebook

Here’s a tutorial that will show you how to import you blog posts into Facebook, using Facebook Notes application. It will eliminate the need for you to manually share posts on Facebook. Notes can be added to both your profile and fan page. It will use your blog feed to automatically update your latest posts onto the Wall. Follow these simple steps and you will see your blog posts in Facebook

Better Google Custom Search results with synonyms

Most blogs have search bar/box installed to help readers find what they are looking for in your blog. However, what your readers will or will not find depends solely on the search term (word or phrase) they enter in the search box. If they enter a different (albeit having the same meaning) term from what you wrote, they won’t get the desired results, even though what they are looking for is

How to add Paypal donate button to blog

This tutorial will provide step by step instructions to set up a PayPal donate button and add it to your Blogger/blogspot blog. The button is free and once added you will be able to accept donations to your Paypal account. It accepts funds from other Paypal accounts, credit cards or debit cards. Step 1: Create PayPal donation button Login to your PayPal account. Click Merchant

Template Designer: Add style with custom CSS code snippet

Modifying your blog appearance usually requires you to edit your template’s existing CSS (Cascading Style Sheet) code or adding new codes. To add a CSS code snippet, go to Template > Edit HTML > Proceed (for old interface: Design > Edit HTML) page and insert the code in the CSS section of the template. That’s what you would do if you are using a regular layout template. However if you use the new

5 more reasons why you should use Windows Live Writer

This article is a continuation of my previous article titled 5 reasons why you should switch Windows Live Writer, just in case you need some more convincing before switching to WLW. Below are five more reasons why you should use WLW as your desktop blog client. 1. (HTML) Headings Easily set heading texts. Just place the cursor on text and select the type of heading from the dropdown

Add Custom Search box to navigation/menu bar

This tutorial will show you how to add a Google Custom Search box to horizontal navigation bar, just like what you see here in Blogger Sentral. (Google Custom Search enables you to search within a collection of blogs or websites of your choice). Step 1. Create your custom search engine For the custom search to work you need a Google custom search engine to go with the search box. Follow

Adding non-static page tabs to pages/PageList gadget

Update Sep. 2011: Blogger now has the ability to add web links to pages gadget, as such the original hack is no longer necessary. With the new Blogger UI (user interface), you can add any web links (external links, label URLs, individual post links etc.) to the pages gadget. Here’s how: Switch to the new interface by clicking the “Try the updated Blogger interface” link at the top of the screen

Check blog speed, ranks, backlinks and broken links

Yes now you can check your blog page loading speed, Google Pagerank, Alexa rank, backlinks, broken links, reciprocal link and meta tags right here on Blogger Sentral. I have made a special page containing tools to help you check some of your blog SEO metrics. Click SEO TOOLS tab on the navigation bar to access the tools. Below is the list of available tools: Speed tester Check page

Dropdown menu for post titles list

A reader asked me whether I could convert the All Post Titles List into a dropdown list, similar to the labels dropdown list. So here we go, as per requested -a tutorial for a dropdown list for all post title listing. If you have a mile long post title list, then this hack is just for you. I. Converting Post Titles List to dropdown Follow these simple steps: Install the All Post Titles

Add Facebook share button with counter

This tutorial will show you how to add a Facebook share button to each blog post in a Blogger blog. The button comes with a counter (optional) that shows a live count of how many times a post has been shared -a way to gauge the post popularity. This button lets people share the containing post without leaving your blog. It will detect the correct post URL regardless of the type of page you are at

Submit site/blog to DMOZ (Open Directory Project)

Today as I was checking my incoming traffic, one link stood out from the rest -it looked like a link from none other than DMOZ. Clicking the link brought me to a DMOZ page. True enough Blogger Sentral is listed in there, to be exact in Computers > Internet > On the Web > Weblogs > FAQs, Help, and Tutorials category. Why am I excited about this DMOZ thing? DMOZ is the directory of Open Directory

Create Dropdown menu for Labels widget

A labels widget displays your posts’ labels and each label is linked to a page containing posts which fall under that label. Usually as your posts increases, so will your labels. If you don’t limit them, sooner or later your labels widget will take over your sidebar! Fortunately you can prevent that from happening by converting the widget into a a dropdown (or is it a pulldown?) menu. Your labels

Automatically add hashtags to your tweets

Hashtags are topics or categories for your tweets. They are in a way similar to (Blogger post) labels, but for Twitter. Hashtags are made up of keywords, preceded by a hash (#) symbol. Adding a hashtag gives your tweet a potential to be picked up by people searching for that particular hashtag. Look at the example below as I hashtagged #blogspot and #tutorials to my tweet. If you were to search

Add retweet button (with counter) to every post

A few days ago I have added a Tweetmeme retweet counter to this blog. I thought I would share the process with you. The button does the same thing a Tweet This or a Google Buzz button does -share you individual posts, but with an obvious difference, it comes with a counter. The counter show a live count of how many times a post has been tweeted. Clicking the button will tweet the containing post

Add banner, Adsense or search box in header

A reader asked me how to add a search box on the right of blog title. I thought I’d share my answer in this post. Actually, you can add anything inside your header -be it an ad banner, a search bar, social media buttons, Adsense ad or just about any widget you can get your hands on. But how? By simply adding a new section in the header. A section functions as widget container and is represented

Add a Facebook Like/Fan box to Blogger

Update Sept. 2010: Facebook replaced the input Facebook Page ID with Facebook Page URL. This tutorial has been revised accordingly. Here is a tutorial on adding a Facebook Like box (formerly a Fan box) to Blogger/blogspot. It’s a good way to promote your Facebook page. A Like box lets your readers: See how many users already Liked your page. Like your Facebook page with just one click, without

5 reasons why you should switch to Windows Live Writer

It wasn’t long after I started blogging I felt the need for an alternative to Blogger default blog editor. I searched and found Scribefire (a Firefox extension) and Qumana. They did the job, yet it was nothing to be excited about. So the search went on, until finally I found THE blog client -Windows Live Writer. Windows Live Writer is packed with features. It makes writing posts so much easier

How to list recent post titles by label

Do you want to list all or your most recent posts according to categories/labels? Well then, you’ve come to the right tutorial. I’ve seen people use a LinkList gadget to accomplish this. However this method requires them to MANUALLY add each post link to the gadget every time they publish a post with the specified label. Not good. We’re not going to do that, because we have a better, more

Popular (most commented) posts widget

Show off your most popular posts and at the same time prevent them from being buried in the archive -using Popular Post widget. This time we will be making a Popular Posts widget for Blogger blog. The popularity rank is based on the number of comments each post receives. The comment counts are extracted from your blog’s latest 1000 posts, using a Yahoo! Pipe. See the demo in Blogger Sentral

Add Google Buzz button (with counter) below post

Google Buzz, yet another social networking service, has been launched in February. And yes, yet another post sharing button to be added to your blog -Google Buzz button. The function is of course similar to those of Facebook’s Share button or Twitter’s “Tweet This” button -to share you articles/posts, thus increasing their exposure. You can test the live example of this button in my widget

Submit site/blog to Google, Yahoo and Bing search engines

If your blog has not yet been indexed by the three major search engines (Google, Yahoo and Bing), then it’s time to stop waiting and be proactive -submit your blog to them! Submission will increase your blog chances of being indexed the next time they crawl the web. Submission is free and is very easy to do. Checking whether your blog is indexed Before submitting your blog, you might want to

Template Designer: How to change column width

The new Blogger Template Designer makes changing column widths a lot easier. In regular (non Template Designer) layout template, changing blog width requires some code editing in template HTML. With Template Designer you can stay away from the codes, because it can be done from within the designer itself, easy peasy. I. Changing column widths Here’s what to do, Login to your Blogger account.

Blogger Sentral has migrated to custom domain

Blogger Sentral is now located at http://www.bloggersentral.com/. Look inside your browser’s address bar for confirmation! Please update your Blogroll or Linklist to the new url. Of course you can still access the old tutorials from their original blogspot urls -they will be redirected to this new domain automatically, no worries. The migration itself went smoothly and rather uneventful. But

Add Flickr photostream/slideshow widget to Blogger

This tutorial will show you how to make a Flickr slideshow/photostream. It will use Blogger slideshow gadget as a base. The slideshow will display 20 of your most recent Flickr photos. The widget makes use of your Flickr photostream feed URL, so your first step is to find that URL. (for Picasa slideshow, read How to embed Picasa slideshow in a blog) Finding your Flickr photostream feed URL Login

Template Designer: How to use your own background image

Update September 2010: The image upload function is now available in regular Blogger. Jump to the tutorial now. August 2010: You can now upload your own image, via Blogger In Draft. The new Blogger Template Designer offers hundreds of beautiful background images to choose from, yet it does not provide an option to upload your own image. So how do you go about using your own image as a background

Where to host Javascript for blogger blogs?

Blogger does not provide file hosting, (except for photos and videos, in Picasaweb). This poses problem if you want to add a widget or a feature that uses Javascript. Where do you put the scripts then? Below are some of the options you have when adding Javascripts to your Blogger or blogspot blog. 1. Put it in a widget If the script is small and used only for that particular widget

How to add captions to photos

I think you would agree with me that Blogger post editor image handling left much to be desired. A simple task as adding a caption to a photo is quite a feat in Blogger, requiring you to enter the dreaded HTML zone. No wonder “how to add captions to photos” is amongst the more popular questions from Blogger users. One of the methods to add caption to images is to use a table, as tutored in

Solving 200+ comments display problem

Blogger only shows the first 200 of your comments in the (first) post page. The next 200 comments are supposed to be displayed on the second page, another 200 on the third page and so on. When your comments count for a post exceeds 200, Blogger will automatically add a pager, so you can navigate between comment pages. But in some cases (due to third party template maybe?) no pager is added.

How to find people and blogs to read on Blogger

Where do I find blogs to read? How do I find other people on Blogger? How do I find blogs with same interest as mine? Those are some of the more common questions asked in Blogger Help Forum. Many questions, yet all of them lead to just one answer -Profile browsing. You can go to any Blogger profile page and click on any of the links on the page to get a list of other bloggers sharing

How to align Pages/PageList gadget

A Pages (a.k.a PageList) gadget is simply a set of links to your (static) Pages. You can opt to add Pages gadget once a static page is published. Pages gadget is left aligned by default. To align it in the center or on the right (of your horizontal bar or sidebar), you just need to add a small CSS code snippet. Here we go, Go to Template > Customize > Advanced > Add CSS (old interface:

Display/hide widget on specific pages in Blogger

When you add a widget (or a gadget as Blogger would call it) to your blog, by default the widget would appear on all pages –homepage, index, archive, post and static pages. But what if you want a certain widget to appear only on a certain page or pages, can it be done? In other words can you select on which page/pages the widget would or would not appear? The answer is yes you can -by using

Blogger top commentators cloud widget

Reward your top commentators by displaying their names with clickable links on your blog. One of the more popular methods is by using a top commentators widget. This time we will create yet another top commentators widget, but with a different look. We will make a cloud, just like a label cloud, except with commentators as the content. I personally prefer this cloud version over the conventional

Apply different layout/styling to static pages

Finally Blogger has come up with the much awaited static pages feature. Blogger simply refer to them as Pages. You can create up to 10 static pages, perfect for your About Me and Contact pages. However, a Page will look just like homepage or any other page. Would it be nice if you can change the layout, making them look more like pages and less like posts? Maybe you want the sidebar or footer

Highlighting current page tab in navigation bar

Let your readers know where they are on your blog. How? By highlighting the tab of the page they are currently viewing. See the demo on my widget showcase blog. We can detect the current page by using conditional if tag in the navigation bar HTML code. Normally we would have to use one set of conditional if tags for each link/tab. But if your navigation tabs is made of a LinkList gadget, you can

Adding a section (with Add a gadget link) in Blogger layout

A section is an area in Blogger layout that acts as a widget/gadget container. It is sometimes mistakenly addressed a page element. In Design > Page Elements tab, you can identify a section by the presence of an Add A Gadget link. To add a widget, simply click the Add A Gadget link in your preferred location and proceed with selecting a widget. But what if your preferred location doesn’t have

How to find Blogger widget and section Id

Let’s say you want to change the text color in one of your widgets, in the sidebar. You know this is done in the stylesheet and you can even find the code for the sidebar. But changing the code for the sidebar will affect the whole sidebar. Then how do you address only that particular widget? You need something unique -an Id, a widget Id that is. With a widget Id, you can: Use it as a selector

Put a widget inside a scroll box

My Tall Widget With this CSS code, a scroll bar is automatically added if widget content exceeds the set height. Scroll to see the rest of the content. You've reached the end of the content. Oh about the picture. See the tower next to Burj Khalifa? That could be your BlogList in a couple of years. So better put it in a scroll-box now :) Has your BlogList

Adding an entry or a welcome page

Here is a tutorial for creating an entry or welcome “page” for your blog. I think it can also be called a splash page or a landing page, hmm….whatever. It is different from the usual welcome message found in most Blogger blogs whereby the message is placed on top of the blog post column, and stays up there the entire time. This welcome page acts like an entry page. It only appears at the