How to display HTML, CSS, Javascript Codes in Blogger posts like Free Premium HTML

Showing HTML, CSS & Javascript Codes in Blogger Posts

Like Free Premium HTML

First Let's take a look at the final example:

 

Many users of blogger has problems with showing the codes in their posts, and now I've a simple and easy method to show them like an editor, in this method I'm basically using blogger  

Block-quotes, you see a live example from here: Stack images with cool effect just with pure css3;

So the thing you're gonna do is:

First Open your blogger dashboard 

1. Go to your Blogger dashboard.
2. Next to the gray Post List icon, click the drop-down menu and select Template.
3. Click the Edit HTML button under the "Live on blog" view.

 Then After That :

1. Click inside the code editor.
2. Ctrl + F.
3. Then Type "]]></b:skin>" inside the search box.

Then Right Before that code put this:

blockquote{
        font-family: 'Pathway Gothic One', sans-serif;
        background: #C47D7D;
        padding: 8px;
        padding-left: 10px;
        border: 2px solid #EB4938;
        border-left: 15px solid #EB4938;
        box-shadow: 0 0 10px rgba(0,0,0,.5) inset;
        text-shadow:0 1px rgba(255,255,255,.6);
        max-width: 500px;
        overflow: auto;
    }

The Code should looks like this:

blockquote{
        font-family: 'Pathway Gothic One', sans-serif;
        background: #C47D7D;
        padding: 8px;
        padding-left: 10px;
        border: 2px solid #EB4938;
        border-left: 15px solid #EB4938;
        box-shadow: 0 0 10px rgba(0,0,0,.5) inset;
        text-shadow:0 1px rgba(255,255,255,.6);
        max-width: 500px;
        overflow: auto;
    }

]]></b:skin>

The Using of the Tip:

Step One: Type  Your Wishing code.

Step Two: Highlight your code:

Step Three: Click on block-quote icon from the editor panel:

Or Just See the Video below

Enjoy it Guys;

And Feel Free to share all what you want.

4:58 AM