HTML CSS and Other Coding Background

Many professional Bloggers use the backgrounds to show their special text OR codes of HTML, CSS, JavaScripts, C, C++, C#, Java, PHP, Cobol, Ajax etc. It seems like that very pro and unique and it gives a very good impression on the visitor. This is specially made by CSS and HTML coding with some images.

Without Mouse Hover Effect

Mouse Hover Effect

Make Coding Background in Different Style

• Login to Blogger > Dashborad
• Go to Design > Edit HTML
• Click on Check Expand on Template.
• Search for </head>
• Paste below code before </head>

<link type="text/css" href="https://dl.dropbox.com/u/63968842/html%20codes%20css%20background%20%28www.fblatest.in%29.css" rel="stylesheet" />

• Save Your Template.

Cardboard Effect Style Sheet 

Where you want to insert codes in your posts always put it between <div class=”fb2”> and </div> and Replace HTML CODE HERE with Your Codes.

<div class="fb2">
HTML Code Here
</div> 

Result

margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #EEEEEE url() repeat-y top left; border-top : 1px solid #AAAAAA; border-right : 1px solid #AAAAAA; border-bottom : 1px solid #AAAAAA; border-left : 1px solid #AAAAAA;

Rolling Effect on Mouse Hover

Where you want to insert codes in your posts always put it between <div class=”fb7”> and </div> and Replace HTML CODE HERE with Your Codes.

<div class="fb7">

HTML Code Here

</div>

Result

margin : 15px 35px 15px 15px; padding : 20px 10px 10px 35px; background : #EEEEEE url() repeat-y top left; border-top : 1px solid #AAAAAA; border-right : 1px solid #AAAAAA; border-bottom : 1px solid #AAAAAA; border-left : 1px solid #AAAAAA;

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.

Posted in: Blogger Tutorials, CSS, Widgets