Monday, 19 August 2013

How to add Code Box in blogger posts?

How to add HTML Code Box in blogger posts
In this tricks i will teach you How t you can enable to put your code in every blogger post these boxes are use to show in HTML code in specific Box from where user Copy this code easily.i also use these boxes for my blogger posts.you can also make your Code Box manually or get code for different Boxes from Internet.
There are many ways to create these boxes in blogger post but we create it with easy method.We create our code box by Using CSS Option.Don't forget that this only work for Blogger not for wordpress or others...


So let;s start our today's lesson.
Step 1:log in with your blogger account.
Step 2:Select your Blog (The Blog :In which Blogger Post you went to add Code Box)
How to add Code Box in blogger posts

Step 3:Go to Dashboard>>Template
How to add Code Box in blogger posts

Step 4:Select Customize
How to add Code Box in blogger posts

Step 5:Now your Blogger Temples Will be appear.Click on Advanced>>ADD CSS
How to add Code Box in blogger posts

Step 6:Paste the following Code in this CSS section and Click on Apply Blog Button.

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }
How to add Code Box in blogger posts
Step 7:When You successfully add this code in CSS Now you can enable to use Code Box for every blogger post.

How to use Code box In blogger Pots!
Whenever you went to add code box in blogger post.
1:Click on HTML section in blogger post
How to add Code Box in blogger posts
2:Paste the following code in your blogger post HTML section.(where you want to add code box)

<div class="code">
Paste your code
</div>
How to add Code Box in blogger posts

Paste your code: Replace Your Code with :"Pate Your Code"
Now Preview you blogger post So congratulations you are all done
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...

1 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2016 Hub of Computer Tricks | All rights Reserveds
Customized by Sufyan Raza Cooperated with Tricks-Lab
Contact No +92-301-6106181

Back to top