How to center-align Pages/Pagelist gadget in Blogger

Thanks to Vanessa Morgan who had recently visited this blog and wanted to know how to center the horizontal page tabs below the blog's header. That spurred me to google for answers after several hours of failed attempts to do it on my own.

I'm terribly happy to have learned much from GreenLava, the guru at Blogger Sentral who's most helpful and generous in sharing his knowledge and expertise. THANK YOU!

By default, the Pagelist or Pages gadget is left-aligned in Blogger blogs but can be easily aligned to the center if you so desire.

Learn how to center the Pages or PageList gadget,
that's located below the blog's header, by following these simple steps:

Add Numbered Page Navigation for Blogger Blogs

Wow! I'm terribly excited as I've just added the numbered page navigation to my blogger blogs. Something that I had desired for a long time but didn't pursue earlier due to other priorities. Pagination is an essential feature as readers will have easier access to our blog pages and randomly or selectively delve into the archived pages.

I've observed this pagination feature installed in many blogs but the most outstanding of all that got me smitten was seen at Rasa Malaysia, an awesome foodie site, maintained by a Penangnite residing in USA. As I googled to learn how to include this feature for my blogger-powered blogs recently and experimented with the few tutorials available, the closest that matches the one I liked was the script authored by Abu Farhan. His blogger hack will result in the lovely presentation as seen in the above screen shot, which includes both the first and last page numbers.

Display a blog button with text box for code in Blogger

Bet you've often seen blog buttons of varying shapes and designs being displayed on websites or weblogs, together with its Html code in a text box beneath - something like my blog's button and its code as illustrated below and wished you know how to create one for your own blog too, yes?

A blog button is a hyperlink thumbnail image that when clicked on will lead the reader to your blog, usually the homepage or to any desired destination. Providing a cool blog button is an interesting alternative way in promoting your blog by others rather than just an ordinary text link.

When you add your blog button or logo at the sidebar or footer with its HTML code in a scrolling text box beneath, then interested parties can easily copy and paste its code if so desire, to display the button at their own blogs or websites. Thus providing easy access to your blog which is another way of advertising for you and probably increase traffic to your blog when their readers click on the button.

Creating your blog's button with its code is quite simple really. You just need to create your button, apply some basic HTML to make it clickable and provide its code for copy and paste.

Add CSS in the Template Designer to restyle your blog's appearance

My first attempt at modifying the appearance of this blog after a makeover with the Blogger's Template Designer, by editing its Template via Design | Edit HTML, was quite a handful! But armed with the extra knowledge acquired since and further experimenting with the Designer for my other blog, Peacockflower's World, I'm extremely happy to have discovered the easier alternative way to do it.

No need to go about the long and winding way of editing the blog's template (i.e. Edit HTML) which can be quite intimidating and may risk messing up the codes! Just use custom CSS (cascading style sheets) to restyle the feel and look of your blog! Once you've learned how-to, it's really quite simple, fast and fuss-free!

Follow these steps to
add custom CSS to your template, using the Template Designer :

Related Posts with Thumbnails widget for Blogger

Yet another awesome Related Posts widget by Aneesh of Blogger Plugins, a seasoned author of widgets for the huge Blogger community! This one is real cool with thumbnails for extra visibility, like that of LinkWithin. Though every one of these widgets serves the same function to bring forth related posts for your readers' further interest or absorption and probably an increase in site's traffic, I personally prefer Aneesh's to LinkWithin's feature for the various reasons:

• the thumbnails' size is cuter, not overly large
• you can easily customize the widget yourself to display as you fancy
• the number of related posts can be decreased or increased beyond the default 5. Experimented successfully with 10 and more! :-)
• traffic is not directed elsewhere when thumbnails are clicked, so download speed of blog's contents is not hampered. Different from LinkWithin that directs traffic to its own site before redirecting back to our site, and thus slows down page download.

If you're interested, simply follow these easy steps on
how-to install the Related Posts with thumbnails widget :
(script code replicated from Aneesh's tutorial at Blogger Plugins. Thanks and God bless you, Aneesh!)

Related Posts widget, tailored for Blogger

Any new find that can improve the look of my blogs always excites me! Whenever I stumble upon something interesting for my wordpress-powered garden site, I'd like to find the equivalent for my Blogger-powered blogs, or vice-versa!

So, having installed the Yet Another Related Posts plugin (YARPP) recently at John&Jacq's Garden site, I then google-searched for a 'related posts widget for blogger' and was rewarded straightaway with a 2-in-1 treasure topping the list of search results. Two equally awesome widgets created by Aneesh of Blogger Widgets as follows:

1. Related Posts Widget for Blogger
2. Related Posts Widget for Blogger with thumbnail

Both the above widgets will display below each post, a section of links to posts that are related by way of similar labeling to the current one. It's one way of introducing your readers to other relevant contents on your site and keep them engaged. The first widget gives a list of links to related posts while the second includes the thumbnails as well. Take your pick!

I did display the first hack for about a month but a few days ago had decided to replace it with the Related Posts widget with thumbnails (check my tutorial here), the preferred appealing one for me. Regardless, I'd like to share on how-to install the first Related Posts widget (the one without thumbnails), customized to suit this blog as seen in the picture below:

Create Pages in Blogger Blogs with ease!

Did you know that you can now easily create pages in Blogger? Yes, Blogger has finally introduced this long awaited feature since early this year! Bless you, Blogger!

This was something that I had desired for my blogspot blogs for a long time, something similar to the pages seen in Wordpress-powered websites, like my garden blog here. Pages, whose tabs are normally placed strategically below the blog's header for easy access, is a great way to highlight important or essential information about your blog. Pages such as About, Contact, Archives, Sitemap and Blog List are the norm, beside Categories, Products, Services and others...the endless choices are yours to create! Nevertheless, bear in mind that Blogger allows only 10 stand-alone pages per blog. Pages and posts are quite similar except the former are not included in the blog's archives and feeds.

Create simple Dropdown Menu Widget for Blogger blog

Is your blogroll, list of favourite links or whatever list you're displaying in your blogspot getting too long and cluttering your sidebar? Probably, you need some extra space too for other cool gadgets that you fancied but couldn't add as yet for want of space? Ready to spring-clean, yes?

Hence, it's about time to learn how to create a dropdown menu (as illustrated below) for those long extended lists so that your sidebar looks neat and tidy, as well as provide the extra space that you're craving for and make your blog more user-friendly and professional-looking!

- My Favourite Food Blogs - A Whiff of LemongrassElinluv's Titbit CornerNo-Frills RecipesRasa Malaysia: Easy Asian Recipes

A hands-on example of Dropdown Menu box
Try it: click to expand and contract, or choose a link!

Create a Table of Contents or Sitemap for Blogger blogs

CAUTION: LATEST UPDATE ON DEC 12, 2013
Please ignore my tutorial below since it is no longer
applicable as Abu Farhan's script is now not workable.
Moreover, Google has issued a malware warning
on Abu Farhan's site as follows:
'This site may harm your computer'.

Another day of rejoicing! I'm overjoyed as I've just created a Sitemap Page here today! This is a better and more comprehensive way of displaying our Blogger blog's posts, sorted by labels and having them all contained in a single page, making them easily accessible and readily navigable for visitors and search engines alike. It brings alive posts that would otherwise have remained buried within our blog from readers' eyes, probably from blog owners' sight too...like, out of sight, out of mind!

This Table of Contents (TOC)/Sitemap generator widget (script) for Blogger-powered blogs, generously shared by Abu Farhan (thank you so much, Abu) [do not click both these links as per caution note above] is so easy and quick to install. And, the best part is, once installed, the script not only generates automatically a table of our blog's contents, but displays them neatly under 'label headings' in alphabetical order, as well as highlights with the "New!!" text to notify the 10 latest posts under each label. Awesome, huh!

A picture below to illustrate the impressive result!

Create a Table of Contents or Archives Page in Blogger

CAUTION: LATEST UPDATE ON DEC 12, 2013
Please ignore my tutorial below since it is no longer
applicable as Abu Farhan's script is now not workable.
Moreover, Google has issued a malware warning
on Abu Farhan's site as follows:
'This site may harm your computer'.

Hooray! I've finally created an Archives Page and am so exhilarated with the result, especially a long-awaited one for my Blogger blogs! Some may name it Table of Contents, Index or Sitemap Page instead. Have a peek and you too may fall for one, yes? Confident that some bloggers would, I simply couldn't resist sharing this goody here. :-)

Went on a treasure hunt a couple of days ago for a Table of Contents or Sitemap widget for Blogger and after exploring for hours through various potential sites and experimented them unsuccessfully, I finally came across some awesome widgets (scripts) created by Abu Farhan that worked like a charm and were instant successes!

Just inserting his script for the Table of Contents for archived posts (do not click link as per caution note above) with only 2 lines of code in a Blogger Page, was able to automatically generate a list of the entire collection of all my posts, with titles neatly linked and sorted or archived by dates. A picture below to illustrate the impressive result!

How to create Dropdown Labels Menu in Blogger?

Labels are useful keywords to help readers to easily access posts that are categorized under various related topics in your blog. But eventually, the list of labels (known too as categories) will inevitably grow too long and clutter our blog's sidebar and can be rather annoying.

However, you can opt to shorten its display by creating a dropdown menu box which will expand when clicked to offer you the many 'goodies' available inside your blogspot. With this contraction, you'd then have available space at the sidebar for other gadgets that you may want added. Isn't that wonderful?

Though Blogger has not provided a Labels dropdown option as it did for the Blog Archive widget, it can be achieved by customizing the Labels widget via the blog's template.

How to create Blogger dropdown archives

Are you fed-up with the Blog Archives in your Blogger blog that appears to grow too long and seem never-ending? Well, just a simple change to a dropdown menu box at your blog archive widget will solve your problem!

The result will just be a small box, looking neat and tidy at your sidebar...no more clutter! It will expand only when clicked to view older posts.

Add Recent Posts (Advanced) Widget to Blogger Blog

Whoa! I'm so delighted to have discovered this awesome Recent Post (Advanced) gadget a couple of days ago. A big thank you to Aneesh of Blogger Widgets for his fantastic invention and generosity!

I stumbled upon it while preparing my previous article on How to add gadgets in Blogger blogspot where I played around with the various gadgets available for us in Blogger's Add a Gadget library. Here's another example why I simply love sharing my knowledge and in the process, gaining more! When I give, I receive abundantly too...it's an endless joyous circle of giving and receiving. Praise God!

For a long time, I had wanted thumbnails of my recent posts to appear at the sidebar but getting them there manually the only way I knew how, would entail too much effort and a constant update which will drain me out. Thus, you can guess how very excited I was when I stumbled upon the Recent Posts with thumbnails gadget, just waiting to be 'picked'. Of course, I installed it straightaway! I find showing recent posts with thumbnails most appealing and this is one interesting and engaging way to announce to your readers what's available inside your blog.

How to Add Gadgets in Blogger blogspot

Gadgets, previously known as Page Elements and also referred as widgets in the blog's template, can be easily added to spice up your blog or enhance usability, productivity or whatever. Blogger has made it so very simple for us to add all kinds of gadgets, via the blog's Layout and sub-tab Page Elements, without needing to edit the blog's template.

However, if you are still using the old Classic Template, you'll first need to upgrade your blog to Blogger New Layouts feature to enable you to add gadgets to your blog. To upgrade, just click on Template, Customize Design and then Upgrade as detailed at Blogger Help.

How to add gadgets to your blog, edit and reposition them :
(an easy tutorial for new bloggers or those who've recently upgraded to New Layouts feature)

1. Sign in to your Blogger account which will then lead you to the Dashboard.
   
   
2. Click on Layout and the Page Elements layout opens for you to add, arrange or rearrange the page elements (gadgets) on your blog. The blog page is basically made up of four sections: header at the top, main column where the blog posts are, sidebar(s) (one, two or more, depending on your template design) and the footer at the bottom.
   
   

LinkWithin affects placement of Read More link!

The LinkWithin widget that is placed at the end of a blog post is such an asset! An easy widget to install, it will automatically generate thumbnails from your blog archive to link to related posts, to draw your visitors attention and keep them engaged.

The tutorial on how to install LinkWithin widget on your Blogger blog as shared in my previous post is perfect for normal standardized posts in full display, without the Read More text link

But, if you're applying the 'Read More' feature for your posts in Blogger, then the LinkWithin widget will cause the Read More link that was created by the Jump Break to be shifted below it as seen in the left image. I find this inappropriate as the Read More link should be positioned just below the snippet instead.

Some bloggers even prefer that the LinkWithin thumbnails be shown under the post only after clicking the Read More link and not under the post summary in the home page. And, they have found a way to change that - learn at Blogger Buster on how-to remove them if you're in the same boat. I really don't mind as I find the thumbnails rather appealing, adding extra visibility and giving more options to readers!

My problem though, as indicated earlier was, the LinkWithin thumbnails should appear below the Jump Text and not above it. So, I decided to check from LinkWithin site itself and was delighted to have found a clue at LinkWithin FAQ page that included this Q&A below:

4. How can I customize the placement of the widget on my blog?
Modify your HTML template to add the code below at the place where you want the widget to appear:
<div class="linkwithin_div"></div>

Humph, that was all it showed...nothing more! What about how to apply that? Not helpful to a technically challenge person like me, huh!

LinkWithin widget to feature related posts in Blogger

LinkWithin is a useful widget that is placed at the end of each post with photo thumbnails generated from your blog archive, to link to related articles. This is one smart way of bringing forth some of your posts, making them easily accessible to readers.

An opportunity too to get your visitors interested and engaged on what's available in your blog and probably a way to increase traffic and page views.

Why not add one to your blog now, it's free and so easy!

Follow these simple and quick steps
to install the LinkWithin widget in your blog:

Add copyright notice to a web page

It is strongly recommended that you protect your work online from copyright infringement, by placing copyright notices to them.



In this article, I'd like to just share on how to include a copyright notice to your blogs or web pages, one on every page will suffice.

To do that, you'll need to add the copyright symbol © besides other text. The usual format would be to include the following in sequence:

1. the word, Copyright
2. the copyright symbol, ©
3. the year of publication
4. the copyright owner's name
5. the statement (this is optional). An example of a simple cover all statement will be 'All rights reserved'.