Blogger Dynamic View Picture Menu

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

Note: It goes without saying that you MUST have pages links in your pages gadget before attempting this tutorial. This tutorial replaces your pages gadget from text-based links to picture-based menu. Make sure you can see your pages links (text-based) in your header-bar before attempting this tutorial.

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:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRl94aFd7Rq3ooM8P4U2eTHqa1aEROjyDj_dtIgZTtIw7ou2pMof-tIZwKRekPsdo978wagYego0k-5563UMC1fmHmaAFZ0gVwBEKkoCBk6VdqVfh5uPYwCrFHf3Pn_WEWPINopMs59ck/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRl94aFd7Rq3ooM8P4U2eTHqa1aEROjyDj_dtIgZTtIw7ou2pMof-tIZwKRekPsdo978wagYego0k-5563UMC1fmHmaAFZ0gVwBEKkoCBk6VdqVfh5uPYwCrFHf3Pn_WEWPINopMs59ck/s100/google-plus-logo-640.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}

#pages.tabs ul li:nth-child(2) a:link{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLZeKEihb3NDeYuLVXID25-m93NU7xwIwCPbmpPogptiIfwzjqYQfTzhVQJF1p8JguXTBZry8s9VSn9YQxLFBzDcDDrGqHxbYVZjNy2Tl5exHuwgtPtWftON3BjCH_5lzsZCATxXbGt9o/s100/twitter_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}
 
#pages.tabs ul li:nth-child(3) a:link{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_8TEeI1EXP_xV1K4t0_2Ot2DEHJbfh7pkXZn1G61uBV3Wt0jf5LHdfVpvjIhovREGWSbJuoz3A1FudzOvoYlH0vA0zEVU7l24QL93Hb4ZNdfhmEoxwpA666JlXdr814MyWTG8wQu4WG4/s105/facebook_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}

Step 4:

Replace the addresses in lines 13, 22 and 31 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!