Header Ads

Cara otomatis menambahkan Read More Link ke Blogger

Baca juga artikel terkait lainnya

Apakah Anda melihat banyak blogger menggunakan mini-deskripsi dari posting yang ditampilkan pada halaman blog utama, halaman pencarian, halaman label dan halaman arsip. Peningkatan jumlah blogger yang posting artikel mereka dengan menambahkan "melompat-link", yang memungkinkan pengguna untuk mengklik link yang mengatakan "Read More" untuk melanjutkan membaca posting.

Cara otomatis menambahkan Read More Link ke Blogger

Dalam artikel saya sebelumnya Auto Read More Javascript untuk Blogger tapi memiliki banyak kelemahan seperti Anda tidak dapat meningkatkan panjang karakter tapi dalam artikel ini, saya akan menunjukkan cara untuk secara otomatis menambahkan read lebih link dalam Blogger lagi yang banyak pilihan daripada sebelumnya hanya menggunakan fungsi JavaScript sederhana, sehingga Anda siap untuk itu hanya mengikuti langkah-langkah mudah:

Tambahkan Read More Link ke Blogger

Langkah 1:  Buka Blogger Dashboard >> Template >> Edit HTML dan di dalam editor Cari (CTRL + F atau CMD + F) <data:post.body/>dan mengganti dengan yang satu ini.

<!-- Auto Read More Body Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></span>
</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>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End -->

Langkah 2:  Cari </head>dan paste kode di bawah ini di atas</head>

<!-- Auto Read More Body Script Start -->
<script type='text/javascript'>
no_thumb_sum = 300;
thumb_sum = 200;
thumb_h = 220;
thumb_w = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+thumb_w+'px" height="'+thumb_h+'px" /></a></span>',s=thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link  {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>
<!-- Auto Read More Body Script End -->

Modifikasi / Option

Perubahan standar Read More teks yang lain pada mengganti ini <data:post.jumpText/>dengan teks Anda
Mengubah jumlah karakter yang ditampilkan ketika tidak ada thumbnail, memodifikasi (no_thumb_sum = 300;) nilai 300 dengan nilai Anda
Mengubah jumlah karakter yang ditampilkan ketika sebuah tulisan memiliki thumbnail, memodifikasi (no_thumb_sum = 200;) nilai 200 dengan nilai Anda
Perubahan gambar / tinggi thumbnail, memodifikasi (thumb_h = 220;) nilai 160 untuk tinggi gambar Anda
Perubahan gambar / lebar thumbnail, memodifikasi (thumb_h = 300;) nilai 180 dengan lebar gambar Anda

Langkah 3:  Klik Simpan dan Buka Blog Anda untuk melihat hasilnya


Powered by Blogger.