Thursday, March 7, 2013

Adjust Sidebar Width in Blogger Dynamic View Template


Before

After
There is only one sidebar in Dynamic Views, and that is under the Sidebar view. It has been set to a fixed width by default. In this tutorial, I'm gonna show you how you can change it.

Force Gadgets to Stay Visible in Blogger Dynamic Views Template


Before

After
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 visible and remain visible at all times.

Hide Certain Pages Links in Dynamic Views Template


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!).

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.

Fit Full Post Title in Snapshot Thumbnails in Blogger Dynamic Views Template


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 'Recent, Date, Label & Author' in Flipcard Dynamic Views Template

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

Use Entire Header as Home Button in Blogger Dynamic Views Template


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?

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



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

Justify Post Summary in Blogger Dynamic Views Template


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.

Increase Pop-up Image Size in Mosaic Blogger Dynamic Views Template


Before

After

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.

Limiting Number of Flipcards in a row in Blogger Dynamic Views Template


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. 

Show Date Ribbon in Blogger Sidebar Dynamic Views Template


Before

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

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


Before

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

Semi-transparent Post Background in Blogger Dynamic Views Template


Before

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

Adding Author Name Below Post Title in Blogger Dynamic Views Template


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. 

Show Full Post Title in Blogger Flipcard Dynamic Views Template


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 a 'Read More' tag to Post Summaries in Magazine Dynamic View Template


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

Scroll-bar for Sidebar Posts in Blogger Dynamic Views Template

Before
After
Yet another Dynamic View template tweak. Sidebar view is one of my favorite 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 scroll-bar to conveniently access all your sidebar posts.

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


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.

Changing Comment Bubble Color in Blogger Dynamic Views Template


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

Change Comment Text Color and Background in Blogger Dynamic View Template

Before
After
Some time ago, I published a tutorial on how one can highlight author comments in non-dynamic Blogger templates. I couldn't publish a similar one for Dynamic View due to lack of proper handlers in Dynamic View templates. But that doesn't mean we cannot change the generic comment text color or background in these templates. I was surprised to find this option isn't readily available in the Template Designer. In any case, here's how you can change your comment's text color and background in Dynamic View templates.