How to Add HTML-JavaScript-CSS Codes in Blogger Post with Different Look from Post

Monday 6 August 2012

How to Add HTML-JavaScript-CSS Codes in Blogger Post with Different Look from Post

When you are writing the post in which you have to add some codes like HTML, JavaScript or CSS codes, then it may possible that it is difficult for you to highlight that code and its look remain different from the post contents. So I am going to share the method that how you can add the codes with different look from blogger post.

Your Code will Look like this paragraph.
All the codes will be displayed like these
three lines are in different look.

So first you have to add CSS Style Sheet for stylizing the Quote Box.

Go to your Blogger Dashboard then select Design > Edit HTML and also check the Expand Widget Template.
Now Press Ctrl+F and search for ]]></b:skin>
Now Paste the Following code Before/Above the ]]></b:skin>

.post blockquote {

background: #C8EFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyp-6f-GvscoBWnWbNc8kx4PjojdpoKbiEcm-0I7fYhU1IOEE2qNk4YG3THwY5nHSI5RFlK3GjMuFeE_3CIX9HKuijRnt4AuAiKWLJfN6gX0lVC0ZAwaAYf6DbWitnUpbQacyKyJ64Dck/s1600/1.png);

background-position:top left;

background-repeat:repeat-y;

margin: 0 20px;

padding: 10px 20px 10px 45px;

border-top: 2px solid #DDD;

border-right: 5px solid #666;

border-left: 2px solid #DDD;

border-bottom: 5px solid #666;

font-size: 0.9em;

}

.post blockquote p {

margin: 0;

padding: 0 0 15px;

}

.blockquote {

font: 18px normal sans-serif,Tahoma;

padding-top: 10px;

margin: 5px;

text-indent: 65px;

}

.blockquote div {

display: block;

padding-bottom:10px;

}

.blockquote p {

margin: 0;

padding-top:10px;

}

Now Save the Template.

How to Use this?

Now to check your implementation, Type or paste the HTML-JavaScript or any Coding in your Post Editor.
Select all Coding and press only one time the "Quote" Button