Terbaru: Optimasi URL Blog | 10 Tips Mempercepat Blog Load | 30 Strategi SEO | 15 Rahasia Menulis Konten

Ad 468 X 60

Friday, January 25, 2013

Cara Membuat Link Read More Dengan Gambar Thumbnail Yang Keren

read more link
Seorang blogger yang baik dapat diidentifikasi dengan cara dia mengelola blog dan mengatur posting-nya. Homepage adalah bagian paling penting dari setiap blog. Homepage harus berisi 5 hingga 6 posting dalam rangka untuk merebut daya tarik pembaca sebanyak mungkin. Menjaga pembaca sibuk untuk waktu yang lama adalah apa yang saya sebut blogging yang sukses. Menampilkan 5-6 posting  selain akan mempercepat waktu loading blog, hal ini juga akan membuat pemandangan yang indah di blog Anda dan menunjukkan ringkasan dari setiap posting. Pada homepage saya, Anda akan melihat link Read More beserta gambar thumnail yang sesuai, dengan mengkliknya maka akan membuka seluruh posting. Lihatlah screenshot di bawah ini:

thumbnail read more

Untuk membuat link Read More dengan gambar thumnail pada blog Anda, langkahnya sangat sederhana dan mudah untuk diterapkan oleh Anda semua. Silahkan ikuti langkah-langkah di bawah ini dengan hati-hati dan teliti:
  • Pertama masuk ke Blogger > Template
  • Backup dulu Template Anda
  • Klik Edit HTML
  • Centang kotak Expand Widget Templates di pojok kiri atas
  • Cari kode ini (gunakan fitur search Ctrl + F untuk memudahkan pencarian)
<data:post.body/>
  • Ganti kode di atas dengan kode di bawah ini
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<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:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
  • Sekarang carilah kode </head>, lalu letakkan kode di bawah ini tepat di atas kode </head>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
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:
summary_noimg = 430; Adalah ukuran tinggi potongan artikel jika tanpa thumbnail/gambar.
summary_img = 340; Adalah ukuran tinggi potongan artikel jika terdapat gambar/thumbnail.
img_thumb_height = 100; Adalah ukuran tinggi gambar/thumbnail.
img_thumb_width = 120; Adalah ukuran lebar gambar/thumbnail.

Begitulah tutorial singkat mengenai cara membuat link Read More dengan gambar thumbnail di blogger, semoga bisa bermanfaat bagi sobat blogger. :)
Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang.

18 comments:

  1. wah tips nya bagus gan. slam kenal yaak http://sekitarkita96.blogspot.com/

    ReplyDelete
  2. terima kasih mas,,dari sekian banyak tutorial yang ini yang paling berhasil http://softwarehardwareos.blogspot.com/

    ReplyDelete
    Replies
    1. Senang bisa membantu..
      Salam kenal kawan..

      Delete
  3. rasio ukuran gambar dlm posting kan kadang tidak sama dg rasio thumbnail yg sudah kita tentukan. jadi, terkadang gambar thumbnailnya tidak pas ukurannya. bagaimana mengatasi hal seperti ini?

    ReplyDelete
    Replies
    1. Jika Anda ingin gambar sesuai dengan aslinya maka tidak perlu script di atas, potong saja menggunakan 'insert jump break' icon yg bergambar kertas sobe pada saat Anda menlis artikel...
      Maka gambar akan muncul seperti aslinya..

      Delete
  4. Oke sob, ijin nyoba dari kemaren gagal terus :D

    ReplyDelete
    Replies
    1. Silahkan sob, jika tidak bisa terkadang memang tidak cocok dengan template yang Anda gunakan..

      Delete
  5. Good . ..
    .coba coba ahh
    slam kenal
    http://handarko.blogspot.com

    ReplyDelete
  6. thank's informasinya bang,,,siapa tau cock dengan template saya,,,
    bang kalau ada waktu silahkan berkunjung di blog saya dan minta kritik saranya,,,makasih
    http://prastypunya.blogspot.com

    ReplyDelete
    Replies
    1. Siap kawan,,,trimakasih sudah berkunjung...

      Delete
  7. Mas Menubar Ente Bagus Banget
    Minte Dong Bang :D

    ReplyDelete
    Replies
    1. Trimakasih mas..
      Wah maaf sy sudah tidak sempat lagi untuk utak atik template untuk misahin kode menu barnya.. Maaf kawan, jik nnti sempat mungkin sy posting.

      Delete
  8. thx mas, kunjungan baliknya yaa

    diakuin.blogspot.com

    ReplyDelete
  9. Mantaf Bossss...! Jadi Bnayak Belajar nih dari sini...!

    ReplyDelete
  10. info menarik gan, ijin nyimak dulu buat di pelajari....

    ReplyDelete
  11. mas tolong bantuannya. di blog saya ko ga ngaruh pas dirubah thumbnailnya.
    blog saya Yansyah Komunika
    mohon bantuannya.

    ReplyDelete
  12. wah mantap tipsnya mas.

    pasti terharu baca kisah2 di blog ini:
    http://www.yukhijrah.id/

    ReplyDelete

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di blog ini. Tanggapan Anda selalu kami hargai.