Code Box

Today We Will Going To How To Create Code Box In Blogger Website. We Will Create With Html. 

Varsion: 1.0 - Code Box

First You See a Code Box Demo After We Start:

Demo

What is Code Box?

Code Box:  Code Box You Can Use On Blogger Website You Can Add a Html,Css,Js Code In One Box.

Requirement:

Requirements:
1. Blogger Account
2. Blogger Plus Ui Template Website 

Download Plus Ui Template

How to create Code Box?

Step 1: Go To Blogger.com 

Step 2: Login To Your Account

Step 3: Click To Create Post/Page.

Step 4: Select Compose View To Html View 

Step 5: Past This Code: 

<div class='pre tb'>

  <!--[ Active function ]-->

  <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>

  <input class='prei hidden' id='preT-2' type='radio' name='preTab'>

  <input class='prei hidden' id='preT-3' type='radio' name='preTab'>

  <!--[ Header/title ]-->

  <div class='preH tbHd scrlH'>

    <!--[ Change atribute data-text='...' to replace title ]-->

    <label for='preT-1' data-text='HTML'></label>

    <label for='preT-2' data-text='CSS'></label>

    <label for='preT-3' data-text='JS'></label>

  </div>

  <!--[ Content ]-->

  <div class='preC-1'>

    <pre>Your_code_is_here</pre>

  </div>

  <div class='preC-2'>

    <pre>Your_code_is_here</pre>

  </div>

  <div class='preC-3'>

    <pre>Your_code_is_here</pre>

  </div>

</div>

Step 6: Save The Code 

Conclusion

This is all about making a Code Box. I hope you enjoy this article. Please do share this article. And if you have any questions then ask us in comment box. 

© Copyright
www.developerdhaval.blogspot.com/