Showing Thumbnail Only For Selected Post Sidebar Dynamic Views

Before

After

Sidebar view, by default, shows all thumbnails for the posts that it can locate a thumbnail for. If you're looking for a way to disable the thumbnail for all the posts that is not being viewed (that is, the posts that are not being read), here's a quick way to get this done.

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

.sidebar .item.hentry .thumbnail{
display: none !important;
}
.sidebar .item.hentry.selected .thumbnail{
display: block !important;
}

Rename Views in Blogger Dynamic Views

Before

After

Too lazy to think of a better title. To hell with SEOs. Anyways, if you find yourself in a situation where the names of Views (Classic, Flipcard, Magazine..) need to be changed to something else (or another language that Google doesn't recognise perhaps), this tutorial could come handy. That said, do note that if you've got pages in your pages bar, in which case your views would have gone into a drop-down style menu, the selected view will still be in English. Couldn't help that one unfortunately.

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

#views ul li a, #views .menu-heading, .ss{
font-size: 0px !important;
}
#views ul li:nth-child(1) a:after{
font-size: 14px !important;
content: "Classic**";
}
#views ul li:nth-child(2) a:after{
font-size: 14px !important;
content: "Flipcard**";
}
#views ul li:nth-child(3) a:after{
font-size: 14px !important;
content: "Magazine**";
}
#views ul li:nth-child(4) a:after{
font-size: 14px !important;
content: "Mosaic**";
}
#views ul li:nth-child(5) a:after{
font-size: 14px !important;
content: "Sidebar**";
}
#views ul li:nth-child(6) a:after{
font-size: 14px !important;
content: "Snapshot**";
}
#views ul li:nth-child(7) a:after{
font-size: 14px !important;
content: "Timeslide**";
}
.menu-heading:after{
font-size: 14px !important;
content: "Views**";
}

Change lines 6, 10, 14, 18, 22, 26 and 30 in the code above accordingly. Line 34 is if you have pages links in your bar and you need to change the selected view from English to other default word.

Description Below Title in Blogger Dynamic Views

Before

After

Hello! I've seen a couple of users finding a way to force the Description field to sit below the Title field in Blogger Dynamic Views. This post should walk you through the process.

Step 1:

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#header .header-bar .title, .ss{
padding-top: 14px;
line-height: 30px !important;
margin-right: 0px !important;
}
#header.header div.header-bar span.title h3 {
display: block !important;
position: relative;
top: -10px;
}

Optional:

If you need them centered, you could add the following to your CSS.

#header .header-bar .title, .ss{
text-align: center
}

Centering 'Recent Date Label Author' in Blogger Dynamic Views

They're technically called the Flipcard's Control Group. But for you and me, that's the 'recent date label author' box. And here's how you can drag it to the center of your screen. This is for Blog Reader Jon Lewsom.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.flipcard #controls{
width: 100%;
}
.flipcard #controls ul, #ss{
width: 325px !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
clear: both !important;
float: none !important;
}

If you've renamed your Control Group in the past, you may have to alter the value '325' in Line 5 above.

Google+ Comments Box Fix in Blogger Dynamic Views

Before

After

If you use Blogger Dynamic Views on your blog with Google+ Comments on it, you might notice your comment box appearing slightly off, like it's squashed towards the left of your blog. Some times it fixes itself while you navigate through the page, some times it doesn't. Here's a fix that you could use for now.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

@media only screen {
.overview-inner .comments {
min-width: 750px;}
}

Changing Flipcard Default Background Color in Blogger Dynamic View

Before

After

When you do not have an image to be used as thumbnail for a given flipcard, by default, the front card would assume a greyish background color. Here's how you can change this default color.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.flipcard .items .item .card .front, .flipcard .items .item .card .back{
background-color: white !important;
}

To change the color, simply replace the word 'white' in Line 2 above. You can either use simple color text such as 'red', 'green' 'blue' etc, or, you can generate your own hex color tag if you prefer to use a specific color.

Changing Flipcard Border Color in Blogger Dynamic Views

Before

After

Here's a quick one, just to cover some grounds. Blog reader Red has been wondering if there is a way to change the color of the border around the cards in Flipcard Blogger Dynamic View templates. Here's how.

Step 1:

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.flipcard .items .item .card{
border-color: black !important;
}

To change the color, simply replace the word 'black' in Line 2 above. You can either use simple color text such as 'red', 'green' 'blue' etc, or, you can generate your own hex color tag if you prefer to use a specific color.

Show Description Text in Full in Blogger Dynamic View Templates

Before

After

Happy 2014 folks! Enough with New Year greetings, and back to this week's post. Blog Reader Jerry De Luca was wondering if there is a way to make the description text in Dynamic View blogs to show in full. Yes, it can be done, and here's how.

Step 1:

First, you need to increase the size of your header. If you have implemented my other tweak on applying a header image on your DV blog, you could skip this step. Otherwise, go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#header .header-drawer.sticky, #header .header-drawer  {
top: 59px;
}
  
#header .header-bar{
height: 90px;
}
  
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 90px;
}
  
#header-container {
height: 130px;
}
  
.viewitem-panel .viewitem-inner {
top: 25px;
padding-bottom: 45px !important;
height: auto !important;
}
  
#header-container #header.header .header-bar span.title{
height: 90px;
}

Step 2:

Now that you have enough space in your header to add a new line for your description, go ahead and add the following to your CSS. Again, go to Template Designer - Advanced - Add CSS - paste the following code towards the bottom of the box (as in the code in Step 1 should appear on top of this code) - Press enter after the last character of the last line } - Apply to Blog.

#header.header div.header-bar span.title h3{
display: block !important;
}

#header .header-bar .title{
padding-top: 14px;
line-height: 30px !important;
margin-right: 0px !important;
}

Extra:

If you've got a really long line, use the following to force your description into a new line

#header.header div.header-bar span.title h3{
white-space: normal !important;
}

Show Post Title in Full in Magazine Blogger Dynamic View

Before

After

I've published tutorials on how post titles can be shown in full in Blogger's Flipcard and Timeslide Dynamic Views before, and Blog Reader Pierre Egault would like to know a similar trick for Magazine view - as Magazine view tends to truncate your title when a custom web font is used. This tweak should also help to reduce the gap in your post title's line height when a custom font is used. So, here's how:

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog

.magazine .item .title a{
line-height: 25px !important;
overflow: visible !important;
display: table !important;
}
.magazine #lead .item .title a{
line-height: 35px !important;
overflow: visible !important;
display: table !important;
}

Changing Font Size in the Header Bar in Blogger's Dynamic View Templates

Before

After

You'd think there is an easy way to change the size of the font on your Dynamic View's header bar. Oh wait, there is - the option to change your font size is very much there in your Template Designer (under Advanced - Header Bar). But let's be honest here. I have not seen this working. It never had any effect on my actual template, and no, not even on my preview page. Fortunately, there's a way to manually change the font size in the header bar, and here's how.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

Use the following to change the size of your menu font (Classic, Flipcard, Magazine..)

.header-drawer .menu span{
font-size: 20px !important;
}

And the following to change the size of your header bar links.

.header-drawer .tabs{
font-size: 20px !important;
}

And this to change the font-size of the view-options in your drop down menu:

#views .menu-item{
font-size: 20px !important;
}

Change the value '20px' in Line 2 accordingly.

Removing Subscribe Gadget from Blogger's Dynamic View

Before

After

Now that there's a fix for the Ghost Template problem in Dynamic View template, let's focus on to other areas that need some fixings. First, the Subscribe gadget. Why is it always there? How the hell do you remove it? Well, removing it might be a little tricky, but there's an easy way to just hide it altogether from showing up - and it works just as good. Here's how..

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#gadget-dock div.gadget-item:last-child, #spk{
display: none !important;
}

Finally a fix for Blogger Dynamic View Templates not Loading Properly

When Dynamic View templates were first introduced close to two years ago, we were awed by it's shiny design and the clean look that the templates gave us. Then we were slightly annoyed by the fact that they were not very much customisable. And then we realised that every now and then, the blog won't load in full - something I used to call the 'Ghost Template' - where only a single 'Subscribe' gadget is shown, and none of that tabs, comments and other stuffs. Turns out, Blogger included a timeout mechanism within the template itself to ensure a fast loading speed when your blog is rendered. If your contents are too large to be loaded within the defined timeout period, it'll just load a stripped down version of your full template.

Luckily, the good people at Global Nomads finally found a fix. Check out their post below.

Fixed: Blogger Dynamic Views Fails to Load Properly

Full Post Title in Timeslide Blogger Dynamic View

Before

After

In Timeslide View, your post titles won't show in full if they're too long. This makes them to be truncated halfway, and it just looks off. Long story short, here's an easy trick to make the titles show in full.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.timeslide #main .title a, .spk{
white-space: normal !important;
}

Google Web Font in Blogger Dynamic View

Before

After

There are about 84 Google Web Fonts that you can readily select from your Template Designer to be used in your Template. On the other hand, there are about 600+ supported web fonts in Google Fonts library - and yes, there's a way to use them in your blog. Here's how:

Note: This method will also work for non-dynamic templates.

Step 1:

Go to Google Fonts and search for the font that you want to use. In my example, I'm going to search for 'Amatic SC'. In your search result, you should see three smaller buttons next to a big blue button that says 'Add to Collection'. You need to click on the middle button (Quick-use).

Step 2:

Now, scroll down to item '3. Add this code to your website', and copy the code shown.

This is what I've got:

<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>

Next, go to your Blogger's Dashboard - Template - Edit HTML - Find for <head> - Paste the code that you've gotten directly below <head>.

Step 3:

Before clicking on 'Save Template', copy and paste '</link>' (without quotes) towards the end of the line that you've just pasted, as such:

<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'></link>

You can now hit the 'Save Template' button.

Step 4:

Go back to the Google Font page and copy the CSS bit from '4. Integrate the fonts into your CSS':

Next, paste what you've copied, WITHOUT THE SEMI-COLON ';' AT THE END OF THE LINE into the box below, then click on 'Generate Code'.

Input the line that you've copied here:

Step 5:

Next, depending on what you want to change, copy one of the CSS codes below, and go to Template Designer - Advanced - Add CSS - paste the whole code - Press enter after the last character of the last line } - Apply to Blog.


a) To change Blog title font (Dynamic View)

#header.header .header-bar span.title a h1{
!important;
font-size: default !important;
}

b) To change post title font (Dynamic View)

.article-header h1.title a{
!important;
font-size: default !important;
}

c) To change body text font (Dynamic View)

body{
!important;
font-size: default !important;
}

d) To change link font (Dynamic View)

a, a:visited, a:hover{
!important;
font-size: default !important;
}

e) To change Description font (Dynamic View)

#header .header-bar .title h3{
!important;
font-size: default !important;
}

As usual, I can't possibly list down the code for all the sections here. So, if there's a particular section that you'd like to change and it hasn't been covered already, feel free to leave a comment, and I'll update the list accordingly.

Replace Loading Gear in Blogger's Dynamic View

Before

After

If you have a fast Internet connection, you probably wouldn't have noticed a small loading gear that appears before a Dynamic View blog is opened. In any case, in one of my posts written to explain how this loading gear can be removed, a reader asked if it is possible to replace this icon with an icon of your own. You bet it is! I've already answered this question in the comment itself (ages ago). But what kind of person would I be if I expect readers to look for answers within the comment sections? So here it is..

Go to Dashboard - Template - Customize - Template Designer - Advanced - Add CSS - paste the following code (and customize the code as needed) - Press enter after the last character of the last line } - Apply to Blog.

.blogger-gear, .overview-sspe {
background-image: url('http://i890.photobucket.com/albums/ac106/0roburos/Transformers/transition.gif') !important;
height: 90px !important;
width: 125px !important;
}

i) Replace the URL in Line 2 to that of your own icon/image/GIF. Obviously, you need to have your image uploaded to the Internet first, and have its direct link in hand.
ii) Also, you need to change the height and width in lines 3 and 4. according to your new image.
iii) Don't forget to save your changes in the Template Designer, by hitting the 'Apply to Blog' button, that is.

And remember, if your GIF is too large in size, your page will load first before your GIF, and your GIF will never see the light of day.

Gadget Dock Overlaps on Static Page Scrollbar in Blogger Dynamic Views

Before

After

If you have gadgets in your Dynamic View blog, you would have noticed that the dock overlaps on top of the scroll bar when you view one of your static pages. This is especially annoying if the page is lengthy and you need to click on the scroll bar for an easy navigation. Actually, this isn't much of a bug. If you study the structure of static pages in Dynamic Views, you'll understand why this design accident is happening. Personally, I don't see this getting fixed, as it will require some degree of restructuring on Blogger's end. Worry not, here's what you can do on your part to get it (somewhat) fixed.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.viewitem-open #gadget-dock{
position: absolute;
overflow: hidden;
margin-right: 14px;
}
.viewitem-open #gadget-dock:hover, .viewitem-open #gadget-dock.gadget-notifying,.ssyby, .viewitem-open #gadget-dock.gadget-opening{
position: absolute;
width: auto !important;
margin-right: 14px;
overflow: visible !important;
}

I have not fully tested the tweak on all gadgets. If you happen to notice a bug, do let me know.

Change Comment Text Color and Background in Blogger Dynamic View

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.

Step 1: 

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.blogger-comments .comments-content, .ss{
background-color: #272626 !important;
color: white !important;
}
.blogger-comments .comments-content .comment-replies, .ss{
background-color: #3C3939 !important;
color: white !important;
}
.blogger-comments .comments-content .user, .blogger-comments .comments-content .user a, .ss{
color: yellow !important;
}
.comments-content a{
color: #009EB8;
}

Customizations

Note: To change a color, replace either the color-words (eg: white, yellow) or the hex tags (eg: #272626, #3C3939) in the code above according to the table below. You can either use simple color text such as 'red', 'green' 'blue' etc, or, you can generate your own hex color tag if you prefer to use a specific color.

Main Comment Background Color	Replace '#272626' in Line 2 to that of your preferred color.
Main Comment Text Color	Replace 'white' in Line 3 to that of your preferred color.
Threaded Comment Background Color	Replace '#3C3939' in Line 6 to that of your preferred color.
Threaded Comment Text Color	Replace 'white' in Line 7 to that of your preferred color.
Profile Name Color	Replace 'yellow' in Line 10 to that of your preferred color.
Comment Link Color	Replace '#009EB8' in Line 13 to that of your preferred color. To leave it at your blog's default link color, replace '#009EB8' with 'default' instead.

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

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

.bubble.comments-count{
background-color: red !important;
border-color: red !important;
color: yellow !important;
}
.bubble .bubble-tail, .bubble.empty .bubble-tail:after, .ss{
border-color: red transparent transparent !important;
}

To customize the color, change the word 'red' in Lines 2, 3 and 7 above to another color (eg: black, white, blue, etc). To change the bubble text color, change the word 'yellow' in Line 4 above. For specific color options, you can replace the word 'red' with specific color hex code. You can generate specific hex code here.

Important note: At the time of this writing, there's a bug in the Template Designer that isn't letting some users to save their changes. If you're affected, try using IE to save your changes.

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.

Note: This tutorial teaches you how to add a 'Pin It' button for your whole blog, not individual posts.

Step 1:

First things first - backup your template by going to Dashboard - Template - Backup/Restore - Download Full Template. Next, go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.

.pin-it-button-ss{
position: fixed;
top: 23px !important;
right: 230px !important;
z-index: 100 !important;
}

Step 2:

In this step, please enter your blog URL and an address to an image that you'd like to use when your blog is pinned. When you've done inputting these two fields, click on the 'Generate Code' button.

Input the address of your blog here:


Input the address of the image that you'd like to use to pin your blog
(click here if you don't have one):

Step 3:

Go to Dashboard - Template - Edit HTML - Proceed - find for </body> - copy and paste the following code directly above </body> - Save Template:

<!-- ss pinterest starts -->
<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>$(document).ready(function() {function pinitss(){ if (document.readyState !== 'complete') setTimeout(pinitss,1000); else $("<a class='pin-it-button-ss' count-layout='horizontal' href='http://pinterest.com/pin/create/button/?url=&amp;media='><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It'/></a>").insertBefore('#header .header-bar .title');}pinitss();});</script>
<!-- ss pinterest ends -->

Extra: Reposition the 'Pin It' button

To adjust the position of your 'Pin It' button, change the values from Lines 3 and 4 of the code in Step 1. The 'Top' and 'Right' attributes literally means the distance from top and from the right where the button should be placed.

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.

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

#header #pages:before{
border-left: 0px !important;
}
#header .tabs li, .ss{
margin-left:0px !important;
padding-left: 10px !important;
padding-right: 5px !important;
border-left: 1px solid white;
}

Extras

1) To remove the left-most vertical line (to the left of your first link), add the following additional code to your 'Add CSS' box:

#header .tabs li:first-child{
border-left: 0px !important;
}

2) To add an extra vertical line to the right of your last link, add the following additional code to your 'Add CSS' box:

#header .tabs li:last-child{
padding-right:10px !important;
border-right: 1px solid white;
}