Custom Search

Set The Background In Blogger Dynamic View To Semi-transparent



Set The Background In Blogger Dynamic View To Semi-transparent



This tutorial is a treat for everyone who’s using Blogger’s Dynamic View template. It’s a nice little trick shared by Yoboy of SouthernSpeakers and what it will show you is how you can render the default white background in Dynamic View semi transparent.
This can be a very helpful trick especially if you have an image background that you’d like to remain visible to your site’s visitors.
Here’s  how to get it done.
  • From your dashboard, go to Template section and then click on Customize
  • Click on Advanced, scroll down to the bottom and choose Add CSS
  • Paste the following CSS inside the Add custom CSS box (if you currently have some pre-existing CSS there, then paste it at the bottom)
.sidebar .item{
background: #E4E4E4 !important;
}
#items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
background: url('http://www.blogblog.com/1kt/transparent/white80.png') !important;
}
.overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
background: transparent !important;
}
#overview .overview-backdrop{
opacity: 0 !important;
}
  • Click on Apply to Blog
Since Dynamic View’s Sidebar view doesn’t have a background by default, making your posts transparent won’t show you anything since there’s no background defined behind your posts. Below is a way to fix this.
  • Find out your background image’s location or URL by right-clicking on an empty space in Classic Dynamic View. If you’re using FireFox, simply choose View Background Image in the context menu.
  • You will then see your background opened in its direct link. Copy the URL in the address bar.
  • Now go back to your Blogger dashboard and then return to the Add custom CSS box.
  • Append the following code at the bottom of the CSS together with your background’s image (see sample below)
body.sidebar, #sidebar .items{
background: url('PUT_YOUR_IMAGE_BACKGROUNDS_URL_HERE') fixed center top !important;
}
  • Click on Apply to Blog and that’s it! You’ve done it.


0 comments:

Post a Comment