Mengganti Read More Dengan Icon Image

Setelah pada postingan sebelumnya kita membahas Cara membuat read more atau baca selengkapnya. Kali ini saya ingin berbagi lagi dengan pengunjung, kali ini cara merubah atau mengganti read more dengan image agar tampilannya lebih menarik.
Yang pertama harus disiapkan tentu adalah sebuah icon image seperti ini: atau seperti ini:
     atau seperti ini kemudian uploadlah image tersebut ke situs tempat penyimpanan image seperti photobucket. Setelah proses upload selesai, copylah URL image tersebut, seperti contoh dibawah ini :
http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif
Tambahkan kode agar image tersebut dapat ditampilakn seoperti dibawah ini :
<img src="http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/>
Image akan terlihat seperti ini gambar kedua diatas, tentu kreasi imagenya anda bisa sesuaikan sdengan selera anda (ini hanya contoh).
Selanjutnya ikuti tutorial berikut:

• Seperti biasa anda harus dalam keadaan sig ini pada blogger
• Masuk menu Tata Letak/ Layout=>klik Edit HTML=>Centang kotak kecil disamping Expand Template Widget
• Untuk menjaga yang tidak anda inginkan bisa Back up terlebih dahulu template anda!
• Kemudian cari kode seperti ini:

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Read More...</strong></a>
</b:if>

• Gantilah kalimat Read More dengan URL image yang telah disiapkan diatas, sehingga menjadi seperti ini :

<p><data:post.body/></p>
<a expr:href='data:post.url'><strong><img src="http://i685.photobucket.com/albums/vv220/amatullah_sy/read%20more/readmore-1.gif"/></strong></a>
</b:if>

• Terakhir, save template anda! Lihat hasilnya!

Semoga bermanfaat!

Membuat Read More Automatis

Cara membuat Auto Readmore otomatis :

1. Login ke Blogger
2. Klik Edit HTML centang Expand Widget Template
3. Cari code </head>
4. Copy script berikut di atas kode </head>

<script type='text/javascript'>
summary_noimg = 700;
summary_img = 500;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

Keterangan:
summary_noimg = jumlam karakter yang ditampilkan jika artikel tidak memakai gambar (misal: 700 karakter)
summary_img = jumlam karakter yang ditampilkan jika artikel memakai gambar (misal: 500 karakter)
img_thumb_height = tinggi gambar thumbnail (misal: 150px)
img_thumb_width = lebar gambar thumbnail (misal: 200px)

· Setelah itu carilah kode : <p><data:post.body/></p>  (Dalam beberapa template tidak memakai perintah paragraf (<p>), sehingga kodenya hanya <data:post.body/>. Jika ada 2 kode, pilih kode yang pertama.

· Ganti kode tersebut dengan kode ini:

<!-- Awal Readmore -->
<p>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right; font-style:italic'><a expr:href='data:post.url' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>Readmore...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</p>
<!-- Akhir Readmore -->

Catatan:
Jika ingin mengubah perataan teks ganti right dengan left, atau mengubah style huruf italic dengan normal. Tulisan Readmore... dengan kata lain atau dengan gambar.

· Simpanlah hasilnya.

Membuat Read More Sejajar Dengan Paragrap

Cara membuat Read more sejajar dengan paragraf adalah sbb:

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. 

Selengkapnya

mejadi

Ada kabar gembira buat anda para pebisnis, baik itu bisnis online ataupun offline. Mulai saat ini ada program baru di blog saya yaitu " Iklan Dalam Bentuk Posting ", benar-benar dalam bentuk posting. Selengkapnya

Caranya :

<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'><b>Selengkapnya.....</b></a>
</b:if>

Agar kode read more atau selengkapnya menjadi sejajar dengan postingan, anda tinggal memindahkan kode </p> yang saya cetak merah, sehingga menjadi seperti ini :


<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/>
<a expr:href='data:post.url'><b>Selengkapnya.....</b></a></p>
</b:if> 

Membuat Read More Otomatis

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.


Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisanExpand Widget Templates.

(1)

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat dibawahnya letakkan kode javascript berikut:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode<data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>[ Read More.. ]</a></span>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<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/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya