RATE CARD!Pasang banner disini, dapatkan diskon 50%!

cara Automatisasi Read more thumbnail Postingan pada index blogspot

cara Automatisasi Read more thumbnail Postingan pada index blogspot

Suatu hari ada seorang kawan Blogger lama yang bertanya kepada saya…”Teteh Blognya banyak banget sih, aku cari2 , itung2 ternyata ada enam…hmm jangan2 masih ada lagi ya?”

Huehehe jujur saja, selain Potter.Web.ID, ngariung.com, dan LieZMaya.Web.ID sebenarnya saya masih mempunyai buanyaaaak sekali Blog dan website lainnya dengan topik yang berbeda – beda. Nah mungkin pertanyaan yang terlintas dibenak anda sebagian besar adalah “Buat apa sih banyak2?” gitu ya mungkin…yaaa suka ajah mengoleksi nama domain unik hehe, apalagi  salah satu hobi saya adalah mendesign2 ngotak ngatik cat Blog (sttt stttt saya orangnya gampang bosan soalnya hihi) sambil belajar CMS lainnya yang lebih menantang :P.

liezmayaOkeh segitu saja intronya, nah kali ini saya ingin berbagi tips mengenai design Blogspot. Salah satu favorit saya selain wordpress, saya juga suka yang gratisan dari si mister Blogspot.com, soalnya Blogspot itu memperbolehkan kita berkreasi dengan design yang kita inginkan dibandingkan dengan WordPress.com dan dapat menambah konten yang lebih menarik, seperti Java script, iklan, dll, dan lebih kerennya lagi kita dapat menggunakan custom domain sesuai yang kita inginkan (contohnya seperti Blog sunda saya www.liezmaya.web.id (liat screenshot gambar dibawah ini nih) lebih detailnya silahkan baca halaman https://potter.web.id/setting-custom-domain-berbayar-untuk-hosting-blogspot/

Tips kali ini adalah Bagaimana caranya kita dapat menerapkan Automatisasi Read more postingan dengan thumbnail pada halaman index…tujuannya supaya judul postingan kita pada halaman index bisa lebih banyak tertampil namun tentunya dengan source yang lebih pendek dan lebih nyaman diliihat.

Caranya adalah:

– Silahkan Login ke halaman admin account blogger.com anda
– Terus ke Dashboard -> Design -> Edit HTML
– Jangan lupa Back up dulu template anda, untuk mengantisipasi terjadinya kegagalan nantinya.
– Checklist opsi Expand Widget Templates
– Lalu carilah kode </head>

– Tambahkan kode dibawah ini, tepat setelahnya:

   1:  <!-- Auto read more script Start -->
   2:  <script type='text/javascript'>
   3:  var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
   4:  summary_noimg = 430; //summary length when no image
   5:  summary_img = 340; //summary length when with image
   6:  img_thumb_height = 200;
   7:  img_thumb_width = 200;
   8:  </script>
   9:  <script type='text/javascript'>
  10:  //<![CDATA[
  11:  function removeHtmlTag(strx,chop){ 
  12:      if(strx.indexOf("<")!=-1)
  13:      {
  14:          var s = strx.split("<"); 
  15:          for(var i=0;i<s.length;i++){ 
  16:              if(s[i].indexOf(">")!=-1){ 
  17:                  s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
  18:              } 
  19:          } 
  20:          strx =  s.join(""); 
  21:      }
  22:      chop = (chop < strx.length-1) ? chop : strx.length-2; 
  23:      while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
  24:      strx = strx.substring(0,chop-1); 
  25:      return strx+'...'; 
  26:  }
  27:   
  28:  function createSummaryAndThumb(pID){
  29:      var div = document.getElementById(pID);
  30:      var imgtag = "";
  31:      var img = div.getElementsByTagName("img");
  32:      var summ = summary_noimg;
  33:          if(thumbnail_mode == "yes") {
  34:      if(img.length>=1) {    
  35:          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>';
  36:          summ = summary_img;
  37:      }
  38:      }
  39:      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  40:      div.innerHTML = summary;
  41:  }
  42:  //]]>
  43:  </script>
  44:  <!-- Auto read more script End –>

– Setelah itu cari kode <data:post.body/>

– Lalu replace (ganti) dengan kode dibawah ini:

   1:  <!-- Auto read more Start -->
   2:  <!-- http://www.BloggerSentral.com -->
   3:  <b:if cond='data:blog.pageType == &quot;item&quot;'>
   4:  <data:post.body/>
   5:  <b:else/>
   6:  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   7:  <data:post.body/>
   8:  <b:else/>
   9:  <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  10:  <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
  11:  </script>
  12:  <a class='more' expr:href='data:post.url'>Read more...</a>
  13:  </b:if>
  14:  </b:if>
  15:  <!-- Auto read more End –>
 
– Lalu Klik tombol Preview. Jika sekiranya berhasil, silahkan anda klik tombol Save Template.
 
Note: Anda dapat merubah ukuran thumbnail dan kalimat "Read more lebih lanjut menjadi “baca selanjutnya/ baca selengkapnya” atau  sesuai keinginan anda.

—————–

Demikian, semoga dapat membantu dan memberikan pencerahan buat yang lagi pusing ya ^_^…

Penulis: Lilis Mayasari/ LieZMaya.Web.ID

Print Friendly, PDF & Email
pasang banner premium
Di tulis oleh: | Tags:
Kategori: Blogspot | 8 Comments
8 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Please komentar yang nyambung yaaa dengan topik postingan saya diatas!, jangan spam! Ayo buktikan kalau anda adalah manusia! * Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.