Southern Speakers v3.0

Showing Thumbnail Only For Selected Post Sidebar Dynamic Views

2016-05-22T15:29:00.005+08:00

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

2014-11-15T06:11:00.001+08:00

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

2014-10-13T15:53:00.000+08:00

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

2014-08-17T11:05:00.001+08:00

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

2014-07-25T06:47:00.001+08:00

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

2014-05-24T22:14:00.000+08:00

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

2014-05-18T05:50:00.002+08:00

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

2014-01-04T17:30:00.001+08:00

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

2013-12-22T17:00:00.000+08:00

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;
}

Comment Link Next to Blogger Post Title

2013-11-05T15:47:00.002+08:00

Before

After

Finally, a non-dynamic post after a long time (or I should say, a *post* after a long time).. Knowing there's a way to add labels next to post titles, blog reader Amy was curious to know if there's a way to do the same with Comment links - adding the link next to the title, including the comment counter.. Since this doesn't involve a Dynamic template, you have all the reason in the world to believe there must be a way. Personally, I think this tweak could be especially handy, now that the comment link in post footer is more of a hit-and-miss thing. Without further ado, here's how..

Step 1:

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

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Screenshot of the lines to be deleted:

Step 2:

Copy and paste the following lines in place of the deleted lines in Step 1, then click on 'Save Template'.

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a><span> | </span>
              <span class='post-comment-link spk-title-comment'>
                 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a><span> | </span>
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
          <b:else/>
            <data:post.title/><span> | </span>
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
          </b:if>
        <b:else/>
          <data:post.title/><span> | </span>
              <span class='post-comment-link spk-title-comment'>
                  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                      <b:include data='post' name='comment_count_picker'/>
                  </b:if>
              </span>
        </b:if>
      </b:if>
      </h3>
    </b:if>

That will be all. Happy trying :)

Say Hello to Google+ Comments - NOT!

2013-10-14T01:08:00.000+08:00

After careful considerations and long fruitful chats with fellow TCs, I have decided that it is finally time to give G+ comments a try. This is in accordance with Google's effort to keep all their products somewhat unified and tied in a way. Seeing how important Google sees the G+ community, I think it is only fair to give this a shot. It does come with a downside though - You have to have Google Plus account to leave a comment. That, and the lack of a feature to moderate comments under a single tab is kinda off-putting. But I'll give it a whirl anyway and see how it goes. Hello Google+ Comments!

Update: Notification is not working - I'm reverting to Blogger's commenting again. I've been busy with work, and it took me several days to realise I have not been getting any notifications for the comments left in this blog. This is disastrous as it isn't practical for me to view 200+ posts one by one to look for new comments. I've decided to take a U-turn. My faith in G+ comments is seriously dented now, and it's gonna take some serious convincing if I were to switch back to G+ comments again. To those of you who have left G+ comment questions here, I'm afraid I won't be able to see your messages (please repost them once I reactivate Blogger's comment system).

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

2013-09-07T17:22:00.004+08:00

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

2013-08-17T13:15:00.002+08:00

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

2013-07-17T23:38:00.002+08:00

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

2013-06-30T16:36:00.002+08:00

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

2013-05-26T02:14:00.002+08:00

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

2013-05-14T23:26:00.001+08:00

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.

Blogger's New HTML Editor

2013-04-16T16:17:00.001+08:00

This isn't a tweak - more like a guide on how to use Blogger's new 'Edit HTML' box to make tweaks to your blog. I'll get to the point. Most of the times, you do not care what's in the box. You go there when a tutorial sheet requires you to do so, and almost always, you'd use the Search Function in your browser (invoked by hitting Ctrl + F on your keyboard) to look for whatever it is you're looking for.

But with the new editor, you won't see the result that you want to see with this old way of doing things. The tweak is to..

Step 1:

Click anywhere on the 'Edit HTML' box first, and make sure your cursor is placed in the box.

Step 2:

Now, invoke the 'Integrated Search Function' (as they call it), by hitting Ctrl + F on your keyboard. You'd see a new Search Box appear just on top of the Edit HTML box.

Step 3:

Copy and Paste whatever you're finding for in this box, and hit Enter, and you'd find what you're looking for.

Cheers!

Gadget Dock Overlaps on Static Page Scrollbar in Blogger Dynamic Views

2013-03-31T19:06:00.000+08:00

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

2013-02-23T15:44:00.000+08:00

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.

Adding Followers Gadget in Blogger (post-GFC-retirement)

2013-02-02T17:21:00.001+08:00

So, Google decided to retire most of Google Friend Connect's feature last year, though they have mentioned that they will continue to run the service for the 'foreseeable future'. The GFC Follower's gadget, that used to be available in the 'Add a Gadget' list of gadgets, has now been replaced with Google+ Followers gadget. For those of you who are still using GFC's Followers gadget, you can keep using it, until Google decides to pull the plug. But for new users, or for those of you who had your gadget accidentally removed, here's how you can add it back.

The Easy Way

Go to Dashboard - Layout - Add a Gadget (where you want the gadget to appear) - On your left, click on 'More Gadgets', and you should be able to find the Followers gadget there.

If you get an error that says "This gadget is experimental and is not yet available on all blogs. Check back soon", or if some other reason you can't readily add the gadget from the list of gadgets, try the method in the steps below.

The Alternative Way

Step 1:

Go to Dashboard - Layout - Add a Gadget (where you want the gadget to appear) - Look for HTML/Javascript gadget - Click on the plus (+) icon to add the gadget.

Step 2:

In the next window, just copy the URL (the address, as highlighted in the screenshot below) of the page. Once you've copied the address, you can close this window.

My URL looks like this:

http://www.blogger.com/rearrange?blogID=1782490369597539464&sectionId=sidebar-right-1&action=editWidget&widgetType=HTML&referrer=directory

Step 3:

Paste this URL in a text editor (such as Notepad, MS Word, or wherever you feel comfortable editing it). Next, find for the part that says 'widgetType=HTML' in your address, and change it to 'widgetType=Followers'.

My URL looks like this now, after making the change:

http://www.blogger.com/rearrange?blogID=1782490369597539464&sectionId=sidebar-right-1&action=editWidget&widgetType=Followers&referrer=directory

Step 4:

Copy this modified URL, and paste into your browser (preferably the browser that you were using early on, the on that is logged into your Blogger account). Hit 'Enter' on your keyboard, and voila, your Followers gadget is back.

If you get errors while adding the gadget..

Blog reader Adnan Güney suggested the following to beat the error - by changing your blog's title. I haven't actually tried it, but do give it a whirl and let me know how it goes. Go to Settings - Basic - Title - Edit - Add some extra characters towards the end of your title or change your title, then save it.

Changing Comment Bubble Color in Blogger Dynamic Views

2012-12-29T23:50:00.000+08:00

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

2012-12-09T01:35:00.000+08:00

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:

<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=&media='><img border='0' src='//assets.pinterest.com/images/PinExt.png' title='Pin It'/></a>").insertBefore('#header .header-bar .title');}pinitss();});</script>

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

2012-11-20T21:15:00.001+08:00

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;
}

Blog Update

2012-11-19T00:44:00.001+08:00

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.