Blogger Hack: How to post PHP Code Snippet and Highligt the code post

Today I add some snippet to highlight my code post.
As you can see in my Blog I used one of the default theme in Blogger Templates Options.
I noticed that the Blogger themes do not supports posting CODE Snippets in your blogpost so I do some blogger hacks to make it possible..

First, to post PHP snippets or codes you must use the compose preview in composing panel and avoid the HTML because the PHP codes will break your blogpost.

Second, After you post the Snippets, Go to HTML preview and you will notice that your code snippets comes with some HTML codes (SPACES) that look like this   which is fine..

Third, Add this code on top of your code post <div class="code"> and close it in the end of your code post </div>. This will enclosed your code post.

Lastly, put a CSS style in a code class that we defined on the <div>, Go to Blogger Template Designer > Advance > Add CSS and add your custom code.

For a code example you can use the code below which I currently used in my Blog.
This is also serve as a Live Example.

.code { padding: 10px; border-left: 4px solid #ccc; background-color: #f9f9f9; color: #6699ff }
.code:hover { background-color: #f7f7f7 }

Now you can use  <div class="code"> at the start of your post and end it in
</div> to have a highlighted code post in all of your blogpost..

No comments:

Post a Comment