Cara Menciptakan Read More Dengan Gambar Otomatis

Mempercantik Blog

Cara Membuat Read More Dengan Gambar Otomatis – Bagi Blogger Yang memiliki Blog Baru Tentunya Sedang mencari cara bagaimana supaya blognya terlihat menarik, simpel, dan sempurna… Tapi Ingat, Tidak ada yang tepat selain Yang Maha Kuasa. 🙂

Bagi Pengelola blog, apalagi blog gres pastinya mencari cara menciptakan Beberapa Halaman Seperti About me, Contact Us, Disclaimer, Term of Use, Artikel Terkait, Privacy Policy, Read More dan lain Sebagainya.

Statis page

Akhirnya Setelah saya utak atik Kode HTML Blogger Dengan Algoritma Terbaru saya jadi tau bertahap cara menciptakan beberapa Halaman Seperti Artikel terkait, Read More, Daftar Isi.

Dan Kali ini Saya akan menunjukan Cara Terbaru Membuat Read More Otomatis dengan Gambar /Thumbnail yang Menganut sistem HTML Terbaru Blogger.

Read More Blogger

Yang Belum paham teknik teknik Coding damai saja, teman disini tidak perlu menulis isyarat HTML yang membingungkan, teman Hanya Perlu Copy/Paste Kode HTML nya langsung.

Langsung aja tanpa basa busuk lagi, Ini Dia Tutorialnya Cara Membuat Read More :

1. Masuk Ke Blogger

2. Pilih Menu “Template” dan Klik “Edit HTML” Seperti pada Gambar

Template HTML blog

3. Cari Kode </head> dengan cara klik CTRL+F

4. Kemudian Copy/Paste kan Kode dibawah ini diatas Kode </head>. 

 

Penting:  Cara Membuat Read More Harus ada Jarak antara Kode dibawah dengan isyarat </head> minimal 1 Enter. Apabila tidak ada jarak mungkin tidak akan muncul readmore nya.

<script type=’text/j4vascript’>

var thumbnail_mode = “float” ;

summary_noimg = 200;

summary_img = 200;

img_thumb_height = 100;

img_thumb_width = 100;

</script>

<script type=’text/j4vascript’>

//<![CDATA[

/******************************************

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

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool h4cks

********************************************/

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>

5. Setelah simpulan ada lagi yang harus dilakukan, Yakni Cari isyarat yang berjulukan <data:post.body/>, Kemudian ganti dengan isyarat di bawah ini :

<b:if cond=’data:blog.pageType != “item”‘>

<div expr:id='”summary” + data:post.id’><data:post.body/></div>

<script type=’text/j4vascript’>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>

6. Kemudian Klik Simpan Template

7. Taraaaa, Coba anda reload Home Page anda maka akan muncul Tulisan Read More di setiap Artikel.

Berikut Video Tutorial Cara Membuat Read More supaya lebih jelas

 

Catatan:

img_thumb_height = 100; Merupakan tinggi thumbnail dalam piksel. Dan Dapat anda Rubah Sesuai Selera Masing-masing.

img_thumb_width = 100; Merupakan lebar thumbnail dalam piksel. Dan Dapat anda Rubah Sesuai Selera Masing-masing.

summary_noimg = 200; Untuk memilih banyaknya abjad yang ingin ditampilkan pada posting. Dan Dapat anda Rubah Sesuai Selera Masing-masing.

summary_img = 200; Untuk memilih banyaknya abjad yang ingin ditampilkan pada posting dengan thumbnail atau gambar.  Dan Dapat anda Rubah Sesuai Selera Masing-masing.

Read More, silahkan anda ubah sesuai keinginan, misalnya; Baca Selengkapnya,  dll.

        Itulah Cara Membuat Read More terbaru 2017 Pada Artikel Home Page Blogger supaya tidak terlalu panjang.

Baca juga Cara Menghilangkan Read More pada Laman Gadget Seperti About Me, Daftar isi, DLL.

Apabila ada kesalahan Hubungi Saya langsung. Sekian Dari saya, Semoga Tutorial ini Berhasil dan Sukses di terapkan pada blog Anda masing masing.

Terima Kasih Sudah Berkunjung

Copyright by: Blog Riski Oktovan

Sumber https://dewailmu.id

Share this post

Berlangganan update artikel terbaru via email: