Cara Membuat Read More di Blog Blogspot mungkin belum banyak yang mengetahuinya, untuk itu disini saya akan mencoba menjelaskan secara singkat Bagaimana Cara Membuat Read More di Blog Blogspot.
Tapi sebelumnya saya ingin memberitahukan bahwa Read More yang akan kita buat ini otomatis, maksudnya kita akan belajar Cara Membuat Read More secara otomatis menggunakan bantuan dari jump link yang ada di blogspot.
Ok, berikut ini cara membuat Read More Otomatis.
1. Masuk ke Template dan klik Edit Template
2. Klik CTRL + F, dan cari kode html </head>
3. Letakan kode dibawah ini, tepat diatas kode html </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</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>
<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>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Berhubung karena read more telah disediakan blogger maka anda dapat melihat kode read more seperti di bawah ini:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
Inilah kode dasar yang akan dimodifikasi untuk tampilan "read more" yang lebih dinamis. Ok, mari bergerak menuju blog anda .
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- Klik tab Edit HTML.
- Centang kotak kecil di samping tulisan " Expand Template Widget "
- Cari kode seperti ini :
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
- Ganti kode di atas dengan beberapa pilihan modifikasi "read more" yang saya uraikan di bawah ini atau dengan "read more" kreasi anda.
- Klik tombol SIMPAN TEMPLATE
- Selesai.
Berikut adalah beberapa modifikasi "Read more" yang bisa menjadi pilihan anda. Seperti yang saya katakan di atas, anda pun bisa membuat kreasi "read more" sendiri. Ga apa-apa koq mencoba dikit-dikit. Jangan takut salah karena semuanya masih bisa diperbaiki.
Read More berada di sebelah kanan
Secara default biasanya read more akan berada di sebelah kiri. Nah, kita bisa membuatnya berada di sebelah kanan dengan menambahkan kode berikut :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
Pilihan lainnya adalah dengan memasang kode CSS berikut di atas ]]></b:skin>
.readmore { float:right;padding: 10px 0px 5px 0px; }
Lalu pada pada bagian "body" pasang kode berikut
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='readmore'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
Read more tampil dengan huruf tebal
Agar "Read more »»" atau "Read more..." bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong>Read more »»</strong> atau <b>Read more...</b>. Contoh :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </strong>
</div>
</b:if>
Read more digantikan dengan icon
Mungkin anda merasa tampilan read more dengan huruf kurang menarik. Nah, pilihan lainnya adalah anda bisa mengganti tulisan read more dengan gambar bikinan anda . Misalnya seperti di bawah ini:
Untuk menggantinya, maka kode CSS yang perlu diperhatikan seperti berikut
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src='URLgambarAnda' alt='read more dengan icon'/></a>
</div>
</b:if>
Sesuaikan dengan alamat penyimpanan gambar anda. Contohnya seperti ini :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>
<img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVhgdggiVQtx47t6htTwizya4iWhc7svKQOPKtbMWDsDoBmFiVNVuk3R35vTH5KR_r1Pr8xF6aaSGPViofh949ghh4bOQsdmYYkxYwMllqLktJqwziXh2jFvbvj9lmO1xYtVSbtNlL3bQ/s1600/readmore+button.png'
alt='read more'/></a>
</div>
</b:if>
Mudah bukan, temen-temen bisa mengganti icon readmore sesuai keinginan. JIka masih kesulitan anda bisa tanya ke kotak komentar yang ada di bawah. Selamat berkreasi dan semoga berhasil. Dan terima kasih juga atas kunjungannya...
Comments