Jumat, 04 Maret 2011
Cara Membuat Read More Otomatis Plus Thumbnail Versi 3
Diposting oleh
ayo Indonesia
Lagi-lagi mengenai readmore, setelah sebelumnya saya membahas read more versi 1 dan versi 2. Kali ini saya akan berbagi dengan temen-temen semua tentang cara membuat readmore otomatis plus thumbnail (versi 3). Sebenarnya apa sih pentingnya readmore pada sebuah blog? Salah satunya adalah dengan menggunakan read more pada blog kita, memungkinkan artikel yang di tampilkan pada halaman utama blog kita akan terpotong alias lebih pendek, sehingga menghemat halaman juga. Lalu, bagi yang sebelumnya sudah pernah mencoba membuat read more ini dengan cara yang manual, kali ini kita akan membuatnya dengan cara otomatis.
O..ya, bagi temen-temen blogger semua yang sebelumnya telah membuat read more manual, silahkan edit terlebih dahulu kode pada templatenya ke dalam kode yang semula. Silahkan perhatikan kode di bawah ini yang merupakan contoh pembuatan readmore yang manual :
<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;'/>
Silahkan hapus kode yang saya tandai dengan huruf cetak tebal. Namun kemungkinan, kode pada setiap blog akan berbeda, jadi sesuaikan saja.....he..he..he...
Setelah selesai melakukan langkah-langkah diatas, lalu kita lanjutkan ke langkah berikut ini. Silahkan masuk terlebih dahulu ke menu edit html kemudian centang pada expand widget template, oya...jangan lupa backup dulu templatenya. Agar mudah dikembalikan seperti semula jika terjadi kesalahan, yaitu dengan cara klik download template lengkap. Setelah itu, silhakan letakan script di bawah ini tepat di atas kode </head>,setelah itu jangan lupa untuk menyimpannya.
Setelah selesai melakukan langkah-langkah diatas, lalu kita lanjutkan ke langkah berikut ini. Silahkan masuk terlebih dahulu ke menu edit html kemudian centang pada expand widget template, oya...jangan lupa backup dulu templatenya. Agar mudah dikembalikan seperti semula jika terjadi kesalahan, yaitu dengan cara klik download template lengkap. Setelah itu, silhakan letakan script di bawah ini tepat di atas kode </head>,setelah itu jangan lupa untuk menyimpannya.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 100;
img_thumb_width = 100;
</script><script type='text/javascript'>//<![CDATA[/******************************************Auto-readmore link script, version 2.0 (for blogspot)(C)2008 by Anhvovisit 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>
Nah, belum selesai, selanjutnya silahkan cari kode seperti ini <data:post.body/>, nah kalau udah ketemu, ganti kode <data:post.body/> dengan 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 == "item"'><data:post.body/></b:if>
Catatan:
- img_thumb_height = 100;, merupakan tinggi thumbnail dalam piksel.
- img_thumb_width = 100;, merupakan lebar thumbnail dalam piksel.
- summary_noimg = 200;, yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting yang tanpa thumbnail atau gambar.
- summary_img = 200; , yaitu untuk menentukan banyaknya karakter yang ingin ditampilkan pada posting dengan thumbnail atau gambar.
- Pada bagian Read More, silahkan anda ubah sesuai keinginan, misalnya; selanjutnya, dll.
Selesailah sudah, selamat mencoba dan silahkan lihat hasilnya.
Label:
tutorial blog
Blog Archive
-
▼
2011
(496)
-
▼
Maret
(162)
- Remeh dan Kerdil
- Artikan Sendiri Maknanya, Saya Juga Bingung.......
- Memberi PASSWORD pada folder dengan dan tanpa soft...
- Facebook Mobile Prompt Feed XSS (Cara Iseng Ngerja...
- Membuat burung twitter terbang di blog - Floating ...
- Cara mengawasi facebook pasangan kita dengan multi...
- Solusi Buka Facebook di blok IT dengan browsing am...
- cara iseng promosi web atau blog di salingsapa.com
- Daftar Web Penyedia Jasa URL / Link Shortener
- Simple Javascript Floating Image, Object, Avatar,...
- Free download SLANK mp3 Full All album
- Domain Dot TK saya tiba-tiba menghilang
- Metode Kepahlawanan
- RW KESEDIHAN RT KEBUNTUAN
- Fake Mailer / Fake Email Sender / Email Palsu
- DARI HATI KE HATI
- Apa Besok Pagi Kita Belum Mati ?
- Sistem Nilai Apakah yang Kita Pilih
- Menghapus Blog Yang Kita Ikuti (Follow)
- Files And Archives of p4r46hcyb3rn3t
- Kenapa Saya Gagal Blogging?
- Islam itu tidak menyakiti siapa-siapa
- Pekerjaan Yang Mulia
- Kepada Siapakah Engkau Mengeluh?
- Dua Manusia Super Di Pinggir Jalan
- Saatnya Untuk Pulang
- Saya Anti Demokrasi.....!!!
- Manusia Bukan Tandingan Setan
- Kita Adalah Bangsa Yang Memang Tidak Perlu Rajin
- Ketika Gandhi Kehilangan
- Modal Utama Manusia Untuk Menjadi Muslim Bukan Al ...
- Bakwan Jengkol
- 10 Tips untuk Blogger Pemula
- Meningkatkan Pendapatan Adsense Anda
- Memasang Iklan Google Adsense Di Blog Bahasa Indon...
- Hikayat Bukit Tengkorak
- Namanya Melisa
- Saya Jadi Apa, Bukan Karena Ingin
- Kebenaran Dibalik Sebuah Berita
- Apakah Kita Sudah Assalamu'alaikum Wr. Wb.
- Cara Menghapus Crawl Error Dengan Webmaster Tools
- Langkah-Langkah Membuat Website
- Panduan Google Website Optimizer untuk Split Testing
- Panduan / Tutorial Menggunakan Google Adwords
- Dapatkan Pay Per Lead $5 dari Nifty Stats
- Cara Membuat Rekening PayPal-100% Gratis
- Belajar Tools dan Tips Google Adsense
- Apa Arti Sebenarnya Bisnis Online itu?
- Macam-Macam Program Affiliasi Website
- How to Make Money From Your Website
- Social Widget [Twitter, Facebook & RSS Feed] Plugi...
- Top 15 WordPress SEO Plugins for 2010
- 10 WordPress plugins to work with images
- Akismet Key and How to Resolve Akismet Detected Pr...
- Cara Promosi Blog Anda
- Cara Mendaftarkan Blog ke Search Engine
- Membuat Website Search Engine Friendly
- Using the Joomla! Contact Component
- Tutorial Joomla – Using the Media Manager for File...
- Tutorial Template Joomla
- Joomla: Bagaimana Menghilangkan Jcomments Footer Link
- JComment: Fasilitas Komentar Joomla yang Simple ta...
- Joomla : Ubah Favicon Joomla Sesuka Hati
- Membuat Domain Dot Com dengan Blogspot
- Cara Daftar Gratis Domain di Web.Id
- Daftar Domain Gratis dari dot Tk
- Membuat Domain Gratis di CO.TV
- Daftar Penyedia Domain Gratis
- Cara Membuat Daftar Isi dan Sitemap Blog WordPress
- Cara Membuat Daftar Isi pada Blog WordPress
- Membuat file Robots.txt di Worspress
- Membuat Sitemap pada Wordpress
- Membuat Artikel Terkait (Related Post) pada Blog W...
- Cara Memasang Iklan di Dalam Postingan Blog WordPress
- Membuat Link Di Wordpress
- Membuat Iklan Melayang (Floating) di WordPress
- Cara Instalasi WordPress Di Local Host
- Instalasi CMS WordPress Pada Server Hosting
- Cara Daftar di Domain Gratis, Free Domain, Free DN...
- Pengaturan DNS Pada Domain CO.CC
- Membuat Website Atau Blog Gratis Penghasil Uang
- Platinum SEO Plugin-The Ultimate WordPress SEO
- Membuat Album Foto pada WordPress CMS dengan Plugi...
- Cara Optimasi Blog WordPress Bagi Pemula Dengan Pl...
- Tips Untuk Free Web Directory
- How to Activate Akismet to Your WordPress Blog
- 9 Anti Spam WordPress Plugin
- Optimalisasi WordPress untuk Mesin Cari
- Cara Mudah Membuat Blog WordPress Terkenal
- Plugin to Speed Up Your WordPress Site
- WordPress Optimization for Better Performance and ...
- WordPress Easy Paypal Payment or Donation Accept P...
- Activate Our WordPress RSS With Feedburner
- Tutorial Daftar Hosting Gratis DI FREEHOSTIA
- Instal Wordpress di Hosting Byethost
- Beware Free Hosting With 000WebHost.com
- Panduan mendaftar Hosting di Hostgator
- Tutorial Membuat Domain Gratis .CO.CC
- Tutorial Membuat Hosting 000webhost
- What Is Website Webhosting
-
▼
Maret
(162)