Changing Comment Bubble Color in Blogger Dynamic Views

Before

After

Here's a quick one. The bubble comments are set to a greyish color by default in all Dynamic View templates, and there isn't an easy way to change this color in the Template Designer. But here's how you can change it using some CSS..

Adding Pinterest 'Pin It' Button to Blogger Dynamic View Templates

Pinterest is a tool that lets you "organize and share all the beautiful things you find on the web" - at least that's what they said. To date, I've never really fully understood what it does. But I do realize that it is popular, and people have been looking for ways to integrate the 'Pin It' button to their blogs - to allow their their blogs to get pinned to other pinterest users' pinboards. It's kinda like inviting your readers to pin your work to Pinterest (correct me if I'm using the wrong terminologies here). It's pretty straight forward to add a 'Pin It' button to a non-dynamic view template, but that isn't the case for Dynamic View templates. Worry not, here's one way to add a 'Pin It' button to your Dynamic View blog.

Adding Separators (Vertical Lines) Between Pages Links in Blogger Dynamic View

Before

After

The header bar in a Dynamic View template could accommodate several horizontal Pages links as well as external links (before resorting to a drop-down menu when the number of links increases). A couple of users have been wondering if a separator line could be placed in between the links. The answer is yes, and that's what this tutorial is going to be about.

Blog Update

To all readers,

I've been busy with Deepavali celebration, and thus was unable to reply your comments and emails. I will start replying all emails/comments very soon, and a new post will be published in a day or two.

Stay tuned, and sorry for any inconveniences caused.
Cheers and God bless.

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 video tutorial!

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)

Changing Specific Link Color in Blogger Templates

Before

After

Links 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.

'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..

Scrollbar for Sidebar Posts in Blogger Dynamic Views

Before

After

Yet 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.

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

Before

After

If 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..

Show Full Post Title in Blogger Flipcard Dynamic View

Before

After

I 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!

Adding Author Name Below Post Title in Blogger Dynamic View

Before

After

By 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.

Adding Label Name next to Blogger Post Title

Before

After

Post 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.

Semi-transparent Post Background in Blogger Dynamic View

Before

After

Several 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.

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

Before

After

A 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.

Show Date Ribbon in Blogger Sidebar Dynamic View

Before

After

Hey, 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..

Delayed Posts and Comment Replies

Hi 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.

Limiting Number of Flipcards in a row in Blogger Dynamic Views

Before

After

The 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.

Increase Pop-up Image Size in Mosaic Blogger Dynamic Views

Before

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.

Justify Post Summary in Blogger Dynamic Views

Before

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.

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.

Use Entire Header as Home Button in Blogger Dynamic Views

Before: Header is not clickable

After: Header is clickable, acts as Home button

Remember 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?

Using Nicknames to Publish Posts in Blogger

Before

After

I'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+, Google became serious with its naming policy. Long story short, if you have G+ linked to Blogger (which is cool btw), you don't get to use nicknames in Blogger! Thus in this post, I'm gonna show you how you can use nicknames in your published posts, instead of your real name.

Note: This tweak does not work if you have multiple authors posting in your blog.

Rename 'Recent Date Label Author' in Flipcard Dynamic Views

Before

After

So, 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).

Pending Comments

Thank 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.

Change 'Add a Comment' in Blogger Dynamic Views

Before

After

By default, the comment link in Dynamic Views is titled as 'Add a Comment'. There isn't any way to change this phrase in the settings. In this post, I'm gonna show you how you can do just this. This is a respond to blog reader Reyes.

Fit Post Titles in Snapshot Thumbnails in Blogger Dynamic Views

Before

After

Lots of photo bloggers are annoyed by the fact that the post-tiles in Snapshot view are often clipped at the side. By default, only the first 4-5 words are visible, and the rest of them are kept hidden. Moreover, the titles need to share the space with the comment bubbles, which certainly isn't a encouraging factor for anyone who wants to use Snapshot view. Let's change this, shall we?

Rename 'Pages' in Blogger Dynamic Views Drop-down Menu

Before

After

When you have more static page links than what your header-bar can fit, all your pages will be forced to go on a drop-down menu. This drop-down menu will be titled 'Pages', by default. Here's how you can change it to other text of your likings.

Hide Certain Pages Links in Dynamic Views

Before

After

If you've chosen Dynamic Views template from the very beginning, chances are you're never gonna find a way to hide some of your pages links. Sure, you can delete your pages altogether to permanently hide these links from showing in your pages tabs. But there is way to still keep these pages and at the same hide their links alone from showing on your header bar. And here's how (no codes this week!).

Force Gadgets to Stay Visible in Blogger Dynamic Views

Before

After

Second post of the week! Your Dynamic Views gadgets would hide itself by default after a few seconds upon loading. It'd reappear when you bring your mouse over it. If you find this annoying, here's how you can force it to stay unhidden and remain visible at all times.