Hi friends,
Today m sharing a trick for writing the Html/Javascript code in a box. If you are a Blogger, you need some times to write codes, writing codes without any box seems ackward beacause the codes r scattered.
This beautiful Code container box will contain your codes plus it will give make the job easier for users. they can simply copy the code from your box. The box looks like as shown in the fig.
 |
| Html/Javascript Box for Blogger |
Features :
- Look is awesome. you can change Border color which suits in your blogger template.
- Easy to install
- No need to write large codes and again and again. when u will install this template, u just need to write only two lines for writing codes in the box. It is very simple
How to install :
It is very easy to install it. please follow these steps:
 |
| Place for adding css code |
- Go to Blogger
- Click on template
- Click on Customize
- then click on Advance
- You will see there is an option to add css code as shown in fig in right.
- Copy the Following css code and paste it in the blank space and click on apply
.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; }
- Now u almost done when ever you need to write the html code just switch to html mode when ever you are creating a post. this option is on top left corner. and write the following code where you want to place the html code
<div class=”code”>
Paste Your code here
</div>
8. Then return to compose mode from the Html mode and replace the line Paste your code here with the code which you want to place.
9.you have done….Enjoy.
Friends i have tried my best to explain this Blogger trick, even though if there is any issue, Plz let me know in the comment section. M eager to help you. tk cre….
Your code here
</div> – See more at: http://www.bloggerdoctor.com/2013/03/codeboxhtm.html#sthash.4NUxOIrc.dpuf
</div> – See more at: http://www.bloggerdoctor.com/2013/03/codeboxhtm.html#sthash.4NUxOIrc.dpuf
- Go to template>>customize>>Advanced
- Copy and paste the following css code in the css blank space, click “Apply to blog”.
.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; }
– See more at: http://www.bloggerdoctor.com/2013/03/codeboxhtm.html#sthash.u2dJV1xz.dpuf
- Go to template>>customize>>Advanced
- Copy and paste the following css code in the css blank space, click “Apply to blog”.
.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; }
– See more at: http://www.bloggerdoctor.com/2013/03/codeboxhtm.html#sthash.u2dJV1xz.dpuf
Wow… Very helpful to me bro, because am learning Javascript as of now. Thanks so much for sharing..
Victor Noah brooo, nyc to see u here. Just be in touch for more useful tips and tricks. Happy blogging.
please help me this is working on desktop view ,why ot working on moile view.