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.
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.
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.
#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:
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:
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:
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.
You might also like: