Expand Sidebar Posts List on 'mouse over' in Dynamic View

Blogger dynamic view sidebar is the best dyanmic view according to me! So I may be busy for finding codes for it! As a result I found expandable sidebar menu. The sidebar menu is at left side of your blog page.
Just follow this primary school steps.

STEP:-
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 --> Done

#sidebar
{
-webkit-transition:width 500ms ease-in;
z-index:99
}
#sidebar:hover:not(.selected)
{
width:350px;
!important}

Don't forget to comment below :-)

Expandable Search box in Blogger Dynamic View

Blogger dynamic view search box is my main reason to like it! If you try to search in our tiny Searchbox then it would auto expand! Then I thought to share it with you! The search box, placed at the top-right corner of your blog page can be made expandable by simple steps.

STEP:-
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 --> Done

#header input#search{-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}

#header input#search:focus{width:450px;}

Remove Floating Feedback button in Blogger Dynamic View

Blogger dynamic view feedback is used to seen feedback which include feature for including screenshot and various information! It is good to send feedback directly to Google! But why add such useless things! The feedback menu, placed at the bottom-right corner of blog page can be removed by short and simple step using CSS display:none method.

Before

AFTER

STEP:-
Go to Dashboard ('House' symbol) --> Template --> Customize --> Advanced --> Add CSS --> Paste the following code --> Apply to Blog --> Done

a.feedback {display:none;}

You are done!

Remove Search box in Blogger Dynamic View

Blogger dynamic view search box is my main reason to like it! But if you want to remove it, I wont argue with you! The search box, placed at the top-right corner of your blog page can be removed by short and simple step using CSS display:none method,

BEFORE

AFTER

STEP:-
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 --> Done

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

Add Scroll bar to Sidebar in Blogger Dynamic View

As you can see we in our blog also use sidebar for Dynamic View! Sidebar is best as SEO is concerned!
It is also the only template in Dynamic View that allows you to view the content of a post while still maintaining the complete list of posts in the sidebar! It uses AJAX for this! The posts in sidebar are shown upto screen limit without scrollbar! Better load all the past posts in scrollbar by this easy and simple method!

We in our blog also use it!

BEFORE

AFTER

To add scroll-bar follow this simple step:-

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> Paste the following code --> Press enter After the last character of the last line  --> Apply to Blog. 

div#sidebar { overflow-y: scroll !important; }

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

How to add Separators Between Pages Links in Blogger Dynamic View?

As you can see in our blog there is seperator between page links! The links in the header menu bar is as the template could accommodate several horizontal Pages links as well as external. Dynamic Template is Responsive, so it changes to drop down menu if the number of links increases!

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS -->
Paste the code given below and SAVE (Apply to Blog)

#header
#pages:before{
border-left: 0px !important;
}
#header
.tabs li, .ss{
margin-left:0px !important;
padding-left: 10px !important;
padding-right: 5px !important;
border-left: 1px solid white;
}