Cara Membuat Post Summary Blogspot dengan JavaScript + jQuery

Ada 2 cara membuat post summary yang disertai thumbnail dan read more di Blogspot, yaitu dengan JavaScript dan tanpa JavaScript. Post summary Blogspot tanpa JavaScript sudah dibahas di sini. Berikut adalah tutorial bagaimana cara membuat post summary menggunakan JavaScript dan jQuery.

Post Summary Blogspot dengan JavaScript

Kode JavaScript ini sumbernya dari Blogger Widgets. Kode JS-nya dimodifikasi untuk beberapa hal sebagai berikut:

  1. Penambahan gambar default, imgDefault, jika postingan tidak ada gambar.
  2. Untuk performance halaman web, dimensi (height/width) gambar thumbnail disesuaikan dengan ukuran/pixel thumbnail sebenarnya.
  3. Thumbnail postingan yang tampil bukanlah hasil resize (height/width), melainkan hasil dari metode crop Google Picasa di mana Anda yang mengatur dimension thumbnailnya.
  4. Ada 2 bentuk thumbnail yaitu bentuk square (bujur sangkar) dan bentuk persegi yang sesuai dengan rasio gambar aslinya. Anda dapat memilihnya melalui opsi square.
  5. Penambahan opsi orientation dan margin untuk memudahkan penempatan posisi gambar (kiri/kanan) dan jarak antara thumbnail dengan summary.

Modifikasi skrip ini akan berjalan dengan baik jika host gambar Anda di Google Picasa. Jadi ketika posting gambar, harap tidak mengambil link gambar dari host lain. Sebaiknya upload gambar dari komputer atau ambil gambar dari akun Google Picasa Anda. Gambar yang di-upload dari penyimpanan file komputer, akan otomatis tersimpan di akun Google Picasa Anda.

Instruksi

  1. Masuk di editor template editor blog Anda dan sisipkan kode berikut sebelum kode </head>
    <script type='text/javascript'>//<![CDATA[
    //jumlah karakter post summary tanpa gambar
    summary_noimg = 550;
     
    //jumlah karakter post summary dengan gambar
    summary_img = 450;
     
    //dimensi thumbnail crop 
    dimension = 100;
     
    //nilai 0 untuk thumbnail sesuai rasio gambar asli, nilai 1 untuk thumbnail bentuk bujur sangkar.
    square = 0;
     
    //gambar default untuk post tanpa gambar, Anda bisa mengganti url gambar ini dan sesuikan ukuran gambar Anda dengan settingan dimensi di atas.
    imgDefault  = "http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s100-c/default.png";
     
    //posisi thumbnail right atau left
    orientation = "right";
     
    //margin thumbnail dengan summary
    margin = "1em";
     
    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)
    	{	
       var imgfirst =   img[0].src;
       var imageOriginalHeight =  img[0].height;
       var imageOriginalWidth =  img[0].width;
       var newHeight = (imageOriginalHeight/imageOriginalWidth * dimension);
       if (square)
       {
        var cropimg = imgfirst.replace(/s\B\d{3,4}/, 's' +dimension+ '-c');
        imgtag = '<span style="float:'+orientation+';margin:0 '+margin+' '+margin+' 0"><a href="'+imgfirst+'"><img src="'+cropimg+'" style="width:'+dimension+'px;height:'+dimension+'px"/></a></span>';
        } else {
        var cropimg = imgfirst.replace(/s\B\d{3,4}/, 's' +dimension+'');
        imgtag = '<span style="float:'+orientation+';margin:0 '+margin+' '+margin+' 0"><a href="'+imgfirst+'"><img src="'+cropimg+'" style="width:'+dimension+'px;height:'+newHeight+'px"/></a></span>';
        }
    	  summ = summary_img;
    	} 
    //Batas atas thumbnail default, Anda bisa menghilangkan kode berikut untuk menampilkan summary saja untuk postingan tanpa gambar.
            else {
            imgtag='<span style="float:'+orientation+';margin:0 '+margin+' '+margin+' 0"><img src="'+imgDefault+'" style="width:'+dimension+'px;height:'+dimension+'px"/></span>';
            }
    //Batas bawah thumbnail default.
    	  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    	  div.innerHTML = summary;
    }
    //]]>
    </script>
  2. Kemudian cari kode <data:post.body/> dan ganti kode tersebut dengan kode berikut:
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <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>
    </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
     
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <div class='jump-link'>
            <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
          </div>
    </b:if>
    </b:if>
  3. Atur posisi link Read More. Anda bisa menggunakan kode css berikut:
    .jump-link{
    text-align:right;
    }
  4. Save template Anda.

Post Summary Blogspot dengan jQuery (JavaScript library)

Untuk membuat post summary dengan jQuery ini, sumbernya dari Confluent Forms LLC. Terdapat settingan jumlah kata dalam summary, dimensi dan posisi gambar (di kiri/kanan summary). Instruksinya sangat simple karena kita tidak mengganti kode <data:post.body/> seperti cara 1 di atas. Anda cukup menyisipkan kode berikut di dalam template Anda, tempatkan sebelum </head>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
 
$(document).ready(function() {
 // change the dimension variable below to be the max pixel width you want the thumbnails to be
 var dimension = 90;
 
 // set this to be the word count of the lead-in
 var words = 80;
 
 // set this to be left, right, none or inherit
 var orientation = "left"; 
 
 // set 1 for squared image or 0 for proportional,
 // squared images only works for images hosted in Picasa
 var square = 1;
 
 // continuation of the introduction paragraph
 var addon = "...";
 
 // optional read more link, leave empty if you don't want it
 var readmore = "read more";
 
 // image margins such as 1em or 5px
 var margin = "1em";
 
 $('.post-body').each(function(n, wrapper){
  var newContents = "";
  var wrapper = $(wrapper);
  var image = $(wrapper).find('img').first();
   var textContents = wrapper.text().split(' ').slice(0,words).join(' ');
  if (words > 0) textContents += addon;
  wrapper.empty();
 if (image.attr('src')) {
   var imageOriginalHeight = image.height();
   var imageOriginalWidth = image.width();
   var imageParent = $(image).parent();
   wrapper.append(imageParent).append(textContents);
   if (square) {
    image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension + '-c')});
    image.attr('width',dimension).attr('height',dimension);
   } else {
    image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension)});
    image.attr('width',dimension);
    var newHeight = (imageOriginalHeight/imageOriginalWidth * dimension).toFixed(0);
    image.attr('height',newHeight);
   }
   imageParent.css('clear','none').css('float',orientation);
 
   switch (orientation) {
    case "left":
     imageParent.css('margin-left',0).css('margin-right',margin);
     break;
    case "right":
     imageParent.css('margin-left',margin).css('margin-right',0);
     break;
    default:
     imageParent.css('margin-left',margin).css('margin-right',margin);
     break;
   }
  }
 
  if (readmore) {
   var link = wrapper.parent().find('h3 a').attr('href');
   wrapper.append('<br /><a href="' + link + '#more">' + readmore + '</a>');
  } 
 
  wrapper.append('<hr>');
  $('hr').css('width','100%').css('background-color','transparent').css('border-width',0);
 });
 
});
//]]></script>

Atur settingan summary dan thumbnailnya dalam kode tersebut, kemudian save template Anda.
Post summary di Blogger dengan metode jQuery ini akan berfungsi dengan baik jika semua postingan Anda berisi gambar dan host gambarnya di Google Picasa.

Ikuti artikel JEVUSKA di Google+Facebook

comments