Cara Membuat Read More Otomatis di Blogger

Cara Membuat Read More Otomatis di Blogger
akan saya berikan untuk kalian saat ini masih kesulitan, memang tidak
semuanya bisa dengan hal mudah tapi jangan salah dulu para blogger
senior pun sama kesulitan juga.
Memang setiap kali saya harus membuat template
kebanyakan harus membuat read more otomatis seperti ini karena memang
sangat efisien dan minimalis terlihatnya, tidak seperti read more
terdahulu yang harus memenggal artikel seperti code fungsi <div class=”fullpost”>..</div> atau <span class=”fullpost”>..</span> agar tidak tampil sepenuhnya di halaman depan blog kita.

Langsung saja kita praktekan cara membuat read more otomatis tersebut di bawah ini:

Penting!

Yang sudah memasang
Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti
semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap
template mungkin berbeda, jadi tinggal disesuaikan saja)

<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=”https://abc-ed.blogspot.com/2013/02/data:post.url”>Readmore</a>

</b:if>

<div style=”clear: both;”/>


Kalau sudah kita ke tahap selanjutnya


——————————————


Pertama, silahkan menuju menu

DESIGN -> Edit HTML, Cari kode
</head>
kemudian letakan script dibawah ini di atas kode </head> jangan lupa save template/simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>

<script type=”text/javascript”>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type=”text/javascript”>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf(“<“)!=-1){var
d=b.split(“<“);for(var
c=0;c<d.length;c++){if(d[c].indexOf(“>”)!=-1){d[c]=d[c].substring(d[c].indexOf(“>”)+1,d[c].length)}}b=d.join(“”)}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=”
“&&b.indexOf(” “,a)!=-1){a++}b=b.substring(0,a-1);return
b+”…”}function createSummaryAndThumb(d){var
f=document.getElementById(d);var a=””;var
b=f.getElementsByTagName(“img”);var
e=summary_noimg;if(b.length>=1){a=”<span style=”float:left;
padding:0px 10px 2px 0px;”><img src=””+b[0].src+'”
width=”‘+img_thumb_width+’px”
height=”‘+img_thumb_height+’px”/></span>’;e=summary_img}var
c=a+”<div>”+removeHtmlTag(f.innerHTML,e)+”</div>”;f.innerHTML=c};
//]]>
</script>

</b:if>
</b:if>


Cara Pasang Read More Otomatis Terbaru di Blogspot


Updates!
: Kode Warna Biru berfungsi agar halaman statis tidak ikut terpenggal seperti halaman HOME.


——————————————


Masih pada halaman

EDIT HTML, Beri tanda centang pada “Expand widget template” lalu temukan kode seperti dibawah

<data:post.body/>


Kalo sudah, ganti kode

<data:post.body/> dengan semua 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=”https://abc-ed.blogspot.com/2013/02/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>


Kalo sudah silahkan klik preview kalau memang masih ragu-ragu lalu silahkan disimpan dan lihat hasilnya

Keterangan:

var thumbnail_mode = “float”;

  (kita dapat memutuskan apakah

letak thumbnail berada di (
float) kiri atau jika tidak silahkan ganti

dengan
(no-float)
summary_noimg = 250;
(Menetapkan berapa banyak karakter akan ditampilkan

di posting tanpa gambar / thumbnail)

summary_img = 250;
(Menetapkan berapa banyak karakter akan ditampilkan di

posting dengan gambar / thumbnail)

img_thumb_height = 120;
(Thumbnail ‘tinggi dalam piksel)
img_thumb_width = 120
; (Thumbnail ‘lebar dalam piksel) 


source: http://www.ocimblog.com/2011/08/cara-pasang-read-more-otomatis-terbaru.html

Metode Penyerapan Bahasa Asing ke Bahasa Indonesia

Metode Penyerapan Bahasa Asing ke Bahasa Indonesia | Salah satu penunjang seseorang dalam memahami bacaan dengan baik dan benar adalah mengetahui makna kata atau istilah yang ilmiah dan serapan. Jika seseorang tidak mengetahui arti kata dalam sebuah teks yang dibaca,...

Pengertian, Struktur, dan Contoh Surat Niaga

Pengertian, Struktur, dan Contoh Surat Niaga | Surat niaga juga disebut dengan istilah surat dagang. Surat niaga adalah surat yang isinya berhubungan dengan kepentingan-kepentingan perniagaan atau perdagangan. Surat niaga dikeluarkan oleh perusahaan-perusahaan atau...

Pengertian, Struktur, dan Contoh Surat Niaga

Pengertian, Struktur, dan Contoh Surat Niaga | Surat niaga juga disebut dengan istilah surat dagang. Surat niaga adalah surat yang isinya berhubungan dengan kepentingan-kepentingan perniagaan atau perdagangan. Surat niaga dikeluarkan oleh perusahaan-perusahaan atau...

Pengertian, Unsur-Unsur, dan Contoh Surat Kuasa

Pengertian, Unsur-Unsur, dan Contoh Surat Kuasa | Surat kuasa adalah surat yang berisi pelimpahan wewenang dari seseorang atau pejabat tertentu kepada seseorang atau pejabat lain untuk melakukan sesuatu atas nama orang yang memberikan kuasa. Surat ini biasanya...

0 Komentar

Kirim Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *