Semi-transparent Post Background in Blogger Dynamic View | Southern Speakers v3.0Several months ago, I've shared a set of code that allows you to
customize your Dynamic View posts' background. The tweak was written in a generic note, which allows the code to be changed to fit users' different background preferences.. However, if you're looking for ways to change Dynamic View default post backgrounds to a semi-transparent background, the previous post isn't gonna help much - thus the reason for this week's post. To put simply, this week's tutorial allows you to transform your default post background (plain ol' white) to a slightly transparent version of itself - letting your beautiful background to be seen through your posts. This is a respond to
blog reader (and a friend) Bob Kansas.
Go to
Dashboard --> Template --> Customize --> Advanced --> Add CSS --> Paste the following code towards the bottom of your 'Add CSS' box --> Press enter after the last character of the last line } --> Apply to Blog. 1 2 3 4 5 6 7 8 9 10 11 12 | .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;
}
|
Note: If you have existing CSS codes in your 'Add CSS' box, it is very important that the newer code goes towards the bottom of your 'Add CSS' box, not top.. Your CSS code needs to be in a chronological order to avoid accidental over-riding, from top to bottom..
Extra: Fix for Sidebar ViewSidebar view, by default, does not have a background. In other words, making your posts transparent isn't gonna show you anything, as there is no background defined underneath your posts.
Step 1:To fix this, first, find out the direct link for your background image. This can be done by right-clicking on an empty space using
Classic Dynamic View, and choose '
View Background Image', using
Firefox web browser.
Step 2:You will now see your background opened in its direct link. Copy the address that you see in your address bar. This is what I've gotten for mine:
1 | http://themes.googleusercontent.com/image?id=1iPtMo_39vJqJbUnz9JR0nlKBla1Ic3fhOxBAGQ3nDY01LjYZT7YDLt_k1VW2aWqP2czP
|
Step 3:Go to
Dashboard --> Template --> Customize --> Advanced --> Add CSS -->
Paste the following code towards the bottom of your 'Add CSS' box..1 2 3 | body.sidebar, #sidebar .items{
background: url('http://themes.googleusercontent.com/image?id=1iPtMo_39vJqJbUnz9JR0nlKBla1Ic3fhOxBAGQ3nDY01LjYZT7YDLt_k1VW2aWqP2czP') fixed center top !important;
}
|
Step 4:
Change the address in Line 2 above to the address that you've gotten from Step 2. Hit on 'Apply to Blog' once you're done.
You might also like:
