Bloggers who own blogs related to web design and development or WordPress or blogger tutorials often write tutorials where they use HTML, CSS, JavaScript or any other code in their posts. If you are among such bloggers then you can show these codes on a colored and professional looking background. It will not only help you to give your blog a professional look but it will also help your readers to easily distinguish the codes used in the post from the other content.
Here are few simple steps to show HTML or CSS code on colored background:
Just follow these simple steps:
Step 1: Sign in to your blog and go to your Dashboard -> Layout -> Edit HTML
Step 2: Now copy the following code and paste it before ]]></b:skin>
.csscode { margin : 15px 35px 15px 15px; padding : 10px; clear : both; list-style-type : none; background : #EEEEEE;; border-top : 2px solid #AAAAAA; border-right : 2px solid #AAAAAA; border-bottom : 2px solid #AAAAAA; border-left : 2px solid #AAAAAA; }
Have a look at the screenshot:
Step 3: Save your template
Step 4: From now onwards whenever you want to insert some codes in your posts always put it between <div class=’csscode’> and </div>
<div class="csscode"> HTML Code Here </div>
That’s all.
Now you can show your code on colored background and give a professional look to your blog 🙂
GR8 tutorial !! going to use this now !!
Thanks Simran
Nice tut mate. Thanks, I have also made one on my own, hope you like it. See ya around.
Professional Looking Code Box:
Professional Looking Code Box
Regards:
TutZone
@ Bariski
Its really nice 🙂
hi Simran thanks for this tricks
indomaniac’s last blog post..Tindakan Pemerintah terhadap Seranagn Flu Babi
Buddy!
This is not working in my template!
Check it!
.-= Wasim Mughal´s last blog ..Best Men ever in the World =-.
I have visited your blog. You are not using this code there !!!
Working nicely on my my blog.
Thanks Simran
.-= Bruce Thompson´s last blog ..Enter Vim… =-.
Gr8 man thanks for this……i was searching for long ….Thankz again
I’m glad that you find it useful 🙂
This is really worthy for me. Thanks for sharing such a nice information.
This will surely help to make a look of the professional and attractive at the same time.
So much useful tutorial you post. Thanks