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 this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

3 comments:

  1. Wonderful sharing of this post. thanks for sharing.

    ReplyDelete
  2. https://lh5.googleusercontent.com/-_NHYkuf5bZg/T2WEjOhTIxI/AAAAAAAACcg/76qRE27R_ig/s36/30.gifIt's Working..Thanks For Sharing....
    Unlock Android Using Voice Commands

    ReplyDelete