Friday, 27 September 2013

How to add a Vignette border to your blog background

This is a great effect which adds depth to a webpage or blog.

From my experience, it completely changes a drab website to something deeper i.e. a layered look.

I you would like to see the effect in action, you can visit the following blogs, and

Ok, so the code...


This part of the code is simply added to your blog by clicking on Template►Customise►Advanced►Add CSS and pasting it into the window, then clicking the Apply to Blog button.

.vignette {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   -moz-box-shadow: inset 0 0 10em #000;  
   -webkit-box-shadow: inset 0 0 10em #000;   
   box-shadow: inset 0 0 10em #000;

You will also need to add a div to the HTML of your blog, so before you go there, read my post HERE on backing up your blogger blog.

Now, to add this to your blog's fundamental HTML, click Template►Edit HTML. Then click anywhere in the code you see. Type CTRL "f" (to find). type <body into the search area and hit enter. It should find the opening "body" tag Looks something like this <body> or <body........>
Underneath this line paste the following piece of HTML code:

<div class='vignette'></div>

Click Preview Template and make sure you like the look before clicking the Save Template button.

That's it! I have been really happy with its effect on the blogs I have used it on.
Any questions, leave a comment!

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me