Jacq's Blogger Tips

Change Font Style of Page Tabs easily in Blogger blogs (revisited)

2011-12-31T21:16:00.000+08:00

Gosh! I wasn't aware until recently that Blogger's Template Designer has provided a wide variety of web fonts from Google Web Fonts API for the various elements in our blog's template. Previously, we had to be contented with just 7 default ones, namely, Arial, Courier, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

But now, with the long list of font choices made available, changing the font style and appearance of the page tabs would be a breeze! You will be spoilt with choice!

No need at all to edit the HTML of our blog's template as previously mentioned at my earlier tutorial or to tackle with custom CSS codes. Thus, I felt it'll be good to present an updated tutorial because there may be many bloggers (like me, previously) who are not aware of these high-quality, open-source web fonts that are offered by Blogger at the Template Designer.

Read More »

Enable Mobile Templates for your Blogger Blogs

2011-10-31T23:41:00.000+08:00

One of the coolest features that Blogger had rolled out in recent months is the mobile templates.

Now, you can effortlessly have your Blogger blogs look fantastic on mobile devices. Your blog's mobile-optimized version of the template will download very quickly and make viewing and reading of your blog articles pleasurable for the rapidly increasing number of smartphones users and yourself too.

So, do not ignore this generous goodie offered by Blogger but make your blog mobile-friendly soonest! Moreover, it's so easy to enable, no CSS or HTML codes to tackle with!
Read More »

Create Drop Caps to Blogger Posts easily

2011-09-30T14:41:00.001+08:00

Most people must have seen examples of drop caps before, usually being presented in magazines, newspapers and novels. It is the first letter of a paragraph that is enlarged, made larger than the rest of the text therein so that it drops to several lines below, as visibly illustrated in this paragraph and the image below.

The drop capital letter, sometimes known as 'dropped initial' certainly stands out, right? This is one of the many ways to enliven your posts visually and make them more stylish and eye-catching or simply just to move away occasionally from the mundane display and spice it up!

Since I've recently learned how to create a simple drop cap and spent much time dabbling around it, thought it best to include a tutorial here for anyone who's interested. Also, to keep a record for myself lest I forget the nitty-gritty of it all... something that will surely happen as I age. :-)
Read More »

Add Blogger's Follow By Email Gadget To Your Blog

2011-08-28T01:12:00.000+08:00

Yay, Blogger has rolled out a new feature, 'Follow by Email' recently! That was since March 2011 but I got to know of it only a few days ago when I googled to know more about RSS and Email subscriptions.

This lovely Follow by Email gadget, when installed in your blog, will easily allow your readers and fans to receive your latest blogposts and updates in their inbox, when they subscribe to your blog. This is one of the simplest, yet powerful ways to distribute your blog's contents effortlessly to as many people as possible in the blogosphere and keep them engaged for as long as they are subscribed.

It's an alternative way besides subscribing to your RSS Feed. Some may prefer the latter while there are others who prefer to subscribe by email. Let your readers have a choice!

Are you ready then to add this email feature to your blog?
Follow these super-easy steps on how to
install Blogger's Follow by Email gadget to your blog :
Read More »

How to center-align Pages/Pagelist gadget in Blogger

2011-07-31T23:46:00.015+08:00

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:
Read More »

Adsense Ads Placement Below Post Titles in Blogger

2011-05-31T17:35:00.000+08:00

Placing Google Adsense Ads in our Blogger blogs or websites is one of the many ways that we can earn money for publishing contents online. Wonderful isn't it, being paid for something that we love doing?

Better still if we know how to make more money, right? Get some tips by exploring Google's pictorial heat map regarding the ideal positioning for Google ads in your blog that may possibly help to increase your adsense earnings. Google's AdSense ads placement guideline indicated the strongest performance to be above the primary content or below the post title.

However, bear in mind that you won't be able to make any money with AdSense if there's no traffic or minimal traffic (visitors) to your blog. The more traffic your site receives, the greater the potential in earnings as visitors is the lifeblood of a blog or website.
Read More »

Add Numbered Page Navigation for Blogger Blogs

2011-04-07T00:45:00.028+08:00

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.

Read More »

Blogger's Comment Form Placement: which option is best?

2011-02-23T21:30:00.001+08:00

The availability of a comment form or box to post comments is an integral part of any blog. It's one of the most used avenue for online activity and interaction with readers/visitors to your blog. Blogger has made it so convenient for readers and bloggers alike by providing the commenting feature with 3 placement options, namely:

Full page
Pop-up window
Embedded below post

Check it out by signing in to your Blogger account. At Dashboard, select Settings > Comments. Then scroll down to 'Comment Form Placement' and choose your preferred option. For the next item 'Comments Default for Posts', see that 'New Posts Have Comments' is selected to enable comments. And, remember to scroll further down to click 'Save Settings' when you're finished.

Easy, right? But, the big issue here is.... eeny meeny miney mo, which one of the 3 options should you choose? Where should the comment box be positioned in a post to provide the best accessibility and is most user-friendly?

Take note that comments will not be displayed on the blog's homepage which will only show #comments per post. Comments, if there are, will show on the individual post's web page instead, depending on your selection.

Okay, let's dissect one option at a time!
Read More »

Customize and style Read More link in Blogger

2011-01-09T00:26:00.000+08:00

Thanks to a recent reader to this blog who wanted to know how to right-align 'Read More' in Blogger which prompted me to google for answers and learned much in the process.

Hence, I'm happy to share here some related tips for those seeking to learn how to customize and style the 'Read More' or Jump link in various ways as illustrated in the image below!

To do that, you'd first need to have the 'Read More' link below your post summaries in your blogspot posts. If you don't know how, follow this tutorial to create 'Read More' with Blogger's jump break feature.

Read More »

Display a blog button with text box for code in Blogger

2010-12-18T17:36:00.006+08:00

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.
Read More »

Make an image/picture clickable or as a link

2010-11-17T16:02:00.009+08:00

This is one tutorial that I intended to present earlier but had procrastinated far too long until now! It simply took a visitor to my blog to wake me up from my slumber with her request on how to make an image or photo into a clickable link or hyperlink to another webpage.

I'm sure you've come across blogs (hehe...mine included) having clickable picture thumbnails, especially for related posts, recent posts or popular posts! These clickable images are generated automatically by the readily available widgets that were installed and proven beneficial to bloggers and visitors alike. But, didn't you ever wished that you know how to make images of your own choice clickable too?

Well, it's rather simple actually once you know the HTML format!

If you know how to make a text link, then it's as easy to make any image, button or badge an active link.

Needless to say but a gentle reminder nonetheless - to make a picture link, you have first to upload your photo on the website (e.g stored on Photobucket, Blogger.com or Flickr.com) to have available the URL or source (location) of the photo which is needed in its HTML format.

To make a text link,
the basic HTML format is like this:

<a href="URL of the target site">Text</a>
(change only the URL and text that are highlighted in red as you wish)
Read More »

Hide, Remove or Color Change the Navbar in Blogspot

2010-10-25T14:44:00.000+08:00

Have you ever wanted to remove the default Navigation Bar (Navbar) at the top of your Blogger blogspot which features the search box and other useful links? I myself had wanted to often times, but nonetheless, the ease of signing in and out of Blogger or to access the admin pages of my blog so easily via the Navbar far exceeds my distaste of its previously default blue color.

Great that Blogger has made available for us to alter or change the colour of the Navbar to blend with our blog's theme or design which is a significant improvement aesthetically, especially with the transparency options. Once done, I was most contented and had no desire whatsoever to hide or remove the Navbar ....or so I thought until I learned something new recently!

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

2010-09-27T23:52:00.015+08:00

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 :
Read More »

Block or remove a Follower on Blogger

2010-09-07T15:57:00.004+08:00

Have you ever come across Followers of your blog that you want deleted for whatever reason?

I was rather glad recently when there was a slight increase in the number of Followers to this blog. Little did I guess then that I'd want to remove a couple of them pronto from my list a week later when I had time to scrutinize their unbecoming avatar photo and inappropriate links.

Fact is, any visitor or reader to your blog can become a Follower as long as you've not removed the default Follower widget from your blog's sidebar. Though it's impossible to delete any offensive Follower totally, at least there is an easy alternative where you can block him/her from appearing on your members list!

Just follow these simple steps on
how to block a Follower :

Go to your Dashboard (it has to be done there!)
Click on the #Followers beside the title of that particular blog.
Find and click on the thumbnail image of the offending Follower.
Click on the option, Block this user.
Click on the tab, Block and you're done.
Should you have accidentally block the wrong person, just click Unblock this user.

How to place HTML in a Scroll Box, Blog Post or Elsewhere

2010-09-04T16:55:00.006+08:00

Creating a scroll box is simple, you can follow this easy tutorial here on making one!

Thus, in this post, I will focus more on how to type HTML (Hypertext Markup Language) code, using HTML entities so that they appear as they are, that is, normal character text and not as markup.

Learning how to do it properly is essential for all of us who'd like to share tutorials on blogging tips and the like, where correct HTML script/codes are needed to be presented as guides.

Some others may simply want to share their blog's buttons and need to display the proper HTML codes so that interested parties can copy and paste to their blogs or websites.

Yet others may want to email some HTML to friends, not realizing that the code will be processed by the web browser as markup in transition.
Read More »

Create easy HTML Scroll Box on Blogger

2010-09-01T16:49:00.018+08:00

When I wanted to do a tutorial on how to install a related posts widget for Blogger recently, I was forced into learning how to create a scroll box to contain the exceptionally long script codes. And, mighty glad about that because I managed to learn how to make a scroll box and much more in the process, and get to document and share it here for the benefit of others as well!

Scroll box is very handy when you have a lot of data or text but limited space to display them. Besides text, the scroll box can contain images and HTML codes too! And, it's so easy to create one that can be located within your blog post or pages and even at the sidebar, footer or below a header for announcement and the like! It helps to save valuable space in your blog, giving a professional touch too!

2 examples of scroll boxes

How to schedule a blog post in Blogger

2010-08-07T01:41:00.003+08:00

Scheduling my posts to a future date is something I've not found necessary as yet but it's good to know that Blogger has this lovely feature for its millions of blogging fans! Since I've already spent precious time googling and testing on how to use this scheduling tool recently for a dear friend who encountered a slight snag, thought it best to record the steps here lest I forget them when my own need arises in future. Also, it may benefit other bloggers too who are new or unaware of this useful blogging feature that's included in the Post Editor page.

Scheduled post publishing is setting your post's date and time to be published into the future and Blogger will automatically publish it on your blog at the specified time, and not before.

My designer blog with the new Blogger Template Designer!

2010-07-08T23:28:00.233+08:00

Yippee...just created my very own designer blog! One full day of exciting fun playing around with the new Blogger Template Designer that was finally made available to everyone since a month ago! Just can't resist taking up Blogger's challenge to make a complete transformation from my previous 3-column Layout Template and move forward with the current trendy styles and happenings!

The new template designer blog above and the old layout template below

Change font style/size of Pages Tabs in Blogger blogs

2010-07-05T23:45:00.002+08:00

I'm extremely delighted to have discovered how to customize the font for my Pages tabs to make it more interesting and lively!

Just learnt how to do that when I was preparing for my previous article, Create Pages in Blogger Blogs with ease, to share in this blog. That's why I've always found it so rewarding to share my knowledge, simply because in giving I receive much more! ;-)

Thanks so much to Aneesh of BloggerPlugins (comment dated March 27 2010 is referred) and W3Schools on CSS styling fonts who provided clues that aided me in getting the results that I've wanted for a long time. Yippee...I've managed to style the fonts of my header's title and description too in the process! :-)
Read More »

Create Pages in Blogger Blogs with ease!

2010-07-05T15:14:00.003+08:00

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.
Read More »

Transform your blogger blogs with the Blogger Template Designer

2010-05-21T17:58:00.002+08:00

Did you know that Blogger has come up with some very neat and cool designs for us to give our blogspot blogs a new face-lift? And, the best part is it's all for free...haha!!

Check out the new Blogger Template Designer at Blogger in draft, Blogger's experimental playground, where the steps are clearly laid out for us bloggers to try them out and apply if so wish. Awesome indeed - you can have any of the beautifully-designed templates, with easily customized layouts in one, two or three columns, plus many other features such as background images and fonts colours that can be easily customized as you desire, without knowing any HTML or CSS!

Wonderful, huh? I've experimented it at my test blog and am greatly impressed. Nonetheless, will probably express the new style in my blogs later when the Blogger Template Designer is no longer in draft, but fully launched with teething problems erased or solved. Hopefully very soon!

Thumbs up to Blogger...you rock!! Thanks a zillion!

Update July 9, 2010:
Hehe...my designer blog is up and about, finally!
Read more about my blog design and template changes here.

Create simple Dropdown Menu Widget for Blogger blog

2010-05-15T15:50:00.006+08:00

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!

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

2010-05-09T19:23:00.008+08:00

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) 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!
Read More »