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(&quot;&lt;br&quot;);

if(len&gt;0)
postbody = postbody.substring(0, len);

id.innerHTML = &quot;<p>&quot; + postbody + &quot;</p>&quot;;
id.style.display=&quot;block&quot;;
}
</script>
</head>

4. Search for <p><data:post.body/></p> & 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(&quot;postid_<data:post.id/>&quot;); </script>
<p>
<a class='read_more' expr:href='data:post.url'><b>Read More...</b></a>
</p>
<b:else/>
<p><data:post.body/></p>
</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 &lt;br from the post. I searched &lt;br instead of <br /> in order to avoid errors. If the &lt;br is found in the body, it creates a sub string from the post's beginning to &lt;br position & replaces the postbody to that substring.

If in your blog that code do not find &lt;br then search for &lt;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.

Bookmark It!
Subscribe in a reader Post Your Comment View Comments (11)

Wednesday, January 30, 2008

My Web Developments

I have been working with PHP/MySQL since 2005. I worked in a web development company for 1 year. On June 2006 I left that company and tried to become as a freelancer web developer. I registered in RentACoder and started bidding. But it was not so easy to get the first project. I remember, I posted bids almost 2 weeks in RAC before getting the first one.

It is very much difficult to get first project in RAC as there are more than 200,000 registered coders. I was little bit disappointed at the beginning. But I was determine to become successful here. After completing 3 small projects successfully one day I met with a buyer who asked me to show how fast I can develop a ecommerce site. On that project I impressed him so much that since that day he is sending me still now project one after another.

In RAC I have completed more than 60 projects and my current ranking is below 650 among 200,000 coders which is impressive position for most of the buyers. I got 10 out of 10 rating in all projects except one. On that project I got 9 out of 10 rating. My average rating is now 9.96 which also help me to get projects easily.

On May 2007 I have setup a small web development team Webcraft Bangladesh with 3 more programmers. The site is under construction and we are planning to make this site as much powerful as RAC.

In this blog I will try to help beginners to become a successful & professional freelancer web developers. I will post tips & tricks in my point of view. My next plan is to create a reader's forum where you can discuss with each other to get more help. Hope you will enjoy it. So keep in touch, lots of posts & new topics are coming shortly.

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

Wanna be a web developer?

I posted this into my another blog It's a fun !!! I think you will find it helpful. Let me describe myself, I am a web developer working with php/mysql from last few years. My friends often ask me, how to start and become professional. I give them following guideline which may take more or less 10 weeks. I hope this will help you too. Here you go:

  1. Week 1: You need a book name "Beginning PHP 5" by Wrox publication. It's a good book to start. Read chapter 2, 3, 4 to learn php & also read chapter 9, 10, 11 for mysql.
  2. Week 2: After reading these 6 chapters now practice all examples found in these chapters. Type the same code in the editor & see how it works in the browser.
  3. Week 3: Build a simple content management site where people register, login & post articles. Also create an admin panel where administrator can add/edit/delete users & their articles.
  4. Week 4: Build a photo submission & rating site like www.hotornot.com, www.ivotethis.com or www.whosthebitch.com
  5. Week 5: You need to understand an ecommerce site. Here is an open source solution name "osCommerce". Download it from www.oscommerce.com, setup & try to understand how it works. Also download the documentation & read it.
  6. Week 6: Now try to build a simple ecommerce site.
  7. Week 7: Learn Smarty template. It helps to organize your code by separating php from html. You will find help from here: http://smarty.php.net/crashcourse.php
  8. Week 8: To become professional you need to have basic idea about the followings:
  9. Week 9 & 10 (Optional): Now try to understand a script name "Joomla" - www.joomla.org . It's a Content Management Script (CMS). With this open source script you can build any website in the world :) & can deliver to your client fast. It's a great script I have ever found.
Let me know what you think. Have fun :)

Bookmark It!
Subscribe in a reader Post Your Comment View Comments (2)