Semi-transparent Post Background in Blogger Dynamic Views Template

Before

After

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. 

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 View

Sidebar 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.