Add Picture Menu in Blogger Dynamic View

As you already know that blogger don't allow to edit HTML in Dynamic Views, we are going to use CSS method for it. Note:If you have a drop-down pages menu in your Dynamic Views, then your images would not load perfectly or you need to re-size them! Also the CSS used by us, is not supported in earlier version of IE8.

This tutorial aims to change text of auto generated Pages Menu. So better make new pages or add Links to other pages in Pages section!

STEP 1
Create your own required buttons / Logos from Cooltext! Our logo is also from Cooltext

STEP 2
Upload images to picasaweb or imgur.com or any other free image hosting service and get Image links
e.g. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3lNdlA91O6HyTBkYpAmqX1johHSg3e-qDI3KpOcOSbRVsR6b49GaGSC3wD8TU3yMIMj4mrOkksktyudcOlx1h1fe2DlfhBpyql0ICZjSqaoYqEoANVxzIdoQbjoF_kmvCrcsUQRgzj-TC/s1600/cooltext844981581.png

STEP 3
Go to Dashboard  --> Template --> Customize --> Advanced --> Add CSS  --> Paste the below given code  --> Apply to Blog.
If it doesn't work then press enter after last line of pasted code!

#header
#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://tinyurl.com/blgdyn3') 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('http://tinyurl.com/blgdyn1') 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('http://tinyurl.com/blgdyn2') center no-repeat !important;
font-size: 1%;
color: transparent !important;
display: block;
width: 100px !important;
height: 25px;
}

Change the above links in red with our own image links! You're Done!

If you want more images to add then add the below code again and again for more and more conversion

e.g. for converting 4th menu link to image add NEW_PICTURE_NUMBER  = 4 and change IMAGE_LINK

#header


#pages.tabs ul li:nth-child(NEW_PICTURE_NUMBER) a{
background: url('IMAGE_LINK') center no-repeat !important;
font-size: 1%;
color: transparent !important;
width: 100px !important;
display: block;
height: 25px;
}