<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Hardian Nazief</title>
	
	<link>http://hardiannazief.com</link>
	<description>Food, Walk Around Jakarta, WordPress and Rants on Random Geekiness</description>
	<lastBuildDate>Mon, 19 Jul 2010 17:17:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/Hardian" /><feedburner:info uri="hardian" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>Hardian</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>Like Button Metadata in WordPress</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/Qwkac5GMtUo/</link>
		<comments>http://hardiannazief.com/07/like-button-metadata-in-wordpress/#comments</comments>
		<pubDate>Mon, 19 Jul 2010 04:07:14 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1134</guid>
		<description><![CDATA[<p>Adding Facebook Like Button dinamically on WordPress posts is easy, there’s a tut on it in wpbeginner, to summarize the tut, let just say that you can add like button [...]]]></description>
			<content:encoded><![CDATA[<p>Adding Facebook Like Button dinamically on WordPress posts is easy, there’s a tut on it in <a href="http://www.wpbeginner.com/wp-tutorials/how-to-add-facebook-like-button-in-wordpress/">wpbeginner</a>, to summarize the tut, let just say that you can add like button by adding this code below on single.php file on WordPress themes</p>
<p>You can add this code under the title of post (the_title) or under the content (the_content), or anywhere you like actually, the code uses permalink that wrap in php url_encode, there&#8217;s a styling for the frame, by using scrolling, border and inline css.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="php" style="font-family:monospace;">&lt;iframe 
src=&quot;http://www.facebook.com/plugins/like.php?href=<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> <span style="color: #990000;">urlencode</span><span style="color: #009900;">&#40;</span>get_permalink<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&amp;amp;layout=standard&amp;amp;show_faces=false&amp;amp;width=450&amp;amp;action=like&amp;amp;colorscheme=light&quot; 
scrolling=&quot;no&quot; 
frameborder=&quot;0&quot; 
allowTransparency=&quot;true&quot; 
style=&quot;border:none; overflow:hidden; width:450px; height:60px;&quot;&gt;&lt;/iframe&gt;</pre></td></tr></table></div>

<p>But if your posts is about a product like movies, books, clothes or anything, you could add  metadata on it. Adding additional info about the posts is by using the Facebook Open Graph Protocol. I’ve stumbled to Facebook Open Graph while developing on my wife online store using WordPress in <a href="http://jongkok.com/" title="toko menjual masker motor">Jongkok.com</a>.</p>
<blockquote><p>The Open Graph protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things. things like movies, sports teams, celebrities, and restaurants.</p></blockquote>
<p><a href="http://developers.facebook.com/docs/opengraph">Source</a></p>
<p>There’s an extensive explanation on what kind of additional data you could add on <a href="http://developers.facebook.com/docs/opengraph">Open Graph Facebook</a>.</p>
<p><img src="http://lh4.ggpht.com/_PmgKlVMMcic/TENjFnhSNLI/AAAAAAAACdI/abAttiEc86s/s800/ICHC-book1-thumb.jpeg" alt="lolcat book" /></p>
<p>There’s a lot of them, you could check it on the Open Graph page. but i’m only going to use the ones on this code below and for the example product i use LOLcat book</p>
<p>The required ones are</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> property<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;og:title&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;LOLcat Colleckshun&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> property<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;og:type&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;book&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> property<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;og:url&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://lolmart.com/product/i-can-has-cheezburger-a-lolcat-colleckshun/&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> property<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;og:image&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://test-lolmart.com/wp-content/uploads/2010/05/ICHC-book1-thumb.jpeg&quot;</span><span style="color: #66cc66;">/</span>&gt;</span></pre></td></tr></table></div>

<p>The recommended one</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> property<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fb:admins&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;YOUR_FACEBOOK_USER_ID&quot;</span><span style="color: #66cc66;">/</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- You could use 2 user or by apps ID--&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> property<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;og:site_name&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;lolmart&quot;</span><span style="color: #66cc66;">/</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> property<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;og:description&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;The original I Can Has Cheezburger book is a favorite gift item that makes you and your friends laugh with joy..&quot;</span><span style="color: #66cc66;">/</span>&gt;</span></pre></td></tr></table></div>

<p>The meta data should be put on the header section. To applied it to WordPress, each meta data, i’m going to use WordPress function in header for single posts (header.php), the final code will be look like this</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #666666; font-style: italic;">// facebook opengraph</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span> is_single<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;meta property=&quot;og:title&quot; content=&quot;<span style="color: #000000; font-weight: bold;">&lt;?</span> single_post_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;/&gt;  &lt;!-- The title of product --&gt;
&lt;meta property=&quot;og:type&quot; content=&quot;book&quot;/&gt; &lt;!-- look what type of product on opengraph --&gt;
&lt;meta property=&quot;og:url&quot; content=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; /&gt;&lt;!-- permalink --&gt;
&lt;meta property=&quot;og:image&quot; content=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">echo</span> get_post_meta<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;image&quot;</span><span style="color: #339933;">,</span> <span style="color: #000088;">$single</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;/&gt; 
&lt;!-- image use is 3:1 ratio, i’m using custom field named “image” for this --&gt;
&lt;meta property=&quot;fb:app_id&quot; content=&quot;xxxxxx&quot;/&gt;&lt;!-- your web app id, or use user ID --&gt;
&lt;meta property=&quot;og:site_name&quot; content=&quot;YourWebsite.com&quot; /&gt;&lt;!-- your site name --&gt;
&lt;meta property=&quot;og:description&quot; content=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_excerpt<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; /&gt;
&lt;!-- for the description, while posting a product make sure the excerpt are filled --&gt;
<span style="color: #000000; font-weight: bold;">&lt;?</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>That’s it!<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/04/doin-it-wrong/" rel="bookmark" title="April 14, 2009">Doin It Wrong?</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/11/wordpress-admin-management-xtended/" rel="bookmark" title="November 5, 2008">WordPress Admin Management Xtended</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/06/using-thematic-child-themes/" rel="bookmark" title="June 8, 2009">Using Thematic Child Themes</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/12/create-custom-posts-layout-in-home-page-thematic-child-theme/" rel="bookmark" title="December 23, 2009">Create Custom Posts Layout in Home Page (Thematic Child Theme)</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/02/learning-thematic/" rel="bookmark" title="February 7, 2009">Learning Thematic</a></em></li>
</ul>
<p><!-- Similar Posts took 7.388 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/Qwkac5GMtUo" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/07/like-button-metadata-in-wordpress/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/07/like-button-metadata-in-wordpress/</feedburner:origLink></item>
		<item>
		<title>The Quick Brown Fox Jumps Over The Lazy Dog</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/TWst6eLRg1s/</link>
		<comments>http://hardiannazief.com/02/the-quick-brown-fox-jumps-over-the-lazy-dog/#comments</comments>
		<pubDate>Mon, 08 Feb 2010 00:08:52 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>
		<category><![CDATA[geeks]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1122</guid>
		<description><![CDATA[<p></p>
<p>in case you&#8217;ve missed, The quick brown fox jumps over the lazy dog, no he really does, literally jump over that darn it lazy dogs! :D
here&#8217;s the video</p>
<p></p>
<p>Pic by GL.ANDIS
via [...]]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://farm3.static.flickr.com/2804/4251762606_f89912c233.jpg" title="quick brown fox jump over the lazy dog" class="alignnone" width="433" height="500" /></p>
<p>in case you&#8217;ve missed, The quick brown fox jumps over the lazy dog, no he really does, literally jump over that darn it lazy dogs! :D<br />
here&#8217;s the video</p>
<p><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/00E_LVo_aTo&#038;hl=en_US&#038;fs=1&#038;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/00E_LVo_aTo&#038;hl=en_US&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object></p>
<p><em>Pic by <a href="http://www.flickr.com/photos/glandis/">GL.ANDIS</a></em><br />
<em>via <a href="http://attuworld.com/just-attu/the-quick-brown-fox-jumps-over-the-lazy-dog.html">Attu</a></em><br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/12/video-tilt-shift-monster-truck-rallye/" rel="bookmark" title="December 2, 2008">Video: Tilt-Shift Monster Truck Rallye</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/08/learn-how-to-iron-ultimate-guide/" rel="bookmark" title="August 17, 2007">Learn how to iron [ultimate guide]</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/06/a-very-good-reason-to-upgrade-your-pc/" rel="bookmark" title="June 30, 2008">A Very Good Reason to Upgrade Your PC</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/11/gecko-pimp/" rel="bookmark" title="November 28, 2008">Gecko Pimp</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/11/numa-numa/" rel="bookmark" title="November 7, 2008">Numa Numa!</a></em></li>
</ul>
<p><!-- Similar Posts took 4.953 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/TWst6eLRg1s" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/02/the-quick-brown-fox-jumps-over-the-lazy-dog/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/02/the-quick-brown-fox-jumps-over-the-lazy-dog/</feedburner:origLink></item>
		<item>
		<title>Rollip.com</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/nYJ3OxGcWkI/</link>
		<comments>http://hardiannazief.com/01/rollip-com/#comments</comments>
		<pubDate>Thu, 28 Jan 2010 08:01:06 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[photography]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1115</guid>
		<description><![CDATA[<p>Earlier this year, i got an email from Rollip, asking me if i could review their site because it would interest the reader here, I reply, i&#8217;d be happy to [...]]]></description>
			<content:encoded><![CDATA[<p>Earlier this year, i got an email from <a href="http://www.rollip.com/">Rollip</a>, asking me if i could review their site because it would interest the reader here, I reply, i&#8217;d be happy to do it! :) I found Rollip last year from <a href="http://www.makeuseof.com/">Makeuseof.com</a>, tried a several effect and forgot ever since because of works. This site is really useful for me if i want a quick effect on my images.</p>
<p>The awesomeness of the site is the availability of the effect, here&#8217;s an images that i&#8217;ve tried on<br />
The original photo</p>
<p><img src="http://lh3.ggpht.com/_PmgKlVMMcic/S1_eKPJ_RbI/AAAAAAAACTM/-NgF3zmiU0I/s800/IMG_9089.jpg" alt="Me &#038; My Wife" /></p>
<p>Here&#8217;s some of the effect</p>
<p><img src="http://lh6.ggpht.com/_PmgKlVMMcic/S2E4llHq2BI/AAAAAAAACTs/DZdfTjQNHco/s800/image-preview1.jpg" alt="Rollip Effect 1" /></p>
<p><img src="http://lh6.ggpht.com/_PmgKlVMMcic/S2E4llm6MaI/AAAAAAAACTw/0lZYqnnYpI0/s800/image-preview2.jpg" alt="Rollip Effect 2" /></p>
<p><img src="http://lh6.ggpht.com/_PmgKlVMMcic/S2E4l2NditI/AAAAAAAACT0/25d_zhYCLCQ/s800/image-preview3.jpg" alt="Rollip Effect 3" /></p>
<p><img src="http://lh6.ggpht.com/_PmgKlVMMcic/S2E4l0ydn8I/AAAAAAAACT4/ZUGLKUcPCgE/s800/image-preview4.jpg" alt="Rollip Effect 4" /></p>
<p><img src="http://lh6.ggpht.com/_PmgKlVMMcic/S2E4mOTAKNI/AAAAAAAACT8/KeZidipFkt0/s800/image-preview5.jpg" alt="Rollip Effect 5" /></p>
<p>the effects was awesome but some of it looks like a filter rape to me, nonetheless the other look simply awesome with just a simple click, it would be nice if they could also mention the name of the effect. The last effect is simply really neat and old look awesomeness. Note that you&#8217;ll only get low-res result for the effect, if you want the high-res you have to pay, for a profile pic in social networking the low-res result look okay to me.<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/07/puspaningrum-theme/" rel="bookmark" title="July 22, 2009">Puspaningrum Theme</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/02/choosing-a-good-one/" rel="bookmark" title="February 10, 2008">Choosing a Good One</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/09/tetris-ds/" rel="bookmark" title="September 15, 2009">I Dream of Tetris</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/03/quality-browsing/" rel="bookmark" title="March 8, 2007">Quality browsing&#8230;</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/03/smush-it/" rel="bookmark" title="March 10, 2009">Smush It!</a></em></li>
</ul>
<p><!-- Similar Posts took 5.763 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/nYJ3OxGcWkI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/01/rollip-com/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/01/rollip-com/</feedburner:origLink></item>
		<item>
		<title>Create Thumbnail From Offsite Image Using Timthumb Beta</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/-vgH6DHb_6w/</link>
		<comments>http://hardiannazief.com/12/create-thumbnail-from-offsite-image-using-timthumb-beta/#comments</comments>
		<pubDate>Sat, 26 Dec 2009 18:19:30 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[geeks]]></category>
		<category><![CDATA[thematic]]></category>
		<category><![CDATA[thematic child theme]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wordpress theme]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1109</guid>
		<description><![CDATA[<p>
by petervanallen</p>
<p>I host most of my images in Picasa and Flickr, for along time i couldn&#8217;t use the native feature in WordPress to create custom thumbnail that i wanted, i [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://farm2.static.flickr.com/1080/703213567_88d9bb40b5.jpg" alt="thumbnail" /><br />
by <a href="http://www.flickr.com/photos/petervanallen/">petervanallen</a></p>
<p>I host most of my images in Picasa and Flickr, for along time i couldn&#8217;t use the native feature in WordPress to create custom thumbnail that i wanted, i could upload it and use custom fields, but it would be tediously boring to do that.</p>
<p>A couple of month ago a message from heaven came by to fulfilled my wishes and whisper it to Ben Gillbanks ear, the developer of timthumb. So thus came the timthumb beta for offsite image. After downloading it i tried it, my wishes fulfilled and it looks awesome! Oh Joy</p>
<p><object width="501" height="342"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=2782495&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=2782495&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="501" height="342"></embed></object>
<p><a href="http://vimeo.com/2782495">Happy! Happy! Joy! Joy!</a> from <a href="http://vimeo.com/user1021817">psherman420</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>This hack is similar with the one that i use on this website and this was a follow up from my previous post about <a href="http://hardiannazief.com/12/create-custom-posts-layout-in-home-page-thematic-child-theme/">how to create custom index post layout</a>, but the method could be applicable for other WordPress themes.</p>
<p>Here is the screen shot on how the thumbnail will look like on the home page (i&#8217;m using thematicsamplechildtheme in the Thematic folder)</p>
<p><a href="http://lh6.ggpht.com/_PmgKlVMMcic/SzL6KARPkgI/AAAAAAAACRc/sw90P3tcLHg/s800/Hardian%20Nazief%20-%20Just%20another%20WordPress%20weblog_full.png"><img src="http://lh3.ggpht.com/_PmgKlVMMcic/SzL6KOA4cLI/AAAAAAAACRg/PtCLmURNKPw/s800/cropl.jpg" alt="thumbnail screenshot" /></a></p>
<p>First we need to download timthumb beta at Binary Moon in <a href="http://www.binarymoon.co.uk/2009/07/timthumb-beta-test/">here</a>, put it on your child theme folder then create a folder called temp &#038; cache (writeable 777)</p>
<p>Here are the code that we are going to use</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000000; font-weight: bold;">function</span> remove_index_loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  remove_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_indexloop'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'init'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'remove_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> catch_that_image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">,</span> <span style="color: #000088;">$posts</span><span style="color: #339933;">;</span>
  <span style="color: #000088;">$first_img</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
  <span style="color: #990000;">ob_start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #990000;">ob_end_clean</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000088;">$output</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_match_all</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'/&lt;img.+src=[\'&quot;]([^\'&quot;]+)[\'&quot;].*&gt;/i'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_content</span><span style="color: #339933;">,</span> <span style="color: #000088;">$matches</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000088;">$first_img</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$matches</span> <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$first_img</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">//Defines a default image</span>
    <span style="color: #000088;">$first_img</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;images/default.gif&quot;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #b1b100;">return</span> <span style="color: #000088;">$first_img</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> custom_index_loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">/* Count the number of posts so we can insert a widgetized area */</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
      <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
        <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$counter</span><span style="color: #339933;">++;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>    
          &lt;div class=&quot;column <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$counter</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'one'</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'two'</span><span style="color: #339933;">;</span> <span style="color: #000088;">$counter</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
            &lt;div class=&quot;clear-fix&quot;&gt;
              &lt;div id=&quot;post-<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_ID<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; class=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_post_class<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
                <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postheader<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                  <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span>catch_that_image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;a href=&quot;'</span> <span style="color: #339933;">.</span>get_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot; title=&quot;'</span> <span style="color: #339933;">.</span>get_the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot;&gt;&lt;img src=&quot;'</span> <span style="color: #339933;">.</span>get_stylesheet_directory_uri<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'/timthumb.php?src='</span> <span style="color: #339933;">.</span><span style="color: #990000;">urlencode</span><span style="color: #009900;">&#40;</span>catch_that_image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;amp;h=100&amp;amp;w=240&amp;amp;zc=1&amp;amp;q=90&quot;&gt;&lt;/a&gt;'</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                    &lt;div class=&quot;entry-content&quot;&gt;
                    <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_excerpt<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                    <span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_link_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'before=&lt;div class=&quot;page-link&quot;&gt;'</span> <span style="color: #339933;">.</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Pages:'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;after=&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                &lt;/div&gt;
            <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postfooter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
          &lt;/div&gt;&lt;!-- .post --&gt;
      &lt;/div&gt;&lt;!-- .clear-fix --&gt;
   &lt;/div&gt;&lt;!-- .column --&gt;
   <span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_template<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$count</span><span style="color: #339933;">==</span><span style="color: #000088;">$thm_insert_position</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'index-insert'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
    <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_indexloop'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'custom_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>The code below are to catch the first image on the post</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> catch_that_image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">,</span> <span style="color: #000088;">$posts</span><span style="color: #339933;">;</span>
  <span style="color: #000088;">$first_img</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
  <span style="color: #990000;">ob_start</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #990000;">ob_end_clean</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000088;">$output</span> <span style="color: #339933;">=</span> <span style="color: #990000;">preg_match_all</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'/&lt;img.+src=[\'&quot;]([^\'&quot;]+)[\'&quot;].*&gt;/i'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">post_content</span><span style="color: #339933;">,</span> <span style="color: #000088;">$matches</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #000088;">$first_img</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$matches</span> <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">empty</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$first_img</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> <span style="color: #666666; font-style: italic;">//Defines a default image</span>
    <span style="color: #000088;">$first_img</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;images/default.gif&quot;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
  <span style="color: #b1b100;">return</span> <span style="color: #000088;">$first_img</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>i use the_excerpt for the content so there&#8217;s no image there, i&#8217;m going to try catch the first image from post so i can feed it to the timthumb, this awesome function is from <a href="http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it">WPrecipes</a> Jean-Baptiste Jung.</p>
<p>after catching it, we can call it with this</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #b1b100;">echo</span> catch_that_image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span></pre></td></tr></table></div>

<p>then i&#8217;m going to insert it to the custom index loop</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span>catch_that_image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'&lt;a href=&quot;'</span> <span style="color: #339933;">.</span>get_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot; title=&quot;'</span> <span style="color: #339933;">.</span>get_the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot;&gt;&lt;img src=&quot;'</span> <span style="color: #339933;">.</span>get_stylesheet_directory_uri<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'/timthumb.php?src='</span> <span style="color: #339933;">.</span><span style="color: #990000;">urlencode</span><span style="color: #009900;">&#40;</span>catch_that_image<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;amp;h=100&amp;amp;w=240&amp;amp;zc=1&amp;amp;q=90&quot;&gt;&lt;/a&gt;'</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>change the h=100&#038;w=240 for the size as needed</p>
<p>Voila! it&#8217;s done! simple right! :)<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/12/be-water-my-friend-with-thematic/" rel="bookmark" title="December 21, 2009">Be Water My Friend&#8230; With Thematic</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/12/create-custom-posts-layout-in-home-page-thematic-child-theme/" rel="bookmark" title="December 23, 2009">Create Custom Posts Layout in Home Page (Thematic Child Theme)</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/01/toko-dephe-site-launch/" rel="bookmark" title="January 20, 2009">Toko Dephe Site Launch</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/02/learning-thematic/" rel="bookmark" title="February 7, 2009">Learning Thematic</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/12/website-new-themes/" rel="bookmark" title="December 4, 2008">Website New Themes</a></em></li>
</ul>
<p><!-- Similar Posts took 7.279 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/-vgH6DHb_6w" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/12/create-thumbnail-from-offsite-image-using-timthumb-beta/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/12/create-thumbnail-from-offsite-image-using-timthumb-beta/</feedburner:origLink></item>
		<item>
		<title>Create Custom Posts Layout in Home Page (Thematic Child Theme)</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/mHnq1FhKhgo/</link>
		<comments>http://hardiannazief.com/12/create-custom-posts-layout-in-home-page-thematic-child-theme/#comments</comments>
		<pubDate>Wed, 23 Dec 2009 07:26:51 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[geeks]]></category>
		<category><![CDATA[thematic]]></category>
		<category><![CDATA[thematic child theme]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wordpress theme]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1095</guid>
		<description><![CDATA[<p>As I said before in the last post, there two ways to do this, First is using page template, the other one is using Thematic hooks &#038; filter.</p>
<p>
pic by Everything [...]]]></description>
			<content:encoded><![CDATA[<p>As I said before in the <a href="http://hardiannazief.com/12/be-water-my-friend-with-thematic/">last post</a>, there two ways to do this, First is using page template, the other one is using Thematic hooks &#038; filter.</p>
<p><img alt="" src="http://farm4.static.flickr.com/3515/3258450109_7a1eb67962.jpg" title="home" class="alignnone" width="500" height="500" /><br />
<em>pic by <a href="http://www.flickr.com/photos/taytoy/">Everything and the rest</a></em></p>
<p>What I want to describe here is using the theme filter &#038; actions. if you&#8217;re lazy like me to read articles, download a couple of thematic child themes, see examples of filters and see the core of thematic and learning by doing.</p>
<p>After viewing the core, I notice that there are two or three files that I needed to see in adding filter for post layout. First, because I want to change the post layout in the home page so I checked function.php and search for the post or content filters. In there I was leaded to content-extensions.php (see the comment “Load custom content filters”). then I looked for thematic index loop (line 22 comment). </p>
<p>For this example i want to try to create two column of posts that will appear like this in home page, note that i&#8217;ll be using thematicsamplechildtheme (inside thematic folder) from Ian Stewart</p>
<p><a href="http://lh5.ggpht.com/_PmgKlVMMcic/SzDiNpb2VzI/AAAAAAAACRY/aDPhC2pk5Gw/s800/Hardian%20Nazief%20-%20Just%20another%20WordPress%20weblog_1261494193153.png"><img src="http://lh6.ggpht.com/_PmgKlVMMcic/SzDiNh4TMiI/AAAAAAAACRU/xIOG_lVaE9I/s800/Hardian-Nazief---Just-anoth.png" alt="screenshot" /></a></p>
<p>here are the code for basic index posts lay-out, if you want to copy paste it, put it in your child theme function.php, I will explain more after the code</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000000; font-weight: bold;">function</span> remove_index_loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  remove_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_indexloop'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'init'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'remove_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> snippet_index_loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">/* Count the number of posts so we can insert a widgetized area */</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
        <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
            <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$counter</span><span style="color: #339933;">++;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>    
            &lt;div class=&quot;column <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$counter</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'one'</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'two'</span><span style="color: #339933;">;</span> <span style="color: #000088;">$counter</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
                &lt;div class=&quot;clear-fix&quot;&gt;
                    &lt;div id=&quot;post-<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_ID<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; class=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_post_class<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
                        <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postheader<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                        &lt;div class=&quot;entry-content&quot;&gt;
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_excerpt<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_link_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'before=&lt;div class=&quot;page-link&quot;&gt;'</span> <span style="color: #339933;">.</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Pages:'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;after=&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                        &lt;/div&gt;
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postfooter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                    &lt;/div&gt;&lt;!-- .post --&gt;
                &lt;/div&gt;&lt;!-- .clear-fix --&gt;
            &lt;/div&gt;&lt;!-- .column --&gt;
&nbsp;
                    <span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_template<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$count</span><span style="color: #339933;">==</span><span style="color: #000088;">$thm_insert_position</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'index-insert'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
&nbsp;
&nbsp;
        <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
        <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_indexloop'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'snippet_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>And for the styling, you could use this</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.column</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">250px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">inline</span><span style="color: #00AA00;">;</span>float<span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.clear-fix</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span>box<span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.one</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">40px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.hentry</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.column</span> <span style="color: #6666ff;">.entry-content</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">245px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Lets elaborate the code first</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000000; font-weight: bold;">function</span> remove_index_loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  remove_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_indexloop'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'init'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'remove_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>The first thing that we need to create is adding the remove function for the default thematic index loop. The default (as seen in the content-extensions.php) is thematic_index_loop.</p>
<p>then we add an action to replace the loop that we move, lets called it custom_index_loop</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #000000; font-weight: bold;">function</span> custom_index_loop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">/* Count the number of posts so we can insert a widgetized area */</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
        <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
            <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$counter</span><span style="color: #339933;">++;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>    
            &lt;div class=&quot;column <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$counter</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'one'</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'two'</span><span style="color: #339933;">;</span> <span style="color: #000088;">$counter</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
                &lt;div class=&quot;clear-fix&quot;&gt;
                    &lt;div id=&quot;post-<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_ID<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; class=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_post_class<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
                        <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postheader<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                        &lt;div class=&quot;entry-content&quot;&gt;
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_excerpt<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_link_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'before=&lt;div class=&quot;page-link&quot;&gt;'</span> <span style="color: #339933;">.</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Pages:'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;after=&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                        &lt;/div&gt;
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postfooter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                    &lt;/div&gt;&lt;!-- .post --&gt;
                &lt;/div&gt;&lt;!-- .clear-fix --&gt;
            &lt;/div&gt;&lt;!-- .column --&gt;
&nbsp;
                    <span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_template<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$count</span><span style="color: #339933;">==</span><span style="color: #000088;">$thm_insert_position</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'index-insert'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
        <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_indexloop'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'custom_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>the code</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$counter</span><span style="color: #339933;">++;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>    
    &lt;div class=&quot;column <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$counter</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'one'</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'two'</span><span style="color: #339933;">;</span> <span style="color: #000088;">$counter</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;</pre></td></tr></table></div>

<p>add the two column, if you want three column, just add another elseif and change the $counter then adjust the styling, but for now i will only give the styling for two column.</p>
<p>also i use the excerpt for the content</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #339933;">&lt;</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;entry-content&quot;</span><span style="color: #339933;">&gt;</span>
   <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_excerpt<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
   <span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_link_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'before=&lt;div class=&quot;page-link&quot;&gt;'</span> <span style="color: #339933;">.</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Pages:'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;after=&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&lt;/div&gt;
?&gt;</pre></td></tr></table></div>

<p>i&#8217;m not using the default loop for thematic index (thematic_content), because it will be strange to see full content in small width column.</p>
<p>and the last one is</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_indexloop'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'custom_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

<p>to insert the action.</p>
<p>for the styling of the column</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.column</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">250px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">inline</span><span style="color: #00AA00;">;</span>float<span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.clear-fix</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span>box<span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>overflow hidden makes every one happy :)</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.one</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin-right</span><span style="color: #00AA00;">:</span><span style="color: #933;">40px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.hentry</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.column</span> <span style="color: #6666ff;">.entry-content</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">245px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>this styling is for more <a href="http://www.alistapart.com/articles/whitespace/ ">whitespace</a> in the column.</p>
<p>by all means I&#8217;m  still a noob, any and all feedback you can give would be helpful to me. please do leave a comments below.</p>
<p><strong>Update:</strong><br />
This is an old article :) i may forgot a couple of things, but if you want to make three column using the function above, you add an <code>else if</code> in the code, the final code will look like this</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
</pre></td><td class="code"><pre class="php" style="font-family:monospace;">function remove_index_loop() {
  remove_action('thematic_indexloop', 'thematic_index_loop');
}
add_action('init', 'remove_index_loop');
&nbsp;
function snippet_index_loop() {
  global $post;
        /* Count the number of posts so we can insert a widgetized area */ $count = 1;
        while ( have_posts() ) : the_post() ?&gt;
            <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #000088;">$counter</span><span style="color: #339933;">++;</span> <span style="color: #000088;">$clear</span><span style="color: #339933;">=</span><span style="color: #0000ff;">''</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>    
			&lt;div class=&quot;column <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$counter</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'one'</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">elseif</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$counter</span> <span style="color: #339933;">==</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'two'</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span>  <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">echo</span> <span style="color: #0000ff;">'three'</span><span style="color: #339933;">;</span> <span style="color: #000088;">$counter</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> <span style="color: #000088;">$clear</span><span style="color: #339933;">=</span><span style="color: #0000ff;">'&lt;div style=&quot;clear:both;height:0px;&quot;&gt;&lt;/div&gt;'</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
			    &lt;div class=&quot;clear-fix&quot;&gt;
                    &lt;div id=&quot;post-<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_ID<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; class=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_post_class<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;
                        <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postheader<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                        &lt;div class=&quot;entry-content&quot;&gt;
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_excerpt<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> wp_link_pages<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'before=&lt;div class=&quot;page-link&quot;&gt;'</span> <span style="color: #339933;">.</span>__<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Pages:'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'thematic'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&amp;after=&lt;/div&gt;'</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                        &lt;/div&gt;
                            <span style="color: #000000; font-weight: bold;">&lt;?php</span> thematic_postfooter<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
                    &lt;/div&gt;&lt;!-- .post --&gt;
                &lt;/div&gt;&lt;!-- .clear-fix --&gt;
            &lt;/div&gt;&lt;!-- .column --&gt;
&nbsp;
                    <span style="color: #000000; font-weight: bold;">&lt;?php</span> comments_template<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$count</span><span style="color: #339933;">==</span><span style="color: #000088;">$thm_insert_position</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> get_sidebar<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'index-insert'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>
&nbsp;
		<span style="color: #b1b100;">echo</span> <span style="color: #000088;">$clear</span><span style="color: #339933;">;</span>
        <span style="color: #000088;">$count</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$count</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
        <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_action<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_indexloop'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'snippet_index_loop'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>and the styling will be like this in the style.css</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #6666ff;">.column</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">160px</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">inline</span><span style="color: #00AA00;">;</span>float<span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span> <span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.clear-fix</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span>box<span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.two</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.hentry</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #6666ff;">.column</span> <span style="color: #6666ff;">.entry-content</span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">245px</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/12/be-water-my-friend-with-thematic/" rel="bookmark" title="December 21, 2009">Be Water My Friend&#8230; With Thematic</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/06/using-thematic-child-themes/" rel="bookmark" title="June 8, 2009">Using Thematic Child Themes</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/02/learning-thematic/" rel="bookmark" title="February 7, 2009">Learning Thematic</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/12/create-thumbnail-from-offsite-image-using-timthumb-beta/" rel="bookmark" title="December 27, 2009">Create Thumbnail From Offsite Image Using Timthumb Beta</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/07/puspaningrum-theme/" rel="bookmark" title="July 22, 2009">Puspaningrum Theme</a></em></li>
</ul>
<p><!-- Similar Posts took 9.146 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/mHnq1FhKhgo" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/12/create-custom-posts-layout-in-home-page-thematic-child-theme/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/12/create-custom-posts-layout-in-home-page-thematic-child-theme/</feedburner:origLink></item>
		<item>
		<title>Be Water My Friend… With Thematic</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/GxiL_yfBcmk/</link>
		<comments>http://hardiannazief.com/12/be-water-my-friend-with-thematic/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 08:34:59 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[geeks]]></category>
		<category><![CDATA[thematic]]></category>
		<category><![CDATA[thematic child theme]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[wordpress theme]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1088</guid>
		<description><![CDATA[<p>At last i&#8217;ve re-align my website. The last time i&#8217;ve updated my site design  I&#8217;ve thought that this is it, i wont change it anymore, but after a couple [...]]]></description>
			<content:encoded><![CDATA[<p>At last i&#8217;ve re-align my website. The last time i&#8217;ve updated <a href="http://hardiannazief.com/06/using-thematic-child-themes/">my site design</a>  I&#8217;ve thought that this is it, i wont change it anymore, but after a couple of month i have some doubt, Google doesn&#8217;t give me enough love juice.</p>
<p>Google always acknowledge me on what that i put on my first page, and just that. For the time being I prefer to have more exposure for all of my posts content, yes the first purpose of the design before this (<a href="http://hardiannazief.com/07/puspaningrum-theme/">puspaningrum theme</a>) is that i want more exposure to each new post content that I&#8217;ve write, but beyond that, looks like Google bot didn&#8217;t read the sidebar recent post, because of that, there&#8217;s no other topic that appear in Google search beside the one on my home page. So I&#8217;ve decided to change it.</p>
<h2>Two choices</h2>
<p><a href="http://www.smashingmagazine.com/the-death-of-the-blog-post/">Blogzine design</a> is the one that appeal in my mind, but then i have to change the typography a lot more, every time i&#8217;ve publish a post, I don&#8217;t have a lot of time, i want to post once a week or twice a week, without the hassle designing each of it (for now).</p>
<p>Then magazine themes comes to my mind, i love the structure and the small thumbnail for each post that could make my posts look more interesting, so i decided i want to create it. The only hurdle for this kind of design is the thumbnail, if i upload my images in my server then i can automatically scan each post to create thumbnail in the home page, but alas since the beginning of my writing in this site, i use <a href="http://picasaweb.google.com/home">Google Picasa</a> &#038; <a href="http://www.flickr.com/">Flickr</a>. I believe that images is the biggest bandwidth hog for a site, so i rely on both of them to do the job. Unfortunately my favorite thumbnail maker (<a href="http://www.binarymoon.co.uk/2009/07/a-brief-history-of-timthumb/">timthumb</a>) doesn&#8217;t allowed to create thumbnail from external server images, so it discourage me to re-align the new design.</p>
<p>Two month ago after i subscribe to Binary Moon (<a href="http://www.binarymoon.co.uk/">Ben Gillbanks</a>), a friend of <a href="http://www.darrenhoyt.com/">Darren Hoyt</a> (my favorite WordpPess designer ) I notice that he release a beta version of timthumb for external server, like a message from heaven i was completely happy. That means that I could automatically creates thumbnail on the fly from major image hosting site like picasa or flickr, but back then, i was handling two client online store project (<a href="http://www.livingwithnara.com/">Living With Nara</a> &#038; <a href="http://asibune.com/">Asibune</a>) so i haven&#8217;t enough time to create it.</p>
<p>Now i have the times, for about two-three days i have finish my website re-align, why re-align? because i felt my old design is my signature, simplicity. I prefer to stick with its typography and color scheme and only re-design the content layout for the home page, category and tag page.</p>
<p><img alt="" src="http://farm3.static.flickr.com/2296/2026887034_0ceeb59d45_o.jpg" title="Bruce lee" class="alignnone" width="452" height="600" /><br />
by <a href="http://www.flickr.com/photos/shizenquest/">shizenquest</a></p>
<h2>The Framework</h2>
<p>Thumbnail is ready, design sketch is ready, the psd file are ready so the last thing that i want to do is choosing the framework to create a new child theme, my recent design i use <a href="http://themeshaper.com/thematic-for-wordpress">Thematic framework</a> but then i was interested about <a href="http://www.woothemes.com/2009/12/preview-the-new-wooframework-video/">WooThemes Framework</a><br />
what i love about WooThemes is that it uses 960 gs for the layout, it makes the layout designing freakishly faster than others that don&#8217;t. Thematic doesn&#8217;t use that.</p>
<p>I have some doubt in choosing WooThemes, because unlike Thematic that offer fully gpl, the WooThemes have multi-license in some of the script, some of the admin feature use cc license. so i choose Thematic instead. Beside the <a href="http://themeshaper.com/forums/">utterly helpful forum</a> , right now there are a lot of reading source about Thematic so i&#8217;m sure that it won&#8217;t be a problem for me.</p>
<p>I find many fascinating stuff designing with Thematic, i thought it&#8217;s going to be difficult because i see no child themes that uses multi-column for its layout, so i expected a rough ride in coding the themes, but fortunately i was dead wrong, it was very easy designing with Thematic :)</p>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/OW-cnizLDEE&#038;hl=en_US&#038;fs=1&#038;rel=0&#038;color1=0x3a3a3a&#038;color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OW-cnizLDEE&#038;hl=en_US&#038;fs=1&#038;rel=0&#038;color1=0x3a3a3a&#038;color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></p>
<p>There are two methods that you can use to change the content layout in Thematic (as a child theme). First, is using a page template, like adding category.php or tag.php on your child theme folder and the other one you can add a filter or hooks in the function.php, Using page template is easy and quick but by using it you are ignoring the biggest advantage of using Thematic, the themes hook &#038; filter.</p>
<p>Most of the Thematic feature that i&#8217;ve use in changing the posts layout of this theme is using Thematic filter. There are only two files that i needed to see to learn how to create a filter, function php and  content-extention.php</p>
<p>About the code, i&#8217;ll share it in the future post about how i change the layout for the home page, the category page, the tag page, filtering post for image, get the image in post, changing the excerpt length.</p>
<p>Here are the screenshot of my old design (using Puspaningrum Theme)</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SizPXemiB3I/AAAAAAAAB-o/1Hi5DhkZgYQ/s800/new%20screenshot%20thumb.png" title="Puspaningrum Theme Screenshot" class="alignnone" width="475" height="639" /></p>
<p>The purpose of the old design is major exposure on the content on the home page and i was considering in developing blogzine for future upgrade, but as time gone by, i prefer in using a magazine layout for the moment.</p>
<p>here are the new design screen shot.</p>
<p><img alt="" src="http://lh3.ggpht.com/_PmgKlVMMcic/Sy8xTItf8SI/AAAAAAAACRM/zDOY_k_lHjY/s800/Copy%20of%20Hardian%20Nazief%20-%20Food%2C%20Walk%20Around%20Jakarta%2C%20WordPress%20and%20Rants%20on%20Random%20Geekiness_500.png" title="dewi" class="alignnone" width="351" height="800" /></p>
<p>Right now, I won’t release the design to the public like Puspaningrum theme, because I want to polish it event more, like adding more admin feature, custom widget or as we all say to make it more premium :)<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/12/create-custom-posts-layout-in-home-page-thematic-child-theme/" rel="bookmark" title="December 23, 2009">Create Custom Posts Layout in Home Page (Thematic Child Theme)</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/02/learning-thematic/" rel="bookmark" title="February 7, 2009">Learning Thematic</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/06/using-thematic-child-themes/" rel="bookmark" title="June 8, 2009">Using Thematic Child Themes</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/07/puspaningrum-theme/" rel="bookmark" title="July 22, 2009">Puspaningrum Theme</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/12/create-thumbnail-from-offsite-image-using-timthumb-beta/" rel="bookmark" title="December 27, 2009">Create Thumbnail From Offsite Image Using Timthumb Beta</a></em></li>
</ul>
<p><!-- Similar Posts took 6.263 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/GxiL_yfBcmk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/12/be-water-my-friend-with-thematic/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/12/be-water-my-friend-with-thematic/</feedburner:origLink></item>
		<item>
		<title>Jatinegara</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/kMjHYyXdENg/</link>
		<comments>http://hardiannazief.com/10/jatinegara/#comments</comments>
		<pubDate>Wed, 07 Oct 2009 18:17:41 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>
		<category><![CDATA[photography]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1058</guid>
		<description><![CDATA[<p>There are two places that i&#8217;ve known that are common to buy a large quantity of product for a general consumer, such as plastic, garment and cookery in Jakarta. The [...]]]></description>
			<content:encoded><![CDATA[<p>There are two places that i&#8217;ve known that are common to buy a large quantity of product for a general consumer, such as plastic, garment and cookery in Jakarta. The place is Tanah Abang and Jatinegara.</p>
<p>Tanah Abang is wildly known as a place for its cheapness in the old days, but because it&#8217;s transform into a regular mall, the cheapness now is questionable, you have to scourge the place to find the store that sells cheap. Jatinegara also have this kind of stigma, you have to scourge if you want to find store that sells cheap. The current place that i&#8217;ve visited is Jatinegara, i&#8217;ve come here once or twice a month to buy fruit or garment.</p>
<p>The place is quite crowded, the photo that i have is the &#8220;less&#8221; crowded version.</p>
<p><img alt="" src="http://lh6.ggpht.com/_PmgKlVMMcic/SsVMkx0RtgI/AAAAAAAACMQ/l1lfyj-HhBg/s800/1.jpg" title="jatinegara" class="alignnone" width="500" height="664" /></p>
<p>The first time you come here you&#8217;ll going to notice that the place is really a mess. The only path to walk that you can take is in the middle of the street, the rest of the place was taken by merchant.</p>
<p><img alt="" src="http://lh3.ggpht.com/_PmgKlVMMcic/SsVMlK9FTrI/AAAAAAAACMU/G_NQTKBVsY0/s800/2.jpg" title="jatinegara entry path" class="alignnone" width="500" height="667" /></p>
<p>The outside of the main building we are greeted with cookery merchant.</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SsVOxG6XwPI/AAAAAAAACMs/FC_3gXZoDlY/s800/4.jpg" title="jatinegara in august" class="alignnone" width="500" height="236" /></p>
<p>this is one of the picture that i take on august, in our <a href="http://hardiannazief.com/08/near-our-independence-day/">independence day</a>.</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SsVOxJVCzRI/AAAAAAAACM4/QQ2s3M_IZCo/s800/8.jpg" class="alignnone" width="500" height="219" /></p>
<p>the motor parking lot</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SsVOxJ-y1wI/AAAAAAAACMw/S4V9YA614Y0/s800/5.jpg" title="firecracker" class="alignnone" width="500" height="334" /></p>
<p>On the way home i found firecracker merchant. When I came here, I usually dont bring my car, because it&#8217;s quite hard to find parking space here. There&#8217;s a busway stop near here if  you want to ride <a href="http://hardiannazief.com/10/jakarta-busway/">busway</a>.</p>
<p><img alt="" src="http://lh6.ggpht.com/_PmgKlVMMcic/SsVOxXsbkDI/AAAAAAAACM8/CVQoMcaFLDo/s800/6a.jpg" title="jatinegara" class="alignnone" width="500" height="250" /></p>
<p>The red one is called <a href="http://hardiannazief.com/01/jakarta-bajaj/">bajaj</a> :)<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/03/lunch-at-beautika/" rel="bookmark" title="March 25, 2007">Lunch at Beautika</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/fake-tilt-shift/" rel="bookmark" title="October 17, 2008">Fake Tilt-Shift</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/jakarta-busway/" rel="bookmark" title="October 20, 2008">Jakarta Busway</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/08/near-our-independence-day/" rel="bookmark" title="August 8, 2007">Near our Independence Day</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/08/vacation-to-jakarta-zoo-ragunan/" rel="bookmark" title="August 9, 2008">Vacation to Jakarta Zoo Ragunan</a></em></li>
</ul>
<p><!-- Similar Posts took 5.377 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/kMjHYyXdENg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/10/jatinegara/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/10/jatinegara/</feedburner:origLink></item>
		<item>
		<title>Happy Eid ul-Fitr!</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/BmoDNGQcQ0k/</link>
		<comments>http://hardiannazief.com/10/happy-eid-ul-fitr-2/#comments</comments>
		<pubDate>Fri, 02 Oct 2009 04:44:06 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1053</guid>
		<description><![CDATA[<p></p>
<p>Almost forgot to post it :)
Happy Eid ul-Fitr guys!
As always after a month fasting, the time has come for Muslims to celebrate Eid ul-Fitr. I would like to ask for [...]]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SsVQ8fAaFyI/AAAAAAAACNM/4M8xMFvuMYg/s800/4.jpg" title="Happy Eid ul-Fitr!" class="alignnone" width="500" height="298" /></p>
<p>Almost forgot to post it :)<br />
Happy Eid ul-Fitr guys!<br />
As always after a month fasting, the time has come for Muslims to celebrate Eid ul-Fitr. I would like to ask for your forgiveness if i have wrote something inconvenient in my site. </p>
<p>This post is different from the last <a href="http://hardiannazief.com/10/happy-eid-ul-fitr/">Happy Eid ul Fitr</a> post last year, i&#8217;d like to tell you a little about our tradition.</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SsVQ8Oo-pfI/AAAAAAAACNA/irmIq37MogY/s800/1.jpg" title="My parent hous" class="alignnone" width="500" height="667" /></p>
<p>It&#8217;s a tradition with our family once in Eid ul-Fitr we met up with our elderly, because my parent are the oldest one, the met up are happens in their house this year Eid ul-Fitr (we usually called it &#8220;Lebaran&#8221; in indonesian). I have to admit my parents house aren&#8217;t that big, there&#8217;s around 5 family comes to the house and it&#8217;s quite crowded, here&#8217;s are the pictures of the girls, not all of them but most of them.</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SsVQ8fz9KhI/AAAAAAAACNE/F1TkWxnIvPU/s800/2.jpg" title="The girls" class="alignnone" width="500" height="418" /></p>
<p>We had lots of fun and the food was really plenty, at noon we ate ice cream, lots of them</p>
<p><img alt="" src="http://lh6.ggpht.com/_PmgKlVMMcic/SsVQ8SsDO_I/AAAAAAAACNI/8M-2TwbJhEw/s800/3.jpg" title="My brotha" class="alignnone" width="500" height="470" /></p>
<p>This is one of my brother, playing around.</p>
<p>After a long day at my parent house, in the afternoon we go to my mother-in-law house, outside Jakarta. There&#8217;s not much of a picture there, most of them are family gathering photoshoot.</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SsVQ8QU53WI/AAAAAAAACNQ/2eXlwJxj1lw/s800/5.jpg" title="Firecracker" class="alignnone" width="500" height="343" /></p>
<p>At night, my niece played firecracker</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SsVSmtYVz4I/AAAAAAAACNU/EqglvqmOmZk/s800/6.jpg" title="My niece playing firecracker" class="alignnone" width="500" height="207" /></p>
<p>I usually dont like firecracker because it&#8217;s a waste of money imho, but seeing those kids happy playing it, made me understand a little why firecracker is fun.</p>
<p>The next day at my mother in law house, we take a rest a full day because the busy days before, we chat the whole day doing nothing. The next day we go to one of the most popular mall in Jakarta for the kids to play, the mall was quite huge, there&#8217;s event a play ground for kids inside of it. My niece played almost four hours in the playground but me and my wife decided to split and go to the book store and after that accompanied me looking for camera (i was looking one :D)</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SsVSm40ApcI/AAAAAAAACNY/TZYRKECk2OY/s800/7.jpg" title="Carrousel at MOI" class="alignnone" width="413" height="800" /></p>
<p>Here is my niece and this the last ride we&#8217;ve played that day, she was really happy that day. Last week turns out to be a nice moment for me at this Lebaran, but there&#8217;s something that i didn&#8217;t fullfiled yet, is going to pekalongan. Happy Lebaran guys!</p>
<p><b>note :</b><br />
looks like all of my friends think, i&#8217;ve set the photos color here are wrong on my camera or the camera is broken or something. Well to clear things up, I&#8217;ve photoshop all of my photos here so it look like from the 80 or an old photo, the old look was intentionally.<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/09/this-month-time-waster/" rel="bookmark" title="September 20, 2008">This Month Time Waster: Kongregate.com</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/09/lunch-at-fish-co/" rel="bookmark" title="September 13, 2008">Lunch at Fish &#038; Co</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/a-week-visiting-relatives/" rel="bookmark" title="October 6, 2008">A Week Visiting Relatives</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/happy-eid-ul-fitr/" rel="bookmark" title="October 5, 2008">Happy Eid ul-Fitr!</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/eid-ul-fitr/" rel="bookmark" title="October 18, 2007">Eid ul-Fitr</a></em></li>
</ul>
<p><!-- Similar Posts took 4.993 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/BmoDNGQcQ0k" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/10/happy-eid-ul-fitr-2/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/10/happy-eid-ul-fitr-2/</feedburner:origLink></item>
		<item>
		<title>R.A. Kosasih, The Indonesian Comic Author</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/N5-QW-tA-Rw/</link>
		<comments>http://hardiannazief.com/09/ra-kosasih-indonesian-comic-author/#comments</comments>
		<pubDate>Mon, 21 Sep 2009 07:06:23 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>
		<category><![CDATA[geeks]]></category>
		<category><![CDATA[photography]]></category>
		<category><![CDATA[comic]]></category>
		<category><![CDATA[comic author]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1018</guid>
		<description><![CDATA[<p></p>
<p>About two month ago my father reminded me about his collection of comic books, and i remembered it too that his collection of comics is super awesome, there are almost [...]]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SpI6AmQM58I/AAAAAAAACJ0/TSyRIV14BMU/s800/BharataYuda-Cover.jpg" title="Bharata Yudha War" class="alignnone" width="500" height="255" /></p>
<p>About two month ago my father reminded me about his collection of comic books, and i remembered it too that his collection of comics is super awesome, there are almost three 2 meter high cabinet filled with classic Indonesian&#8217;s comic book. </p>
<p>But after time went by, we don&#8217;t know how to preserve comic the right way, one by one the collection is destroyed by humidity and reading bugs :( </p>
<p>it&#8217;s a sad day for me and my dad the day that mom had to throw away our comic book. Nevertheless time gone by, we tried no to regret it. </p>
<p>Later, after my dad reminded me, me &#038; my wife made a pact that we shall bought him the comic book that he had before, one by one. Since then we bought 8 comics book, it&#8217;s far from his total collection he once had before, but it&#8217;s a start.</p>
<p>The comic author that we got is <a href="http://www.goodreads.com/author/list/655179.R_A_Kosasih">R.A Kosasih</a>, and the price is significantly higher than the first time we bough it&#8217;s around Rp,400. Now the price is Rp,35,000 to 85,000 (3,5 &#8211; 8,5 USD). We have a couple of more that we want to buy but i want to postponed it. </p>
<p>The publisher of the comic book, doesn&#8217;t use royalty system for the comic, so the comic author doesn&#8217;t get any penny after it was bought (i read it somewhere in Kompas newspaper), It&#8217;s been forty years and the comic still republished, i&#8217;m quite ashamed of the system, because in my opinion RA. Kosasih has the same status like <a href="http://en.wikipedia.org/wiki/Stan_Lee">Stan Lee</a> did in US comic books .</p>
<p>Here&#8217;s a couple screen shot of the comic book cover that i bought</p>
<p><img alt="" src="http://lh3.ggpht.com/_PmgKlVMMcic/SpI6A-mBNMI/AAAAAAAACKE/xrxguHdJWWo/s800/Parikesit-Cover.jpg" title="Parikesit ra kosasih" class="alignnone" width="500" height="709" /></p>
<p>here&#8217;s clip of the content</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SpI6A3oLU1I/AAAAAAAACJ8/vz64T4sX8Og/s800/komik-inside-Parikesit.jpg" title="Parikesit RA kosasih" class="alignnone" width="500" height="340" /></p>
<p>the hand drawn for the comic is very classic, all of the story that brought by R.A Kosasih is around the epic of Mahabarata. He take the middle story of many version of the story trough his comic.</p>
<p>Here&#8217;s another screenshot of his comic book</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SpI6A4ZKlVI/AAAAAAAACKA/zr5IRkOV_K4/s800/mahabarata-cover.jpg" title="Mahabarata Cover RA Kosasih" class="alignnone" width="500" height="696" /></p>
<p>and the content</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SpI6Ap1jwqI/AAAAAAAACJ4/q9eLvdQjL4c/s800/komik-inside.jpg" title="Mahabarata Ra kosasih" class="alignnone" width="500" height="369" /></p>
<p>honestly i haven&#8217;t read it all, in the old days i read it all but i was kid back then so i dont really understand what the story is about. </p>
<p>Right now i read half of the comic and felt this comic is LOL :D and you can&#8217;t complaint about the quality of the comic, it&#8217;s a reprinted edition from 40 years ago. it&#8217;s full of awesomeness in my childhood, maybe i&#8217;ll post the content in the future post.<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/07/been-reading/" rel="bookmark" title="July 13, 2008">Been Reading</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/04/the-jakarta-4th-toys-and-comic-fair/" rel="bookmark" title="April 3, 2008">The Jakarta 4th Toys and Comic Fair</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/03/a-week-goes-by/" rel="bookmark" title="March 9, 2008">a week goes by</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/02/either-u-have-it-or-u-dont/" rel="bookmark" title="February 6, 2008">Either U Have It or U Don&#8217;t</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/11/this-month-time-waster-daily-funny-pictures/" rel="bookmark" title="November 30, 2008">This Month Time Waster: Daily Funny Pictures</a></em></li>
</ul>
<p><!-- Similar Posts took 5.988 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/N5-QW-tA-Rw" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/09/ra-kosasih-indonesian-comic-author/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/09/ra-kosasih-indonesian-comic-author/</feedburner:origLink></item>
		<item>
		<title>I Dream of Tetris</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/L45ENIcJRyc/</link>
		<comments>http://hardiannazief.com/09/tetris-ds/#comments</comments>
		<pubDate>Mon, 14 Sep 2009 17:40:03 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>
		<category><![CDATA[ds]]></category>
		<category><![CDATA[nintendo ds]]></category>
		<category><![CDATA[tetris]]></category>
		<category><![CDATA[tetris ds]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1012</guid>
		<description><![CDATA[<p></p>
<p>How could you know if a games is filled with total awesomeness</p>

it&#8217;s when you see the title only, you&#8217;ll be filled with the memory of the game
you want to play [...]]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://farm1.static.flickr.com/125/343759307_f197e72277.jpg" title="Tetris DS" class="alignnone" width="500" height="430" /></p>
<p>How could you know if a games is filled with total awesomeness</p>
<ul>
<li>it&#8217;s when you see the title only, you&#8217;ll be filled with the memory of the game</li>
<li>you want to play it all the time</li>
<li>you never get bored playing it after a long time</li>
<li>after almost 3 years in the shelf, the game itself is still awesome when you play it again</li>
</ul>
<p>That&#8217;s what happen to me when i play Tetris DS, the game again been poisoning my mind for two month now. </p>
<p>It&#8217;s started when i was organizing my desk and found Tetris DS box, at that moment i was almost bored to death with my Nintendo DS, since Final Fantasy IV i haven&#8217;t found any game that interesting enough for me. Then after i played this game again, i play it over and over every time i have spare time.</p>
<p><a href='http://ds.ign.com/dor/objects/726069/tetris-ds/images/tetris-ds-20060306033024663.html'><img src='http://dsmedia.ign.com/ds/image/article/693/693847/tetris-ds-20060306033024663.jpg' alt='Tetris DS Various'></a></p>
<p>you see this screenshot? because of this, this past few week when i&#8217;m tired of reading and working, i daydream hearing and visualizing those damned Tetris block dropping away :D</p>
<p><embed src='http://videomedia.ign.com/ev/ev.swf' flashvars='object_ID=726069&#038;downloadURL=http://dsmovies.ign.com/ds/video/article/695/695171/tetris_031006_7_flvds.flv&#038;allownetworking="all%"' type='application/x-shockwave-flash' width='433' height='360'></embed>
<div style='width:433;'></div>
<p>this is just one of game mode that was in Tetris DS, there&#8217;s 5 more that could be addicted like this. Imagine, a game as simple as this could be so addicting. There&#8217;s other game that&#8217;s similiar like this, Meteos, but i forgot where do i put the game box. But Meteos only have one mode to play, Tetris DS have 6.</p>
<p>If that&#8217;s not the sign of a game that filled with awesomeness, then what is?<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/06/google-toys/" rel="bookmark" title="June 1, 2007">Google Toys</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/this-month-time-waster-median-2008-diablo-ii-mod/" rel="bookmark" title="October 30, 2008">This Month Time Waster: Median 2008 (Diablo II mod)</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/05/gaming-addiction/" rel="bookmark" title="May 6, 2007">Gaming Addiction</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/best-ds-homebrew-game/" rel="bookmark" title="October 20, 2007">Best DS Homebrew Game</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/09/ra-kosasih-indonesian-comic-author/" rel="bookmark" title="September 21, 2009">R.A. Kosasih, The Indonesian Comic Author</a></em></li>
</ul>
<p><!-- Similar Posts took 5.267 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/L45ENIcJRyc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/09/tetris-ds/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/09/tetris-ds/</feedburner:origLink></item>
		<item>
		<title>Jakarta Ragunan Zoo II</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/dLdsuRRYkFs/</link>
		<comments>http://hardiannazief.com/09/jakarta-ragunan-zoo-ii/#comments</comments>
		<pubDate>Tue, 08 Sep 2009 07:16:03 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>
		<category><![CDATA[jakarta]]></category>
		<category><![CDATA[ragunan]]></category>
		<category><![CDATA[zoo]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=998</guid>
		<description><![CDATA[<p>Just a quick visit to the zoo with my nieces, they want their holiday seeing animal, so we went there again, the last time i visit to the Ragunan Zoo [...]]]></description>
			<content:encoded><![CDATA[<p>Just a quick visit to the zoo with my nieces, they want their holiday seeing animal, so we went there again, the last time <a href="http://hardiannazief.com/08/vacation-to-jakarta-zoo-ragunan/">i visit to the Ragunan Zoo</a> it was quite awesome but i haven&#8217;t got a lot pictures because it was too crowded, I prefer <a href="http://hardiannazief.com/03/weekend-at-taman-safari/">Taman Safari</a> more because the weather is more cooler and it&#8217;s not too crowded. </p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SoujrCJR7II/AAAAAAAACIw/AI_bivCmpIA/s800/IMG_8009.jpg" title="Ragunan Parking Lot" class="alignnone" width="500" height="750" /></p>
<p>When we arrive at 9am in the morning, the weather is nice.</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SopYGXRVFjI/AAAAAAAACIc/a9G_cZ0rsUo/s800/13.jpg" title="peacock at ragunan" class="alignnone" width="500" height="375" /></p>
<p>the first thing that we do is looking at the huge cage for peacock, i wonder why does have to be this huge.</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SopYGv6srRI/AAAAAAAACIg/FNED9-wnHXg/s800/14.jpg" title="My wife" class="alignnone" width="497" height="800" /></p>
<p>i took pictures of my wife in front of it, the cage is huge right?</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SopYGl9vL1I/AAAAAAAACIk/qOiE7Egqo5o/s800/15.jpg" title="Bear" class="alignnone" width="500" height="234" /></p>
<p>Bear, giraffe, lions, deer, komodo, you name it, there&#8217;s lot of it, but my main reason of this trip, is having a good time with my niece, so i don&#8217;t take a lot of pictures of the animal there.</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SoumAKg1rlI/AAAAAAAACI4/sN4C-1Y9K7Y/s800/16.jpg" title="Went home" class="alignnone" width="500" height="667" /></p>
<p>after almost 6 hour, we went home to get some rest.<br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/08/vacation-to-jakarta-zoo-ragunan/" rel="bookmark" title="August 9, 2008">Vacation to Jakarta Zoo Ragunan</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/03/weekend-at-taman-safari/" rel="bookmark" title="March 11, 2008">Weekend at Taman Safari</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/happy-eid-ul-fitr-2/" rel="bookmark" title="October 2, 2009">Happy Eid ul-Fitr!</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/11/a-friend-just-came-back-from-aceh/" rel="bookmark" title="November 11, 2008">a Friend just came back from Aceh</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/jatinegara/" rel="bookmark" title="October 8, 2009">Jatinegara</a></em></li>
</ul>
<p><!-- Similar Posts took 4.987 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/dLdsuRRYkFs" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/09/jakarta-ragunan-zoo-ii/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/09/jakarta-ragunan-zoo-ii/</feedburner:origLink></item>
		<item>
		<title>Night Market at Jakarta, Cipinang</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/ITHNp6UbHEg/</link>
		<comments>http://hardiannazief.com/09/night-market-at-jakarta-cipinang/#comments</comments>
		<pubDate>Thu, 03 Sep 2009 01:01:14 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>
		<category><![CDATA[food]]></category>
		<category><![CDATA[bamboo flute]]></category>
		<category><![CDATA[market]]></category>
		<category><![CDATA[night market]]></category>
		<category><![CDATA[seruling bamboo]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=982</guid>
		<description><![CDATA[<p>Couple weeks ago while on the road visiting my parents, i came across on a night market near my house, which is unusual, because of all the time i live [...]]]></description>
			<content:encoded><![CDATA[<p>Couple weeks ago while on the road visiting my parents, i came across on a night market near my house, which is unusual, because of all the time i live there, there&#8217;s no such things like this happen before. I decided to go there the next day, then my wife ask to my sister in law that the night market is only there for one day only then move to another place. We called this kind of market is &#8220;Pasar Kaget&#8221;, a market which only appear for a short of time, i&#8217;m sure there&#8217;s an English for this but i forgot what it&#8217;s called.</p>
<p><img alt="" src="http://lh3.ggpht.com/_PmgKlVMMcic/SopV2MnQoDI/AAAAAAAACIQ/sn76SnGLcFI/s800/10.jpg" title="night market" class="alignnone" width="500" height="297" /></p>
<p>My sister in-law was right, the next day the market move to another street. but lucky for me, it&#8217;s also not far from my house, only 3 blocks away. It stretch along street for 700 meters (0.43 miles) long. </p>
<p><img alt="" src="http://lh3.ggpht.com/_PmgKlVMMcic/SopV15H1_8I/AAAAAAAACIM/iVuFBqKkOHk/s800/9.JPG" title="night market at cipinang" class="alignnone" width="500" height="303" /></p>
<p>The market is full of people selling many things, many of them sell cheap shirt and crappy toys, </p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SopV1qqHSrI/AAAAAAAACIE/0mPhg0O82eU/s800/7.jpg" title="traditional boat toy" class="alignnone" width="500" height="293" /></p>
<p>but i happen to found one of them selling this classic toys, boat that uses burning oil to cruise, it brings back many memory because i happen to have when i was a kid.</p>
<p><img alt="" src="http://lh3.ggpht.com/_PmgKlVMMcic/SopV1sECfNI/AAAAAAAACII/pAgD69fZfWE/s800/8.jpg" title="traditional bamboo flute" class="alignnone" width="500" height="238" /></p>
<p>There are also store which sell traditional bamboo flute, in our culture this kind of music instrument called &#8220;Seruling Bambu&#8221;.</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SopYGPUd61I/AAAAAAAACIU/-ZO48ea1TMQ/s800/11.JPG" title="ate fried ducks" class="alignnone" width="500" height="375" /></p>
<p>After a couple of hour, i ate fried duck on my way home near the market. We bought a cool embroidered shirt for my older brother sons and a cheap sandal for me.</p>
<p><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/08/klender-traditional-market/" rel="bookmark" title="August 18, 2009">Klender Traditional Market</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/04/i-haz-to-muv-out-thiz-saturday/" rel="bookmark" title="April 18, 2008">I haz to muv out thiz saturday</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/04/the-jakarta-4th-toys-and-comic-fair/" rel="bookmark" title="April 3, 2008">The Jakarta 4th Toys and Comic Fair</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/01/jakarta-bajaj/" rel="bookmark" title="January 16, 2008">Jakarta Bajaj</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/04/update-on-toys-fair-ultraman-monster/" rel="bookmark" title="April 6, 2008">update on toys fair: ultraman monster</a></em></li>
</ul>
<p><!-- Similar Posts took 5.139 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/ITHNp6UbHEg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/09/night-market-at-jakarta-cipinang/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/09/night-market-at-jakarta-cipinang/</feedburner:origLink></item>
		<item>
		<title>How to Add Typekit to your Thematic Child Themes</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/Nbhd_QrRvL8/</link>
		<comments>http://hardiannazief.com/08/how-to-add-typekit-to-your-thematic-child-themes/#comments</comments>
		<pubDate>Fri, 28 Aug 2009 04:58:45 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Tips and Tricks]]></category>
		<category><![CDATA[geeks]]></category>
		<category><![CDATA[thematic]]></category>
		<category><![CDATA[thematic child theme]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wordpress theme]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=1038</guid>
		<description><![CDATA[<p></p>
<p>@font-face at-rule is one of the most anticipated  feature in CSS3, it allow you to define custom font for your website, allowing you to upload fonts to your web [...]]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://lh3.ggpht.com/_PmgKlVMMcic/SpS6sn4otiI/AAAAAAAACKQ/buskji9Bs2M/s800/typekit-logo.png" title="Tyepkit logo" class="alignnone" width="158" height="41" /></p>
<p><a href="http://www.css3.info/preview/web-fonts-with-font-face/">@font-face</a> at-rule is one of the most anticipated  feature in CSS3, it allow you to define custom font for your website, allowing you to upload fonts to your web server and deliver the font itself to the client browser</p>
<p><a href="http://typekit.com">Typekit</a> is a web service that provide fonts &#038; the font delivery service for this use, the huge benefit of using Typekit is that you dont have to think about <a href="http://www.zeldman.com/2009/08/17/web-fonts-and-standards/">the font license</a> that you&#8217;re going to use and the bandwidth that the font are going take, Typekit will take care of that. But lets get to the point on how to use it on your thematic child themes,</p>
<p>After signing in (currently on invitation only), you&#8217;re asked about the name and the address of your website (you can use localhost for testing environment) then you&#8217;re asked to add snippet code to your html head tag like this</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span> src<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;http://use.typekit.com/XXXX.js&quot;</span><span style="color: #339933;">&gt;&lt;/</span>script<span style="color: #339933;">&gt;</span>
<span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #0000ff;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>try<span style="color: #009900;">&#123;</span>Typekit<span style="color: #339933;">.</span>load<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#125;</span>catch<span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></pre></td></tr></table></div>

<p>to use it on your thematic child theme use this code at functions.php</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="php" style="font-family:monospace;">function childtheme_typekit() { ?&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://use.typekit.com/XXXX.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;try{Typekit.load();}catch(e){}&lt;/script&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'thematic_head_scripts'</span><span style="color: #339933;">,</span><span style="color: #0000ff;">'childtheme_typekit'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>(change the XXXX or change all the snippet code)</p>
<p>What this code does is put the script at your head tag. Easy right? if you want to know more about thematic you could visit <a href="http://themeshaper.com/thematic-for-wordpress">Thematic Framework</a>. </p>
<p>About Typekit, I was a late invitation on Typekit, i&#8217;ve notice on twitter that every body got the invitation since first august but i just get the invitation yesterday. My experience using typekit? it&#8217;s downright easy, u could automatically add font stack on the Typekit Editor in case the client browser doesn&#8217;t support @font-face.</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SpS6sRV6EDI/AAAAAAAACKI/05_FWrmwM84/s800/typekit1.png" title="Typekit Editor" class="alignnone" width="500" height="291" /></p>
<p>after testing in localhost environment this is the screenshot of Typekit in action</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SpTA1kiWIoI/AAAAAAAACKU/nG9NgHhhpC8/s800/typekit4.png" title="good dog" class="alignnone" width="500" height="156" /></p>
<p>This is good-dog font, using h1 selector with letter-spacing -1</p>
<p>Typekit comes in two version, the free and the pay version, the free version you&#8217;ll get less choice of font and you&#8217;ll get typekit badge while using it. There are 3 pay version scaling up the number fonts, bandwidth use &#038; features. </p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SpS6ssody7I/AAAAAAAACKM/bFNXNFPHDTM/s800/Typekit2.png" title="Typekit Plan" class="alignnone" width="500" height="294" /></p>
<p>Right now i&#8217;m using the free version, i haven&#8217;t thought in upgrading my account, because right now i dont have any plans on what i&#8217;m going to use it for.</p>
<p><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/06/using-thematic-child-themes/" rel="bookmark" title="June 8, 2009">Using Thematic Child Themes</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/12/create-custom-posts-layout-in-home-page-thematic-child-theme/" rel="bookmark" title="December 23, 2009">Create Custom Posts Layout in Home Page (Thematic Child Theme)</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/02/learning-thematic/" rel="bookmark" title="February 7, 2009">Learning Thematic</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/07/puspaningrum-theme/" rel="bookmark" title="July 22, 2009">Puspaningrum Theme</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/01/website-re-design/" rel="bookmark" title="January 25, 2009">Website Re-design</a></em></li>
</ul>
<p><!-- Similar Posts took 5.705 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/Nbhd_QrRvL8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/08/how-to-add-typekit-to-your-thematic-child-themes/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/08/how-to-add-typekit-to-your-thematic-child-themes/</feedburner:origLink></item>
		<item>
		<title>Miabebo Shop: Nursing Covers &amp; Diaper Bags</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/T-ItUFfTOtU/</link>
		<comments>http://hardiannazief.com/08/miabebo-shop-nursing-covers-diaper-bags/#comments</comments>
		<pubDate>Mon, 24 Aug 2009 14:40:52 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[geeks]]></category>
		<category><![CDATA[online store]]></category>
		<category><![CDATA[web development]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[wordpress theme]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=986</guid>
		<description><![CDATA[<p>I&#8217;ve just finished helping my friend setting a simple online store for her last week, this project has been really an insightful experience for me, She gives many input to [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve just finished helping my friend setting a simple online store for her last week, this project has been really an insightful experience for me, She gives many input to the design and response quick in every question i&#8217;ve ask, so development went fast. Without her input, the development wont be so quick, the only things that held us down is the product aren&#8217;t available when the website ready, so we have to wait a couple of days to fill the site with product pictures.</p>
<p>The site sell <a href="http://miabebo.com">Nursing covers</a> for breastfeeding, bib for baby and diaper bags. The language that are used is Indonesian because she targeted the Indonesian market first, but to her affirmation she also confirm that she is capable in dealing with international buyers.</p>
<p>Here are the screenshot of the site,</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SoozL3RiloI/AAAAAAAACHk/1seBCTopnns/s400/miabebo.com%C2%A0-%C2%A0Chic%20nursing%20cover%20and%20Diaper%20bags_1250570738533.jpg" title="Miabebo" class="alignnone" width="400" height="397" /></p>
<p>The question that may pop-up in your mind is why does an online store doesn&#8217;t have a shopping chart? It&#8217;s because the nature of the online consumer here in Indonesia. Using credit card in an online environment are still rare here, many of the Indonesian consumer doesn&#8217;t believe in the security of the interwebs and the popular bank here also doesn&#8217;t have the support in online transaction, they do have internet banking but they doesn&#8217;t support retailer to use their bank service on the retailer site. So the solution? using the good old fashion of contact form, even so, in my experience there still difficulty in using it, in that position, the default comment form of WordPress coming in, to back-up it up i also use chat-box and Yahoo messenger status ID. <br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/01/toko-dephe-site-launch/" rel="bookmark" title="January 20, 2009">Toko Dephe Site Launch</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/04/john-chow-steve-pavlina-vs-kumiko-cash-quest/" rel="bookmark" title="April 14, 2007">John Chow &#038; Steve Pavlina VS Kumiko Cash Quest</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/09/site-soft-launch-readingbugsorg/" rel="bookmark" title="September 8, 2008">Site Soft Launch: readingbugs.org</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/jatinegara/" rel="bookmark" title="October 8, 2009">Jatinegara</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/01/yes-paypal-now-can-add-indonesian-bank-account/" rel="bookmark" title="January 29, 2008">Yes!! Paypal now can add Indonesian Bank Account!</a></em></li>
</ul>
<p><!-- Similar Posts took 5.132 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/T-ItUFfTOtU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/08/miabebo-shop-nursing-covers-diaper-bags/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/08/miabebo-shop-nursing-covers-diaper-bags/</feedburner:origLink></item>
		<item>
		<title>Klender Traditional Market</title>
		<link>http://feedproxy.google.com/~r/Hardian/~3/sHwE6Ms6oQY/</link>
		<comments>http://hardiannazief.com/08/klender-traditional-market/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 10:48:44 +0000</pubDate>
		<dc:creator>dian</dc:creator>
				<category><![CDATA[Rambling Story]]></category>
		<category><![CDATA[klender]]></category>
		<category><![CDATA[traditional market]]></category>
		<category><![CDATA[vegetables]]></category>

		<guid isPermaLink="false">http://hardiannazief.com/?p=977</guid>
		<description><![CDATA[<p>One day at night, while i was working, my wife suddenly told me that i should wake up very early to accompanied her to Klender tradisional market, it&#8217;s &#8220;Pasar Klender&#8221; [...]]]></description>
			<content:encoded><![CDATA[<p>One day at night, while i was working, my wife suddenly told me that i should wake up very early to accompanied her to Klender tradisional market, it&#8217;s &#8220;Pasar Klender&#8221; in indonesian. And i responded why? then she told me a really really long story and at the end, the decision is that i must accompanied her to the market. Rather than make her repeating that long story, i said i&#8217;ll go with her ( plus she promised me that she will cook for me whatever i want :D )</p>
<p>According to my best recollection, it&#8217;s been almost 4-5 years since my last visit to traditional market, the last time i go there, the road is wet and a lot of shredded vegetables on the path of the market. The smell is&#8230; horrible, the place is awfully crowded. But the aside from that, the price of things is very cheap, very very fresh and have a lot more variety than the supermarket. I never directly compared it, but that&#8217;s what my wife told me :D</p>
<p>Nowadays&#8230;  the progress of traditional market it&#8217;s still the same with the last time i go there :( crowded, wet and a lot of shredded vegetables. I&#8217;ve heard that many traditional market are being upgraded to a more clean and less smelly environment, but i&#8217;m pretty sure that Pasar Klender is not one of them.</p>
<p>The first item that my wife want to buy is 2 chicken, because the chicken is very graphic :D i wont show it on this post, but i&#8217;ll show you the market on closer look</p>
<p><img src="http://lh4.ggpht.com/_PmgKlVMMcic/SopVfsDbFeI/AAAAAAAACHs/mPPyZ_rBz1c/s800/1.jpg" alt="pasar klender traditional market indonesia" /></p>
<p>This is the view when i first came, it&#8217;s really hectic, the market itself are on the street, taking half of road.</p>
<p><img alt="" src="http://lh6.ggpht.com/_PmgKlVMMcic/SopVfrWZC-I/AAAAAAAACHw/L9xNcGi-KUY/s800/2.jpg" title="pasar klender traditional market" class="alignnone" width="500" height="667" /></p>
<p>After buying chickens, my wife look for herbs to buy, it happen to pass the fish stands, there&#8217;s a lot of them, i want to eat an octopus :D but alas there&#8217;s none, only manta-ray, so i look for other weird things but couldn&#8217;t found anything interesting enough to eat.</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SopVfuRPI6I/AAAAAAAACH0/WYW8n-1pYrw/s800/3.JPG" title="vegetables at pasar klender" class="alignnone" width="500" height="667" /></p>
<p>My wife wants to cook soup so she bought two bag of veggie for soup. What i found interesting while buying, the seller is already pack the veggie for certain kind of dish. There&#8217;s a bag of veggie for soup, &#8220;sayur asem&#8221; (i dont know the name in english), &#8220;sayur nangka&#8221; etc. All of the bags look similar to me, but my wife happen to have a keen eye in knowing which bags to buy.</p>
<p><img alt="" src="http://lh5.ggpht.com/_PmgKlVMMcic/SopVf-VzIOI/AAAAAAAACH4/eVPfnnAai28/s800/4.jpg" title="looking for herbs at pasar klender" class="alignnone" width="500" height="375" /></p>
<p>after that she went to the deeper part of the market to search another herbs, i see a lot of fresh live fish on a bucket to sell, but the place it&#8217;s too crowded so i couldn&#8217;t takes pictures.</p>
<p>Last, i want to buy grapes and banana, there&#8217;s no good grapes at sight so i just buy bananas</p>
<p><img alt="" src="http://lh4.ggpht.com/_PmgKlVMMcic/SopVf72aPqI/AAAAAAAACH8/D_4w6nBIVDk/s800/5.jpg" title="banana banana" class="alignnone" width="500" height="299" /></p>
<p>Remember when i said that things are cheap in there, well&#8230; i bought two group (? i forgot what it&#8217;s called in english) of bananas for only 40cent USD :D </p>
<p>After that we went home with bags of groceries. All in all, if it isn&#8217;t too smelly, i love to go to the traditional market even more because there&#8217;s a lot of interesting to look and take pictures, but the traditional market in my place still too smelly and like most traditional market, the market only serve fresh stuff at the peak of the morning, around 5am to 10am. <br /><strong>u may also like this :</strong>
<ul class="similar-posts">
<li> &#8211; <em><a href="http://hardiannazief.com/09/night-market-at-jakarta-cipinang/" rel="bookmark" title="September 3, 2009">Night Market at Jakarta, Cipinang</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/10/jatinegara/" rel="bookmark" title="October 8, 2009">Jatinegara</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/09/jakarta-ragunan-zoo-ii/" rel="bookmark" title="September 8, 2009">Jakarta Ragunan Zoo II</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/12/using-cash-and-delaying-the-purchase/" rel="bookmark" title="December 9, 2008">Using Cash and Delaying the Purchase</a></em></li>
<li> &#8211; <em><a href="http://hardiannazief.com/08/vacation-to-jakarta-zoo-ragunan/" rel="bookmark" title="August 9, 2008">Vacation to Jakarta Zoo Ragunan</a></em></li>
</ul>
<p><!-- Similar Posts took 5.622 ms --></p>
<img src="http://feeds.feedburner.com/~r/Hardian/~4/sHwE6Ms6oQY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://hardiannazief.com/08/klender-traditional-market/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://hardiannazief.com/08/klender-traditional-market/</feedburner:origLink></item>
	</channel>
</rss><!-- Dynamic page generated in 3.214 seconds. --><!-- File not cached! Super Cache Couldn't write to: wp-content/cache/wp-cache-e27f65b6a71803715e1e5b6faca5d9b2.html -->
