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.
Post a Comment