Saturday, April 4, 2009

Template VIP

[FREE&VIP] Revolution Lifestyle Blogger Template

We have two version of Revolution Lifestyle Blogger Template.They are the BLOG version (FREE) and the MAGAZINE version (VIP).

The first version is BLOG version. The Revolution Lifestyle BLOG Blogger Template is available for FREE. Don't be fooled by other Revolution Lifestyle blogger template that are poorly converted to blogger.

Revolution Lifestyle BLOG Blogger Template

Revolution Lifestyle BLOG Blogger Template

Click here to see the BLOG version live demo

The second version is MAGAZINE version. This the first REAL MAGAZINE blogger template in this world. The Revolution Lifestyle MAGAZINE Blogger Template is available for VIP Members.

Revolution Lifestyle MAGAZINE Blogger Template

Revolution Lifestyle MAGAZINE Blogger Template

Click here to see the MAGAZINE version live demo

Okay, it's very easy to use this blogger template, so please read the instruction carefully if you don't want to get any problems.

INSTALLATION INSTRUCTION

  1. Download and extract the zip file.
  2. Login to your Blogger Dashboard
  3. Go to Layout > Edit HTML
  4. Upload XML Template file (DO NOT copy and paste the code directly to template editor box)
  5. PLEASE DO NOT PREVIEW YOUR BLOG. Go to Layout > Page Element. WHY?
  6. Edit "Top Menu" widget. Add at least one link, for example you can make a link to your blog homepage with "Home" anchor text
  7. Edit "Banner Ads" widget. You can add this code (for example):
    <a href="http://banners.moreniche.com/go.php?id=4226&w=116531&s=38" target="_blank">
    <img border="0" width="468" alt="MoreNiche Affiliate Program" src="http://banners.moreniche.com/show.php?id=4226&w=116531&s=38&e=gif" height="60"/>
    </a>
  8. Finish. Preview your blog to see the result.

UPLOAD HEADER IMAGE

Go to Layout > Page Element, edit Header widget (in the top left), then upload this image (for example),

logo

(use right click and save this image to your local computer)

revolution-lifestyle-header

Don't forget to choose "Instead of title and description".

Create your own header image using this blank logo image. Edit this image using your image editor.

logo_blank

(use right click and save this image to your local computer)

FEEDBURNER NEWSLETTER WIDGET

Go to Layout > Page Element, add a HTML/Javascript widget to SIDEBARTOP section. Add this code,

<div class="newsletter">
<h2>eNews &amp; Updates</h2>
<p>Sign up to receive breaking news <br/> as well as receive other site updates!</p>
<form id="subscribe" action="http://www.feedburner.com/fb/a/emailverify" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com/', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input id="subbox" onfocus="if (this.value == 'Enter your email address...') {this.value = '';}" value="Enter your email address..." name="email" onblur="if (this.value == '') {this.value = 'Enter your email address...';}" type="text"/>
<input value="http://feeds.feedburner.com/~e?ffid=YOURFEEDBURNERID" name="url" type="hidden"/>
<input value="eNews Subscribe" name="title" type="hidden"/>
<input id="subbutton" value="GO" type="submit"/>
</form>
</div>

Change YOURFEEDBURNERID with your own Feedburner ID.

FEATURED VIDEO WIDGET

Go to Layout > Page Element, add a HTML/Javascript widget to SIDEBARTOP section. Add this code,

<object width="300" height="250">
<param value="http://www.youtube.com/v/jGJ7ZXbTNN4&hl=en&fs=1" name="movie"/>
<param value="true" name="allowFullScreen"/>
<embed width="300" src="http://www.youtube.com/v/jGJ7ZXbTNN4&hl=en&fs=1" allowfullscreen="true" height="250" type="application/x-shockwave-flash">
</embed>
</object>

Change the Youtube Video URL with your own Youtube video.

RECENT POSTS WIDGET

Go to Layout > Page Element, add a Feed widget to SIDEBARTOP section. Add Feed URL,

http://YOURBLOGNAME.blogspot.com/feeds/posts/default

Change YOURBLOGNAME with your own blog name, and change the Feed Title to "Recent Posts".

DOWNLOAD

By downloading and using this template, you agree to the following terms:

  • You may NOT resell this theme
  • A link back to Revolution Two, Magznetwork must be retained in the footer (either modified or unmodified)
  • You may use this theme for personal or commercial projects
  • You may modify, translate.

  Revolution Lifestyle BLOG Blogger Template (10.1 KiB, 4,188 hits)

Signup / Login to Magznetwork VIP to download the MAGAZINE version.

Written by Agus MU · Filed Under Blogger Templates 

Freshgenerator

Freshgenerator: Kreasi sendiri komponen grafik Web2.0

Jujur saja, saya sangat senang ketika pertama kali mencoba layanan Freshgenerator. Ternyata begitu mudahnya layanan ini membantu saya mendesain hal-hal yang kecil, terutama membuat background untuk menu navigasi, desain tab menu dan membuat button cantik bergaya web2.0. Seperti biasa, kompenen grafik dari web2.0 kebanyakan menggunakan kolaborasi warna antara Gradient dan 3D trim.


Dibawah ini contoh menu navigasi dan button yang dibuat semirip mungkin dari beberapa layanan web populer seperti ebay, Firefox dan Youtube. Lihat disini sampelnya



Melalui layanan online FreshGenerator ini, kita tidak perlu lagi direpotkan harus menggunakan software desktop canggih seperti Adobe Photoshop, Corel Draw dan Ulead Photoimpact yang sudah sering saya gunakan. Untuk menjalankan aplikasi ini menurut saya tidak begitu rumit, kita tinggal mengatur sendiri beberapa elemen pada tab meliputi Box, Corner, Border dan Text.


Untuk membuat perubahan pada gambar sewaktu-waktu nantinya, kita dapat menyimpan link yang tercantum di bawah gambar. Untuk menyimpan file gambar yang baru saja dibuat, silahkan klik kanan pada gambar dan pilih "Save image as". Selamat mencoba :)

Template

[FREE] Cellar Heat Premium Blogger Template

Cellar Heat WordPress theme is created by Evan Eckard. The design of this theme focuses on patterns and typography, and it comes in two flavors. It is designed especially for Smashing Magazine and its readers. And now it is available for Blogger, especially for MagzNetwork readers.

You can download it NOW! ;)

Cellar Heat Blogger Template

Cellar Heat Blogger Template

DEMO

Click here to see the live demo

By downloading and using this template, you agree to the following terms:

Please read the instruction carefully if you don’t want to get any problems.

INSTALLATION INSTRUCTION

  1. Download and extract the zip file.
  2. Login to your Blogger Dashboard
  3. Go to Layout > Edit HTML
  4. Upload XML Template file (DO NOT copy and paste the code directly to template editor box)
  5. PLEASE DO NOT PREVIEW YOUR BLOG. Go to Layout > Page Element. WHY?
  6. Edit “Top Menu” widget. Add at least one link, for example you can make a link to your blog homepage with “Home” anchor text
  7. Edit “Recent Posts” widget. Change Feed URL to
    http://YOURBLOGNAME.blogspot.com/feeds/posts/default
  8. Edit “Recent Comments” widget. Change Feed URL to
    http://YOURBLOGNAME.blogspot.com/feeds/comments/default
  9. Go to Settings > Formatting, choose TIMESTAMP FORMAT style: “Wednesday, Januari 30, 2008″
  10. Finish. Preview your blog to see the result.

Release History

  • 23 Nov 2008: 1.0, the first release

Frequently Asked Questions (FAQ)

What about images? are they displayed in the “excerpts”

The images will not be displayed in the excerpt ;)

Download

  Cellar Heat Premium Blogger Template (8 KiB, 11,937 hits)

Do not provide the direct download link nor upload onto other servers for your own share (Please link to this page instead – we also deserve some traffic!). If you want to spread the words, just link to this page.

Editing Cascade

Belajar mengedit CSS tanpa masuk halaman Edit HTML

Bagaimana melakukan ujicoba mengedit CSS Template Blogger tanpa harus membuka dan menyimpan halaman Edit HTML berulang kali?

Pengaturan CSS template blogger merupakan hal utama untuk mempercantik tampilan halaman blog, namun acap kali mengedit CSS kadang melelahkan dan membosankan, terutama terlalu seringnya melakukan bongkar pasang kode, edit sana sini, belum lagi kita membuka dan menyimpan  halaman Edit HTML berulang kali,  tentu saja buang2 waktu..yang jelas kita tidak pernah puas sampai menemukan tampilan terbaik. Tuntutan utama tampilan blog tentu saja tidak lepas dari bagaimana agar blog kita bisa tampil sempurna di semua browser, Mengambil kata para WebMaster "untuk apa tampil cantik di browser Mozilla dan koloninya tapi tampil ancur ancuran di browser lainnya", jelas satu point akan berkurang dan tentu rekan gak mau hal ini terjadi kan.


Apakah kita tetap memaksakan cara classic diatas?


Ups tentu saja tidak...Pasti saya akan berusaha mencari solusi terbaik untuk pembaca setia blog ini. Cukup cuap-cuapnya OM...OK lanjut...Sebenarnya ada cara yang sangat mudah mengedit  CSS tanpa harus masuk bolak balik ke halaman Edit HTML, dimana kita hanya perlu membuka halaman blog lalu mengedit kode CSS secara live (Online) tanpa perlu takut terjadi kesalahan dan error, yang kita perlukan hanyalah tools buatan Chrispederick yang di beri nama Web Developer tools ini lah yang akan membantu meringankan tugas kita mengedit Code CSS di blogger. Cuma blogger? tidak hanya blogger, hampir semua dukungan pada kode CSS bisa digunakan. Perlu rekan ketahui tools ini hanya support untuk Browser Seamonkey, Firefox dan Flock (Firefox extention). Tools Web Developer juga tidak hanya untuk mengedit CSS, namum masih banyak fungsi lain yang bisa digunakan.


Bagaimana mengedit CSS dengan Web Developer?


1. Aktifkan Browser Firefox atau Flock lalu Download Web Developer

2. Kemudian lakukan installasi sesuai petunjuk, jika sudah terinstall maka akan muncul Toolbar Web Developer dengan munculnya menu icon

3. Untuk mengedit CSS tuju saja ke icon CSS -> lalu klik Edit CSS maka akan muncul jendela baru Edit CSS

4. Ada beberapa tab pilihan yang bisa digunakan untuk mencoba mengedit CSS, sebaiknya langsung tuju ke Embedded Styles disinilah Code CSS Blogger yang siap kita acak-acak tanpa takut terjadi kesalahan.

5. Untuk mempermudah mengetahui lokasi kode CSS yang ingin di edit, rekan tinggal mengaktifkan saja fungsi Style Information caranya  klik  icon CSS -> lalu klik Style Information.

6. Jangan lupa arahkan mouse untuk mencari lokasinya, pada jendela baru akan muncul informasi dari kode CSS yang ditemukan

7. Silahkan diacak-acak kode CSS kalian sampe ancur, kalo masih ada kesalahan dan ingin mengedit kembali, tinggal tutup saja lalu buka kembali Edit CSS-nya, mudah khan :)


Sekali lagi yang perlu rekan perhatikan bahwa tools diatas hanyalah alat bantu untuk mempermudah kita mencoba mengedit CSS, Tools diatas bukan otomatis melakukan perubahan, untuk hasilnya akhir kode CSS yang sudah diedit tetap harus di simpan secara manual pada halaman Edit HTML. Maaf kalo saya tidak memberikan infomasi lengkap mengenai Cara Coding CSS Syntax pada template blogger, jika ada pertanyaan silahkan tulis pada kolom komentar :)

Menata Ulang CSS

Menata Ulang Syntax CSS Acak-acakan Via Styleneat

Betapa sulitnya mempelajari format style pada koding CSS yang susunannya tidak beraturan, jangankan yang baru belajar, yang sudah mengerti sekalipun pasti dibuat pusing untuk menganalisanya ulang. Tidak masalah bila struktur pengkodean kita sendiri yang membuatnya, bayangkan saja bila itu buatan programmer lain, belum lagi jika si programmer menggunakan mode style CSS terkompresi, pasti ribet sekali khan jika harus mempelajari dengan menelusuri kodingya satu-persatu.



Nah, kali ini ada solusi termudah dimana rekan bisa dengan cepat mengembalikan struktur style CSS yang sebelumnya acak2an menjadi lebih teratur dan lebih tertata rapi. Saya sarankan coba saja gunakan layanan dari Styleneat. Udah Basi Om!! hehehe ya enggak lah, mana mungkin saya ngasih info layanan terbaru kalo tidak terlebih dahulu masuk best review diluar sana, yang jelas layanan ini benar2 baru di launching tahun 2009 ini :)


Contoh susunan CSS yang tidak beraturan:

#id1 { property: value; }
#id1 .class1 { property: value; }
#id1 .class1 a { property: value; property2: value2; property3: value3; }
#id1 .class1 a span { property: value; property2: value2; }
#id2 { property: value; }
#id2 .class { property: value; }


Contoh susunan CSS yang teratur dan tertata rapi:

#id1 { property: value; }

 #id1 .class1 { property: value; }

  #id1 .class1 a {
    property: value;
    property2: value2;
    property3: value3; }

    #id1 .class1 a span {
      property: value;
      property2: value2; }

#id2 { property: value; }

 #id2 .class { property: value; }


Jujur saja, sebenarnya banyak juga programmer yang kadang malas mengatur tata letak dari selector, value dan property pada CSS Syntax ini, masalahnya kebanyakan si programmer merasa kode tersebut dia sendiri yang menyusunnya, jadi mau diedit kapanpun juga dia merasa tetap mengerti alurnya. Saya sendiri sebenarnya termasuk yang malas juga mengatur struktur pengkodean ini, padahal bila ditata dengan rapi untuk kedepannya pasti lebih mudah untuk mempelajarinya kembali, yang jelas ini memudahkan kita mengingat antara satu kode dengan lainya yang saling berhubungan. Silhakan dicoba dan dipelajari sendiri ok :)

Read More Normal

Cara buat "Readmore" pada Blogger

Banyaknya permintaan mengenai cara buat readmore membuat saya tetap mengharuskan artikel ini ditulis. walaupun tutorial cara buat readmore sudah banyak ditulis oleh rekan blogger, sayangnya penjelasan yang diberikan kadang tidak mudah dimengerti dan malah membuat bingung, untuk itu tidak ada salahnya saya juga menulis artikel ini sebagai pelengkap agar mempermudah blogger baru bisa lebih mengerti cara membuat readmore serta cara penggunanan kode readmore pada posting.


Mungkin rekan blogger yang baru mulai membuat blog masih bingung apa itu readmore? Readmore adalah pemenggalan kalimat pada posting suatu halaman, Pemenggalan halaman posting biasanya ditandai dengan "Read More", "Next", "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya" atau apalah namanya :). Readmore biasanya digunakan untuk menandai bahwa kalimat pada posting masih mempunyai kelanjutan, dan juga berguna mempersingkat halaman posting yang panjang. Pengen tau cara buatnya?



Contoh ReadMore :



Pernah menemukan pesan seperti diatas?...jika pernah jangan panik, ini hanya pesan pemberitahuan dari blogger kalau layanan sedang melakukan perbaikan maintenance pada server. pesan ini hanya berlangsung kurang lebih beberapa menit setelah itu akan normal kembali. Semoga informasi ini membantu :)Readmore.. »



Untuk membuat readmore ikuti langkah dibawah ini :


Langkah Pertama:


Buka Template - Edit HTML - Berikan tanda centang pada "Expand widget template"



Langkah Kedua:


Jangan Lupa backup blogger dengan mengklik "dowlnoad template lengkap"



Langkah Ketiga:


Cari kode dibawah ini:

<div class='post-header-line-1'/> <div class='post-body'>


Tips : Untuk mempermudah pencarian kode diatas sebaiknya ikuti tips berikut ini. pertama kamu buka program text editor misalnya notepad.exe ( Pada MS Windows tekan menu Start -> Proggram -> Accessories -> Notepad) kemudian kopy/paste kode HTML tadi ke notepad. kemudian pada notepad pilih Menu Edit -> Find. pada box find masukan kode ini <div class='post-header-line-1'/> kemudian klik tombol Find next. (jika masih gak ketemu terpaksa kita melakukan pencarian secara manual)


Jika sudah menemukan kode diatas, Copy-Paste kode dibawah ini kemudian letakan kode tersebut dibawah kode diatas.

 



<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>



Kemudian dibawah kode diatas kita akan menemukan kode:

<p><data:post.body/></p>



Lakukan Copy-Paste kode dibawah ini dibawah code diatas


<a expr:href='data:post.url'>Readmore »»</a>
</b:if>


 

Tips: Kode Readmore diatas bisa ganti dengan kalimat sendiri (contoh "Baca Selanjutnya", "Baca berikutnya", "Selengkapnya")


Kode selengkapnya jika dilihat akan tampak sebagai berikut:


<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore »»</a>
</b:if>

<div style='clear: both;'/>


Jika kita mengedit langsung pada halaman blogger Edit HTML dan semua kode diatas sudah dilakukan perubahan, jangan lupa disimpan ya :)


Ini jika kita menggunakan Text Editor Notepad : Setelah melakukan pengeditan kode pada notepad, lalu hapus semua kode yang ada pada halaman edit blogger, kemudian masukan seluruh kode pada notepad tadi dengan cara copy/paste) Sampai disini pengeditan kode selesai, jangan lupa disimpan.



Langkah Empat


Setelah kode diatas disimpan kita kembali dan masuk ke tab Pengaturan -> Format -> cari "Post Template" Kemudian pada kotak masukan kode dibawah ini


<div class="fullpost">
</div>


Jangan lupa disimpan :)


Langkah Kelima :


Disini saya akan menjelaskan cara penggunaan readmore pada halaman posting. Ketika kita melakukan posting pertama kali kita akan melihat kode:


<div class="fullpost">
</div>


ingat jangan hapus kode diatas karena kode tersebut merupakan kode yang akan kita gunakan dalam pemenggalan posting nantinya.



Sebagai contoh lihat cuplikan kalimat dibawah:


Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). (Dini rencana text yang akan dipenggal) Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.



Bagaimana cara pemenggalan kode diatas? caranya tinggal kamu lihat 2 kode pemenggalan kalimat dibawah (ingat kode hanya bekerja pada halaman editor posting)


Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). <div class="fullpost"> Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.</div>



Jadi hasil posting pada halaman browser akan tampai sebagai berikut:


Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). Readmore »»


Selamat mencoba :) happy blogging



Sebagai pelengkap Baca juga artikel dibawah ini :


Rahasia (read more) waktu yang tepat memenggal tulisan halaman posting

Read More Automatic

Cara pasang Auto Read More terbaru (Part 2)

Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.



Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.


Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.


Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)


<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>
</b:if>

<div style='clear: both;'/>


OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.


Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.


<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

</script>

<script src='http://h1.ripway.com/ooms/autoreadmore.js' type='text/javascript'/>


Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah


<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini


<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)


Keterangan:


var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)


Yang pengen ngedit file JS atau pengen masang kode JS ini di host masing2, sudah saya sediakan kodenya silahkan di copas aja :)


/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

Selamat mencoba..happy tutorial with o-om.com :)