Download Icon RSS Feed Blue Jeans & Levi's

Bosan dengan tampilan Icon Rss Feed  rekan saat ini? coba saja ganti dengan tampilan Rss Feed ala Blue Jeans dan Levi's buatan blogger macho "Nikko" asal argentina, pemilik dari blog Xyberneticos.

Download Icon Feed Blue Jeans

Download Icon Feed Levi's

Baca Selengkapnya →

Selamat buat calon pemenang kampanye pemilu 2009

Sebenarnya postingan kali ini bukan bagian dari optimasi, tapi hanya sebagai ucapan terima kasih yang bisa saya sampaikan langsung buat pendukung setia o-om.com.

Satu minggu ini terus terang saya sedang mencoba menganalisa pengaruh jumlah backlink pada posisi keyword dan ternyata dalam waktu seminggu melakukan optimasi bukanlah pekerjaan gampang, walaupun banyak doping link yang disumbangkan para sahabat ternyata tidak membuat posisi keyword kampanye damai pemilu indonesia 2009 bergeser sedikitpun hehehe.

Ya sudah, buat rekan yang telah memasang link kampanye damai pemilu indonesia 2009 milik saya, sekali lagi thanks sekali atas dukungannya. Akhir kata saya cuma bisa mengucapkan selamat dan mengacungkan 2 jempol buat semua peserta yang berada di 10 besar, kalian memang yang terbaik :)

Baca Selengkapnya →

Solusi Hosting Javascript di Blogger

Saat yang paling tidak menyenangkan dimana saat file javascript yang kita simpan di host lain mulai kehabisan bandwidth. Blog yang semula terlihat interaktif malah jadi kacau balau khan tampilanya. Yah, inilah salah satu keleman blogger karena tidak memberikan kita kapasitas ruang simpan, terutama yang berurusan dengan file javascript. Sebagai alternatif biasanya kita bisa saja meminjam web hosting gratis dari pihak ketiga, sayangnya tawaran yang diberikan ternyata tidak selalu memuaskan. kapasitas simpan yang ditawarkan sih besar, tapi jadi percuma bila kapasitas bandwidth yang diberikan sangat tidak sebanding hehehe. Nah, disini saya coba berbagi tips untuk mengatasi masalah hosting javascript di blogger, mudahan cukup membantu :)

Mengubah format ekstensi file dari  .js ke .txt

Ingat, tidak semua javascript dipanggil dengan akhiran .js, ini sebuah keuntungan dimana kita dapat menyimpan dan memanggil file javascript dalam format text yang tersimpan dalam format .txt

Tidak semua layanan free web hosting memberikan keleluasaan bagi kita untuk menyimpan file berformat .js pada hosting mereka, jadi kita dapat mengakalinya dengan cara mengubah extensinya saja, dari .js ke .txt

 Cara memanggil javascript berformat .txt pada host lain:

 <script type="text/javascript" src="alamat-url-namafile.js" />

Pemanggilan bisa diganti dengan

<script type="text/javascript" src="alamat-url-namafile.txt" />

Simpan Javascript pada element halaman HTML/Blogger Gadget

Tidak semua kode javascript harus di simpan di host lain atau hanya dalam halaman Edit HTML, kita sebenarnya bisa saja memasang kode JS ini langsung pada element halaman blogger "HTML/Javascript". Namun sangat disayangkan cara ini tidak selalu 100% berhasil, karena tidak semua file javascript bisa support dengan penyimpanan pada widget ini. Mungkin hanya berhasil jika code javascript tersebut hanya berdiri sendiri, dalam artian file JS tersebut tidak saling berhubungan dengan memanggil kode yang satu dan kode lainnya.

Simpan code javascript langsung pada halaman EDIT HTML

Platform blogger sebenarnya membebaskan kita untuk meletakan langsung kode javascipt pada halaman Edit HTML. Cara ini selalu berhasil saya terapkan, namun kadang tidak terlalu efektif juga bila code javascript yang kita gunakan terlalu panjang code scriptnya. Cara yang terakhir ini menurut saya merupakan salah satu terbaik yang harus dicoba.

Sebelum mencoba cara dibawah, pastikan kita sudah mempunyai code JS yang akan disimpan. Jika rekan masih bingung, kode JS bisa ditemukan langsung dengan mengambil melalui alamat URL. lihat contoh pemanggilan kode dibawah yang tercetak tebal. disitulah biasanya kode JS disimpan.

<script type="text/javascript" src="alamat-url-namafile.js" />


Coba dengan masukan langsung urlnya di browser, kalo sudah ketemu tinggal copy saja kodenya.

Agar kode JS yang sebelumnya di host dialamat lain bisa langsung digunakan diblogger, kita bisa langsung menggunakan kode dibawah ini.

<script type='text/javascript'>
//<![CDATA[
Isi_Script_Disini
//]]>
</script>
 

Semoga saja cara diatas bisa mengatasi masalah kehabisan bandwidth, kalo masih bermasalah ya tinggal gunakan saja Hosting berbayar..beres heheheh

Baca Selengkapnya →

Memasang Slider ala Zinmag Primus Template

Ternyata banyak juga rekan yang ingin mencoba memasang Image Slider/Text Slider ala template Zinmag Primus, Slider yang sudah saya terapkan sendiri di o-om.com  ini ternyata selain membuat tampilan blog lebih atraktif dan bergaya, sumbangan kunjungan langsung melalui slider ternyata tidak sedikit jumlahnya. Ok, langsung kecara pasangnya saja ya lagi rada malas nih banyak cuap2 hehehe.

Letakan kode CSS dibawah ini diatas kode ]]></b:skin>

#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

Kemudian letakan kode javascript dibawah ini dibawah kode ]]></b:skin>

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Kemudian cari kode dibawah ini:

<div id='header-wrapper'>
..........
.........
</b:section>

Letakan kode dibawah ini dibawah kode diatas.

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href='http://www.o-om.com/2008/05/e-book-kiat-sukses-promosi-blog.html'>eBOOK Kiat Sukses Promosi Blog</a></h2>
<p>Kontes seo "kampanye damai pemilu indonesia 2009" tinggal menghitung hari..10 hari ini saya mencoba sekuat apa pengaruh backlink pada keyword..kalo ada yang mau bantu dukung om bisa memasang link ini di blog masing2. Silahkan copy-paste kode dibawah, thanks banget atas dukunganya :).</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq987bUcLk1F1mumtLjeTs3apNPc-bHWdprHRswEEqUZ3o7UD3Rg-DH-lnTnFydeCcZePZR2UZTX0aLIzRAus_6-Y-bl8KeVt_OEvLOb1JSQQyr6t9bEKPDHsMf-s26oNsKA9IjOsNSmcx/s400/Kampanye+Damai+Pemilu+Indonesia+2009.gif'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href='http://www.o-om.com/2009/02/kampanye-damai-pemilu-indonesia-2009.html'>Kampanye Damai Pemilu Indonesia 2009</a></h2>
<p>Dalam buku elektornik ini anda juga akan menemukan kiat sukses dan point penting dalam kegiatan promosi blog serta bagaimana etika promosi yang terkandung didalamnya. Untuk kedepan eBook ini tidak saya gratiskan lagi dan tentu saja materinya lebih berbobot dari Free Edition. Jadi segera download dan pastikan anda pertama yang membacanya.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU-aCbjEosAW30t1dxGtPUIf4Zr12SvjCIAHSRnqUACfC2TgsNJ1DM9fRCXP02mqQWO4I7s-1beoM0wZVYopF3fuqPccl0kUBGT7D-nsjKXSBFrBfmhro9vWTzLTlJOUoXAMf6XwUcQGIk/s400/OOMEBOOK.gif'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>


 

Sampai disini semua proses penyimpanan kode berakhir. Sekarang lihat saja hasilnya.

Apa saja yang perlu diedit?

1. Karena file javascript diatas meminjam langsung dari alamat lain, jadi saya sarankan rekan menyimpannya pada hosting masing2. Silahkan download semua file javascript disini.

2. Secara default, Background image pada slider diatas kemungkinan tidak sesuai dengan ukuran template rekan saat ini, jadi mau tidak mau harus memperkecil ukurannya atau sebaiknya buat saja gambar baru sesuai dengan ukuran dan lebar template rekan yang  sekarang.

#slider { background:url(http://img99.imageshack.us/img99/9594/slide.png); height: 254px; overflow: hidden; position: relative; margin: 5px 0; }

3. Setelah rekan selesai dan berhasil memasang semua kode di atas, contoh slider yang tampil hanya sebagai sample saja, jadi silahkan dihapus link, text dan gambar milik saya dan ubahlah gambar, link dan kalimatnya sesuai kebutuhan.

<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href='http://www.o-om.com/2009/02/kampanye-damai-pemilu-indonesia-2009.html'>Kampanye Damai Pemilu Indonesia 2009</a></h2>
<p>Dalam buku elektornik ini anda juga akan menemukan kiat sukses dan point penting dalam kegiatan promosi blog serta bagaimana etika promosi yang terkandung didalamnya. Untuk kedepan eBook ini tidak saya gratiskan lagi dan tentu saja materinya lebih berbobot dari Free Edition. Jadi segera download dan pastikan anda pertama yang membacanya.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU-aCbjEosAW30t1dxGtPUIf4Zr12SvjCIAHSRnqUACfC2TgsNJ1DM9fRCXP02mqQWO4I7s-1beoM0wZVYopF3fuqPccl0kUBGT7D-nsjKXSBFrBfmhro9vWTzLTlJOUoXAMf6XwUcQGIk/s400/OOMEBOOK.gif'/>
</div>

4. Untuk mengatur letak text, gambar dan link bisa rekan coba otak-atik sendiri pada kode CSS, terus terang setiap template tentu berbeda ukurannya, jadi saya sendiripun gak tau harus gimana menjelaskan cara mengaturnya.

5. Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, mis 5000 atau 9000 (catatan: 1 detik = 1000)

Selamat mencoba dan berpusing ria :D

Baca Selengkapnya →

Chi.mp: Satu Paket Domain Gratis, Weblog + Microblogging

Kren..itulah kesan pertama kali saat saya mendaftar pada layanan Chi.mp. Gimana gak kren tuh, sudahlah dikasih domain gratis namakamu.mp, kita juga langsung diberikan satu paket weblog siap pakai :) dan tidak hanya itu saja, layanan ini juga dapat dimanfaatkan sebagai jejaringan sosial karena telah memiliki engine microblogging tersendiri. jadi kita bisa menentukan aktifitas kita saat ini..sekedar hanya mengupdate status, sharing photo, atau sekalian menulis kontent panjang sebagai postingan, dan semuanya langsung ditampilkan dalam satu halaman. Bisa dikatakan juga layanan Chi.mp ini merupakan sebuah solusi mudah untuk pengelolaan identitas online anda. Membawa kehidupan digital bersama disatu tempat yang anda miliki.

Silahkan diliat dulu saja samplenya dialamat ini ooms.mp

Sebenarnya banyak sekali fitur yang ditawarkan Chi.mp selain hanya sebagai media sosial tunggal, dimana kita dapat juga menghubungkan layanan ini keberbagai jejaringan sosial lainnya termasuk Twitter, Yahoo, Feed, Flickr, skype dan Facebook.

Yah, lumayan lengkaplah untuk aplikasi gratis sekedar yang ingin membuat blog secara instant :). Ya sudah tunggu apa lagi bos..reg sekarang juga nama domainnya tar keburu gunakan user ain lho hehehe

Baca Selengkapnya →

Video2mp3: Konversi Youtube Video ke MP3

Video2mp3 merupakan layanan gratis yang memungkinkan kita melakukan konversi Video dari layanan Youtube ke dalam format Mp3. Untuk proses konversi video ke mp3 sendiri caranya juga terbilang mudah, yang kita perlukan hanya menginputkan alamat URL dari layanan Youtube, dan biarkan layanan ini yang melakukan proses selanjutnya untuk anda. Tersedia juga pilihan dimana kita dapat juga menentukan sendiri dua pilihan kualitas suara yaitu, Standard Quality dan High Quality.

Video2mp3 juga menawarkan add-ons firefox yang memudahkan kita untuk melakukan konversi mp3 pada setiap video yang anda kunjungi, sehingga prosesnya bisa lebih cepat dan meningkatkan konversi koleksi file audio anda. silahkan dicoba aja :)

Layanan sejenis yang bisa dicoba vidtomp3 dan kickyoutube

Baca Selengkapnya →

10 tools terbaik untuk menganalisa halaman Web/Blog

Keberhasilan beberapa blog/situs populer bukan karena kejeniusan mereka memainkan SEO dan Keyword, bukan juga karena content yang mereka tulis memang merupakan materi populer, tapi banyak sekali faktor-faktor yang menentukan, ini sebaiknya yang harus kita cermati sekaligus dipelajari jika ingin blog kita benar2 bisa sejajar dengan blog/situs populer lainnya. Cara inilah yang selalu saya lakukan bila setiap kali menemukan situs2 populer, saya selalu melakukan riset, mempelajarinya, lalu mencoba mengakses keberbagai data statistik mereka. Dan cara ini lumayan berhasil dari pada saya harus menghabiskan waktu mempelajari keyword utama mereka, apalagi sampai membuat duplikat konten terbaik pada situs populer tersebut :D pokoknya jangan sampai dah..

Nah, daripada tanya sana-sini gak jelas, lebih baik saya sarankan kita mencoba menganalisa statistik halaman mereka secara langsung. Caranya mudah saja, coba pelajari statistik halaman kita sendiri terlebih dahulu, sekarang coba bandingkan dengan beberapa halaman web populer lainya. Lihat dan coba perhatikan statistik web mereka, misalkan dengan membandingkan kecepatan loading page, bandingkan jumlah karakter keyword dan deskripsi yang mereka gunakan, pada layanan populer mana saja halaman mereka teridex bla..bla.. dan tentu saja masih banyak lagi yang harus kita pelajari. Yang jelas, semakin sering kita melakukan riset, semakin banyak pula ilmu untuk memudahkan kita menemukan jawabannya.

Dibawah ini merupakan 10 tools terbaik yang biasa saya gunakan untuk melakukan riset dan mencoba menganalisa halaman-halaman web/blog target, silahkan dicoba aja dulu:

1. En.pageboss.com

Pageboss mampu menganalisa halaman blog dengan lengkap dan sukup mendetail, kita bisa melihat beberapa informasi penting diantaranya site ranking dan kualitas trafik dari beberapa search engine dan layanan statistik populer lainnya.

2. Seorush.com

Cara kerja Seorush hampir mirip dengan Pageboss, sayang halaman yang ditayangkan tidak begitu detail. tapi lumayan juga sebagai tool pembanding.

3. Pagemasher.com

Layanan ini juga memberikan analisa yang sangat lengkap, setiap analisa ditayangkan berdasarkan tab tersendiri. sayangnya beberapa alamat domain kadang ada yang tidak support.

4. Urlmetrix.com

Tools UrlMatrix ini pernah saya jelaskan di tulisan sebelumnya, jadi silahkan di baca kembali tulisan terdahulu disini.

5. Tools.pingdom.com

Cool..layanan Page Speed Test inilah yang sampai saat ini masih saya gunakan, layanan ini mampu memberikan informasi lengkap dalam mengalisa setiap ukuran image yang kita gunakan pada halaman web. Terus terang saya selalu memperhatikan masalah ukuran gambar, anda bisa cek sendiri sebesar apapun ukuran gambar yang saya gunakan dan biasnaya tidak lebih besar dari 10KB.

6. Browsershots.org

Jangan bangga dulu dengan tampilan desain template kita saat ini, sebagus apapun kalau cuman bagusnya di firefox doank kan percuma hehehe. jadi selalu gunakan layanan Browsershots sebagai tools pembanding apakah tampilan blog/site kita sudah tampil sesuai harapan jika ditampilkan menggunakan web browser yang berbeda.

7. Websiteoptimization.com

Tool ini termasuk web page speed report yang akurat, dan ada banyak sekali informasi yang tayangkan. Selain hanya menyampainkan informasi penting pada halaman web yang dianalsis, kita juga diberikan solusi serta pemecahan masalah.

8. Seocentro.com

SeoCentro merupakan salah satu tool SEO favorite saya, walaupun termasuk tool SEO jadul, tapi perannya sangat berguna juga sebagai Meta Tag analysis.

9. Tester.jonasjohn.de

Tools analisis web dan SEO yang terbilang sangat kompleks dimana layanan ini dikemas kedalam satu paket all in one. Terus terang saya jarang sekali menggunakan layanan ini tapi tidak ada salahnya di uji coba dulu :)

10. GHDB

Mana ada tools web analisis terbaik selain Google itu sendiri, manfaatkan selalu Google Search untuk mencari informasi sebanyak-banyaknya. Gali dan terus gali semua informasi yang anda butuhkan..karena apapun pertanyaan anda semua sudah terjawab di Google. Satu rahasia yang jarang diungkap para master SEO, yaitu Google hack dan basic SEO dari Google itu sendiri..ini bisa rekan pelajari pada GHDB (Google Hack Data Base) yang sebenarnya sudah lama sekali dikelompokan kedalam satu database yang dikembangkan oleh Johnny i hack stuff. Silahkan pelajari cara Google menganalisa halaman web target, tapi bukan cara h*cking-nya lho ya. Trus alamat link-nya mana?? nah itu dia, silahkan di Googling aja pasti ketemu kok :D

Sebenarnya beberapa layanan diatas bukanlah sebagai solusi, tapi hanya sebagai tools mempermudah pekerjaan anda saja. Saya selalu berusaha membuat pembaca blog ini tidak manja. Dan jujur saja, membangun blog itu sangat sulit dan tidak semudah membalikan telapak tangan, semua butuh waktu tenaga dan pikiran. Jadi pelajari saja karateristik blog/site populer sesuai target yang ingin anda pelajari statistiknya, saya yakin semakin sering anda menganalisa, semakin mudah saja anda akan menemukan jawaban pada akhirnya. thanks o-om.com

Baca Selengkapnya →

Kampanye Damai Pemilu Indonesia 2009.

Salam indonesia, sekedar share informasi pemenang Kampanye Damai Pemilu Indonesia 2009 ups salah :) tanggal 1 februari 2009 hari ini rekan blogger Poggung177 mengadakan SEO Contest  dengan pilihan keyword Kampanye Damai Pemilu Indonesia 2009 Rencananya kontes yang diadakan selama 3 bulan ini akan berakhir pada tanggal 1 Mei 2009 (00:00 GMT + 7 / 00:00 WIB). So, buat yang merasa Jagoan SEO buruan gabung, hadiahnya lumayan lho sekitar lebih dari $500. Berikut catatan daftar hadiah kompetisi:

The Prizes for the competition are as follows:

1st Prize: Rp 5.000.000 + 16Gb USB drive
2nd Prize: Rp 2.000.000 + 8 Gb USB drive
3rd Prize: Rp 1.000.000 + 8 Gb USB drive
4th Prize: 8 Gb USB drive
5th Prize: 8 Gb USB drive
6th Prize: 4 Gb USB drive
7th Prize: 4 Gb USB drive
8th Prize: 4 Gb USB drive
9th Prize: 4 Gb USB drive
10th Prize: 4 Gb USB drive

Untuk keterangan selanjutnya tentang tata cara pendaftaran dan peraturan yang berlaku, silahkan sambangi saja langsung kealamat ini Pogung177

Baca Selengkapnya →

Green Revolution Blogger Template

Konsep Blogger template bertajuk Revolusi Hijau (Green Revolution) yang dulu pernah gunakan sekarang bisa rekan coba aplikasikan. Seperti biasa, saya selalu berusaha merancang template dengan konsep yang SEO Friendly dan didesain dengan style sederhana serta memiliki kecepatan loading page yang mengagumkan. Karena secara default, template ini hanya hanya sedikit menggunakan image, selebihnya didesain menggunakan permainan warna melalui CSS koding style.

Template Green Revolution dengan desain multi kolom ini sudah saya test di beberapa web browser seperti (Flock, Firefox, IE, Opera, Safari dan Chrome) dan sampai saat ini tidak ada masalah :) mudahan aja kali ya hehehe

Demo Template | Download

Bonus Fitur Terpasang:

• Avatar MyBloglog pada komentar
• Komentar berbeda untuk pemilik blog
• Related Post (posting yang berkaitan)
• Tertanam Emoticon Dalam Komentar
• Stripe-Ad ala navbar blogger + Link Subcribe
• CSS dengan mode syntax Terstruktur
• Read More dengan title
• Embedded Comment Form
• Tertanam Meta Tag, SEO Title Tag dan Favicon
• Tertanam Menu Arsip Postingan
• List label hanya menampilkan judul posting
• Dll.

Cara installasi :
(jangan lupa beri tanda centang pada Expand Template Widget) Disarankan untuk membackup template dan isi element halaman terlebih dahulu. Agar semua fasilitas berfungsi dengan baik, sebaiknya upload dilakukan secara manual (tanpa di upload), dan sebisanya lakukan copy-paste langsung semua kode kehalaman Edit HTML.

Perhatian! Anda diperbolehkan mengedit template ini sesuka hati, namun anda tidak di perbolehkan menghapus link pada kolom credit atas nama pembuat template. Thanks atas perhatiannya.

Baca Selengkapnya →

Cara pasang Auto Read More terbaru (Part 2)

(Revisi: Solusi tanpa hosting file .JS) 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.

 

Langsung copy paste aja kode dibawah ini:

 

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

<script type='text/javascript'>
//<![CDATA[
/******************************************
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;
}
//]]>
</script>

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)

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

Baca Selengkapnya →