All About Tricks, Tips And Technology. Geek House is A Tech Blog Which Provide Information About Latest Technology. Also Provide Tips And Tricks. Get Blogging Tips, Online Money Making Tips, SEO, Blogger, Wordpress, Social Media

Friday, 24 February 2012

Add Stylish Box Behind Your Code in your Blog Post

Add Stylish Box Behind Your Code in your Blog Post
You may be Using many code snippets in your blog post. Obviously the code snippets is the important part of your blog and you want to make it more attractive and stylish so that the reader can pay much attentions to your it. 

You even Do not want to write a code every time for formatting your code box area by using a textarea field in your html code.

So why not add a CSS code to your HTML and use it whenever You need it for your code box.
There is three way through which you can make you code box attractive
1.Using a text area
2.writing a class for Div
3.Using Blockquote

1.Using Text Area is simple and Good for Code box.Text area is separate box used to write text.

use below code to use text area
<textarea cols="50" rows="10">
    Write your code here....
                          
</textarea>

2. Writing Class in CSS for a Div and then write Your code within that Division.


Following steps should be followed!!
2.1.copy the bellow code

2.2.Go to Edit HTML page of your blog and find ]]></b:skin>
just press CTRL+F and search for ]]></b:skin> word in your HTML

 2.3.Put above code and paste it just before the ]]></b:skin> word.

2.4.Now create a separate  division in your with class "codebox" as <div class="codebox">

2.5.Write your code within that div.
<div class="codebox">
Your code here
-------------
--------------
</div>

2.6.You are done.

3.Using blockquote and write your code within blockquote and add CSS to the blockquote

<blockquote>
Your Code Here.....
</blockquote>
You have to add CSS to customize blockquote 
add below CSS to your HTML just bfor ]] </b:skin> word.


So Accordingly You can chose one of above method and make your codes more impressive for your readers.

Share on Facebook
Share on Twitter
Share on Google+

Related : Add Stylish Box Behind Your Code in your Blog Post

0 comments:

Post a Comment