Membuat Read More di Blogspot

Posted by : alimshare Senin, 29 September 2014

Buat temen-temen yang lagi pada belajar nge-Blog . Di postingan ini , saya mencoba membagi cara membuat read more ke postingan blog kita , karena secara defaultnya biasanya postingan kita dimunculkan semuanya sehingga home blog kita pasti penuh dan panjang ke bawah ... Hehe .

Read more picture

Nah tanpa basa-basi langsung aja deh ini cara nya .

Masuk ke Dashboard Blog kita
Pilih Menu Template
Pilih Edit HTML
Maka akan muncul tampilan script dari template yang kita gunakan .
Nah mulai lah proses edit kita disini
Cari </head>
Tambahkan script dibawah ini tepat di atas </head> .

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<style>

.post-body{text-align:justify;}

.post-body img{max-width:none;width:auto;}

.read-more{float:left; padding-top: 10px;}

.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}

.read-more a:hover{text-decoration:none;background:#666;}.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}

.grow img{height:165px;width:250px;transition: all 2s ease;}

.grow img:hover{width:400px;height:250px;}

</style>

<script type='text/javascript'>

var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambarsummary_noimg = 300; //banyaknya huruf jika tidak ada gambarsummary_img = 250; //banyaknya huruf jika ada gambarimg_thumb_height = 165;img_thumb_width = 250;

</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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}//]]>

</script>

</b:if>

Jika sudah , coba SAVE terlebih dahulu template anda . Selanjutnya Coba cari potongan script dibawah ini :

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>...</b:widget>

Nah kata kuncinya adalah Blog Posts / Postingan Blog . disesuaikan dengan settingan bahasa yang digunakan pada Blog kita . Nah klo sudah ketemu , mari kita lanjutkan proses nya .
Klik pada anak panah yang ada di sebelah nomor baris . kemudian cari script berikut ini :

<data:post.body/>