Wednesday, December 5, 2012

Pending Comments

Spoken byYogaratnam N.at2:45 AMThank you for all your comments and emails. Unfortunately, I am a little tied up at the moment due to my MSc project dissertation, and I won't be able to reply all your comments immediately. I will try my best to reply the simple ones. All other comments will be replied by 20th of May.

Regards,
Yoga.Email ThisBlogThis!Share to TwitterShare to Facebook

Raname 'Recent Date Lebel Author' in Flipcard Dynamic Views

AfterSo, this is becoming increasingly popular. Few readers have asked me how to rename the four categories that you see in Flipcard view: Recent, Date, Label and Author. It might be useful to personalize these tags to suit your blog's theme. Whatever your reason is, this is how you do it (Won't work in IE btw).

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Using Nicknames to Publish Posts in Blogger

AfterI'm sorry this week's post is a little delayed. I was away from the computer for a couple of days. Anyways, I'm back now. This week's tutorial is about changing your profile name to a nickname in Blogger posts (both normal and Dynamic Views template). Being a Google product is one of the best things about Blogger. It allows you to use one account to enjoy many of Google's integrated services. But the sucky part is, recently, with the introduction of G

Use Entire Header as Home Button in Blogger Dynamic Views

After: Header is clickable, acts as Home buttonRemember how non-Dynamic View template's headers used to serve as home buttons? I thought it was pretty neat. It's one of the things that makes you miss non-DV templates. In Dynamic Views, you still kinda have this feature - but you gotta click on your blog's title on the header. Simply clicking anywhere on your header will not bring you to your homepage, or to the top of your blog. Let's change that, shall we?

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Convert 'Send Feedback' button to StatCounter in Blogger Dynamic Views


Several gadgets have been introduced to Dynamic Views now, but a stat counter isn't one of them. I thought it'd be awesome if the space occupied by the 'Send Feedback' button at the bottom-right of your blog can be utilized for showing a stat counter. Those that have tried adding StatCounter to Dynamic Views before might be wondering if this approach will mess up your default Dynamic Views background - nope, it won't. In this tutorial, you will learn how to convert the redundant 'Send Feedback' button that you can find in your blog to a Stat Counter button..This is a respond to blog reader Jennifer Farris.

Step 1:

Go to http://statcounter.com, register an account and login. Once you're in, click on Add Project.

Justify Post Summary in Blogger Dynamic Views

After
Post summaries are dynamically fetched and displayed in the front page in Magazine and Timeslide views. However, they are left-aligned by default, creating a rather messy effect. Here's how you can justify them and make them neat in one simple step.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Increase Pop-up Image Size in Mosaic Blogger Dynamic Views

After
Click here for a Live Demo!

I don't imagine Mosaic Dynamic View being very famous among Blogger users, as I rarely see any questions on the said template. But here's one for all you Mosaic users out there. When you hover over a mosaic post in Mosaic view, the post's thumbnail would pop-up and get slightly increased. With a little bit of magic code, you could make the pop-up thumbnails much larger, and appealing. And here's how.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line


Business Ideas In Hindi 

Limiting Number of Flipcards in a row in Blogger Dynamic Views

AfterThe number of flipcards in a row that you see depends on your browser's width. It dynamically loads to 'fill' up the horizontal space available in your browser. Some users would like to fix the number of cards regardless of the browser's width - usually to allow a portion of your background to be always visible. Whatever your reason is, here's how you do it. This is a respond to blog reader antonio.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Delayed Posts and Comment Replies

Spoken byYogaratnam N.at8:02 AMHi all,

I am a little tied up at the moment, and I'll be away from my computer for a few days. All comments will be replied by Thursday, 19 of July 2012. Sorry for any inconvenience caused.

Cheers and God bless.


Email ThisBlogThis!Share to TwitterShare to Facebook

Show Date Ribbon in Blogger Sidebar Dynamic View

AfterHey, sorry for the delayed post. So, all dynamic view templates have date ribbons on their posts - except Sidebar. I'm not quite sure what the reason is, but there's an easy way to get it back. And here's how..

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Repositioning Gadget-dock from Right to Left in Blogger Dynamic Views

AfterA few months ago, Blogger (finally) introduced the ability to add gadgets to Dynamic View templates. As of the time of this writing, Dynamic View templates support up to 13 gadgets to be added to its gadget-dock. However, the gadget dock itself is very much fixed to the right of your blog, and there isn't an option to bring it to the left. When you can have left-sidebars in non-Dynamic View templates, why not have the same in Dynamic View templates? This is a respond to blog reader Richard.

IMPORTANT: There's a reported bug in the tweak that affects users with long list of Archive gadget (and possibly any other long gadgets that require a scrollbar).. If you have a long gadget, you should skip this tweak until the bug is fixed.
Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Semi-transparent Post Background in Blogger Dynamic View

AfterSeveral months ago, I've shared a set of code that allows you to customize your Dynamic View posts' background. The tweak was written in a generic note, which allows the code to be changed to fit users' different background preferences.. However, if you're looking for ways to change Dynamic View default post backgrounds to a semi-transparent background, the previous post isn't gonna help much - thus the reason for this week's post. To put simply, this week's tutorial allows you to transform your default post background (plain ol' white) to a slightly transparent version of itself - letting your beautiful background to be seen through your posts. This is a respond to blog reader (and a friend) Bob Kansas.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> Paste the following code towards the bottom of your 'Add CSS' box --> Press enter after the last character of the last line

Adding Label Name next to Blogger Post Title

AfterPost titles are usually located on top of your posts, and you can choose to show your post's labels at the bottom of you posts. Typically, you use label to categorize a post. For example, you'd use the label 'Books' to tell your readers that that particular post is about books, and 'Cooking' to indicate that it is a post related to cooking. Wouldn't it be cool if you could have your label automatically appear next to your post title, to allow your readers to distinguish which category your posts belong to? This blog post is a respond to Blog Readers Jelena Dimić and Euronomist.

Note: This is not a Dynamic View tutorial, as such it won't work with Dynamic View templates.

Step 1:

Backup your template by going to Dashboard - Template - Backup/Restore - Download Full Template. Next, go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Templates - Find and delete the following lines:

Adding Author Name Below Post Title in Blogger Dynamic View

AfterBy default, author names appear at the bottom of your posts.. It says something like 'Posted 3 weeks ago by Yoga'. Given Dynamic View template's stylish design, it'd be more classy if the author name appears at top, below the post title. Everyone is entitled to his/her own opinion of course, but if you want your author name to appear below your post title, and remove the author name from the 'Posted 3 weeks ago' part, this post is just for you. This is a respond to Blog Reader Berk Efe Altinal.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Show Full Post Title in Blogger Flipcard Dynamic View

AfterI like Flipcard view - I really do.. Having most of my posts appearing in a single browser page (with the added bonus of having a thumbnail for each one of my posts) gives my readers a quick overview of my entire blog. However, when one hovers over my posts, I am not particularly excited with the fact that most of my post titles are cropped.. Instead of the full post title, I'm presented with the publish date info and the number of comments - two things that I could do without in my flipcards.. I'd trade these two trivial info for a full title any day - Actually I have done so, and that's what I'm gonna show you in this week's post!

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Adding a 'Read More' tag to Post Summaries in Magazine Dynamic View

AfterIf you're reading this post, you're probably no stranger to the way post summaries are presented in magazine view.. The template dynamically fetches an excerpt of your whole article (often your first paragraph) and present it as a post-summary on the front page. Unfortunately, the summaries are put in a way where one could easily miss the rest of your post - as very little has been done to indicate that the summary has more to it when you click on the post.. There isn't anything you can do to make the summary show the whole of your writing, but there is one thing you can do to indicate there is more to your summary - place a 'read more' tag to the end of your summary's line..

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

Scrollbar for Sidebar Posts in Blogger Dynamic Views

AfterYet another Dynamic View template tweak. Sidebar view is one of my favourite templates in Dynamic View. It is the only template in Dynamic View that allows you to view the content of a post while still maintaining the complete list of posts in the sidebar - making blog-post navigation a delightful experience. However, you'd have to use your mouse to scroll up and down to navigate within the sidebar posts. In this tutorial, I'll show you how you can add a scrollbar to conveniently access all your sidebar posts.

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line

'Follow by Email' Gadget Can Be Readily Added In Blogger Dynamic Views


We've had the ability to add gadgets to Dynamic View for over 6 months now, but only a number of gadgets are currently supported. These supported gadgets are typically marked with a red tag (that says 'Available for Dynamic Views') when you view the list of gadgets in your Layout tab. Oddly, the 'Follow by Email' gadget isn't one of the marked gadgets, although it can be readily added to your Dynamic View templates. There is no sorcery as to how one could add this gadget - you add it like how you'd add any other gadget.. But since the (non-)availability of this gadget is somewhat misleading, I thought I'd throw this out anyway. There's really no special steps in this post, but I'll just walk you through anyway..

Go to Dashboard - Layout - Add a Gadget - Choose 'Follow by Email'..

Changing Specific Link Color in Blogger Templates

AfterLinks are usually underlined (upon hovering) and shown in different text color, so that they are easily distinguishable from plain text. However, the Template Designer tool doesn't allow you to change specific link colors. In other words, the link color that you choose will be applied globally, to all the links in your blog. There are users who'd like some links to stand out from the rest, blog reader chowgypsy is one of them. In this tutorial, I've prepared a list of code to specifically change some of the common links that you might wanna apply different colors to.

Note: There are just too many specific links that I can think of. I've listed some of the common ones here. If you want to change a specific link color and the link that you wanna change isn't listed here, feel free to leave a comment and I'll update the post accordingly.

Instructions:

1) Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste one of the following codes --> Press enter after the last character of the last line

Comment Form Above Comment Contents in Blogger Threaded Comment System


I've done this before. Unfortunately, my old tutorial won't work anymore with Blogger's new comment system. Thus the reason why you're seeing this tutorial. So, comment forms are placed at the end of actual comment contents, right at the very bottom of your individual post pages. It does look alright when you don't have much comments in a given post. But personally, I think it is a royal pain in the derriere to scroll all the way towards the bottom, especially when you have lots and lots of comments in your post page. And honestly, I think it might be a little more encouraging to place the comment form right at the top, so that your readers will see it first before having to actually go through all the previously left comments.

This tweak will bring your comment form towards the top of your comment contents, right below the end of your post. I'm referring to the generic comment form of course. The placing of individual reply comment form will not be changed (the comment form that you'll see when you click on the 'reply' link on an individual comment)

Note 1: It is common for the form to load at its usual place first, before appearing at top. Won't be noticeable if you have a fast internet connection.
Note 2: This IS NOT a dynamic view tutorial. Won't work with Dynamic View templates.
Click here for a video tutorial.

Step 1:

First backup your template by going to Dashboard --> Template --> Backup/Restore --> Download Full Template.

Next go to Dashboard - Template - Edit HTML --> Proceed --> Check the box next to 'Expand Widget Templates' - Find and delete the following lines:

Changing Blogger's Default Homepage


The very first tutorial published in this blog was a walkthrough on how you can set-up a welcome screen in your blog, so that you won't be presented with Blogger's default homepage. I thought it's about time to update the old walkthrough, as an easier way to set-up a custom landing page is now available to us. Basically, this walkthrough is gonna teach you how you can set a custom page to be the first page that your readers will be seeing upon visiting your blog (from hereon referred to as 'new landing page'). This can be useful if you want to include some sort of welcome screen, content warning, or whatever tickles your fancy. And yes, it works on non-dynamic as well as dynamic view templates!

Click here for a live demo!

Click here for a video tutorial!

Note: In the walkthrough below, I will change my default landing page to a custom welcome screen. It is not a must to use a static page as your custom landing page. You can use any page in your blog for this purpose.
Step 1:

It is important that you have a Pages gadget in your blog so that you readers can navigate from your new landing page to your blog posts. If you don't already have one, add it by going to Dashboard - Pages - Show pages as - Top tabs.

Header Image beside Blog Title

Instead of having an image occupy the entire Header section, some might want to have a small image beside the Blog Title and Description, either on the left or on the right of the Header. Blogger has a simple feature which allows you to upload an image to the Header. However, as we had explained in our article Background Image for Blogger Header (New), this image appears as a backdrop to the Blog Title and moves with the Title. To have the image on one side, we suggest two methods which you can try.

Using Blogger Header Image Upload

Let's say we have a small picture (150px by 150px) that we want to put on the left of our Blog Header. Use an image editing software to create a new blank canvas of 760px (width) by 150px (height). Check the Header width of your template. Normally it is found under #header

Image beside Blog Post Title

We had in our earlier article showed you how to add Images or Icons to Sidebar Links. Many readers are also interested to add images next to the Blog Post Titles. You can have a small picture to automatically appear in every Post Title. This guide will explain how this can be done.

The image we are talking about has to be small, perhaps about 20px in width. But for the purposes of this guide, we shall also use a bigger image double that size, to let you see the difference.

First, we have to create that image. If you have an existing photo or picture, you can use an image editor like Google's Picasa to crop or resize it to a small image size. After that, upload it onto a free image server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Copy down the IMAGE URL.

Example 1

In this first example, we use an image of 20px by 20px. Login to Dashboard and go to Template -

Background Colour of TicTac Template

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Remove Underline below Text Links

In some templates, the text links are underlined. This distinguishes the hyperlinks from the normal text. If you don't like that, you can remove the underlines. You can also modify the template to have underlines only in the main posts and not in the sidebar or vice-versa. This tutorial will show you how it can be done.

As explained in our article Links – Hover and Rollover Effects, when you are at Template -

Pre-formatted text in Blog Posts

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Quick Edit and Screwdriver Wrench Icons

If you are new to Blogger software, once your Blog is up and running, you will see some strange icons. One is a picture of a pencil at the Post Footer and another is a screwdriver and wrench icon at the bottom right corner of every widget. Is there a way to disable them? Why are they there in the first place? Don't they look unsightly in the Blog design?

Allay your fears. However unsightly they may seem, nobody else can see them other than the author of the Blog and only when logged into the Blogger account. Once you are logged out, clear the browser cache or refresh the page and the icons will disappear.

Remove Pencil icons

These icons are there to assist the authors. The pencil icon at the end of the Posts are the links to enable easy quick editing of the Posts.

Animated Graphics in Blogger

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Highlighted Text with Colored Background

When typing a Blog Post, the font colors can be changed using the tool provided in the rich-text Post Editor. Unfortunately, there is no icon or tool to add highlighting to the text. However, as we shall discuss, it is possible to add highlights to the text and choose a color to appear behind a word or lines of text. This tutorial will also explain how to enclose the text within a box with a colored background.

Text Highlighting

Create the post as you normally would using the “Compose” mode. If there are some words that you want to highlight, switch to the “Edit HTML” mode and insert the following tags before and after the TEXT TO BE HIGHLIGHTED. Here are some examples of common color highlights and codes to be inserted:-

1. Yellow highlight

Add Text Box and Textarea

There are times when you want to insert plain text into your Blog Post or template. This may be a piece of HTML code or JavaScript that you would like readers to copy, such as the “Link to Our Site” code in the sidebar. It could also be the Terms of a Legal Agreement that users can view. As we shall be discussing in our article on creating forms in Blogs, the text box can also be used in feedback forms for users to input feedback and comments.

The HTML code of the text box makes use of the