How To Add Html And Other Codes To Your Blog Posts. And How To Style And Customize The Code Box

Hi all, few days ago i made and added here a new tool called Html Character EnCoder., For more info about this tool and to know more about how to use it please Check out this tutorial.
The previous tutorial let you know in general way how to add a code, for example HTML code. to blogger posts.
But today we’ll discuss and learn how to make you code box looks better and how you can make it looks very professional.
In the previous tutorial i told you how to add code to your blogger post but in this tutorial i’ll teach you how to style your code box and how to post the code in a professional way.
If you still don’t understand please click here to see a demo for the final result.
so please concentrate with me and lets do it.
In this step the first thing to do is to choose on of the following four styles for your code box.
Once you see your suitable one, please copy it’s code and continue reading.
The box style 1 code

.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCZbCX0QxHQTUH1kLDLojWVsr0GmREQ_0n7uGCyeq6JsQRAc9kU9mfMbAJK4xsg-xFn5n8cPkwmTOTwWeEjxfYKZHR7vulPLa-3bw9eiiGGck0ieggtBD3dzFk5MlXOD84Ne4c0TB5ociO/s1600/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}

The box style 2 code

.code{
margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmjiNNE9XhLzU8tWtrl8M1KuZuqeleoA0OiluOUbShlv8YVDowMU_1wlT2WBITnRT7oC2uyVRLNVdXvDuifoTwvp-FXDeVGadsuXmQ5kv2fdil66wLp81W5X5esdHO2zQFgq7B3Pkxpmg/s1600/codeview2.gif) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
}

The box style 3 code

.code {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCe9WyH0ZRxKKAU5pNzJV9qK_ScwCJ2JPiL08AS4sgNKTQEX5CwigzX0JGF_j3KNfKwpmt4xMkLyCaPWrpQ87eT6vIcVGl8jb-gQlBFbmfh2FFcBiecnMslfdfzIUK9c5eZtPGVzwTzlJ/s1600/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;
}

Once you Choose your favorite box, copy it’s code and go to your blogger account, navigate to Dashboard >> layout >> edit html > and find the following code and paste your code box af
The box style 4 code

.code {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9FEDjlKaidByoXvLObnW8duwvCEFEvZFvCgPAac_0WWhPL0vjIzQ8IcpokWqztqMt_Fo56jxmtMdh03mu5iKGJzdL4cev7oH1A4UbtvWnnzPRcyuJk1gkamUuF6pfoXw4ISasa_YvO9Pw/s1600/codesbg1.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}

After you find your favorite codebox please copy it’s code and go to your blogger account. navigate to Dashboard >> layout >> edit html, and find the following code then paste your codebox code before it.

]]></b:skin>

Note that, you have to copy and paste your code box code before the above code.
In this step you can customize your code box style to give it your unique colors, And you can pass this step, it’s not a must to do step.
If you’ll pass this step please click Save Template
Now and move to step 3, Or just keep reading.
To customize your box first you have to open our html hex color codes generators.
Then if you have noticed that the box code have three values in red, green and blue color, you can change this values to your favorite by generating your color code using our color codes generator.
and here is what each value responsible for

Red : Box Main Background.
  Green : Text Color.
  Blue : Border Color.

After making you modifications Please click Save Template

But the difference here is that you wont paste the generated code directly in your post, you have to put it between the following tags,

<div class="code">
  Your generated code should added here 
</div>

I hope you all got it and understood how is it work,
and Again here is the a demoblog to see it in action, and please don’t hesitate to leave your comments for any questions.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://androidmobile7.blogspot.com/2013/06/how-to-add-html-and-other-codes-to-your.html. Terima kasih sudah singgah membaca artikel ini.