Pro-Developer: Hacking Blogger

Showing posts with label Hacking Blogger. Show all posts

Thursday, February 7, 2008

How to write & colorize html code inside post

Well, you probably have noticed that when you write a html code in your post, blogger does not show it in html format, rather it execute your html. I was facing the same problem while trying to write a html code example. Let's see how we can write html inside a blogger post. In this tutorial I will also show you how to colorize or highlight your html, Java or other syntax in a very nice format.

Way to write code inside a post
Just one thing you need to do, convert < to < and > to > from your html code.

How to convert code & colorize it automatically?
The above manual process is very time consuming. You can do this conversion automatically with CodeHTMLer. Simply paste your C#, C++, Java, JScript, VB.net, XML, Powershell and F# code into the available text box and click "Htmlify Code" button. The page will refresh and you will find your converted code at the bottom of the page. Copy them and paste it into your blog post.

Try it yourself
Let's see the process with the following html code:
<html> <body> <h1>Hello World</h1> </body> </html>

Got to this link, paste the above html code, choose code language as XML & press "Htmlify Code" button. It will return you following output:
<pre><html> <body> <h1>Hello World</h1> </body> </html></pre>

Copy & paste these codes into your blog post. Publish your post and finally you will find following output:

<html>
<body>
    <h1>Hello World</h1>
</body>
</html>

Isn't it cool? This process is very good and fast. But there is a limitation of this method. It can colorize only few languages.

Now let me know how do you write code inside your post?

Bookmark It!

Subscribe in a reader Post Your Comment View Comments (1)

Thursday, January 31, 2008

Create Expandable Post Summary in Blogger

I posted this same tutorial into my itsafun.blogspot.com. I am posting it again to let you know about this nice trick. Here you go -

I have setup several blog site using blogger or blogspot. I like it very much. But one most obvious thing I was missing is the option to create expandable post summaries. By default blogger shows full story in the first page and all comments in the own page of the post when you click the post's title. The main problem is most of the time people leave after reading the article. They do not view the comments and hence can't participate on the discussion about that post. Moreover, the first page become longer and longer with full stories. I was seeking for a solution where only few lines will display in the first page as introduction and people will read the full story & comments after clicking "Read More..." link. In help.blogger.com I have found a solution. But it has few disadvantages. Main problem is - you have to write a css code manually with your each post. It will be the worst situation if you already have posted lots of articles. Then I have developed a solution with javascript where you do not need to worry about creating post summary. It automatically hides the rest of the post. Here you go -

In this method first paragraph will be used as post summary. You will view the full post after clicking "Read More..." link. Note, you must enable post pages in order to using this feature. Also backup your template html before editing it.

Now follow these instructions:

1. Go to your blogger setting panel -> Template -> Edit HTML

2. Check on "Expand Widget Templates"

3. Search for </head> & replace it with following javascript code:

<script type='text/javascript'> function truncate_body (postid) { var id = document.getElementById(postid); var postbody = id.innerHTML; var len = postbody.toLowerCase().indexOf("<br"); if(len>0) postbody = postbody.substring(0, len); id.innerHTML = "" + postbody + ""; id.style.display="block"; } </script> </head>
4. Search for <data:post.body/> & replace it with following code:
<b:if cond='data:blog.pageType != "item"'> <div expr:id='"postid_" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> truncate_body("postid_<data:post.id/>"); </script> <a class='read_more' expr:href='data:post.url'>Read More...</a> <b:else/> <data:post.body/> </b:if>

That's it. Now let me describe the code. It is not necessary to understand the code. You may skip it if the above procedure works for you.

In the 4th step I have created a div with an unique id. Then a javascript function truncate_body is called which is declared between the head of the html. In the function call it passes the id of that div.

The truncate_body function loads the full post into a varible name postbody. Then it search for the index of the fist occurance of html in order to avoid errors. If the <br is found in the body, it creates a sub string from the post's beginning to <br position & replaces the postbody to that substring.

If in your blog that code do not find <br then search for <p or check the html source for solution.

Hope this will work for you. But If it does not work then just post a comment here with your blog url. I will try to solve it.