Southern Speakers v3.0

Highlight Author Comments in Blogger's New Threaded Comment System

2012-01-21T14:13:00.000Z

Still psyched about Blogger's new threaded comment system? Not really? Well, here's something to boost your spirit. In the old system, I used to have a way to highlight author's comments - you know, so that my comments stand out from my readers' comments. Unfortunately, with the release of the new threaded comment system, that tutorial got obsolete. So I dug further, and came up with a way to do the same in the threaded system. As a bonus, this tweak automatically highlights non-threaded old author comments as well! This is a response to blog readers Blaine and magda.

Go to Dashboard --> Template --> Backup/Restore --> Download Full Template --> Close --> Edit HTML --> Proceed --> Find for </body> --> Paste the following code directly above </body>.

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', 'dashed blue 1px')
.css('background','#F0A2A2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px');
</script>

The code in place:

You're basically done. If you want to personalize the highlight's design, see some of the options I've included below. If you have a specific design in mind, and you can't achieve it with the options I've given below, feel free to leave a comment and I'll let you know if and how it can be done.

Personalization:

Border	To adjust your border, modify Line 4 in the code above: .css('border', 'dashed blue 1px') 1) You can change the style of your border. I have used a dashed border. Other options are (simply replace 'dashed' with one of the following words): solid, dotted, dashed, groove, ridge, inset, outset 2) You can change the color to a different plain color. I've used blue in the code above. You can also use hex code for a specific color. 3) You can change the thickness of your border by adjusting the value 1px. If you want no border at all, you can set it to 0px.
Background	You can either use a plain color or an image as your background. I've used a combination of both (white transparent image with light pink plain color). For plain colors without any image, replace Line 5 in the code above with this: .css('background','red') If you want more choices of plain colors, use HEX code instead. I've used a HEX code in the code above. You can get the hex code for a given color from this useful site: .css('background','#F0A2A2') If you want to use only a background image, replace Line 5 in the code above with this (also replace IMAGEURLHERE with the URL of your image): .css('background','url("IMAGEURLHERE")')
Padding	I've included a padding in my code because I think without a padding, the border is too close to my comments. You can set the padding's value to 0 to see what I mean.
Comment Font Color, Size and Type	To adjust comment font color, size and type, refer to my previous tutorial. Change Blogger Comment Font, Size and Color

Change Blogger Comment Font, Size and Color

2012-01-12T20:53:00.000Z

Blogger has released its much anticipated threaded comment system, and so far I'm loving it. Except for one thing - the font looks weird. So I changed the font back to how it was in the old system, and in this post I'm gonna show you how. By the way, a big shout and super thanks to Ekei Henshaw for her generous donation to SouthernSpeakers.

Step 1:

Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Find for /* Variable definitions - Paste the following directly below the lines (See image below)

<Group description="Comment Font" selector=".comments .comments-content .comment-content, .ss">
     <Variable name="sscommentfont" description="Comment Font" type="font"
         default="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 100% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif"/>   
     <Variable name="sscommentcolor" description="Comment Color" type="color" default="#000000" value="#000000"/>
   </Group>

Click on Save Template when you're done. Should you receive a bx error, delete Line 1 and Line 5 from the code above and try again.

Step 2:

Still under Edit HTML, find for /* Comments ----------------------------------------------- */ - Paste the following under the dashed line

.comments .comments-content .comment-content, .ss{
    font: $sscommentfont;
    color: $sscommentcolor;
}

Click on Save Template when you're done.

Go to Dashboard ('House' symbol) - Template - Customize - Advanced.

You should now see a new entry -- Comment Font. Click on it, and the rest is self-explanatory. Another thing. Since you cant view comments on the front page, you won't be able to preview the change using Template Designer. But clicking on 'Apply' will apply the changes. All the best!

Removing Static Pages Titles from Blogger Dynamic View

2012-01-07T17:30:00.000Z

I've seen 3 questions asking about ways to hide a static page's title in Dynamic Views. In an xml template, you can easily hide your static pages title by inserting HTML conditional tags to your template. In Dynamic View, it's even easier.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.viewitem-inner .viewitem-content .article .article-header h1.title a, .ss{
display: none !important;
}

Removing Border and Shadow from Selected Images in Blogger Dynamic View

2011-12-31T11:54:00.003Z

Previously, I wrote a tutorial on how you can remove borders and shadows from your pictures, in a Dynamic View template. The tweak applies to all the pictures in your blog. Blog reader Filipe wants to know if it is possible to remove borders and shadows from a single image alone, instead of applying the tweak to all images. Yes, it is possible, and here's how.

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.ss, .noborderdv img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
}

Step 2:

Compose a post, and upload an image. Once you've inserted the image to your post editor, click on 'HTML' to view its HTML content. This is what you will see:

Step 3:

Change the word 'separator' in the very first line, to 'noborderdv'. This is what your HTML should look like now.

And that's it. To relieve a picture from its border and shadows, just change 'separator' to 'noborderdv', and that image alone will be shadowless and borderless.

Happy 2012 everyone!

Blogger Dynamic View Picture Menu

2011-12-24T09:07:00.003Z

Two weeks ago, I showed a simple way to use pictures as your tab menu, instead of using the conventional plain old text. But I used HTML to go about it, and as it is widely known, Blogger does not allow HTML modification in Dynamic View. So here it is, the same tweak adapted to serve Dynamic View users, using CSS alone...

One important note before you start. If you have a drop-down pages menu in your Dynamic Views, this tweak isn't gonna be useful. I'm not saying it can't be done, just that I didn't bother to cover it as I figured having pictures in a drop-down menu is not gonna be that pretty. Also, it won't work on IE8 and earlier versions of IE (will work on IE9).

Step 1:

First thing first. Get your pictures ready. I'm not gonna show you how to create/design your buttons. But I'll share a cool website that lets you create image buttons easily. Click the link below, and get your buttons created:

CoolText

Once you've created your image, click on Download Image and save it to your computer.

Step 2:

Next, upload your image somewhere and get its direct link. Click here if you're not sure how to do this.

This is the direct link that I have gotten for my image:

http://1.bp.blogspot.com/-j-oI_zmXUbs/TvWAhw1nwDI/AAAAAAAAEhA/-xfZHNFVS-8/s100/google-plus-logo-640.jpg

Get the direct links for all the images that you want to insert into your tab. We're going to insert the addresses of these images into the code in the next step. In this example, I'm going to use 3 images.

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#pages.tabs ul{
margin-left: 5px !important;
}
 
#header .tabs li {
display: inline-block;
height: auto;
line-height: auto;
margin: 0px;
}

#pages.tabs ul li:nth-child(1) a:link{
background: url('http://1.bp.blogspot.com/-j-oI_zmXUbs/TvWAhw1nwDI/AAAAAAAAEhA/-xfZHNFVS-8/s100/google-plus-logo-640.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
}

#pages.tabs ul li:nth-child(2) a:link{
background: url('http://2.bp.blogspot.com/-MFnUdKtV9sk/TvV_MFcrNFI/AAAAAAAAEgg/yVPu_An9dcA/s100/twitter_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
}
 
#pages.tabs ul li:nth-child(3) a:link{
background: url('http://1.bp.blogspot.com/-hBOzFbkILkA/TvV8p4Zzc0I/AAAAAAAAEgE/eqmopszplsA/s105/facebook_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
}

Step 4:

Replace the addresses in lines 13, 20 and 27 above, with those of your images. Also, you may need to change the width of each one of your images to fit your menu better. You can do this by changing the width attribute in lines 16, 23 and 30.

Extra:

If you have more than 4 images, simply add the template below for your additional images. You need to enter the sequence of the picture in line 1. For example, if this is the 4th picture, then replace 'PICTURE_NUMBER' with '4'.

#pages.tabs ul li:nth-child(PICTURE_NUMBER) a{
background: url('IMAGE_ADDRESS') center no-repeat !important;
font-size: 0px;
display: block;
width: 100px !important;
}

May this Christmas be joyous and cheerful, and may the New Year be the best year yet for you. Wishing you lots of love, joy and happiness. Merry Christmas and Happy 2012!

How to Install DAHDI for Asterisk

2011-12-12T18:26:00.000Z

Note: This is a non-Blogger related post

Some of my friends have asked me how to install DAHDI on Linux based system. I was thinking of writing an email, but decided to immortalize the information by blogging about it instead. Back to the actual story. You'd need DAHDI modules installed on your linux machine to make Asterisk's audio conferencing feature work. The Debian virtual disk image that you guys have copied from campus network does not come with DAHDI pre-installed. In this post, I'm gonna show you guys how you can install DAHDI on your Debian. I've tried the installation on Fedora 16, and it works fine as well. Feel free to try it on other Linux distribution.

Step 1:

Launch your Debian, and make sure you have internet access. You can check this by firing up a browser and see if you can search something. If you're already connected to the internet, skip to Step 4. If you can't connect to the internet, on your VirtualBox, go to:

Machine - Settings - Network - Attached to - NAT - OK.

Step 2:

Next, configure your IP address. Make sure it is not set to 'Manual' or anything like that. To configure your IP:

Right click on your network connection (Top Right) - Edit Connections - Choose your connection's name - Edit - IPv4 Settings - Automatic (DHCP) - Apply.

Step 3:

Click on your Network Connections - Disconnect from your current connection - Connect to the connection that you've chosen above. Even if you're already connected to the connection above, you still need to disconnect from it and reconnect again, if you want your machine to get a NAT'd IP.

Now, launch a browser in Debian and verify that you're connected to the internet.

Step 4:

Fire up your Terminal, and go into super user mode by typing the command below.

su‌

Step 5:

Type in (or copy and paste) the command below to get the complete DAHDI package from Digium's server.

wget http://downloads.asterisk.org/pub/telephony/dahdi-linux-complete/dahdi-linux-complete-2.6.0-rc1+2.6.0-rc1.tar.gz

Your download should start automatically when you press Enter.

Step 6:

Type in the following command to 'untar' your DAHDI package:

tar xvfz dahdi-linux-complete-2.6.0-rc1+2.6.0-rc1.tar.gz

Step 7:

By now you should be familiar with entering Terminal commands. Enter the following lines, ONE AT A TIME.

ln -s dahdi-linux-complete-2.6.0-rc1+2.6.0-rc1 dahdi
cd dahdi-linux-complete-2.6.0-rc1+2.6.0-rc1
make
make install
make config

The last three lines will take awhile to install.

Step 8:

If you've done everything right, you should have successfully installed the complete DAHDI package, and your Asterisk audio conferencing should work fine. To verify your installation, type the command below. If you don't see any errors, that means you're fine. Otherwise, you're screwed.

/etc/init.d/dahdi start

One more IMPORTANT thing. Reverse what you've done in Steps 1 and 2, otherwise you won't be able to ping your local machines.

Good luck for your assignments, and happy holidays!

Blogger Picture Menu

2011-12-10T23:49:00.001Z

A famous one for this week - how to add image buttons as menu in Blogger, instead of using text-based menus like Pages gadget and Linklist gadget. It's rather easy actually. Without further ado..

Note: If you're looking for a picture menu in Dynamic View templates, click here instead.

Step 1:

Step 2:

Next, upload your image somewhere and get its direct link. Click here if you're not sure how to do this.

This is the direct link that I have gotten for my image:

http://1.bp.blogspot.com/-RkG2LfcNLOg/TuPyQ3MQ2pI/AAAAAAAAERY/4MYcz9hg0h8/s270/cooltext606586176.png

Step 3:

First, remove any existing menu gadget that you have, and replace it with an HTML/Javascript gadget.

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget (below your header) - HTML/Javascript.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget (below your header) - HTML/Javascript.

Paste the following code in your HTMl/Javascript gadget:

<a href="ENTER_LINK_ADDRESS_HERE">
<img src="ENTER_IMAGE_ADDRESS_HERE"/>
</a>

Step 4:

It is obvious that you need to modify the code given above. Replace 'ENTER_LINK_ADDRESS_HERE' with your link address. Link address is the address that you want your browser to open when you click on it. For example, if you want to have a link to your static page, your link address will be the address of your static page. You get the idea.

Also, replace 'ENTER_IMAGE_ADDRESS_HERE' with your image address --> the one that you've gotten in Step 2. This is what I have now.

<a href="http://www.southernspeakers.net/">
<img src="http://1.bp.blogspot.com/-RkG2LfcNLOg/TuPyQ3MQ2pI/AAAAAAAAERY/4MYcz9hg0h8/s270/cooltext606586176.png"/>
</a>

Click 'Save' when you're done.

Step 5:

You should already see your first button in the menu now. But a menu isn't a menu if it has only one single link. To add more buttons, simply pile on the code in Step 3 and 4. For example, to have three buttons, this is the template that you'll be using. Note that I've just been copying and pasting the code above, with the same code being duplicated three times. Nothing special here.

<a href="ENTER_LINK_ADDRESS_HERE">
<img src="ENTER_IMAGE_ADDRESS_HERE"/>
</a>
<a href="ENTER_LINK_ADDRESS_HERE">
<img src="ENTER_IMAGE_ADDRESS_HERE"/>
</a>
<a href="ENTER_LINK_ADDRESS_HERE">
<img src="ENTER_IMAGE_ADDRESS_HERE"/>
</a>

And the completed code with the addresses in place would look like this:

<a href="http://www.southernspeakers.net/">
<img src="http://1.bp.blogspot.com/-RkG2LfcNLOg/TuPyQ3MQ2pI/AAAAAAAAERY/4MYcz9hg0h8/s270/cooltext606586176.png"/>
</a>
<a href="http://www.southernspeakers.net/">
<img src="http://1.bp.blogspot.com/-4vLIIrq1gBQ/TuP-j7I47rI/AAAAAAAAERw/3ING2Oa1WEE/s200/cooltext606603004.png"/>
</a>
<a href="http://www.southernspeakers.net/">
<img src="http://3.bp.blogspot.com/-ROUqVt9LvnQ/TuP-jw2G4vI/AAAAAAAAERk/p-pE9DYu91g/s120/cooltext606603171.png"/>
</a>

Good luck and have fun.

Remove Loading Gear from Blogger Dynamic View

2011-12-02T23:53:00.001Z

Few readers have asked me if there is a way to remove the loading gear from Dynamic View. I couldn't capture the gear's code back then as it was too quick (and still is), but I've managed to find a way to analyze it. So here's how you can get rid of it.

.ss,.blogger-gear{
display: none;
}

Remove Border and Shadow from Blogger Dynamic View Images

2011-11-27T11:07:00.001Z

First of all, my apologies for being ever so busy. I've been bombarded with lots of MSc level assignments, and they literally sucked the life out of me. Even now I've got lots of things going on in my mind. But that's not gonna stop me from publishing a post this week. I once published a post titled "Remove Blogger Picture Shadow and Border", and eventually this post became one of the most viewed posts in this blog. But as you can tell, it wasn't meant for dynamic view templates. Today, Im'ma show you how you can get rid of the borders and shadows from your dynamic view pictures as well.

img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
}

Whoah!

2011-11-22T19:07:00.001Z

Whoah! 36 new comments. I'm extremely sorry for not being able to reply your comments for the past 1 week. I'll start replying your comments/emails now :)

Assignments

2011-11-17T08:22:00.001Z

Just a quick update. I've been tied up with another assignment, due next Wednesday. I've been getting plenty of emails and comments. My apologies because I don't have the time to reply your comments/emails at the moment. I promise I'll have a look as soon as I'm done with my assignment. Until then. God bless.

Change Blogger Dynamic View Pages Link Color

2011-11-13T12:49:00.001Z

I've been extremely busy for the past few days, and I'm gonna get busy again for another assignment due next week. Back to this week's post. Let's see what I shall write about today **going through my queue of topics to blog about**.. Right, this one sounds interesting. Blog reader Jon Pennington asked how one can change the color of pages links on the black bar. Here's how.

#pages ul li a, .ss.menu-item{
color: yellow !important;
}

If you want to assign separate colors for each one of your links, use the following (assuming you have 3 links)

#pages ul li:nth-child(1) a, .ss.menu-item{
color: yellow !important;
}
 
#pages ul li:nth-child(2) a, .ss.menu-item{
color: red !important;
}
 
#pages ul li:nth-child(3) a, .ss.menu-item{
color: cyan !important;
}

Feel free to replace the color words with hex values (for example: #ffffff) if you need more color choices.

S.O.S.

2011-11-10T20:37:00.001Z

This is a quick update. I have few comments awaiting moderation. First of all, thanks for commenting. Here's the thing. I am very occupied at the moment with my assignment, and it is due Monday. Kinda racing against the time to finish it up. I promise I'll reply all your emails and comments as soon as I find some space for myself. Until then.

Drop-Down Pages Gadget Menu in Blogger Dynamic View

2011-11-05T22:12:00.001Z

Here's a quickie. By default, when you add pages to your Pages gadget in Blogger's Dynamic View, you'd end up with stretching horizontal links. With this simple tweak, you can transform it to a drop-down styled menu instead! This is a response to blog reader OnlyUs.

#header.header .header-drawer #pages.tabs ul li{
margin: 100000px;
}

Also, I've been busy with my school works lately. My apologies if I reply to you guys late. Cheers.

Non-Floating Header in Blogger Dynamic View

2011-11-02T18:05:00.000Z

Floating Header

Non-Floating Header

Last week, blog reader boboq88 asked if there is a way to make headers in Dynamic View to sit at one place, instead of floating around your screen. It took me 3 hours to come up with a fix then. Today I received a similar question from blog reader KY_Metro. So here's the fix, to discipline your header and make it sit at one place, instead of floating all around the place.

UPDATE: This tweak will not work on static pages...

#header .header-bar, #header .header-drawer.sticky, #header .header-drawer{
top: 0px !important;
margin-top: 0px !important;
position: relative !important;
}

body.sidebar #main.hfeed #sidebar{
position: absolute !important;
}

body.sidebar #main.hfeed #sidebar .item{
background: #EEEEEE;
}

Remove Blogger Dynamic View Search Bar

2011-10-27T20:00:00.000+01:00

Should I say more? Maybe I should. Blogger's Dynamic View comes with a little search bar, placed at the top-right corner of your blog page. If you want to remove this search bar, here's how. This is a reply to blog reader Katie.

.header-bar #search{
display: none !important;
}

Adding an Image Next to Blogger Post Title

2011-10-24T18:46:00.000+01:00

The title of this post is self-explanatory. By default, Blogger's post title is a plain text. In this tutorial, I'll show you how you can easily add an image next to your post title.

Step 1:

First thing first. Prepare an image. You need a direct link to an image before you proceed further. Click here if you're not sure how to get the direct link for your image. Also, make sure your image is sized appropriately. You don't want to see a huge image next to your post title.

Step 2:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Expand Widget Template

If you're using the new Blogger interface: Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template

Next, find and delete the following lines:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <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>

The code to be deleted:

Step 3:

Paste the following lines in place of the deleted line in Step 2:

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
    <table><tr>
     <td class='ssybyposttitle'>
      <img src='http://2.bp.blogspot.com/-dyOiQpo23vE/ToC9yKNJ2YI/AAAAAAAADoM/VyR2emKNstE/s50/autobot.png'/></td>
     <td><h3 class='post-title entry-title'>
      <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>
     </td>
    </tr></table>
     <style>
       h3.post-title {
       margin: 0px !important;
       }
     </style>
    </b:if>

New code in place (starting portion)

New code in place (ending portion)

Step 4:

Now, replace the image address in Line 7 above with that of your image (the one that you've gotten from Step 1).

Remove 'Recommend this on Google' from Blogger Post Footer

2011-10-20T12:16:00.000+01:00

I've just realised something new in my template's post footer box, something that wasn't there before --> "Recommend this on Google" text next to my Google +1 button. I don't like it as the text makes my share buttons look out of alignment. So, I've decided to hide it. And here's how.

.goog-inline-block.dummy-container div, .goog-inline-block.dummy-container div iframe ssyby, .goog-inline-block.dummy-container div iframe{
width: 32px !important;
}

Add Header in Blogger Dynamic View

2011-10-17T18:40:00.000+01:00

The Dynamic Views have been great and all, but the lack of customisation options have been off-putting for lots of bloggers, especially those who can't bear to have blogs without headers. That brings us to this post - how to add a header to Blogger's Dynamic View. Well, sort of. This is a response to blog reader MuseElle.

Step 1:

Upload an image to Blogger's post, and get its direct link. Click here if you're not sure how to do this.

Step 2:

Find the tag 's1600' in your direct link. Then, change it to 's380'. You'll need to insert this address into the code in Step 3. See example below:

Before:

http://2.bp.blogspot.com/TpswCGyxlGI/AAAAAAAAD2A/yFmym6cDyS0/s1600/mypic.png

After:

http://2.bp.blogspot.com/TpswCGyxlGI/AAAAAAAAD2A/yFmym6cDyS0/s380/mypic.png

#header .header-drawer.sticky, #header .header-drawer  {
top: 134px;
}
 
#header .header-bar{
height: 165px;
}
 
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 165px;
}
 
#header-container {
height: 205px;
}
 
.viewitem-panel .viewitem-inner {
top: 100px;
padding-bottom: 120px !important;}
 
#header-container #header.header .header-bar span.title{
background: url(http://2.bp.blogspot.com/-oOCWrvF6YMI/TpswCGyxlGI/AAAAAAAAD2A/yFmym6cDyS0/s380/mastercopy.png)
no-repeat center;
margin-left: auto !important;
margin-right: auto !important;
height: 165px;
}

Extras:

1) If you want to change the color of your header area, add the following code to your CSS. Since my header image is white, a white header area will suit best for my blog.

#header .header-bar{
background: white ;
}

2) If you want to remove your blog title and description from your header, add the following code to your CSS.

#header.header .title a h1, #header.header .title h3{
display: none;
}

3) If you want to increase the size of your header image, follow the steps below:

Add all the numeric values (134px, 165px, 205px, 100px) in the code above by the same margin. For example, say you change '134px' to '234px' in Line 2 above. That means you're adding 100px to the original value. You have to make sure all other numerical values are added by 100px as well.
Next, change the 's380' tag to a greater value.

Change Dynamic View's Blog Title Color and Size

2011-10-16T13:53:00.000+01:00

I've been publishing lots of Dynamic View basic customization tutorials lately. All these tutorials are so gonna be moot when the option to customize Dynamic View becomes available. For the mean time, let's focus on this good question that I got from blog reader रवि. He wants to change the color and font size of his Dynamic View's blog title. And here's how.

#header.header .title a h1{
color: blue;
text-shadow: 1px 1px 1px black;
font-size: 56px;
}

Change the values above accordingly.

Color - controls the main color of your blog title
Text-shadow - Controls the outline of your blog title. By default it is set to white. Feel free to play with the values.
Font-size - Controls your blog title's font size. By default it is set to 28px.

You can get a personalized color by replacing the text 'blue' or 'black' with a hex code, like '#0033CC'. Generate your own hex code by visiting the link below:

Hex Color Code Generator

Change Blogger Dynamic View Post Title Color

2011-10-14T13:18:00.001+01:00

While we wait for Blogger to introduce template customising options to Dynamic View, here's how you can change your Post Title's color (in Dynamic View). This is a respond to an anonymous blog reader. I figured the answer will serve better as a post rather than a comment-reply.

h1.title a{
color: #0033CC;
}

See the weird number in the code above (#0033CC)? That is the hex for your color. You can generate your own hex for a color of your choice by going to the following useful link:

Hex Color Code Generator

Enjoy folks.

Change Blogger Dynamic View's Thumbnail Picture

2011-10-12T20:28:00.000+01:00

Click here for a live demo!!

With the exception of Classic Dynamic View, all other Dynamic Views tend to fetch the first Blogger uploaded image from your post and use this image as a thumbnail for that post. You can't readily choose which image you want to use as the thumbnail. Of course, if you have no problem with the first image being the thumbnail for your post, you wouldn't be here. In this tutorial, I'll show you how you can choose a thumbnail picture for each one of your posts in Blogger's Dynamic View. This is a reply to blog reader MarcusRimondini.

Step 1:

Create a new post, and upload the image that you want to use as the thumbnail. Few rules:

Don't upload any other image - we can do that later.
Don't start composing your post yet.
Don't type anything.
Just upload the image that you want to use as your thumbnail.

Click on Edit HTML (as opposed to 'Compose' mode) when you've inserted the image to your editor.

This is what you'll be seeing:

Step 2:

Delete any line break at the top of your HTML. Your HTML needs to be touching the editor's ceiling. There shouldn't be any line breaks above it. The pictures below show how it should and shouldn't be.

Step 3:

Delete the following line from your HTML - the very top line:

<div class="separator" style="clear: both; text-align: center;">

Step 4:

Paste this line in place of the deleted line in Step 3:

<div class="separator" style="display: none; clear: both; text-align: center;">

Step 5:

That's it. You've chosen a thumbnail picture for your post. If you've done the steps right, when you switch over to 'Compose' mode, you won't be seeing your thumbnail picture anymore. Yes, I said that right - you won't be seeing it. Nevertheless it is there. You can start composing your posts, and bring the other pictures in.

Since the thumbnail picture is no longer there, you need to bring the picture again if you want it to appear in your post. The picture that you've uploaded above is for your thumbnail. If you want the same picture to appear in your post, you need to re-insert/re-upload the picture to your post, like you normally would.

Enjoy folks. And welcome to Southern Speakers v3.0!

Blogger Label Specific Gadget

2011-10-11T03:05:00.003+01:00

I can't think of a better title for this post. This is what the tutorial does. Say you have a gadget, and you want the gadget to be displayed only on post pages that have a particular label. The gadget won't be shown in any other pages- this includes your homepage, static pages and other post pages that don't have the said label. This question was asked by blog reader Ranjan. Sorry for the delay buddy.

Step 1:

Go to Dashboard - Layout - Add a Gadget - and add the gadget like you normally would.

Step 2:

Identify the gadget's unique ID. Click here to learn how you can identify your gadget's ID. For the sake of this tutorial, I'm going to be using the gadget ID #Text1.

Step 3:

Go to Dashboard - Template - Edit HTML - Expand Widget Templates - Find for </b:skin> - Paste the following code directly below </b:skin>:

<b:if cond='data:blog.url != &quot;http://yoboy-testblog7.blogspot.com/search/label/texthide&quot;'>
<style>
#Text1{
display: none;
}
</style>
</b:if>

Replace the address in Line 1 in the code above with the address of your label page. You can get the address of your label page by clicking on your label. It goes without saying that this is the label that you will be using to 'show' your gadget. I'll be using the label 'texthide' because I haven't had my coffee and I can't think of anything smart right now.

Also, replace the ID in Line 3 above with the ID of your gadget.

Step 4:

Find for <b:loop values='data:post.labels' var='label'> - paste the following lines directly below it:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
            <b:if cond='data:label.name == &quot;texthide&quot;'>
             <style>
              #Text1{
              display: block !important;
              }
             </style>
            </b:if>
          </b:if>

In Line 2, replace 'texthide' with the name of your label. And don't forget to change the Gadget ID in Line 4 above with that of yours.

My apologies if you find the tutorial messy. I tried hard not to bring Javascript in. So yeap, the tweak above is completely HTML-based. And I haven't really had the time to check for bugs thoroughly. Let me know if you find any.

Hide Share Buttons in Blogger Dynamic Views

2011-10-05T20:36:00.002+01:00

Blogger's Dynamic Views come with three default share buttons for each post - a Google +1 button, a Tweeter button, and a Facebook Like button. There's no option to turn it off as of now. In this quick tutorial, I will show you how you can hide all these buttons, or any one (or two) of them.

Hide All Buttons:

.share-controls{
display: none !important;
}

Hide Google +1 Button:

.share-plusone{
display: none !important;
}

Hide Tweeter Button:

.share-twitter{
display: none !important;
}

Hide Facebook Like Button:

.share-facebook{
display: none !important;
}

That will be all folks.

Disable Certain Dynamic Views in Blogger

2011-09-30T03:13:00.000+01:00

So you can set your homepage to show one of the 7 Dynamic Views by default. The problem is, your blog might look good in some other views, and let's just say you don't want your readers to see your blog in some of the other dynamic views. And the black bar at the top of your blog offering your readers to choose their own dynamic view isn't exactly helping your blog to maintain its consistency. In this tutorial, I'm gonna show you how you can shave off some of these other view options from the black bar - so that your readers will be stuck with what you want them to see - unless of course if your readers know the URL trick, or if they use Internet Explorer.

#Classic.ss, #views ul li:first-child , 
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),  
#Mosaic.ss, #views ul li:nth-child(4), 
#Sidebar.ss, #views ul li:nth-child(5), 
#Snapsnot.ss, #views ul li:nth-child(6), 
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}

Step 2:

Now, time to shave things off. Remove any line from the code given in Step 1, if you want the corresponding Dynamic View to show.

For example, if I want my readers to see only 'Flipcard' and 'Mosaic' dynamic views, I'd remove the lines that say 'Flipcard' and 'Mosaic' from my Template Designer. So the code will look like this:

#Classic.ss, #views ul li:first-child , 

#Magazine.ss, #views ul li:nth-child(3),  
 
#Sidebar.ss, #views ul li:nth-child(5), 
#Snapsnot.ss, #views ul li:nth-child(6), 
#Timeslide.ss, #views ul li:nth-child(7)
{
display: none !important;
}

There's only one rule to the trick above. Pay Attention. Whatever you remove, make sure the very last option doesn't end with a comma.

If you see the example I've given above, all the views has a comma (,) at the end of the line, except for the last one - 'Timeslide'. If you decide to remove the 'Timeslide' line, make sure you remove the comma from the line above, like this:

#Classic.ss, #views ul li:first-child , 
#Flipcard.ss, #views ul li:nth-child(2),
#Magazine.ss, #views ul li:nth-child(3),  
#Mosaic.ss, #views ul li:nth-child(4), 
#Sidebar.ss, #views ul li:nth-child(5)
{
display: none !important;
}

See how the last line above does not end with a comma? I've highlighted this line to make it easier for you to see. Again, just one rule. Make sure the last dynamic view in the list above does not end with a comma. Just remove the comma, if there is any. All other preceding views must end with a comma.

Extra:

To get rid of the whole menu/link of choices, add the following to your CSS:

#views{
display: none !important;
}

#header #pages, #header #pages:before{
border-left: 0px !important;
}

That's all folks. Don't be asking me why it won't work in Internet Explorer - I can't answer that question without being sarcastic.

Change Blogger's Dynamic View Background

2011-09-29T23:11:00.000+01:00

Click here for a live demo!!

Technically, the title should read 'Change Blogger's Dynamic View Content Background'. Unless you've been living under a rock, you would have known about Blogger's 7 new ways to display your blog. Yes, I wrote 'display', not 'view'. That means you can set your homepage to show in a dynamic view by default. But I'm not gonna write a review on how awesome the dynamic view is - as hundreds, if not thousands, of bloggers are already on that course. In this tutorial, I'm gonna show you how you can change the pale white background to a background image of your choice. You might be wondering why not just use the Template Designer to change Dynamic View's background instead. Yes you can, but you will only be able to change your main background - your contents will still show the white background. Hence, this much needed tutorial.

Update: I've included the code necessary to extend the tweak to static pages as well.

Step 1:

Prepare an image to be used as a background. I'll be using the default background from one of the 'Awesome Inc' templates. Once you've got the image, upload it to an online hosting site and get its direct link. Click here if you're not sure how to do this.

Step 2

Note: This code will work on all 7 Dynamic Views. At first I was thinking of providing code for each view in this tutorial, but I don't think it is necessary anymore, as your reader can easily switch from one view to another. And when that happens, it'll be nice to see the same customised background on that other Dynamic View that your reader switches to.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#items li, .overview-inner, #content, .item.hentry.selected,  .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content  {
background: url('http://img641.imageshack.us/img641/7830/imageuft.jpg') fixed !important;
} 

.items.hfeed{
background: transparent !important;
}

Don't forget to change the address in Line 2 above to that of your background image (the one that you've gotten from Step 1)

Extras:

1) If you want to use a color as your background instead of an image, use the code below. Replace '#FF8809' in Line 2 with another hex that you like. You can generate hex code based on your preferred color by clicking here.

#items li, .overview-inner, #content, .item.hentry.selected,  .item.hentry.open, .item.ybyss, #feature, .overview-inner, .column .item, .viewitem-content  {
background: #FF8809 !important;
} 
.items.hfeed{
background: transparent !important;
}

2) Note that you can use the Template Designer's 'Background' tab to upload a main background to your blog's body. As I've mentioned before, this tutorial adds background to the content page only, as you can easily use the Template Designer to add a background to your blog's body. Personally I think it is best to add background to both content and the body. It gives the 'customised' look that your blog deserves - thus distinguishing your blog from other blogs that use Dynamic View. If you think the background uploaded using Template Designer does not cover the entirety of your blog's body, add this to your CSS code instead (same instruction as in Step 2):

#header .header-bar, body, .viewitem-inner{
background: white url('http://img685.imageshack.us/img685/9514/imageeo.png') fixed;
}

3) In Magazine view, when you hover over a particular post, the post will seem to be highlighted by a white box. To change the background color of this post, add the following CSS to your Template Designer. Feel free to change the color pink to another color or image.

#lead .item:hover, #feature .item:hover, #fold .item:hover{
background: pink !important;
}

4) I've only provided one background layer for each view. It is possible to customize the background even further. For example, in Magazine view, you can apply one set of background on the front view, and another set when you click on each post. They are highly customizable that I couldn't cover everything in this tutorial. I figured it'll be best if I take requests instead of trying to cover every single outcome. So, if there is a background-layout design that you desire, feel free to leave a comment and I'll provide you with the code that you need.

Happy Blogging folks, and be Dynamic! I'm gonna remain Old-School for now.

Obtaining Direct Links from Blogger Uploaded Images

2011-09-29T18:45:00.000+01:00

This is not a full-featured tutorial by itself. Rather, the tutorial in this post will serve as a useful tool for many applications. In many instances, you will find yourself needing to upload an image to an image-hosting site and get its direct link. While it is perfectly okay to upload your image to famous image-hosting sites such us imageshack and photobucket, you will find it useful if you upload your images to Blogger's post editor instead. Yes, the next time someone asks you to take a screenshot of your computer and upload to an image-hosting site, you can use Blogger's post editor to do so. On top of that, you get to resize your image easily by changing it's address, if you upload your image to Blogger.

Step 1:

Go create a new post, and upload an image like you normally would. You don't have to publish this post.

Step 2:

Once you've uploaded and inserted your image to the post editor, click on 'Edit HTML' (as opposed to 'Compose' mode). You will see some HTML lines like the one shown below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-92dKzJAK6ac/ToCpkIUsmdI/AAAAAAAADoI/aGz4gdnNvG8/s1600/autobot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://3.bp.blogspot.com/-92dKzJAK6ac/ToCpkIUsmdI/AAAAAAAADoI/aGz4gdnNvG8/s1600/autobot.png" />
</a></div>

Step 3:

If you look closely at the HTML lines, you will notice two set of addresses. The first one is next to the 'href' tag, and the second is next to the 'src' tag. All you have to do is copy the address next to the 'href' tag. I've highlighted the address that you need to copy in the example below:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-dyOiQpo23vE/ToC9yKNJ2YI/AAAAAAAADoM/VyR2emKNstE/s1600/autobot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-dyOiQpo23vE/ToC9yKNJ2YI/AAAAAAAADoM/VyR2emKNstE/s1600/autobot.png" /></a></div>

And that's it. You've gotten the direct link to your Blogger uploaded image. But wait, check out the bonus section below to see why Blogger uploaded image is special.

Bonus

This is the extracted direct link that we've gotten from the previous step.

http://3.bp.blogspot.com/-92dKzJAK6ac/ToCpkIUsmdI/AAAAAAAADoI/aGz4gdnNvG8/s1600/autobot.png

This direct link is special because Blogger allows you to resize your image by simple altering this link. All you have to do is change the '1600' in the line above, to a smaller number, and your image will resize accordingly. For example, if you open the link above in your browser, you will see a (relatively) large image. And if you open the same altered link below, you will see a down-scaled version of the same image.

http://3.bp.blogspot.com/-92dKzJAK6ac/ToCpkIUsmdI/AAAAAAAADoI/aGz4gdnNvG8/s40/autobot.png

Hope you will find this trick useful.. Cheers and God bless.

Open Blogger Picture Gadget Links in New Tabs

2011-09-25T15:13:00.000+01:00

When you upload a picture to Blogger's picture gadget, you have the option to include a link to that picture. By default, the link loads on the same tab where the gadget is located - thus shifting your reader away from your domain. The tweak in this page will show you how you can make the link open on a new tab. Let's cut to the chase shall we?

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Expand Widget Template

If you're using the new Blogger interface: Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template

Next, find and delete the following lines:

<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link'>

The lines to be deleted:

Step 2:

Paste the following lines in place of the deleted lines in Step 1:

<b:if cond='data:link != &quot;&quot;'>
        <a expr:href='data:link' target='_blank'>

The new lines in place:

Click on 'Save' when you're done.

Note: Repeat Step 1 and 2 for x number of times - where x is the number of picture gadgets in your blog. For example, if you have 3 picture gadgets, the above code will appear 3 times in your template, and you need to make modifications to all 3 of them.

That will be all folks. Cheers and God bless.

Enlarging Blogger Slideshow Gadget

2011-09-22T17:21:00.000+01:00

I've published a tutorial on how you can link your Flickr photo stream to Blogger's slideshow gadget. But the default frame size for Blogger's slideshow gadget is rather small. You can easily make this frame bigger. You won't get the prettiest pictures as you're stretching your original image, but personally I think it's a fair trade-off for this simple CSS trick. By the way, as we're stretching out original picture stream, it will be best if your images are not from a mixed orientation group. In other words, it works best if your images are all of portrait orientation, or landscape orientation.

.slideshow-container{
width: 250px;
height: 300px;
}

.slideshow-container div a img {
min-width: 250px !important;
height: auto !important;
}

Enjoy folks.

Blog Update

2011-09-19T02:41:00.000+01:00

Just came back from California a few days ago after attending Google Top Contributor Summit. And now my internet is back (yeahh). I spent one whole day just to reply Blogger related emails - imagine.

So, some blog updates:

1) I don't take questions directly any longer. But fear not, I am still attending to you guys - only the platform has changed. Previously, you could send a question directly to me via email, and I'd reply to you. Now, you need to post your question in Blogger Help Forum, and if you want my personal attention, head over to the 'Ask a Question' page in this forum, and send me the link to your question thread. I will reply to your question. Nothing has changed, except for how your question reaches me. I have strong reasons to change to this system.

First of all, many of you mis-type your email addresses. I spend lots of time creating a solution for your problem, only to find out that I'd never reach you ever again - since your email address that you leave in the contact form is wrong.
Some of your questions are so unique. With private emails, it was such a shame that I couldn't share the answer with anyone else.
Next - some of the questions that you ask are so simple. Not that I don't answer simple questions, just that it is unfair for your to wait for my looong reply for simple questions - you could get answers within minutes if you post the same question in the Help Forum.
Yes, other users will be able to help you as well. So there's no guarantee that I'll be attending to your question. If you want me to specifically answer your question in the Help Forum, just leave a foot-note at the end of your question requesting me to attend to you. In any case, as long as you summit your question link to me, I will come and have a look. If you're already attended by someone else and if the discussion is on the right track, I might not interfere.

2) Right now I still have few things in my hands to take care of. But I'm seeing good days ahead, so new Blogger tutorial posts will be up in a couple of days - or sooner. Just publishing this post to let you guys know that I am still alive.

Keep blogging, and as always, if you have any problem, feel free to seek for my assistance. I'll be happy to help. Here's a picture of Android 2.3 figurine - Gingerbread, from Googleplex. Cheers and God bless.

Google Top Contributor Summit 2011 Day 1

2011-09-13T21:11:00.004+01:00

Finally, internet connection!! Some pictures from the Google TC Summit 2011, California.

From left: TC MOP TC Katney, Blogger Community Manager Lisa Ding, TC AiresofWar

From left: TC Enviroman, TC Nitecruzr, TC MOP, TC Katney


From left: TC Chavez (Checkout Forum), TC Gill (Docs Forum), TC Martins, TC Enviroman

TC Yoboy

Hide Certain Labels from Labels Gadget

2011-09-04T00:00:00.001+01:00

Two weeks ago I published one of my best Blogger tweaks yet, how to hide certain posts from Blogger homepage. You get to hide certain posts simply by labeling the post 'hide'. One of the ways to view the hidden posts is by clicking on the 'hide' label, or any other name that you've chosen to trigger the hide sequence. Blog reader 'Gardens Jewish Experience' wants this particular label to be taken off from the Labels gadget as well.

In this tutorial, you will learn how to remove a particular label from the Labels gadget. It is completely independent from last week's tutorial. Therefore, you can always use this tweak to hide certain labels from appearing on your Labels gadget.

Step 1:

It goes without saying that you have to have the Labels gadget already added before attempting this tweak. If you don't know how to add the Labels gadget, this tutorial probably isn't for you. Next, access your template's HTML.

In default layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Find and delete the following lines then.

<b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>

The lines to be deleted (Starting portion):

The lines to be deleted (Ending portion):

Step 2:

Paste the following lines in place of the deleted lines above:

<b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
       <b:if cond='data:label.name != &quot;hide&quot;'>
       <b:if cond='data:label.name != &quot;ADDITIONALLABEL&quot;'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
       </b:if>
       </b:if>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
       <b:if cond='data:label.name != &quot;hide&quot;'>
       <b:if cond='data:label.name != &quot;ADDITIONALLABEL&quot;'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
       </b:if>
       </b:if>
      </b:loop>
    </b:if>

New lines in place (Starting portion):

New lines in place (Ending portion):

That is it. I've included two entry-hiding lines above. That means you can hide up to two labels with the code above. If you want to hide more entries, simply duplicate the lines I've highlighted above. Note: For each label, you need to add two conditional tags (example: Line 4 and 22). And make sure you close both of them (Line 16 and 34).

Another thing. I've been extremely busy for the past few weeks, and I expect to be very busy for the next few weeks as well. I'll be moving to a new house, and I'm not gonna have access to the Internet for a few days. My only hope is to use tethering from my Android device to stay in touch with the cyberspace. After that I'll be attending the Google Top Contributors summit, so I'm not sure if I'll be able to respond to your questions in time. My apologies if it take ages for me to get back to your questions and comments. Cheers and God bless.

Hide Certain Posts from Blogger Homepage

2011-08-21T23:58:00.003+01:00

It took me forever to come up with this one. But judging from the length of the code I've posted here, you should be able to tell how hard it was to come up with this one. First thing first - I will be seriously pissed if you try to copy this post, I mean it.

Now, back to the actual post. It has been a popular question/request from many bloggers - how to hide some posts from appearing on Blogger homepage? And now, with the help of labelled filters, you can actually do so. In other words, by labelling your posts 'hide', you can actually hide your post from ever seeing the light of your home page. And -- you can still view the post if you click on your archive or that 'Older post' or 'Newer post' link, or by accessing the post page directly via its URL, among other ways.

Note: I've also included my other famous tweak - 'show date for each post' - in this tutorial. It was necessary. For those of you who have inserted the code to show date for each post from my previous tutorials (link here and here) and want to try this week's tutorial, kindly reverse the steps and remove the old tweak before attempting this week's tutorial.

Step 1:

Backup your template before attempting this tutorial. Next, find for your template's HTML.

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.
In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Next, find and delete the following lines:

<!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'>
            <data:adCode/>
          </div>
          <data:adStart/>
        </b:if>
        <b:if cond='data:post.trackLatency'>
          <data:post.latencyJs/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>

The lines to be deleted (starting portion)

The lines to be deleted (ending portion)

Step 2:

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

<!-- posts -->
<div class='blog-posts hfeed'>
   
 <b:include data='top' name='status-message'/>
   
 <data:defaultAdStart/>
 <b:loop values='data:posts' var='post'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>
<div class='ssyby-date-outer2'>
<b:if cond='data:post.labels'>
<b:if cond='data:blog.url != &quot;http://yoboy-testblog7.blogspot.com/search/label/labelhide2&quot;'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name != &quot;hide&quot;'>
<b:if cond='data:label.name != &quot;labelhide2&quot;'>
<b:if cond='data:label.name != &quot;labelhide3&quot;'>
<!-- enter additional conditional label codes here -->
  <div class='date-outer'>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
     <data:post.latencyJs/>
    </b:if>
   </div>
  </div>
<!-- close additional conditional label codes here -->
</b:if>
</b:if>
</b:if>
</b:loop>
<b:else/>
 <div class='date-outer'>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
     <data:post.latencyJs/>
    </b:if>
   </div>
  </div>
</b:if>
<b:else/>
  <div class='date-outer'>
<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
     <data:post.latencyJs/>
    </b:if>
   </div>
  </div>
</b:if>
</div>
<b:else/>
  <div class='date-outer'>
<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
     <data:post.latencyJs/>
    </b:if>
   </div>
  </div>
</b:if>
 </b:loop>
 <data:adEnd/>
</div>

The code in place (starting portion)

The code in place (ending portion)

Step 3:

You're already done! To hide a post from your main page, just label it 'hide'. And it is very important NOT TO INCLUDE any other labels when you use the hiding label. That means, the hiding label should be the sole label for a post if you decide to hide it.

You can customize the label from 'hide' to a text of your own by changing line 14 in the code above. Enjoy folks!

Show All Hidden Posts in Label Page

You might want to hide some of the posts from your home page, but show the posts when you click on the 'hide' label page, or whatever label name you choose for this purpose. To enable this, all you have to do is change the URL in line 12 in the code given in Step 2. You need to replace the URL above with the URL of your hiding-label page. You can find out the link to your hiding-label page by clicking on the hiding-label from your label's gadget. For example, if you decide to use the 'hide' label as your hiding-label (boy this sounds confusing, but it is not!), simply click on 'hide' from your 'Label' gadget and you shall get the address of your hiding-label page.

This will be useful if you intend to make use of the label page's URL to categorize your post. Let me just give you an example. At the top of this blog, in my menu, I have a link to my 'Transformers' posts. All the posts that have the 'Transformers' label are grouped there. Each time I use this label, the post will appear in that link, as well as my homepage. If I want these posts to just appear in the link in my tab, and not my homepage, all I have to do is change the label address in line 12 my 'Transformers' label address.

Margin Fix:

If something seems off with the way your posts are arranged in your homepage, fear not. Simply add the CSS code below and things will be fine again.

In default layout: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

In new layout: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.ssyby-date-outer2 .date-outer {
position: relative;
margin-bottom: 65px;
}

.ssyby-date-outer2:last-child {
margin-bottom: -45px !important;
}

Change the value '65px' accordingly.

Took me forever to come up with this one. Simply the hardest tweak I've come up with. Hope you guys find it useful. Cheers.

Removing Border and Shadow from Blogger Signature Image

2011-08-07T15:54:00.000+01:00

Blog reader MeliBusla, and many others, have asked me how to remove borders and shadows from Blogger's signature image. Signature image is an image that you place at the bottom of your post - often automatically. The goal is to let the signature image blend in with your post as much as possible - to create an electronic signature of yourself. But some templates define borders and shadows for all images. As a result, the signature image stands out like any other images in that post, and does not blend in. I've replied to many comments on this in one of my previous posts, but I guess it's about time to give this famous question an answer that it deserves.

Step 1:

I assume by now you would have known how to let Blogger include your signature image automatically in your post. Just to cover all grounds, I'm gonna include this step as well in this tutorial.

First, create a new post, and upload your signature image to that post. You don't have to publish the post, we just wanna obtain the image's internet address. Once you've uploaded the image, click on 'Edit HTML', and copy the HTML code that you see in there.

Step 2:

In the default layout: Go to Dashboard - Settings - Formatting - Post Template - Paste the HTML code there.

In the new layout: Go to Dashboard - Settings - Post and Comments - Post Template - Add - Paste the HTML code there.

Step 3:

In the code that you've just pasted, you will see the tag 'class="separator"'. You need to add another tag next to it --> id="ssnoshadow"

This is what the code will look like with the addition of the new tag:

<div class="separator" id="ssnoshadow" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-iK6jPnD8eu8/Tj6Y9RdY0lI/AAAAAAAADEU/WG2WIsi4cjM/s1600/yo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">'
<img border="0" src="http://4.bp.blogspot.com/-iK6jPnD8eu8/Tj6Y9RdY0lI/AAAAAAAADEU/WG2WIsi4cjM/s1600/yo.png" />
</a></div>

The code in place:

Click on 'Save Settings' when you're done.

Step 4:

Now, go to your Template Designer and add the following CSS code.

In the default layout: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

In the new layout: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#ssnoshadow img{
  padding: none !important;
  border: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

That's all folks. Enjoy your borderless and shadowless signature image.

Adding Google +1 Share Button in Blogger Templates

2011-07-30T15:25:00.000+01:00

The Google +1 button is like a bookmark that you can share with your online friends. It's like a 'tagging' feature that lets you share interesting stuffs with your buddies. Some compare this with Facebook's 'Like' button. Click here to learn more about this button.

You can add this button to your posts, so that your readers can easily +1 your posts (yes, '+1' is the latest verb in town). In designer templates, this button will automatically show up (if your template is not messed up). But in some templates, like Minima for example, you need to add some lines into your template to make the button appear. Some of your designer templates might be missing the button too, and the fix in the tutorial will take care of it.

I am aware of other ways on how you can add the +1 button. The fix in this post is an alternative for those who prefer to work with HTML rather than Javascript. I've not tested it on heavily modded custom templates. Feel free to try it and let me know how it goes. It works well in fixing your designer templates (templates that you can find in Template Designer) and Layout templates (basically Blogger 'approved' templates.).

Step 1:

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout -Grrr.

If you have not enabled your share buttons, it's time to do so now.

In the default layout: Go to Dashboard - Design - Page Elements - Blog Posts - Edit - Check the third box from bottom (Share Buttons) - Save.

In the new layout: Go to Dashboard - Layout - Blog Posts - Edit - Check the fourth box from bottom - Save.

Step 2:

In the default layout: Go to Dashboard - Design - Edit HTML - Check the box next to 'Expand Widget Templates'.

In the new layout: Go to Dashboard - Template - Edit Template - Expand Widget Templates.

Find for <b:include name='feedLinks'/> - Paste the following code directly below this line:

<b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>

The code in place:

There you have it. An easy fix for your +1 button.

Removing Hyperlinks from Blogger Post Pictures

2011-07-23T15:52:00.005+01:00

When you remove the hyperlink off an image from your post, your post image won't be clickable anymore, preventing readers from accessing the larger version of the image. The easy way to do this is by selecting the image on your Blogger post editor, and deselect the button that says 'Link' from your post editor toolbar. You have to do this one by one for each post.

Linked

De-linked

But, what if you've posted hundreds of images across hundreds of posts, and you always want the option to restore the hyperlink in the future? That's where this cool trick comes to play. Yeap, this is a CSS tweak, not an HTML one.

I've prepared more than one code, as it is impossible to have one global code that works for all templates. If it doesn't work on your template, leave a comment and I'll prepare one that will work for you.

If you're using the old layout, go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new layout, go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.post img, .post img a{
position: relative;
z-index: -100;
}

.post img, .post img a{
position: relative;
z-index: -1;
}
.post-outer{
position: relative;
z-index: 1 !important;
}

.entry{
position: relative;
z-index: 1;
}
.hentry img, .separator{
position: relative;
z-index: -1;
}

.post{
position: relative !important;
z-index: 10 !important;
}
.hentry img, .separator{
position: relative !important;
z-index: -1 !important;
}

That will be all folks. Enjoy!

Transformers Dark of the Moon Voyager Class Megatron Review

2011-07-17T18:18:00.000+01:00

Disclaimer: This is not a Blogger post.
Robot to truck review of Transformers Dark of the Moon Voyager Class Megatron. Everything you need to know to achieve perfect transformation from robot mode to vehicle mode.

Transformers Dark of the Moon Leader Class Sentinel Prime Review

2011-07-17T18:16:00.000+01:00

Disclaimer: This is not a Blogger post.
Robot to truck review of Transformers Dark of the Moon Leader Class Sentinel Prime. Everything you need to know to achieve perfect transformation from robot mode to vehicle mode.

Centering Blogger Comment Form

2011-07-16T23:01:00.002+01:00

Here's a quick one. Your comment forms are left-aligned by default. In this post I'll show you how you can center the comment forms in one easy step.

If you're using the old layout, go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new layout, you can find Template Designer by going to Dashboard ('House' symbol) - Template - Customize:

.comment-form{
margin-left: auto;
margin-right: auto;
}

Voila! Enjoy your centered comment form.

Transformers Dark of the Moon Leader Class Ironhide and Transformers Hunt for the Decepticon Voyager Class Sea Spray!

2011-07-09T14:16:00.000+01:00

Disclaimer: This is not a Blogger post.
You know why this is a special week? Because this week I have the Spend-all-I-want-and-get-away-with-it pass. Look what I've got here. Transformers Dark of the Moon Leader Class Ironhide and Transformers Hunt for the Decepticon Voyager Class Sea Spray! If you're in UK, you can get Ironhide for £35.99 at Argos. I know right? And Sea Spray? I picked him up from Amazon for £12.99. Can't wait to get my hands on them. More pictures after the break.

Blogger Slideshow Gadget with Flickr Account

2011-07-03T02:16:00.002+01:00

Today, I'm gonna show you how you can link your (or anyone else's) Flickr account to Blogger slideshow gadget. And as a bonus, I'll show you how you can particularly link a single set (playlist, category) from your Flickr account to play as a slideshow in your Blogger slideshow gadget.

Step 1:

Go to http://www.flickr.com/ - Sign in - Sign in with your username and password. You will see your 'Home' page when you've signed in.

Step 2:

Click on 'You', and note the resulting URL (address in your browser). See the image below for reference. My address is:

http://www.flickr.com/photos/yoboy2/

Emphasize on the name after 'photos' in the address above. That will be your profile address. In my case, it is yoboy2. This is the name that we are concerned with.

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget - Slideshow

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget - Slideshow.

Use the following settings:
Source: Flickr
Option: User
Username: yoboy2

Note: Under username, DO NOT enter your flickr username. Instead, use the profile name that you've gotten from step 2. In my case, it is yoboy2. Once you've entered the 'username', press enter. If you do everything right, your images will be fetched from the Flickr account and shown under preview.

Bonus: Fetching images from a particular Flickr set

You might have lots of pictures, and you might only want certain pictures to play in your slideshow. First, create a set in Flickr by clicking on 'Organize and Create' in Flickr. I'm not gonna go into the details here. If you have already created a set, open the set and note it's URL. The following is the address of one of my sets:

http://www.flickr.com/photos/yoboy2/sets/72157622709112458/

Copy everything from your profile name, until the end. In my case, this will be 'yoboy2/sets/72157622709112458/'. Paste this into the 'Username' column in the slideshow gadget and press enter, and the images from this set alone shall be fetched!

It should be obvious by now that you do not need flickr account's password to play the images in your slideshow. As such, you could easily play someone else's images in your slideshow. For example, if you use my profile name as shown in the example above, you'll be playing my images. I strongly suggest you ask for the permission from the owner of the images that you're going to be playing in your slideshow before adding them to your blog.

And BTW, do watch Transformers Dark of the Moon. The coolest movie ever! If you don't like it, you must hate fun.

Show Date and Timestamp for Each Blogger Post

2011-06-25T22:28:00.001+01:00

Re-tweaked by popular demand! Previously, I wrote a tutorial on how you can tweak your template to show date for each one of your Blogger posts. By default, posts that are published on the same day will have only one date shown, particularly on the last published post. In some templates, posts that are published on the same day are even grouped together (see image above).

In my old tutorial, I replaced the date with the timestamp. In other words, the timestamp had to be sacrificed just to have dates shown on each blogger post. But this time around, I've imrpovised the tweak by using some Javascript. You won't have to tamper with your timestamp to have the dates shown on each post. You get both Date and Timestamp with this tweak, and it's wayyy shorter than the other one!

Note: If you've already done my previous tweak, and wish to 'resurrect' your timestap, please undo/reverse the other tweak first before attempting this one.

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

Find and delete the following lines:

<!-- posts -->
    <div class='blog-posts hfeed'>

      <b:include data='top' name='status-message'/>

      <data:defaultAdStart/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <b:if cond='data:mobile == &quot;false&quot;'>
            <div class='inline-ad'>
              <data:adCode/>
            </div>
          </b:if>
          <data:adStart/>
        </b:if>
        <b:if cond='data:post.trackLatency'>
          <data:post.latencyJs/>
        </b:if>
      </b:loop>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
      <data:adEnd/>
    </div>

The lines to be deleted (Starting portion).

The lines to be deleted (Ending portion).

Step 2:

Copy and paste the following lines in place of the deleted lines in Step 1:

<!-- posts -->
<div class='blog-posts hfeed'>
 
 <b:include data='top' name='status-message'/>
 
 <data:defaultAdStart/>
 <b:loop values='data:posts' var='post'>
  <div class='date-outer'>
<script type='text/javascript'>var ssyby=&#39;<data:post.dateHeader/>&#39;;</script>
   <h2 class='date-header'><span><script type='text/javascript'>document.write(ssyby);</script></span></h2>
   <div class='date-posts'>
    <div class='post-outer'>
     <b:include data='post' name='post'/>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <b:include data='post' name='comments'/>
     </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
     <b:if cond='data:post.isFirstPost'>
     <data:defaultAdEnd/>
     <b:else/>
     <data:adEnd/>
     </b:if>
      <div class='inline-ad'>
       <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
    <b:if cond='data:post.trackLatency'>
     <data:post.latencyJs/>
    </b:if>
   </div>
  </div>
 </b:loop>
 <data:adEnd/>
</div>

The code in place (Starting portion).

The code in place (Ending portion).

Another southern original. Enjoy folks.

Transformers Dark of the Moon Advanced Screening

2011-06-21T16:31:00.001+01:00

Another non-Blogger related post. I managed to secure a ticket for the advanced screening of Transformer Dark of the Moon, happening on Tuesday, 28 of June, at 9PM. And I was the first one to get the ticket! Hooray!

Transformers Dark of the Moon: Sentinel Prime and Megatron

2011-06-21T16:29:00.000+01:00

Finally, a Transformers post! My toys are here!! Transformers Dark of the Moon Leader class Sentinel Prime and Voyager class Megatron. Got them for a good deal from Toys R Us, buy 1, get 2nd one for half-price. I was expecting to get them last week itself, but the toys got lost, and Toys R Us were kind enough to send me another one (well, two actually). And here they are! Gonna keep them MISB (not gonna open them) at least until next month. More pictures after the jump.

Rounded Corners for Blogger Widgets

2011-06-19T21:43:00.000+01:00

Some time ago, blog reader dirtycowgirl asked if there's a way to give rounded corners for blogger post boxes. Last week, DCG asked if it is possible to extend the tutorial to cover the entire blog. So here it is folks, a tutorial on how you can give rounded corners to your widget boxes. Refer to the other tutorial on how you can give rounded corners to post boxes. BTW, this tweak works best for designer templates (built-in Blogger templates). Even though I put on a lot of efforts to make the tutorials in this blog as generic as possible, sometimes it is just impossible to cover all grounds. In case this tweak doesn't work for you, feel free to leave a comment and I will advise you accordingly. Oh, it won't work in most IEs. I'm not sure about IE9 though, feel free to give it a try.

Step 1:

I decided to divide and conquer this time. For the first step, we're gonna apply the tweak to all widget boxes except for Pages/Linklist gadget, because they tend to vary a lot across different templates. Here's what you should do:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.widget, .blog-pager{
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-goog-ms-border-radius: 10px !important;
border-radius: 10px !important;
}

At this point most (almost all) of your widget boxes should have been tweaked.

Step 2:

And now, for Pages/Linklist gadget. I tried my best to generalize this one, but I can't promise if it will cover all templates. Just give it a try, and if it doesn't work, leave a comment. If you've applied my Pages Gadget No-Stretch tweak, please reverse/undo the tweak before attempting this step.

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for /* Headings ----------------------------------------------- */ - Paste the following code directly above it (see the screenshot):

/*--SS Pages Gadget Rounded Corners Starts--*/
.tabs-outer {
background: transparent !important;
}
 
.cap-top, .cap-bottom{
border: none !important;
}
 
#crosscol{
background: transparent !important;
border: none !important;
}

.tabs-inner .widget ul {
background: transparent !important;
border: none !important;
}

.tabs-inner .widget li:first-child a{
border-left: 1px solid $(tabs.border.color) !important;
}
.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
border-top: 1px solid $(tabs.border.color) !important;
border-bottom: 1px solid $(tabs.border.color) !important;
background: $(tabs.background.color) $(tabs.background.gradient);
}

.tabs .widget ul li:first-child a{
-moz-border-top-left-radius: 10px !important;
-webkit-border-top-left-radius: 10px !important;
-goog-ms-border-top-left-radius: 10px !important;
border-top-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-goog-ms-border-bottom-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}

.tabs .widget ul li:last-child a{
-moz-border-top-right-radius: 10px !important;
-webkit-border-top-right-radius: 10px !important;
-goog-ms-border-top-right-radius: 10px !important;
border-top-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-webkit-border-bottom-right-radius: 10px !important;
-goog-ms-border-bottom-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}

/*--SS Pages Gadget Rounded Corners Starts Ends--*/

If you get "Invalid variable declaration" error, use this one instead:

/*--SS Pages Gadget Rounded Corners Starts--*/
.tabs-outer {
background: transparent !important;
}
 
.cap-top, .cap-bottom{
border: none !important;
}
 
#crosscol{
background: transparent !important;
border: none !important;
}

.tabs-inner .widget ul {
background: transparent !important;
border: none !important;
}

.tabs-inner .widget li a{
border: none !important;
background: $(tabs.background.color) $(tabs.background.gradient);
}

.tabs .widget ul li:first-child a{
-moz-border-top-left-radius: 10px !important;
-webkit-border-top-left-radius: 10px !important;
-goog-ms-border-top-left-radius: 10px !important;
border-top-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-goog-ms-border-bottom-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}

.tabs .widget ul li:last-child a{
-moz-border-top-right-radius: 10px !important;
-webkit-border-top-right-radius: 10px !important;
-goog-ms-border-top-right-radius: 10px !important;
border-top-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-webkit-border-bottom-right-radius: 10px !important;
-goog-ms-border-bottom-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}

/*--SS Pages Gadget Rounded Corners Starts Ends--*/

The code in place (Ending portion)

That will be all. And, the Transformers post got delayed due to unforeseen circumstances. Hopefully there will be one sometime in next week, if I'm still alive. Cheers and God bless.

Changing Blogger Pages Gadget Background and Text Color

2011-06-11T13:12:00.002+01:00

No update for 3 weeks, can you actually believe this guy? Anyways, here I am. I've been really tied up due to work and assignments. I've been replying all the contact-form questions though. Which brings me to this week's post. Blog reader Skaerf asked if there is a way to change the background or/and text color of the pages gadget. Yeap, there is. Let's cut to the chase shall we?

Solution:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left{
background: black;
color: white;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover{
background: yellow;
color: red;
}

Change the words 'black' and 'yellow' to some other colors to change the background color of your pages gadget. And similarly, change 'white' and 'red' to some other colors to change the text color of your pages gadget. You're seeing four different colors defined in the code above because some template highlights the selected tab, that is the tab that contains the page which is being currently viewed in the browser. See the image below to see which color in the code above does what:

Bonus:

If you want a little bit more control, instead of going for basic colors (black, white, red, yellow, etc), you can choose a customised color using hex code. First, go to this useful website:
Hex Color Code Generator

And click on the color that you want, and copy the resulting hex code. All you have to do now is place the hex code in the code above. It will look something like this:

.tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left{
background: #000000;
color: #1CE8F7;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover{
background: #E41619;
color: #FFEF16;
}

And that will be all folks. I'm still contemplating on what to post for next week. If you have useful suggestion/question, do use the contact form to shoot it at me. And I might publish a Transformers-related-post some time next week. This blog is not entirely about Blogger tweaks you know? Don't say I didn't warn you.

Blogger Fixed Length Date Format

2011-05-21T01:30:00.002+01:00

If you choose your date to show in this format --> "Thursday, January 20, 2011", the length of this field will vary for different dates. For example, compare "Wednesday, September 14, 2011" and "Friday, May 6, 2011". In this tutorial, I'll show you how you can easily alter the date format to show in a fixed length size.

Why does it matter? It doesn't. I spent hours to come up with this solution, and self-taught some Java to myself along the process. Answers like these are too good not to be shared here. Well, that and you get a fixed size for your date field, something that might help you shape your template in your own way.

Step 1:

Make sure you're using the right Date format.

If you're using the old Blogger Interface: Go to Dashboard - Settings - Formatting - Date Header Format - Choose the fifth option from the drop down menu - Save Settings.

If you're using the old Blogger Interface: Go to Dashboard - Settings - Language and formatting - Date Header Format - Choose the fifth option from the drop down menu - Save Settings.

Step 2:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates' -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates' -

Find and delete the following tag:

<data:post.dateHeader/>

If you find the same tag twice in the same template, ignore the one that has the word 'mobile' anywhere around it.

The right tag to be deleted, in place (might be different in your template)

Step 3:

Paste the following lines in place of the deleted tag above:

<script type="text/javascript">var str='<data:post.dateHeader/>';var southerns=str.split(" ");var day=southerns[0].split("");var month=southerns[1].split("");document.write(day[0] + day[1] + day[2] +"," + " " + month[0] + month[1] + month[2] + " " + southerns[2] + " " + southerns[3]);</script>

The code in place:

That will be all folks. Cheers and God bless.

Blogger Post Title Changes Color on Post Page

2011-05-14T18:07:00.004+01:00

In some of the designer templates, the post titles will have a different appearance in post pages, when compared to the post titles in the homepage. Often, the title's font is smaller and has plain font color. In some templates, the font is completely different.

Why is it so? Well, it is made that way. Nothing is wrong with it. But you can make the post titles in post pages look like the ones in the homepage, easily.

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for for the following line: /* Posts ----------------------------------------------- */ - Paste the following directly below it - Save Template:

h3.post-title {
font: $(post.title.font) !important;
color: $(link.color) !important;
}

If you're using Travel Template, use the following code instead:

h3.post-title {
font: $(post.title.font) !important;
color: $(post.title.text.color) !important;
}

The code in place:

That will be all folks. Hope you guys are finding the new Blogger UI shiny and useful. If you need help with anything, use the contact form to get in touch with me. Cheers and God bless.

Remove Blogger Sidebar and Maximize Main Width on Selected Pages

2011-04-30T22:11:00.006+01:00

This one is a famous request in Blogger Help Forum - how to hide the sidebar on one of the static pages, and make the main blog show in full width in that page, and in that page alone. Usually, I'd give a personalize solution for each asker, as each one of them had different blog with different template that had different settings. Today, I finally took the time to generalize this tweak. Anyone can use the solution in this page, and you'll get what you want - refer to the title, I'm not gonna repeat what this tutorial does. Or maybe I will. You get to hide your sidebars (doesn't matter left, right or both) and use that space to widen your main posting area, on pages that you choose. You can apply this tweak both on your static pages and/or your post pages (the page that loads when you click on the title of your posts).

Click here for a live demo.

Did I mention that this is a one-step tutorial?

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for </b:skin> - Paste the following directly below </b:skin> - Change the address in Line 1 to the address of your page.

<b:if cond='data:blog.url == "http://yoboy-testblog7.blogspot.com/p/bla-bla.html"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

The code in place:

Again, don't forget to change the address in Line 1 to the address of your page. If you want to apply the tweak to more than a page, just copy and paste another set of similar code below the first one, and place the other page's address on the second code. If you want to apply the tweak to all of your static pages, see the Bonus section below.

Bonus:

If you want to apply the tweak to all of your pages, instead of addressing the page one by one, use the following code:

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

To apply the tweak to all your post-pages (the page that opens when you click on the title of your post), which might not be a good idea, use the code below:

<b:if cond='data:blog.pageType == "item"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

That will be all folks, now go have fun.

Rounded Corners for Blogger Posts

2011-04-22T12:48:00.001+01:00

Happy Easter everybody! There wasn't a post last week, as I was too busy in the forum helping people. So here I am, this week, with a brand new post. Blog reader (dirtycowgirl) asked if "there is a simple way to round off the corners on blog posts". I'll show a way to make your posts have rounded corners in this week's post. Did I mention that it is a one-step tutorial?

If you're using Simple, Ethereal or Travel template, this tutorial will not be any good to you as these templates don't have corners for the post sections at all.

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for /* Posts ----------------------------------------------- */ - paste the following code directly below this line:

.date-outer, .post-outer {
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-goog-ms-border-radius: 10px !important;
border-radius: 10px !important;
}

The code in place:

To adjust the radius of the corner, change the values 10px above to something else (all four of them).

Some of you might be wondering what will happen if you add this code directly in Template Designer (Template Designer - Advanced - Add CSS). You can still do that, but your corners won't be rounded in Internet Explorer. Even with the method that I've shown above, you can only get rounded corner for the top two corners in IE. That's just the way IE works, don't ask me why.

That's all folks. Again, Happy Easter. Cheers!

Hide Blogger Image from Post Page but not from Main Page

2011-04-10T17:55:00.004+01:00

Some of you might be wondering why would anyone want to hide images from the post page but show them in the main page. Well, the reason is that, these images can be used to create TGPs - Thumbnail Gallery Post. The images will appear in the main page, but when the post page is viewed, the images won't be there anymore. Sort of a welcoming committee for a certain event, you see them early on, but they won't be involved in the actual event itself. You get the idea. Let's cut to the chase shall we?

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for </b:skin> - Paste the following code directly below </b:skin>

<b:if cond="data:blog.pageType != &quot;index&quot;">
<style>
.ssmainhide{
display: none;
}
</style>
</b:if>

The code in place:

Step 2:

Go ahead and upload an image to your post. When you click on Edit HTML, the HTML portion of the image will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s1600/P1010367_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s320/P1010367_edit.JPG" width="320" /></a></div>

All you have to do now is, change the word 'separator' in the first line of the HTML, to 'ssmainhide'. You don't have to do this for all the images, just do this to the image that you want to hide from the post page.

The HTML for your image should look like this now:

<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s1600/P1010367_edit.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s320/P1010367_edit.JPG" width="320" /></a></div>

That will be all. The image that you have modified will appear in mainpage, but not on your post page. Cheers and God bless.

Blogger Paragraphs Turn Into One Long Sentence

2011-04-10T16:58:00.001+01:00

Google has recently released some code updates, and unfortunately these updates are causing troubles to Blogger users that are using Internet Explorer browser with the Old Blogger Editor. In this post, I will show three techniques to temporarily work around this issue.

Method 1: Change to Updated Editor.

The issue is only affecting those who are still using the Old Editor. You won't be seeing the problem if you upgrade to the Updated Editor. It has been out for quite some time now, and it has lots and lots of new features. Besides, with the upcoming New Blogger Layout, I think it will be a good idea to tame yourself with the Updated Editor, if you have not already done so.

To upgrade to the Updated Editor, go to Dashboard - Settings - Basic - Select Post Editor - Updated Editor - Save Settings.

Method 2: Change your browser.

You will only be seeing this problem if you're using Internet Explorer (and probably AOL browser as well). Switch to a different browser, and your line breaks will be fine. So far, users who have been using Firefox, Google Chrome, Opera, Safari and other browsers have not reported any problems. Try to get any one of these browsers to mitigate the issue.

Method 3: Introduce Line Breaks manually.

If you're reluctant to switch to a different browser or editor, then you're left with only one choice - you have to introduce the line breaks in your posts manually (at least until the issue is solved).

Compose your post in Edit HTML mode (as opposed to Compose mode). Instead of just pressing enter, introduce a line break by using the following tag:



In other words, place the tag wherever you want to see a line break. If you'd press the keyboard 'Enter' key twice to start a new paragraph, then you should insert the tag twice instead. Once you've placed the tags, DO NOT GO BACK TO COMPOSE MODE. Switching between compose mode and Edit HTML mode will remove the manually added  tags.

See the screenshot below if you still need help with this.

"Life isn't about waiting for the storm to end, it's about learning do dance in the rain."
— Vivian Greene

Cheers and God bless.

Blogger Header Image too Large

2011-04-03T19:41:00.005+01:00

My first post as an Official Top Contributor in Google Blogger Help Forum. Yeahhh, finally I'm a Blog*Star! But I really need to learn how to better manage my time. I'm finding it really hard to find time to publish blog posts these days. Not to mention the depleting amount of ideas to blog about. It's just a matter of time before I start writing about things that are not Blogger related.

Back to this week's post. This one is for the beginners. I have written a post on how you can resize blogger's header image some time ago. I should have included this method as well, it's not that hard and it's straight forward. It's easier rather. Here comes the intro. When you upload a really huge-dimensioned image to Blogger as your header image, you won't be able to see the entire picture. It will kinda zoom in and crop the side of the picture that does not fit in your blog's width. One can always resize header image before uploading to Blogger. But it is always convenient to easily change the size of the image by just changing a number or two, and I'm gonna show you how.

Before:

After:

Step 1:

I'll be using Firefox in this example. You can use other browsers, the method will be similar. Go to your blog, and right click on your oversized header image. Click on 'View Image'.

Step 2:

Copy your Image's address. We have to change a number in it.

Mine looks like this:

http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s1600/P1010367_edit.JPG

Now open Microsoft Word or Notepad or anything that you can type onto, and paste the address. Locate the s1600 portion near the end of your image's address. Change it to a smaller number like s1000. Now copy the new text instead. (Note: sometimes you will see other numbers instead of s1600, but s1600 is as large as it can get.)

Before:

http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s1600/P1010367_edit.JPG

After

http://2.bp.blogspot.com/--kIkeJaN538/TZix_V4Cd4I/AAAAAAAACz0/orghhQnk3ZE/s1000/P1010367_edit.JPG

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Header - Edit - Remove Image - From the Web - Paste the Address from your word editor.

If you're using the new Blogger interface: Go to Dashboard - Layout - Header - Edit - Remove Image - From the Web - Paste the Address from your word editor.

Your image will load almost instantaneously as soon as you've pasted the modified address into the address field. Once your image is loaded, click on Save.

Check your blog and see if the image is appropriately sized now. If you need to make adjustment, change the value s1000 into something else until you're satisfied with what you're seeing.

That's all folks. Have fun!

Dedicated Labels Page

2011-03-27T14:36:00.001+01:00

This is a reply to blog reader Azzul. Azzul asked if it is possible to give a dedicated page to Labels gadget as well, just like the Archive gadget. Yes you can, I'll be brief and show you how.

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements -

If you're using the new Blogger interface: Go to Dashboard - Layout-

Drag your Labels gadget and place it above your Blog Posts elements.

Step 2:

If you don't already have a static page for your labels, go create one.

If you're using the old Blogger interface: Go to Dashboard - Edit Posts - Edit Pages - New Page

If you're using the new Blogger interface: Go to Dashboard - Pages - New Page - Blank Page

Create a blank page with the title Labels. Once you have created the page, click on 'View Page' and note the address of the page.

Step 3:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for </b:skin> - Paste the following code directly below </b:skin> :

<b:if cond='data:blog.url != "http://yoboy-testblog7.blogspot.com/p/labels.html"'>
<style>
#Label1{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if>

Change the address in the first line to the address of your labels page (the one that you have gotten in step 2).
The code in place:

Step 4:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#Label1, #Label1 a{
text-align: center;
}

That's all folks. Have fun.

How to use Blogger's Linklist Gadget

2011-03-19T14:58:00.003Z

This one is for the beginners. Quite some time ago, Blogger introduced the concept of Static Pages, where you can create up to 10 stand-alone independent pages. To add the links of the pages to your homepage, Blogger came up Pages gadget. Pages gadget is a cool add-on. It sits below the header and serves like a menu bar or navigation bar to your blog. But here comes the down-side: you can't just add any links to your bar (at least not easily). You can only add your static pages' links. In this pictorial walkthrough, I'm gonna show you how you can use LinkList gadget as an alternative to Pages gadget to make your very own customized navigation bar.

Beginners ignore this: For those of you who are looking for ways to dissect and edit your Pages gadget instead of switching to Linklist gadget, you can refer to this post.
Update Note: You can readily add external links in Pages gadget using the new Blogger interface. Do give it a try.

Step 1:

Go to Dashboard - Design - Page Elements - Click 'Add a Gadget' below your header. If you already have Pages gadget sitting there, click Edit - Remove.

Step 2:

Scroll towards the middle of the list and choose LinkList from the list of gadgets. Click on '+' to select.

Step 3:

In the LinkList window, leave the 'Title' and 'Number of items to show in list' fields blank. Let the 'sorting' field be as it is. In the 'Add List Item' field, insert the title of your first link. These are the texts that will appear in your menu bar. Once you've inserted your title, don't click on anything yet, go to Step 4.

Step 4:

Click on the chain icon next to the 'Add List Item' field. Proceed to Step 5.

Step 5:

Enter the address of your first link. Click OK when you are done.

Step 6:

Click on 'Add Item' now.

Step 7:

Repeat Steps 3 to 6 until all the links that you want to add are added. Don't forget to add links to your static pages as well. You can get the links to your static pages by going to Dashboard - Edit Post - Edit Pages - View - Copy the link from your browser's address bar.

Step 8:

Click on the small up (↑) and down (↓) arrows to sort your links out. Click on 'Save' when you are done.

That will be all folks. Cheers and God bless.

Remove Blogger Picture Shadow and Border

2011-03-12T22:40:00.006Z

Couple of weeks ago, I published a post on how you can add shadow around your images. Some templates don't come with this feature, so you gotta add it on your own if you want it. But some of you are using templates that do come with this feature. And if you wanna remove this feature for reasons only God knows why, this week is going to be your lucky week, as I'm gonna show you how you can get rid of the shadows and borders in 1 easy step.

Note: This tweak isn't for Dynamic View templates. To remove borders and shadow from your Dynamic View pictures, see this link --> Remove Border and Shadow from Blogger Dynamic View Images.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

There, you've gotten rid of your annoying shadows and borders. Cheers all.

Doomsday is Inevitable??

2011-03-12T03:21:00.001Z

Since tsunami showed up again in Japan after many years, anyone still skeptical on the Mayan calender on 2012? well im not sure bout that. Anyway our hope and prayers goes to the people of Japanese, a really advanced and strong nation. Here's a poem by me for them and the world:

life is the *****, and death is her sister
sleep is the cousin, what a ****** family picture
you know father time, we all know mother nature
it’s all in the family, really hate when they come over.

if want to post as your Facebook statues. do put my name on it. hahaha. copyright by G

Remove Pages Gadget Background

2011-03-05T14:21:00.001Z

The correct term should be "crosscol background" instead of Pages Gadget background. In any case, I don't know why you wanna entirely remove your background, but in this post I'm gonna show you how can do it. This tutorial teaches you on how you can completely remove your crosscol background. Emphasize on 'completely'. If you want to remove only the stretching part of your crosscol section, check this tutorial instead.

.tabs-outer {
  background: none !important;
}
.tabs-cap-top, .tabs-cap-bottom {
  border-top: none;
}

That will be all folks. Again, if this is NOT what you're looking for, you probably want to take a look at this.

Cheers.

Centering Blogger Adsense

2011-02-24T22:02:00.000Z

I have received a question from a reader (tomjhappy) on how one can make all the AdSense ads in blogger to be centered. Good question. Simple answer, you'd enjoy this mate. By default, when you add an Adsense Ad to Blogger, it will be aligned to left.

With this simple trick, you can center all your Adsense ads in one simple easy step. Yes, all of them.

.AdSense, .inline-ad{
text-align: center;
}

That will be all people, have fun!

Horizontal Blogger LinkList Gadget

2011-02-19T12:55:00.000Z

Instead of using the ever-so-popular Pages gadget, lots of users prefer to use the LinkList gadget as their menu bars. Why? Because with Pages gadget, you can only add links to your static pages (Update: This is no longer true in the new Blogger interface). But with LinkList gadget, you can add external links, links to almost just anything. I've shown you how you can replace your Pages gadget with a LinkList gadget here.

Apparently, some of the older templates do not have proper 'crosscol' definitions to make LinkList gadget behave like the Pages gadget. Ideally, we want our gadget to stretch horizontally from left to right across the page, usually below the header. But this isn't the case for some of the older templates, as the LinkList stretches downwards vertically. In this post, I'm gonna show you how you can easily fix it, and use LinkList gadget instead of Pages gadget as your menu bar.

#crosscol ul{
padding: 0;
}

#crosscol ul li{
display: inline-block;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
}

#crosscol ul{
padding: 0;
}  

#crosscol ul li{
display: inline;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 0px;
padding-left: 0px;
}

.LinkList ul{
padding: 0;
}
 
.LinkList ul li{
display: inline-block;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
}

There you go. Feel free to adjust the left, right, bottom and top paddings as you like. If you want to apply any other modifications, like borders and such, leave a comment and I will assist you accordingly.

Adding Shadow Around Blogger Post Pictures

2011-02-12T22:26:00.000Z

It has been some time since I last composed a post. I moved to another country and I have just settled down - to a certain extent. And now I'm back - hopefully at full swing again. So, today I'm going to show how you can add shadows around your post pictures. I'm not much in the mood for words so let's cut to chase shall we?

Oh, by the way, it won't work with Internet Explorer 8 or any other older version of IE.

.post-body img {
padding: 1px;
background: transparent !important;
border: 1px solid transparent !important;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}

That's it, you're done. If you're looking for a way to customise the outcome of this tutorial, see below for explanations of what each line does, and how you can change it.

Customization:

Padding	This line adds a small gap around your image. It is associated with the next line to it, the 'background' attribute. If you're looking for a way to change the white padding to a different color, see the background section below. If you want to remove the padding, set it to 0px. Example: padding: 0px;
Background	The background attribute adds color to the padding attribute. To change the color, just change the word 'transparent' to something else. For example: background: black !important;
Border	The border attributes works like both 'padding' attribute and 'background' attribute combined. You can set it's width and color all in one line. So why add both padding and border? Well, you can achieve a nice effect by the combination of these two, by setting your padding to be white and your border to be a crisp black line. So, if you prefer it, change the border attribute to: border: 1px solid black !important; To remove the border, use: border: none !important;
Shadow	The last three lines are the lines that control the shadow of your images. There are three lines because the shadow attribute is browser-specific. So for different browsers, a different line must be used. The above three lines are sufficient to cover most browsers. But you will never get it to work in IE, so don't beat yourself about it. You can adjust the horizontal projection of the shadow (let the shadow be more towards the left or right side of the picture), the vertical projection of the shadow (let the shadow be more towards the top or bottom side of the picture), the shadow spread, the color of the shadow and it's opacity. No matter what you do, make sure you apply the changes to all three lines. To adjust the horizontal projection of the shadow (to determine where the shadow will be), adjust the first '3px' values (of all 3 lines). Negative values will bring the shadow towards the left side of the image. To adjust the vertical projection of the shadow, adjust the second '3px' values (of all 3 lines). Negative values will bring the shadow towards the top of the picture. To control the shadow spread, adjust the '10px' values (of all 3 lines). To adjust the opacity of the shadow, adjust the '.8' values (of all 3 lines) To change the color of the shadow, replace 'rgba(0, 0, 0, .8)' with your preferred color. Here's an example. In this example, I'm going to set the horizontal projection of the shadow to be towards the left, the vertical projection to be towards the bottom, the spread to be 3px, and let the shadow be white (in case your blog has a black background). -moz-box-shadow: -6px 5px 3px white; -webkit-box-shadow: -6px 5px 3px white; box-shadow: -6px 5px 3px white;

There you have it. That's how you give your pictures some shadows. Cheers.

Dedicated Blogger Followers Page

2011-02-05T03:00:00.000Z

So you have lots of followers to show to your visitors. And the sidebar is too small to display them all. You'd put it at the top of the blog, but it looks awkward. You'd put it in a dedicated page, but you're afraid the gadget will be hidden there. So what do you do?

Have one followers gadget in your sidebar, and one in a dedicated page! Live de mo here!

Step 1:

If you don't already have a Followers gadget, go add one.

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget - Followers.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget - Followers.

Step 2:

Let's create a dedicated page for your gadget.

If you're using the old Blogger interface: Go to Dashboard - Edit Posts - Edit Pages - New Page

If you're using the new Blogger interface: Go to Dashboard - Pages - New Page - Blank Page

Name it accordingly and publish page. Leave the content of the page blank.

Once you've published the page, click on 'View Page' and get the address (URL) of the page.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

And add the following line above it:

<b:widget id='Followers999' locked='false' title='Followers' type='Followers'/>

The code in place:

Step 4:

Next, under the same page, find for this line:

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

And paste the following below it:

<b:widget id='Text999' locked='false' title='' type='Text'/>

The code in place:

Step 5:

Under the same page, find for </b:skin>, and paste the following lines directly below </b:skin>:

<b:if cond='data:blog.url != "http://www.southernspeakers.net/p/followers.html"'>
<style>
#Followers999{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if>

Change the address in the code above to the address that you have gotten in Step 2. Click on 'Save Template' when you are done.
The code in place:

Step 6:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements

If you're using the new Blogger interface: Go to Dashboard - Layout

Click Edit on the Text gadget below your default Followers gadget - Click on Edit HTML (as opposed to Rich Text) - and paste the following code:

<a href="http://www.southernspeakers.net/p/followers.html">Click here to check out full list of Followers.</a>

Change the address in the code above to the address that you have gotten from Step 2.

Step 7:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#Followers1 {
border: none;
}

#Text999{
text-align: center;
margin-top: -40px;
font-size: 12px;
border: none;
}

And that will be all. It is recommended to have either a Pages gadget or a Linklist gadget installed in your blog so that your dedicated Followers page can be accessed easily from your homepage. Have fun!

Place Blogger Comment Form Above Comment Blocks

2011-01-30T18:47:00.001Z

I have already composed and published another tutorial, and I saw a question on this. So I removed the other post and decided to write on this one instead. Since I've just composed the other lengthy post, I'll be brief on this one. So, when you have an embedded comment form, your comment blocks will appear first, followed by your comment form at the bottom of the post.

UPDATE: THIS TWEAK WILL NOT WORK WITH THE NEW BLOGGER REPLY COMMENT SYSTEM. CLICK ON 'REVERT WIDGET TEMPLATES TO DEFAULT' TO UNDER THIS TWEAK.

The doesn't sound so bad, except when you have lots and lots of comments. One would have to scroll all the way down to look for the comment form. So, why not just place it at the top instead, right after the end of your posts?

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

Find and delete the following lines:

<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>

The lines to be deleted:

Step 2:

Under the same page, find for <a name='comments'/> - Paste the following lines directly below <a name='comments'/>:

<p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
      </p>

Modified structure in place:

Click on Save Template when you are done.

Optional

If there is too much space below your comment form, you can reduce the gap by adding the code below. Feel free to adjust the value.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

.comment-form{
margin-bottom: -180px !important;
}

That will be all, have fun with this one.

Blogger Header Image Size/Blur Fix

2011-01-22T19:54:00.004Z

I have no idea what's going on with Blogger's development team. But apparently, there seems to be some huge bugs being left here and there. The latest one comes in the form of header images. When you upload a header image to Blogger (or Picasa Web Album), it will either be small or blurred. You can fix this by hosting your header image elsewhere. If you know how to do this, go do that, and stop wasting your time here. Because that is exactly what I'm going to show in this post. Let's cut to the chase and see how to fix this shall we?

UPDATE: It seems like this problem has been resolved now. But you can always keep your header image hosted elsewhere, just to play safe.

Step 1:

Make sure you have a copy of your header image in your computer. If you don't have a copy of your header in your computer, follow the steps below. If you do, skip to Step 2.

If you don't have a copy of your original header image in your computer, you can retrieve the one that you have uploaded to blogger.

Go to your Picasa Web Album. Login with your Blogger account if you have to. Then, click on your blog's album. Unless you have more than one blog, you will only see one album.

Now you will see a set of images that you've uploaded to Blogger server. Find the image that you have used for your header. Click on it.

Click on Download - Download Photo to save your original header image to your computer.

Step 2:

Go to an image hosting site like photobucket or imageshack. I'll be using imageshack in this tutorial as you can upload images there anonymously (you don't have to signup to use their services).

Click Browse - Choose your image - Upload now.

Step 3:

Once the upload is complete, you'll be taken to a new page. Get the direct link from that page.

Step 4:

Go to Dashboard - Design - Page Elements - Header - Edit - Remove Image - choose 'From the Web' - paste the direct link in the field provided - press enter once - just wait till you see your image appears there - Save.

Again, don't press 'Save' right after entering your directlink. Wait for your image to load. You'll be able to see the image there in the window, as shown below:

You're almost done. Check your blog now. If everything is fine, you're done. For some of you, the header image might be oversized now. This is because Blogger will not automatically resize your image for you, as you're hosting your image elsewhere. If this is the case, go to an online image resizer (choose your file, and choose your new width), and resize your image so that it will be smaller. Then repeat Steps 2 to 4.

And that will be it. Hopefully this temporary fix will restore your blog's cosmetic appearance again.

Blogger Comment Form Isn't Showing? - Place Multiple Comment Forms!

2011-01-20T18:51:00.012Z

UPDATE: THIS TWEAK WILL NOT WORK WITH THE NEW BLOGGER REPLY COMMENT SYSTEM. CLICK ON 'REVERT WIDGET TEMPLATES TO DEFAULT' TO UNDER THIS TWEAK.

Quick Note: This tutorial doesn't teach how you can bring back your missing comment form - as it is highly likely that it is a problem with your browser. This tutorial teaches you how you can add a back-up link to allow your readers leave a comment in case your comment form doesn't appear in your readers' browsers.

The Blogger Comment system is an important part of any blog. Blogger gives you the option to either place the comment form embedded in your post page (known as 'Embedded below post'), or have the comment form in an external page. The external form placement comes in two different options - to load the external comment form from the current page (known as 'Full Page'), or pop-up a new window to load the external comment form (known as 'Pop-up window'). At any given time, you can only choose either one of the two options provided (either embedded or external placement).

Lot's of users prefer to have the comment form embedded within their post page because it is so convenient for readers to leave comments within the page itself. Besides, the external form placements have their own disadvantages when it is seen holistically. Full Page placement will overwrite 'over-load' the post page to open the comment page, and Pop-up Window placement will open a pop-up window, which will get blocked if pop-up blockers are installed at the reader's side.

Here comes the problem. Embedded comment forms are not foolproof either. Due to some browser problems, and/or add-on related issues, sometimes the embedded comment form becomes dysfunctional. I have experienced this at two different times, and until today, I could not identify what caused the problem. It just resolved by itself. But during that period, I could not leave any comments anywhere. This could happen to you too. You could lose lots of comments if your readers' browsers fail to make the embedded comment forms functional - and you'd be so clueless when it happens as usually it is not epidemic.

Solution: Place both embedded comment form and external comment form together. Embedded comment form as primary option as usual, and a link to external comment form as a back up! I spent lots of time to come up with this one, and I guarantee you, this is first on net!

Step 1:

In old Blogger Interface: Go to Dashboard - Settings - Comments.

See the page's address - get the BlogID number. Mine is 6862926392681704882

Step 2:

Under the same page, for Comment Form Placement, choose 'Embedded below post' - Save Settings.

Step 3:

Go to Dashboard - Design - Edit HTML - Download Full Template (for backup purposes) - Check the box next to 'Expand Widget Templates' - Find for these lines:

<b:if cond='data:post.allowNewComments'>
  <b:include data='post' name='comment-form'/>
<b:else/>

Replace them with the following lines:

<b:if cond='data:post.allowNewComments'>
<!-- YoBoY Multiple Comments Starts -->
<script type='text/javascript'>
document.write(
&quot;&lt;a href=&#39;https://www.blogger.com/comment.g?blogID=INSERT_BLOG_ID_HERE&amp;postID=&quot;+&#39;<data:post.id/>&#39;+&quot;&amp;isPopup=true&#39; target=&#39;_blank&#39;&gt;INSERT_MESSAGE_HERE&lt;/a&gt;&quot;);
</script>
<!-- YoBoY Multiple Comments Ends -->
  <b:include data='post' name='comment-form'/>
<b:else/>

Once you've pasted in the new modified code, replace INSERT_BLOG_ID in line 5 with your Blog's ID that you have gotten from Step 1.

Next, replace INSERT_MESSAGE_HERE with a suitable message, something like "Click here to leave a comment if the box below does not work" or something to that effect. Here's a look at an example of the fully completed code:

<b:if cond='data:post.allowNewComments'>
<!-- YoBoY Multiple Comments Starts -->
<script type='text/javascript'>
document.write(
&quot;&lt;a href=&#39;https://www.blogger.com/comment.g?blogID=6862926392681704882&amp;postID=&quot;+&#39;<data:post.id/>&#39;+&quot;&amp;isPopup=true&#39; target=&#39;_blank&#39;&gt;Click here to leave a comment if the box below does not work&lt;/a&gt;&quot;);
</script>
<!-- YoBoY Multiple Comments Ends -->
  <b:include data='post' name='comment-form'/>
<b:else/>

Now save the template. Go see your post-page, and you'll have the option to post a comment both in embedded form and in external form! So in case one doesn't work, the other one is there as a back up!
Original code in place:

Modified code in place:

Have fun. Oh, BTW, I self-taught a little bit of Java/Javascript to myself solely for the sake of this tutorial. I know lots of programming languages, and I have received formal education for some of them, but Java/Javascript is not one of them. So if you copy this and act like its your own work, you're the biggest douche on the planet. Now go have fun. Seriously :)

Blogger Dedicated Comment Page

2011-01-18T16:00:00.001Z

You can have comments enabled for all of your posts and pages. But what if you want a dedicated page in your blog just for comments? Yes you can! Your readers could leave generic shoutouts in that dedicated comment page, just like regular comments from your posts. And it is so easy to do!

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Edit Posts - Edit Pages - New Page

If you're using the new Blogger interface: Go to Dashboard - Pages - New Page - Blank Page

Insert an appropriate Page Title, like 'Comments'. Leave the editor box empty. Then, click on Post Options - Reader Comments - Allow - Publish Page.

Step 2:

Click on View Page and get the address of this dedicated page.

Step 3:

At this point, your comment page should be up and running already. Make sure you have Pages gadget installed to have your blog pointing a link to your comment page. In this last step, we want to remove all other page elements from the comment page to give the page some character (it's dedicated, you see?)

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for </b:skin> - Paste the following directly below </b:skin>:

<b:if cond='data:blog.url == &quot;http://www.test4.southernspeakers.net/p/comments.html&quot;'>
<style>
.post.hentry{
display:none;
}
</style>
</b:if>

In the code above, modify the URL address in Line 1 to that of your comment page. Click on Save Template when you are done.

The code in place:

There, you're ready to go. Your own dedicated comment page. Have fun.

Blogger Floating Icons

2011-01-18T09:25:00.000Z

This one is a request from blog reader RaindropSoup. She wants to know if the concepts used in 'Blogger Christmas Banner' and 'Blogger New Year Banner' tutorials can be extended to work with three or four images, all at one side, with links. Well, you almost certainly can. The concept remains the same. You just have to wrap your individual images in div tags to force line breaks among them. Let' cut to the chase.

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for </head> - Paste the following directly below </head>:

<!--SS Floating Icons Starts-->
<div id='ssfloatingicons'>
<div>
<a href="http://facebook.com" target="_blank">
<img src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TTVFpeeF8eI/AAAAAAAACio/T3eUdL1BU5g/s1600/facebook.png" />
</a></div>
<div>
<a href="http://www.flickr.com/photos/yoboy2/" target="_blank">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFp4LlWuI/AAAAAAAACis/T88sS6iCJwA/s1600/flickr.png" />
</a></div>
<div>
<a href="http://feeds.feedburner.com/voicesfromsouth" target="_blank">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFqQKQ_LI/AAAAAAAACiw/niQ7b70nouc/s1600/rss.png" />
</a></div>
<div>
<a href="http://twitter.com" target="_blank">
<img src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TTVFrINIl9I/AAAAAAAACi0/KfCYJF7Eo9A/s1600/twitter.png" />
</a></div>
</div>
<style>
#ssfloatingicons{
position: fixed;
top: 100px;
right: 0;
padding: 5px;
z-index: 10;
}
</style>
<!--SS Floating Icons Ends-->

If you want it to be on the left, use this instead:

<!--SS Floating Icons Starts-->
<div id='ssfloatingicons2'>
<div>
<a href="http://facebook.com" target="_blank">
<img src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TTVFpeeF8eI/AAAAAAAACio/T3eUdL1BU5g/s1600/facebook.png" />
</a></div>
<div>
<a href="http://www.flickr.com/photos/yoboy2/" target="_blank">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFp4LlWuI/AAAAAAAACis/T88sS6iCJwA/s1600/flickr.png" />
</a></div>
<div>
<a href="http://feeds.feedburner.com/voicesfromsouth" target="_blank">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TTVFqQKQ_LI/AAAAAAAACiw/niQ7b70nouc/s1600/rss.png" />
</a></div>
<div>
<a href="http://twitter.com" target="_blank">
<img src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TTVFrINIl9I/AAAAAAAACi0/KfCYJF7Eo9A/s1600/twitter.png" />
</a></div>
</div>
<style>
#ssfloatingicons2{
position: fixed;
top: 100px;
left: 0;
padding: 5px;
z-index: 10;
}
</style>
<!--SS Floating Icons Ends-->

The code in place (starting portion):

Step 2:

Now that you have added the sample icons to your blog, all you have to do is modify the links and replace the images that I have used with that of yours. In the code above, I have used four social media icons. You can get fancier social media icons if you Google for 'Social Media Icons' or something to that effect. Once you've gotten your set of icons, upload it somewhere (yes you can upload these icons to one of your posts) and get it's direct link (if you upload to one of your posts, click on Edit HTML to see its direct link).

Once you have the direct links of your icons, just insert them into the code. Also, modify the link to reflect the target link that you want the browser to open when the icon is clicked:

<div>
<a href="INSERT_YOUR_TARGET_LINK_HERE" target="_blank">
<img src="INSERT_DIRECT_LINK_TO_YOUR_ICON_HERE" />
</a></div>

If you want to add more than four images, just duplicate the skeleton above appropriately.

Step 3:

You have inserted the icons to your blog, and you have customized the icons and their links. There isn't anything left for you to do. If you're unhappy with the vertical positions of the icons, or if the icons are placed too near to the side of your blog, you can adjust this by adjusting the value top (line 23) and padding (line 25) in the code.

That will be all. Have fun.

Blogger Pages Gadget No-Stretch

2011-01-16T10:48:00.003Z

If you're using Awesome Inc template, you'll know what I'm talking about. The Pages Gadget menu stretches from left to right horizontally. Though this might be one of the distinctive features of the Awesome Inc template, it might seem out of place for some users. In this tutorial, I'm going to show you how you can quickly convert this stretching gadget to a decent one that adapts to the width of your main posting area.

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find for /* Headings ----------------------------------------------- */ - Paste the following code directly above it (see the screenshot):

/*--Pages Gadget No-Stretch Starts--*/
.tabs-outer {
background: transparent !important;
}

.cap-top, .cap-bottom{
border: none !important;
}

.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
}

#crosscol{
background: $(tabs.background.color) $(tabs.background.gradient);
border: 1px solid $(tabs.border.color) !important;
}
/*--Pages Gadget No-Stretch Ends--*/

The code in place (ending portion)

And that would be it. Have fun!

Adding a Third Party Blogger Template

2011-01-08T15:04:00.001Z

I'm literally running out of things to write tutorials on. If you have something unique to ask and you think it will be a great tutorial material, please feed me your ideas by posting your questions here. Now back to this post. This time it's for beginners.

Third party templates are templates that don't come 'built-in' in Blogger's layout. It's created by some third party. And most of the time, it'll be hard to tweak/modify these templates. BUT, most third party templates clearly beat Blogger's 'built-in' templates when it comes to cosmetics. And it's not all difficult to add one to your site.

Step 1:

Find a third party template. This might be the most 'difficult' step as there are hundreds (if not thousands) of templates to choose from. Just Google 'Free Blogger Template' or something to that effect and Google will throw hundreds of relevant results to your face. Here are some sites that I normally use to grab a third party template:

I'm going to use a random template from 'Blogger Templates' for the sake of this tutorial.

Step 2:

Click on your selected template, and usually you'll have the options to Download your template and to view a live Demo of your template. Go ahead and download the template to your computer.

This downloaded file can be of two types: a ZIP file (something.zip) or an XML file (something.xml). If you have an XML file, skip the next step. If you have a ZIP file, see the next step.

Step 3:

If you have downloaded a ZIP file, you have to extract the right file out of it first. Open the zip file by double clicking on it, then find for a file that ends with .xml - See the picture below.

Place this file on your desktop or something, it doesn't really matter.

Step 4:

Now that you have your XML file, it's time to upload it to your Blog.

If you're using the new Blogger interface: Go to Dashboard - Design - Edit HTML - Browse (or Choose File) - Select the XML file from your computer - Open - Upload.

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Browse (or Choose File) - Select the XML file from your computer - Open - Upload.

And that will be all. You have a brand new template for your Blog. Enjoy.

Blogger Custom Profile

2011-01-03T15:20:00.005Z

Blogger comes with a Profile (or About Me) gadget. Your display image and a small description about yourself will be shown in this gadget. However, there are few drawbacks with this conventional gadget. Say you have two or more blogs. One for your family, and another one for your work. Your default profile gadget will be the same for both these blogs. You might not want that, as you might prefer to show different information about yourself on each blog. That's when Custom Profile comes to your rescue.

Another scenario. If you have a team blog, your Profile gadget will automatically turn into a contributors-list gadget. If you want to show individual profile gadget for all (or some) of your contributors, you can use this custom profile gadget. Best part of all, it's so easy to add.

On top of that, you can stylize this gadget as you want. With the default profile gadget, you have to settle for this pre-existing unalterable format. With a custom profile gadget, you can give colors to your text, change 'View My Complete Profile' line to something else, position the contents of your profile however you want, underline/bold/blink certain text, insert table in your profile (what?), add border around text, change display image size, and much much more! Your creativity is the limit.

Step 1:

There are few things that you need prepare before adding this gadget.

1) Your Blogger profile address. You can get this by going to Dashboard (old interface) - View Profile. The address of that page is the address of your Blogger profile.
Example:

http://www.blogger.com/profile/15933400802430724429

2) A profile picture. You must upload this picture somewhere and have its address (yes you can upload to one of your posts). If you want to use your existing profile picture, go to Dashboard (old interface) - View Profile - View Full Size - Remove the '-h' from your address (change s220-h to S220)
Example:

http://4.bp.blogspot.com/_VZprIDHV4-Q/SmFlfAtk4DI/AAAAAAAAAAk/CDO3yXr7vOY/S220/Mylogo.jpg
.

Step 2:

Now that you have all the information that you need, go add an HTML/Javascript gadget.

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

Choose HTML/Javascript - Paste the following content - make necessary configurations (see below) - Save.

<a href="PROFILE_ADDRESS">
<img width="80" height="80" src="PROFILE_PICTURE" class="profile-img"></a>
<dl class="profile-datablock">
<dt class="profile-data">YOUR_NAME</dt>
<dd class="profile-textblock">PROFILE_DESCRIPTION</dd>
</dl>
<a href="PROFILE_ADDRESS" class="profile-link">View my complete profile</a>

Configurations:

Replace PROFILE_ADDRESS in line 1 and 7 with your Blogger Profile Address (see Step 1)
Replace PROFILE_PICTURE in line 2 with the address of your profile picture (see Step 1)
Replace YOUR_NAME in line 4 with your name
Replace PROFILE_DESCRIPTION in line 5 with your description. This is where you input the actual content of your profile. Use   to insert a line break (pressing enter will not work).

Here's an example:

<a href="http://www.blogger.com/profile/15933400802430724429">
<img width="80" height="80" src="http://4.bp.blogspot.com/_VZprIDHV4-Q/SmFlfAtk4DI/AAAAAAAAAAk/CDO3yXr7vOY/S220/Mylogo.jpg" class="profile-img"></a>
<dl class="profile-datablock">
<dt class="profile-data">YoboY</dt>
<dd class="profile-textblock">Introvert alert. Keep yourself to yourself...
<br><br>
My 2011/12 Wishlist:<br>
1) Transformers DOTM Voyager Class Megatron<br>
2) Transformers DOTM Voyager Class Ironhide<br></dd>
</dl>
<a href="http://www.blogger.com/profile/15933400802430724429" class="profile-link">View my complete profile</a>

You're done! All you have to do now is customize your gadget however you want it to be (or leave it as it is). See below for some of the common HTML/CSS mods that you can add to your custom profile gadget.

Customization:

As I've mentioned before, you can do almost anything as the custom profile gadget uses a HTML/Javascript gadget. Of course, you need to use HTML to make these changes. I'll list some of the common ones here.

Colorize your text:
Add a span tag before and after the text that you want to colorize. I'll demonstrate this with an example:

<span style="color: yellow;">This text will be yellow.</span>

This is what the above HTML will do:
This text will be yellow.

Align your text:
Add a div tag before and after the text that you want to align. For example:

<div style="text-align: right;">This text will be aligned to right.</div>
<div style="text-align: left;">This text will be aligned to left.</div>
<div style="text-align: center;">This text will be centered.</div>
<div style="text-align: justify;">This text will be justified.</div>

Result:

This text will be aligned to right.

This text will be aligned to left.

This text will be centered.

This text will be justified.

Decorate your text:
You can make your text blink, underlined, overlined or lined-through. Just add a span tag before and after your text. Example:

<span style="text-decoration: blink;">This text will blink.</span>
<span style="text-decoration: underline;">This text will be underlined.</span>
<span style="text-decoration: line-through;">This text will be lined-through.</span>
<span style="text-decoration: overlined;">This text will be overlined.</span>

The results:
This text will blink.
This text will be underlined.
This text will be lined-through.
This text will be overlined.

Adjust your font size:
Again, add a span tag before and after your text. For example:

<span style="font-size: 50%;">This line will be smaller than the rest.</span>
.

Result:
This line will be smaller than the rest.

Add border around text:
As usual, add a span tag before and after your text. For example:

This line will have a solid RED <span style="border: 3px solid red; padding: 1px;">border around its word.</span>
.

Result:
This line will have a solid RED border around its word.

Resize display picture:
Just change the value 80 in both 'width' and height' in the original code and your profile image will be resized accordingly. For example, I have changed the width and height from 80px to 140px in the code below:

<a href="PROFILE_ADDRESS">
<img width="140" height="140" src="PROFILE_PICTURE" class="profile-img"></a>
<dl class="profile-datablock">
<dt class="profile-data">YOUR_NAME</dt>
<dd class="profile-textblock">PROFILE_DESCRIPTION</dd>
</dl>
<a href="PROFILE_ADDRESS" class="profile-link">View my complete profile</a>

If you have particular customization in mind, leave a comment and I will assist you accordingly. Have fun!

Utilising Unused Space in Blogger Header

2010-12-28T16:43:00.001Z

This is an interesting question from a Blog reader - Jamie. Jamie wants to know if there is way to utilize the unused space in Blogger header. The answer is yes. When you use an image in your header, your image will be aligned to the left. Some of you would want the image to be centered and you'd settle for that. But if you want your image to stay where it is (left), and add a gadget at the unused space on the right side, wouldn't that be cool?

Step 1:

When you go to Page Elements/Layout, you will see boxes where you can 'Add a Gadget'. Those are sections (not technically, but for the sake of simplicity, just assume it is). You can generally split a section, but splitting in two is not the aim of this tutorial, as your header will be half the width of your entire header. That's not what we want.

We want the header to be intact. So, we need to measure the width of the unused space. You can use various methods to measure the width of your unused space:

Use an add-on called MeasureIt. If you're using Firefox for this tutorial, I suggest you get this add-on.
You can use FireBug to see the width of the surrounding elements and then estimate the width of your unused space.
Trial and error. Use a value, preview and see if it's fine. Then use another one, and keep doing it till you're satisfied with the results.

I used MeasureIt as it's the easiest way to find this width. The width of my unused space is 310px:

Step 2:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -

Find and delete these lines:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header' type='Header'/>
</b:section>

Note: The 'title' attribute in this line will be different in your template. Don't worry about it, just delete these lines.

Original code in place before deletion:

Step 3:

Paste these modified lines in place of the deleted lines:

<table><tr><td>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Header' type='Header'/>
</b:section></td>
<td style="width: 310px;">
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
</td></tr></table>

You have to insert the width of your unused space in line 5 above. Change 310px to the value that you've gotten in Step 1. Click on Save Template once you're done.

Modified code in place:

Step 4:

Go to Dashboard - Design - Page Elements (or Dashboard - Layout) and a brand new section will be waiting for you there. Add your gadget there as you wish.

I thought my previous post will be the last post of the year. But I was wrong. So, again, have a blasting new year! Happy 2011!

Blogger New Year Banner

2010-12-26T16:36:00.001Z

Not long ago, I did a tutorial on how you can add a Christmas banner to your blog to convey your Christmas wishes to your readers. Well, Christmas is technically over, so let's prepare for New Year now. This tutorial is similar to the Christmas one, but I figured no one will be looking for it anymore, so here's another one.

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

Choose HTML/Javascript gadget - Paste the following code - Apply to Blog:

<div id="sspeakerbannernewyear">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TRd4YMrS_1I/AAAAAAAACfE/bSiRmvN_nv8/s1600/new.gif" />
</div><style>
#sspeakerbannernewyear{
position:fixed;
left:0px;
top:0px;
}
</style>

Customization:

Make Banner Non-sticky
I've made mine 'sticky'. If you find it annoying, or if you think it will affect the readability of your blog, then just make it sit on top instead. It won't follow you when you scroll down. Use this code instead:

<div id="sspeakerbannernewyear">
<img src="http://2.bp.blogspot.com/_VZprIDHV4-Q/TRd4YMrS_1I/AAAAAAAACfE/bSiRmvN_nv8/s1600/new.gif" />
</div><style>
#sspeakerbannernewyear{
position:absolute;
left:0px;
top:0px;
}
</style>

Change Banner Image
Make sure you have an image first. If you're using an image created by someone else, get the creator's permission before adding it to your blog. Here's what you should change.

<div id="sspeakerbannernewyear">
<img src="PLACEIMAGEURLHERE" />
</div><style>
#sspeakerbannernewyear{
position:fixed;
left:0px;
top:0px;
}
</style>

Change the text 'PLACEIMAGEURLHERE' to your image's URL.

Few variations that I've made:
New Year Orb
Right Banner

Change Banner Position
This depends on your image's orientation. I've made my banner to sit at the top-left corner of my blog. If you want to place your image at the top-right corner, use the following code instead:

<div id="sspeakerbannernewyear">
<img src="http://3.bp.blogspot.com/_VZprIDHV4-Q/TRd5NugjhaI/AAAAAAAACfM/6qPd19jqCNA/s400/right.gif" />
</div><style>
#sspeakerbannernewyear{
position:fixed;
right:0px;
top:0px;
}
</style>

Happy New Year. May 2011 be the best year yet for you.

Highlight Blogger Author Comments

2010-12-23T19:25:00.005Z

It has been awhile. This time, I'm going to show you a quick and easy way to make your comments (author comments) look different. In a thread full of comments, one might feel the need to isolate the author's comments from readers' comments, probably by highlighting it or making it look different.

UPDATE: THIS TWEAK WILL NOT WORK WITH THE NEW BLOGGER REPLY COMMENT SYSTEM. CLICK ON 'REVERT WIDGET TEMPLATES TO DEFAULT' TO UNDO THIS TWEAK. I'VE PUBLISHED A NEW WAY OF HIGHLIGHTING AUTHOR COMMENTS FOR THE NEW THREADED SYSTEM, CHECK IT OUT.

This tweak works with both Layout (Minima, Harbor, Denim, Rounders, etc) and Designer (Simple, Picture Window, Awesome Inc, etc) templates. Basically, it'll work with all Blogger 'built-in' templates, probably third party templates as well. Consider this my Christmas gift.

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

Find and delete the following lines:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>

The code before being deleted (starting portion):

The code before being deleted (ending portion):

Step 2:

Place this modified line in place of the deleted lines.

<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
&lt;div id=&quot;authorcomment&quot;&gt;
<b:else/>
&lt;div id=&quot;readercomment&quot;&gt;
</b:if>
      <dl expr:class='data:post.avatarIndentClass' id='comments-block'>  
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
        </dl>
&lt;/div&gt;
</b:loop>

The modified code in place (starting portion):

The modified code in place (ending portion):

#authorcomment{
background: yellow url("http://www.blogblog.com/1kt/transparent/white80.png");
border: 10px double orange;
padding: 4px;
color: black;
}

You should be able to see your highlighted comments already. If you want to customize this style further, refer to the following step.

Customization:

There are lots of ways to customize the look of your highlighted author comments. I'll list some of the common ones here. If you have something specific in mind, you can leave a comment and I'll try to reply you with a solution.

This is the code that you've added to your template in Step 3:

#authorcomment{
background: yellow url("http://www.blogblog.com/1kt/transparent/white80.png");
border: 10px double orange;
padding: 4px;
color: black;
}

Background	You can either use a plain color or an image as your background. I've used a combination of both (white transparent image with yellow plain color). If you want to use a background image only, declare your background as such (replace IMAGEURLHERE with the URL of your image): background: url(IMAGEURLHERE); For plain colors, use this: background: white; If you want more choices of plain colors, use HEX code instead: background: #121212; You can get the hex code for a given color from this useful site.
Border	The syntax for CSS border is: border: 10px double orange; You can change the thickness of your border by adjusting the value 10. If you want no border at all, you can set it to 0. You can change the color to a different plain color. You can also use hex code for a specific color. You can change the style of your border. I have used a double border. Other options are: solid, dotted, dashed, groove, ridge, inset, outset
Padding	I've included a padding in my code because I think without a padding, the author's profile image is too close to the border. You can set the padding's value to 0 to see what I mean.
Comment Text Color	For plain colors, use this: color: white; If you want more choices of plain colors, use HEX code instead: color: #121212;
Author's Name Color	You can change the color of the author's name by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog: #authorcomment dt a{ color: red; }
Comment Action Message	I don't know what else to call it. I'm referring to the word 'said' in my comments. You can change its color by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog: #authorcomment dt{ color: red; }
Comment Timestamp	You can change its color by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog: #authorcomment dd a{ color: red; }
Bold Author's Name	I did not include this in the example above (for simplicity), but I've used it in my template. You can make your Author's name bold by going to Template Designer - Advanced - Add CSS - paste the following code (leave a space between codes, if you already have existing codes in your 'Add CSS' box) - press enter after the last character of the last line } - Apply to Blog: #authorcomment dt, #authorcomment dt a{ font-weight: 900; }
Style Reader's Comments	If you're wondering how you can defeat the purpose of this entire tutorial by giving your readers' comments a unique style as well, I'm gonna show you how. Just change the ID that is being addressed. The ID for readers' comments is 'readercomment'. Here's a quick example on how you can make use of this: #readercomment{ background: white; border: 2px solid yellow; padding: 4px; color: black; }

It took me really long to write this one, not to mention the time spent to figure out how to do it in the first place. I hope it will be helpful for all of you. Merry Christmas and Happy New Year, to all of you, my readers.

Blogger Christmas Banner

2010-12-16T11:10:00.006Z

It's that time of the year again. What better way is there to wish your readers a Merry Christmas than to place a Christmas banner in your blog? This is a request from a blog reader (KitchenMorph). I thought it was a good idea, so I decided to write a tutorial on it.

Add one now to your blog in 1 easy step!

<div id="sspeakerbanner">
<img src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TQnmMVppUcI/AAAAAAAACbw/UOknzECmIKw/s1600/yoboy.gif" />
</div><style>
#sspeakerbanner{
position:fixed;
left:0px;
top:0px;
}
</style>

Customization:

I'm not much of a photoshop guy. I quickly created this banner with some Christmas brushes for the sake of this tutorial. What do you expect, I can't be writing a tutorial based on an image created by someone else now, can I?

Make Banner Non-sticky

I've made mine 'sticky', because I'm that Christmas-spirited. If you find it annoying, or if you think it will affect the readability of your blog, then just make it sit on top instead. It won't follow you when you scroll down. Use this code instead:

<div id="sspeakerbanner">
<img src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TQnmMVppUcI/AAAAAAAACbw/UOknzECmIKw/s1600/yoboy.gif" />
</div><style>
#sspeakerbanner{
position:absolute;
left:0px;
top:0px;
}
</style>

Change Banner Image

Make sure you have an image first. If you're using an image created by someone else, get the creator's permission before adding it to your blog. Here's what you should change.

<div id="sspeakerbanner">
<img src="PLACEIMAGEURLHERE" />
</div><style>
#sspeakerbanner{
position:fixed;
left:0px;
top:0px;
}
</style>

Change the text 'PLACEIMAGEURLHERE' to your image's URL.
I have done a few versions of the original image. Feel free to use them:
Original- Right oriented
Original- Left oriented - Short
Original- Right oriented - Short

Change Banner Position

This depends on your image's orientation. I've made my banner to sit at the top-left corner of my blog. If you want to place your image at the top-right corner, use the following code instead:

Update: I have made a right-oriented banner, and changed the URL in the code below.

<div id="sspeakerbanner">
<img src="http://4.bp.blogspot.com/_VZprIDHV4-Q/TQpSclmvYYI/AAAAAAAACcE/lFLKCvq5YpY/s1600/right.gif" />
</div><style>
#sspeakerbanner{
position:fixed;
right:0px;
top:0px;
}
</style>

Shorten the Banner Length

Well, not exactly 'shorten' per se. The banner will still remain at the same size, but you can push it inwards if you think the banner is taking too much space. Here's what I'm talking about:

Use this code instead:

<div id="sspeakerbanner">
<img src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TQnmMVppUcI/AAAAAAAACbw/UOknzECmIKw/s1600/yoboy.gif" />
</div><style>
#sspeakerbanner{
position:fixed;
left:-50px;
top:-60px;
}
</style>

Feel free to adjust the -50 and -60 values. Of course, by making the banner shorter, you'll be missing out on the mistletoes, and possibly the snowman. You don't want that to happen now, do you?

Note: If you want to shorten your image and make it stick at one place (setting 'position:absolute;) both at the same time, make sure your original image is short enough. I have uploaded short versions of the banner. The links are under the 'Change Banner Image' customization.

Merry Christmas and Have Fun!

Adding Syntaxhighlighter to Blogger

2010-12-14T19:04:00.001Z

Sorry for the lack of updates for the past few days. I have been really tied up with some stuffs, and it will remain like this for the next few days. I'll try to make this one quick and simple. This is a request from a blog reader (RainDropSoup). In this tutorial, I will share with you guys how I added my Syntaxhighlighter. Syntaxhighlighter is an add-on that can be added to Blogger (and other websites). It makes your code snippet looks pretty. Here's an example:

Pretty, ain't it?

Usually, Bloggers that post programming codes would want to add this one to their blogs, as it makes everything easier and tidy. You can still use this add-on to post normal texts, if you want your text to stand out from the rest of your contents. There are lots and lots of tutorials out there that teach you how to add it to Blogger. When I first added it, I tried some of these tutorials myself, and not all of them work. So, here's how I added it.

Step 1:

You can skip this step if you're not gonna use SyntaxHighlighter that often.

If you're using the old Blogger interface: Go to Dashboard - Settings - Formatting - Post Template -

If you're using the new Blogger interface: Go to Dashboard - Settings - Posts and comments - Post Template -

Paste the following code - Save Settings:

<pre class="brush:xml;">
Your code/content goes here.
</pre>

<!-- SH starts -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreMDUltra.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();

</script>
<!-- SH ends -->

Click on Save Template once you're done. As you can see here, I have used the files that are being hosted at the official website. Though at first it might seem like hosting these files at an external site is a good idea, I had to learn the hard way that it is not. I hosted my files at Google Sites previously, back when I was still using the Blogspot domain. It worked fine, until I switched to this custom domain. Things went crazy, and it was hard to find one place that could host all files and still be able to work with blogs with custom domains. So take it from me, use these hosted files instead.

Step 3

Now go to New Post, and when you click on Edit HTML, you'll be able to post into SyntaxHighlighter directly. You can remove this HTML portion if you don't want to use it. If you've skipped Step 1, paste the following code in Edit HTML mode and start adding your highlighted contents.:

<pre class="brush:xml;">
Your code/content goes here.
</pre>

Customization:

You can customize the current theme and the brush. Changing the theme will change the default text color, background and other things. Changing the brush (I have used XML brush in the steps above) will highlight different set of codes. There are additional customizations that you might want to check out at Alex Gorbatchev's website. Alex is the creator of this useful gadget.

Themes

shThemeRDark, shThemeMidnight, shThemeMDUltra, shThemeFadeToGrey, shThemeEmacs, shThemeEclipse, shThemeDjango, shThemeDefault, shCoreRDark, shCoreMidnight, shCoreMDUltra, shCoreFadeToGrey, shCoreEmacs, shCoreEclipse, shCoreDjango, shCoreDefault

Note: I have used shCoreMDUltra in the tutorial above. To change your theme, simply locate the line that contains the word 'shCoreMDUltra', and replace it with one of the theme names above. Retain the .css extension and whatever filepath before it.

Brushes

as3, bash, csharp, coldfusion, cpp, css, diff, erlang, groovy, jscript, java, javafx, perl, php, plain, powershell, phython, ruby, scala, sql, vb, xml

Note: to change your brush, while creating a new post, use one of the brushes listed above. In the tutorial above, I have used the xml brush.

Google Translator Blogger Widget

2010-12-11T17:24:00.001Z

You might have noticed the drop-down menu at the top-left section of my page. With this widget, I let my readers translate this site to over 50 languages without sending them to other websites, thanks to Google Translator. The Official Google Translator widget allows your reader to quickly and automatically view your page in a different language. In this quick tutorial, I'm gonna show you how you can add this Official Google Translator widget to your blog.

Step 1:

Make sure you're logged in your Blogger account first. Then, go to the following website:
Google Translate Tool
In Step 1, choose Add translation to the entire webpage.

Step 2:

Select the original language (the language that you use to write your posts) of your blog.

Step 3:

Click on Show Optional Settings, and you'll be able to see additional settings. You'll be able to choose which language you want your blog to be translated to (or all languages), the widget's display and some other settings. They are self-explanatory. The following is the settings that I have used for my widget.

Step 4:

Don't bother the codes. Click on the Add to Blogger logo.

Step 5:

If you have more than one blog, choose which blog you want to add this widget to. You can customize the title now, if you choose not to do it later.

Once you're done, click on 'Add Widget'. And that will be all. Have fun!