Teknik Membuat Read More di Blog Blogspot mungkin belum banyak yang mengetahuinya, untuk itu disini saya akan mencoba menandakan secara singkat Bagaimana Teknik Membuat Read More di Blog Blogspot.
Tapi sebelumnya saya ingin memdiberitahukan bahwa Read More yang akan kita buat ini otomatis, maksudnya kita akan berguru Teknik Membuat Read More secara otomatis memakai menolongan dari jump link yang ada di blogspot.
Dalam tutorial ini saya memakai Template Sederhana (standar) dari Blogger.
Baik, pribadi saja kita mulai pembahasan cara membuat read more di blog blogspot.
Teknik Membuat Read More di Blog
1. Masuk ke Template dan klik Edit Template
2. Klik CTRL + F, dan cari arahan html </head>
3. Letakan arahan dibawah ini, sempurna diatas arahan 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>
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>
4. Lanjut dan cari arahan ini <data:post.body/> dan ubah dengan arahan HTML di bawah 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>
<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>
<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>
5. Disini banyak blogger yang bingung, sebab ada berbagai arahan <data:post.body/>, kalau pakai template standar yang diganti ialah yang arahan Kedua ( itemprop='description articleBody' )
6. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya. Jika cara membuat read more di blog Anda berhasil, maka kesannya akan ibarat gambar dibawah ini.
Kalau tampilan read more spesialuntuk berupa link, tampaknya kurang menarikdanunik bukan ? tapi tidakboleh khawatir, kita dapat mengubah tampilan read more dengan menolongan css.
Teknik Membuat Read More di Blog Lebih Menarik
1. Sama ibarat langkah cara membuat read more diatas, yang pertama ialah buka Template kemudian klik Edit
2. Klik CTRL + F dan ketikkan ]]></b:skin> kemudian klik Enter
3. Masukkan arahan css dibawah ini sempurna diatas ]]></b:skin>.
.arrow {
font-size: 18px;
font-family: serif;
font-weight: 900;
}
.readmore-link {
margin-top: 20px;
border-bottom: 1px solid gainsboro;
margin-left: 250px;
}
font-size: 18px;
font-family: serif;
font-weight: 900;
}
.readmore-link {
margin-top: 20px;
border-bottom: 1px solid gainsboro;
margin-left: 250px;
}
4. Langkah terakhir tinggal anda klik save template.
5. Silahkan Anda cek tampilan read more anda yang baru, gimana ? tambah hancur bukan, haha.
Untuk informasi saja, bahwa bahwasanya arahan javascript diatas dapat Anda ubah sesuai selera, contohnya kita ingin membuat thumbnail-nya lebih besar, katakanlah ingin dirubah menjadi 250px, caranya simpel tinggal Anda ganti img_thumb_height = 120; menjadi img_thumb_height = 250; dan img_thumb_width = 120; menjadi img_thumb_width = 250;
Mungkin itu saja klarifikasi dari saya terkena cara membuat read more di blog, jikalau ada hal yang ingin anda tanyakan seputar cara membuat read more di blog ini, tidakboleh sungkan-sungkan untuk menanyakannya melalui kolom komentar dibawah, gratis pastinya.
Akhir kata saya ucapkan terimakasih banyak sudah bersedia meluangkan waktu Anda untuk membaca artikel Teknik Membuat Read More di Blog Blogspot.
Tag :
Blogger Tips
0 Komentar untuk "Cara Menciptakan Read More Di Blog Blogspot"