Dynamic Views Blogger : 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:

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj4hGsWGsA_DlX-RQyv4KqSoxV-9BpIr1Elsru3_jBaqB0_81iHlrvY274TBrZqw8-pEE9eLXcEhs20yu0Lm9PUpVJGVG8qQ6u70EUFPGXKYNDR8V-0X4eIJkv_6yZ0c4bkZkfPKVtxNk/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/AVvXsEhOVnWLZll778TIIPl4HIt-T9kvzDkN-YnkoNt0PcgcubvhebDteSrLbDawGU_hbBZOWxuo_qdwLvYVSi1AV5GZOV8c7wgDYWQQ621iyvnSeo2pye1KJZOJ1C638U6bJI5KzWBIq_jHfCs/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/AVvXsEhQc2p0KxlVb0adg2ha-YQB7sMj1Yoz_lyTjrs5pjBp3Q4eDRoljEEh5tfFJ1mEpwNH5q8k3P5BrKH76tpjZeNT_VzMHcS95WMuYkh9gI-VZ6V-hmSOdHmzaOWNgaQo7od7qPuMNCxh674/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; }

Questions and Answer :

Questions

The links are for my current images but it doesn't work, am i skipping something? or when I disable all dynamic options from the bar I was unable to do it.

And is there any way to attach a link to the image I am uploading using this method??

#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/AVvXsEiDD90VtbYg5vhn1KpMcdQf9-ir5MkU1_ZBLitqjkVqBkon3smq2fbsT4GzjBCQH51CdODo37UY9buRIc4WzWTXxy4wuI9sRvhZvM84xY_wQkM0D3XeiTN3-DoZTWQQGPN4Dk4PrNsg8UFw/s100/triangle1.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
}

Questions

I want to do exactly what this post suggest (which is using an image instead of text for the page links), but I ONLY want to do it for the LAST page option (and continue using the same text for the other pages).. The site I'm working on is rodelcasio.com, which looks as good as it does BECAUSE OF YOU! You're amazing.. but I want the "Facebook" text to be a simple Facebook square.. how do I do that for JUST the last page?

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

#pages.tabs ul li:nth-child(7) a:link{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQc2p0KxlVb0adg2ha-YQB7sMj1Yoz_lyTjrs5pjBp3Q4eDRoljEEh5tfFJ1mEpwNH5q8k3P5BrKH76tpjZeNT_VzMHcS95WMuYkh9gI-VZ6V-hmSOdHmzaOWNgaQo7od7qPuMNCxh674/s85/facebook_logo.jpg') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}

Questions

Such a great service you do here! I am using Dynamic Views as a membership directory for my association. I want to be able to have site visitors re-organize all the members' photos two ways:
1. By industry
2. By chapter in my organization

I used labels to organize them by industry. Great. However, if I add more than one label to a post (member page!) then the template randomly chooses to organize them by industry or chapter. That makes for a mess!

How can I get the template to also organize the posts by chapter? It would seem that the Author sort function would be ideal for it, if that could be changed.

If that cannot be done, then I have a work around idea: Creating a separate email address for each chapter and uploading the posts using each chapter as a separate "Author". This alternate solution requires changing "Label" to "Industry" and changing "Author" to "Chapter" in the nav bar. Can this be done in Dynamic Views"?

http://naemembers.blogspot.com 

Using a different email seems to be the only way to categorically group your posts, apart from using labels. And here's how you can rename Label and Author. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#groups li{
font-size: 0px;
}

#groups>li:nth-of-type(1):after{
content: "Recent";
font-size: 14px;
}

#groups>li:nth-of-type(2):after{
content: "Date";
font-size: 14px;
}

#groups>li:nth-of-type(3):after{
content: "Industry";
font-size: 14px;
}

#groups>li:nth-of-type(4):after{
content: "Chapter";
font-size: 14px;
}

Questions

can you help me about the images size is too big in menu bar, how to make it smaller
because if i change the height from 50 px to 20 px the image is like cropped

apit-testbot.blospot.com

In your template designed, go to Advanced - Add CSS - and paste the following code at the END (the bottom) of the box:

#pages.tabs ul li:nth-child(1) a:link {
width: 40px !important;
height: 27px !important;
margin-left: 15px !important;
}
#pages.tabs ul li:nth-child(2) a:link {
background: url("http://3.bp.blogspot.com/-73hyMFagxqU/T8Lmg-PZqtI/AAAAAAAAASg/ViwEet8SoV0/s90/fb.png") no-repeat scroll center center transparent !important;
height: 28px !important;
width: 100px !important;
}
#pages.tabs ul li:nth-child(3) a:link {
background: url("http://4.bp.blogspot.com/-ud8jw1hNapI/T8LmiUT6RQI/AAAAAAAAASs/R1Fif5qKr1A/s80/twi.png") no-repeat scroll center center transparent !important;
height: 28px !important;
width: 77px !important;
}

Questions

 How to hide the date contained in the upper left?

.ribbon{
display: none !important;
}

Sumber : http://www.southernspeakers.net/2011/12/blogger-dynamic-view-picture-menu.html

Share