[Tutorial] Cara mempersingkat postingan blog dengan Readmore bergambar

- [Tutorial]  Cara mempersingkat postingan blog dengan Readmore bergambar Salam sobat blogger... Apa kabar neh? Sudah pasang Permalink...

-[Tutorial]  Cara mempersingkat postingan blog dengan Readmore bergambar

Salam sobat blogger...
Apa kabar neh?

Sudah pasang Permalink belum, jika belum pasang dulu permalinknya di sini. Tidak kalah pentingnya juga untuk memasang Breadcrumbs atau menu navigasi di blognya. Untuk keterangan masing-masing langsung aja ke TKP. Namun pada kesempatan kali ini, kita tidak membahas mengenai itu tetapi akan mengulas [Tutorial]  Cara mempersingkat postingan blog dengan Readmore .

http://www.segenggam-harapan.com/2012/08/tutorial-cara-mempersingkat-postingan.html

Yupts.... Apa gunanya Readmore?
mungkin sobat bertanya-tanya apa seh itu Readmore, Sedikit menjelaskan Readmore berguna untuk mempersingkat isi postingan blog yang bertujuan untuk memberikan kenyaman dalam membaca bagi para reader. Readmore akan menampilkan sedikit bagian dari isi postingan dan akan menyembunyikan isi postingan lainnya. Nantinya jika para pembaca berminat untuk membaca selengkapnya maka hanya dengan mengklik aja, Tampilan keseluruhan postingan akan muncul.

Kalo bahasa Indonesianya, Readmore ini juga berarti Baca selengkapnya ataupun sejenisnya. Jika belum memilikinya sangat disarankan untuk menggunakannya. Selain membuat blog  menjadi lebih tertata rapi, para pembaca juga dapat melihat ulasan singkat tentang postingan yang dibuat sehingga sangat bagus untuk diterpkan pada blog.
Contoh Readmore dapat sobat lihat pada blog ini.

Langsung aja, Ikuti Langkah-langkah [Tutorial]  Cara mempersingkat postingan blog dengan Readmore :

1. Seperti biasa, Log in dahulu kepada akun blogger sobat masing-masing



2. Kemudian masuk ke Dashbor => Template => EDIT HTML => Lanjutkan

(Alangkah baiknya jika memback up template blog terlebih dahulu, jika tidak tahu caranya baca di sini )

(Jangan lupa untuk mencentang Expand Template Widget)


3. Kemudian cari kode </head>
(Untuk mempermudah pencarian, Gunakan CTRL+F pada keyboard)

Lalu copy  kode dibawah ini dan pastekan tepat diatas atau sebelum kode </head>



<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; 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>


=============================================
Keterangan :

var thumbnail_mode = "float" => Letak thumbnail berada di “float” kiri atau jika sobat tidak menginginkan demikian silahkan ganti dengan “no-float”.

summary_noimg = 250;  => Jumlah karakter yang akan ditampilkan di posting tanpa menampilkan gambar postingan.

summary_img = 250;   =>  Jumlah karakter yang akan ditampilkan di posting dengan menampikan gambar postingan.

img_thumb_height = 120; => Ukuran tinggi gambar dalam satuan pixel.

img_thumb_width = 120;  => Ukuran Lebar  gambar dalam satuan pixel.



4. Setelah itu, cari kode <data:post.body/> dan gantikan kode <data:post.body/> dengan kode dibawah ini



<b:if cond='data:blog.pageType != &quot;item&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;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

=============================================
Keterangan :

Sobat juga dapat menggantikan tulisan readmore   dengan tulisan lain seperti "Baca selengkapnya" .


5. Lihatlah PRATINJAU terlebih dahulu, jika sudah tidak terdapat kesalahan barulah sobat bisa menyimpan template dengan mengklik SAVE.

Dan lihat hasilnya...
Selamat mencoba dan semoga berhasil...
Demikian [Tutorial]  Cara mempersingkat postingan blog dengan Readmore,
Semoga bermanfaat... :-)

COMMENTS

BLOGGER: 13
Loading...

Nama

Artikel,66,Cerita singkat,82,Java,12,SEO,15,Tahukah sobat??,21,Tips dan Trik,15,Tips.....n' Trick.....,14,Tutorial,20,Tutorial Blogger,50,
ltr
item
Blog Salman Syuhada: [Tutorial] Cara mempersingkat postingan blog dengan Readmore bergambar
[Tutorial] Cara mempersingkat postingan blog dengan Readmore bergambar
http://3.bp.blogspot.com/-s0agIqWJbZM/UDeLwYvCK7I/AAAAAAAACoE/oXusnboPtR4/s400/read.jpg
http://3.bp.blogspot.com/-s0agIqWJbZM/UDeLwYvCK7I/AAAAAAAACoE/oXusnboPtR4/s72-c/read.jpg
Blog Salman Syuhada
http://blog.salmansyuhada.com/2012/08/tutorial-cara-mempersingkat-postingan.html
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/
http://blog.salmansyuhada.com/2012/08/tutorial-cara-mempersingkat-postingan.html
true
5369818979434965955
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy