Membuat Auto Readmore + gambar Default

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Auto Readmore + gambar Default dan semoga artikel ini bermanfaat.

---

Mungkin cara membuat auto readmore sudah tidak asing lagi di kalangan blogger, namun membuat auto Readmore + gambar Default masih banyak yang belum menggunakan. Auto Readmore yang saya maksud disini yaitu auto readmore yang menggunakan gambar default disaat pada waktu memposting yang tidak mengandung gambar didalamnya. kalau kita memposting artikel tidak menyertakan gambar maka pada saat di hompage yang menggunakan auto readmore tidak akan menampilkan gambar, nah dengan menggunakan auto readmore ini maka pada saat di homepage auto readmorenya akan menampilkan gambar default yang dimana gambar tersebut bisa kita pasang dengan gambar yang kita punya. sebagai contoh ini adalah gambar default blog ini.

Ok. kita langsung aja ya ke pokok masalahnya.
Pertama, login dulu ke blogger terus masuk ke menu rancangan dan pilih edit HTML jangan lupa untuk mencentang expand template widget. Biar aman, backup dulu template blog sobat. Abis itu cari kode </head> kemudian copy script dibawah ini dan paste sebelum kode </head>.

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 550;
summary_img = 551;
img_thumb_height = 150 ;
img_thumb_width = 150;
</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");
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZ-QGrRdV_h6LEnbuVebw9d9Vi52qMXb89NEWtqEjnJm0nBq4c75yhiyKT9MuW2t9lMm9tHjjdaMFm-aNmORLurv0MtIp8J_DOXuPmQSwOpmDp-b2WGS-plMvrRk4mwuLWrWJX8qITcbB/s1600/logo-gank-zone.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><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>

Selanjutnya masih pada halaman edit HTML cari lagi kode <data:post.body/> , biasanya setiap template berbeda, jika pada template sobat sudah ada script-script lain misalnya tombol like atau lainnya sesuaikan saja. Kalau sudah ketemu hapus dan ganti kode <data:post.body/> dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<div class='readmore-wrap'>
<a class='readmore' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Simpan template anda dan lihat hasilnya.

Catatan:

• var thumbnail_mode = &quot;no-float&quot; ; (ini adalah untuk mengubah posisi gambar apakah di(float) kiri atau jika tidak silahkan ganti dengan (no-float)
• summary_noimg = 550; (Banyaknya huruf yang akan ditampilkan di posting tanpa gambar / thumbnail)
• summary_img = 551; (Banyaknya huruf yang akan ditampilkan di posting dengan gambar / thumbnail)
• img_thumb_height = 150; (Thumbnail 'tinggi gambar dalam piksel)
• img_thumb_width = 150; (Thumbnail 'lebar gambar dalam piksel)
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZ-QGrRdV_h6LEnbuVebw9d9Vi52qMXb89NEWtqEjnJm0nBq4c75yhiyKT9MuW2t9lMm9tHjjdaMFm-aNmORLurv0MtIp8J_DOXuPmQSwOpmDp-b2WGS-plMvrRk4mwuLWrWJX8qITcbB/s1600/logo-gank-zone.jpg = (Gambar default yang akan ditampilkan jika postingan tidak mempunyai gambar).

Apabila pada template anda sudah terpasang auto readmore dan ingin menambahkan gambar defaultnya maka anda tinggal memasukan kode dibawah ini  sebelum if(img.length>=1).

if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZ-QGrRdV_h6LEnbuVebw9d9Vi52qMXb89NEWtqEjnJm0nBq4c75yhiyKT9MuW2t9lMm9tHjjdaMFm-aNmORLurv0MtIp8J_DOXuPmQSwOpmDp-b2WGS-plMvrRk4mwuLWrWJX8qITcbB/s1600/logo-gank-zone.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
} 

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Auto Readmore + gambar Default kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 12:45