Memperbaiki kualitas & menghentikan kompresi gambar di Blogger

Mungkin Anda pernah mengalami masalah kualitas gambar atau foto yang buruk setelah diupload di blog Blogger atau Blogspot, terutama gambar yang berisi grafis huruf atau sketsa, seperti lambang atau logo. Hal ini disebabkan gambar Anda telah dikompres (compression) sekian persen secara otomatis. Apakah ini sengaja dilakukan Blogger sebagai langkah untuk hemat bandwidth? entahlah.

Cara memperbaiki kualitas sekaligus menghentikan kompresi gambar Anda di Blogger tetap dapat dilakukan supaya hasil upload di blog Anda sesuai dengan kualitas gambar yang asli. Cara ini juga dilakukan untuk pengguna sosial media Google Plus yang tetap ingin mempertahankan keaslian gambar yang di-publish tanpa harus terkompres secara otomatis.

Berikut ini langkah yang harus dilakukan untuk solusi masalah kualitas gambar yang terkompresi di Blogger:

  1. Jika Anda memiliki akun di Blogspot, pastikan profile Blogger Anda terkoneksi dengan akun Google Plus, atau setidaknya akun Blogger Anda satu akun dengan Akun Google Plus.
  2. Pada akun Google Plus, di bagian Settings https://plus.google.com/settings, ubah pengaturan Auto Enhance menjadi Off (lihat gambar di bawah).

    Auto Enhance Off
    Auto Enhance Off
  3. Selesai dan silahkan upload ulang gambar yang ingin Anda posting.

Cara Lainnya
Cara lain yang dapat juga Anda lakukan jika tidak ingin mengkoneksikan akun Blogger dengan Google Plus, pastikan gambar yang Anda upload dalam format png, bukan jpg. Hanya saja kualitas gambar masih jelek karena tetap dalam keadaan kompresi, belum semaksimal seperti cara mengkoneksikannya dengan akun Google Plus Anda. Selamat mencoba upload dan lihat kualitas gambar yang dihasilkannya.


 Bagikan

Open Graph Blogspot – cara mengatasi masalah share gambar di Facebook

Masalah share konten web ke jejaring sosial (social media) artinya kita membicarakan yang namanya OGP (Open Graph protocol). Bagi webmaster, masalah yang biasa terjadi pada saat sharing postingan seperti:

  • Gambar tidak muncul.
  • Bukan gambar yang diinginkan.
  • Judul atau title konten tidak ada.
  • Deskripsi konten tidak ada.

Masalah ini sering terjadi di Facebook, karena mereka punya protokol tersendiri untuk open graph, namanya Social Graph, yang diperkenalkan oleh founder Facebook sendiri, Mark Zuckerberg.

Open Graph Blogspot

Khusus untuk Blogspot, jika Anda mengalami masalah seperti yang disebutkan di atas saat share gambar di Facebook, maka cara mengatasi masalah tersebut yaitu dengan memasang kode OGP berikut, tempatkan sebelum kode </head> dalam template editor blog Anda.

<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<meta content='FB_APP_ID' property='fb:app_id'/>
<meta content='FB_ADMIN_ID' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='http://NAMABLOG.BLOGSPOT.COM/p/about.html' property='article:author'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='URL_GAMBAR_DEFAULT_JIKA TIDAK_ADA_GAMBAR_DALAM_POSTINGAN_DENGAN_UKURAN_DIMENSI_MINIMAL_200x200.jpg' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='URL_GAMBAR_DEFAULT_HALAMAN_DEPAN_DENGAN_UKURAN_DIMENSI_MINIMAL_200x200.jpg' property='og:image'/>
</b:if>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>

Sumber script bloggerhow.com.

Untuk mendapatkan ID aplikasi Facebook (FB_APP_ID) baca di sini. Sedangkan ID admin Facebook (FB_ADMIN_ID) baca di sini.

Di Blogger, OGP judul atau title konten diambil dari title postingan, deskripsinya diambil dari meta description, gambarnya dari link rel image_src atau jika dengan menggunakan kode di atas diambil dari ukuran thumbnail gambar postingan. Khusus untuk masalah sharing gambar di Facebook, Social Graph mempersyaratkan ukuran dimensi gambar jangan terlalu kecil, minimal 200X200 pixel, masing-masing untuk lebar (width) dan tinggi (height). Gunakan tool Debug Open Graph Facebook di sini untuk memeriksa apakah ada kesalahan di setiap protokol. Tool ini sekaligus membersihkan cache dari konten yang telah di-share sebelumnya.

Tips Posting Gambar

Share gambar di FB profile & page berbeda dari segi tampilan. Jadi untuk pengguna Blogger/Blogspot (sebenarnya untuk semua platform situs sih), usahakan saat memposting gambar memperhatikan ukuran dimensi gambar minimal 200×200 px. Jika ukuran gambar dalam postingan yang kita inginkan tidak memungkinkan, usahakan gambar tersebut diberikan tautan ke gambar dengan dimensi yang lebih besar. Selain Facebook, Twitter dan Google plus sudah mengimplementasikan bahasa protokol open graph ini. Semoga tutorial ini bermanfaat.


 Share

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.

Infinite Ajax Scroll di Blogspot

Tutorial kali ini bagaimana cara memasang infinite ajax scroll di Blogspot yang membuat halaman pagination blog Anda menjadi autoload ketika di scroll ke bawah. Pada artikel sebelumnya, plugin jQuery infinite ajax scroll ini dapat diterapkan di blog WordPress dan dapat berjalan di beberapa browser dengan versi terbarunya.

Cara pasang skrip infinite ajax scroll di Blogger/Blogspot

1. Buka template editor blog Anda.
2. Centang Expand Template Widget dan sisipkan skrip di bawah ini secara berurutan dalam head template Anda, tepatnya sebelum kode <b:skin>:

File jQuery versi 1.6.1

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- File jQuery versi 1.6.1 -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Infinite Ajax Scroll Setting

<!-- Infinite Ajax Scroll Setting -->
<script type='text/javascript'>
//<![CDATA[
jQuery('document').ready(function($) {
	setup_ajax_pagination();
});

function setup_ajax_pagination()
{
jQuery.ias({
 container 	: ".main-inner",
  item		: ".post-outer",
  pagination	: ".main-inner .blog-pager",
  next		: ".blog-pager a.blog-pager-older-link",
	history:false,
	loader: "<img src='http://url-gambar-loading.tld/loader.gif'/>", //sisipkan url gambar loading, download di sini www.ajaxload.info
});
}
//]]>
</script>

Untuk gambar loader, upload gambar melalui blog Anda, dan sisipkan urlnya pada kode Infinite Ajax Scroll Setting di atas. Ganti kode ini yang ini http://url-gambar-loading.tld/loader.gif dengan url gambar loader Anda.

Skrip jQuery Infinite Ajax Scroll

<!-- Skrip jQuery Infinite Ajax Scroll -->
<script type='text/javascript'>
//<![CDATA[
(function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging(m.scrollContainer);var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").scrollTop(curTreshold)}else{s()}})}return f}function s(){n();m.scrollContainer.scroll(g)}function g(){if(m.scrollContainer==b.ias.defaults.scrollContainer){scrTop=m.scrollContainer.scrollTop()}else{scrTop=m.scrollContainer.offset().top}wndHeight=m.scrollContainer.height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=p()){t(curScrOffset)}}function q(){m.scrollContainer.unbind("scroll",g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr("href");if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();m.onRenderComplete.call(this,x);if(v){v.call(this)}})}function e(w,x){var v=[];b.get(w,null,function(y){container=b(m.container,y).eq(0);if(0==container.length){container=b(y).filter(m.container).eq(0)}if(container){container.find(m.item).each(function(){v.push(this)})}if(x){x.call(this,y,v)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'>"+m.loader+"</div>");loader.hide()}return loader}function o(){loader=u();if(m.customLoaderProc!==false){m.customLoaderProc(loader)}else{el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}}function k(){loader=u();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",scrollContainer:b(window),item:".item",pagination:"#pagination",next:".next",loader:'<img src="images/loader.gif"/>',tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){history.pushState({ias:g},h,f)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery);
//]]>
</script>
</b:if>

3. Save template Anda.

4. Memposisikan gambar loader.gif pada posisi tengah dengan memasang kode css berikut:
(Baca di sini bagaimana cara mudah menambahkan CSS di template Blogspot):

.ias_loader{
	text-align:center;
	margin: 5px 0;
}

5. Klik tombol di kanan atas, Terapkan ke Blog (Apply to Blog).Selesai dan lihat hasilnya.

Kode JavaScript Infinite Ajax Scroll di hostingan lain

Apabila Anda mempunyai website hosting atau tempat upload untuk file JavaScript Blogspot, kode JavaScript Infinite Ajax Scroll di atas dapat dipersingkat.

  1. Melalui notepad atau yang sejenisnya, simpan kode JavaScript Infinite Ajax Scroll Setting berikut dengan nama jquery.ias.setting.js.
    jQuery('document').ready(function($) {
    	setup_ajax_pagination();
    });
     
    function setup_ajax_pagination()
    {
    jQuery.ias({
     container 	: ".main-inner",
      item		: ".post-outer",
      pagination	: ".main-inner .blog-pager",
      next		: ".blog-pager a.blog-pager-older-link",
    	history:false,
    	loader: "<img src='http://url-gambar-loading.tld/loader.gif'/>",
    });
    }
    
  2. Simpan Skrip jQuery Infinite Ajax Scroll berikut dengan nama jquery.ias.min.js.
    (function(b){b.ias=function(d){var m=b.extend({},b.ias.defaults,d);var c=new b.ias.util();var j=new b.ias.paging(m.scrollContainer);var h=(m.history?new b.ias.history():false);var f=this;r();function r(){j.onChangePage(function(x,v,w){if(h){h.setPage(x,w)}m.onPageChange.call(this,x,w,v)});s();if(h&&h.havePage()){q();pageNum=h.getPage();c.forceScrollTop(function(){if(pageNum>1){l(pageNum);curTreshold=p(true);b("html,body").scrollTop(curTreshold)}else{s()}})}return f}function s(){n();m.scrollContainer.scroll(g)}function g(){if(m.scrollContainer==b.ias.defaults.scrollContainer){scrTop=m.scrollContainer.scrollTop()}else{scrTop=m.scrollContainer.offset().top}wndHeight=m.scrollContainer.height();curScrOffset=scrTop+wndHeight;if(curScrOffset>=p()){t(curScrOffset)}}function q(){m.scrollContainer.unbind("scroll",g)}function n(){b(m.pagination).hide()}function p(v){el=b(m.container).find(m.item).last();if(el.size()==0){return 0}treshold=el.offset().top+el.height();if(!v){treshold+=m.tresholdMargin}return treshold}function t(w,v){urlNextPage=b(m.next).attr("href");if(!urlNextPage){return q()}j.pushPages(w,urlNextPage);q();o();e(urlNextPage,function(y,x){result=m.onLoadItems.call(this,x);if(result!==false){b(x).hide();curLastItem=b(m.container).find(m.item).last();curLastItem.after(x);b(x).fadeIn()}b(m.pagination).replaceWith(b(m.pagination,y));k();s();m.onRenderComplete.call(this,x);if(v){v.call(this)}})}function e(w,x){var v=[];b.get(w,null,function(y){container=b(m.container,y).eq(0);if(0==container.length){container=b(y).filter(m.container).eq(0)}if(container){container.find(m.item).each(function(){v.push(this)})}if(x){x.call(this,y,v)}},"html")}function l(v){curTreshold=p(true);if(curTreshold>0){t(curTreshold,function(){q();if((j.getCurPageNum(curTreshold)+1)<v){l(v);b("html,body").animate({scrollTop:curTreshold},400,"swing")}else{b("html,body").animate({scrollTop:curTreshold},1000,"swing");s()}})}}function u(){loader=b(".ias_loader");if(loader.size()==0){loader=b("<div class='ias_loader'>"+m.loader+"</div>");loader.hide()}return loader}function o(){loader=u();if(m.customLoaderProc!==false){m.customLoaderProc(loader)}else{el=b(m.container).find(m.item).last();el.after(loader);loader.fadeIn()}}function k(){loader=u();loader.remove()}};function a(c){if(window.console&&window.console.log){window.console.log(c)}}b.ias.defaults={container:"#container",scrollContainer:b(window),item:".item",pagination:"#pagination",next:".next",loader:'<img src="images/loader.gif"/>',tresholdMargin:0,history:true,onPageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};b.ias.util=function(){var d=false;var f=false;var c=this;e();function e(){b(window).load(function(){d=true})}this.forceScrollTop=function(g){b("html,body").scrollTop(0);if(!f){if(!d){setTimeout(function(){c.forceScrollTop(g)},1)}else{g.call();f=true}}}};b.ias.paging=function(){var e=[[0,document.location.toString()]];var h=function(){};var d=1;j();function j(){b(window).scroll(g)}function g(){scrTop=b(window).scrollTop();wndHeight=b(window).height();curScrOffset=scrTop+wndHeight;curPageNum=c(curScrOffset);curPagebreak=f(curScrOffset);if(d!=curPageNum){h.call(this,curPageNum,curPagebreak[0],curPagebreak[1])}d=curPageNum}function c(k){for(i=(e.length-1);i>0;i--){if(k>e[i][0]){return i+1}}return 1}this.getCurPageNum=function(k){return c(k)};function f(k){for(i=(e.length-1);i>=0;i--){if(k>e[i][0]){return e[i]}}return null}this.onChangePage=function(k){h=k};this.pushPages=function(k,l){e.push([k,l])}};b.ias.history=function(){var d=false;var c=false;e();function e(){c=!!(window.history&&history.pushState&&history.replaceState);c=false}this.setPage=function(g,f){this.updateState({page:g},"",f)};this.havePage=function(){return(this.getState()!=false)};this.getPage=function(){if(this.havePage()){stateObj=this.getState();return stateObj.page}return 1};this.getState=function(){if(c){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias}}else{haveState=(window.location.hash.substring(0,7)=="#/page/");if(haveState){pageNum=parseInt(window.location.hash.replace("#/page/",""));return{page:pageNum}}}return false};this.updateState=function(g,h,f){if(d){this.replaceState(g,h,f)}else{this.pushState(g,h,f)}};this.pushState=function(g,h,f){if(c){history.pushState({ias:g},h,f)}else{hash=(g.page>0?"#/page/"+g.page:"");window.location.hash=hash}d=true};this.replaceState=function(g,h,f){if(c){history.replaceState({ias:g},h,f)}else{this.pushState(g,h,f)}}}})(jQuery);
    
  3. Upload 2 file .js (jquery.ias.setting.js & jquery.ias.min.js) tersebut di hostingan Anda.
  4. Sisipkan link upload file tersebut pada kode singkat berikut dan tempatkan di template blog Anda.
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <!-- File jQuery versi 1.6.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
    <!-- Infinite Ajax Scroll Setting -->
    <script type="text/javascript" src="http//url-hosting-lain.tld/jquery.ias.setting.js"></script>
    <!-- Skrip jQuery Infinite Ajax Scroll -->
    <script type="text/javascript" src="http//url-hosting-lain.tld/jquery.ias.min.js"></script>
    </b:if>
    

Jika pagination blog Anda tidak me-load secara otomatis ketika discroll, Anda perlu mengatur tag id/class pada kode Infinite Ajax Scroll Setting di atas untuk disesuaikan dengan template Anda. (baca di sini untuk mengetahui deskripsi skrip dasar jQuery Infinite Ajax Scroll dan cara settingnya).

Tempat upload gratis file JavaScript untuk Blogspot

“Bagaimana cara upload file JavaScript (.js) di Blogger/Blogspot?” tentunya pertanyaan ini sering dipertanyakan oleh para blogger. Sampai saat ini Blogger belum memungkinkan untuk meng-upload file JavaScript. Fitur upload Blogger hanya tersedia untuk file gambar saja. Ada beberapa website sebagai tempat hosting dan upload file .js yang tersedia dengan gratis yaitu:

  1. Google Sites sites.google.com
  2. Drop Box www.dropbox.com
  3. Geocities www.geocities.ws
  4. Google Code code.google.com

Kemungkinan website hosting tersebut mempunyai keterbatasan dalam hal bandwidth. Lalu bagaimana cara mengatasinya?. Blogger memang tidak memungkinkan untuk meng-upload file .js, akan tetapi dengan bandwith yang tidak terbatas (unlimited), sebenarnya Anda bisa menyisipkan isi/kode file JavaScript langsung pada template Blogger Anda.

Cara menyisipkan kode JavaScript di Blogger/Blogspot

  1. Buka template editor blog Anda
  2. Buka file .js Anda, kemudian sisipkan isi/kode file JavaScript Anda dalam kode berikut. Kodenya seperti ini:
    <script type=’text/javascript’>
    //<![CDATA[

    SISIPKAN KODE FILE .JS DI SINI
    //]]>
    </script>
  3. Save template Anda

Penempatan kode ini disesuaikan dengan fungsi JavaScript itu sendiri, bisa ditempatkan di head atau di body template Anda.

Cara membuat snippet, thumbnail, read more di Blogspot dengan mudah

Jika Anda melihat blog Anda di Blogspot melalui ponsel tentunya akan berbeda tampilannya dengan versi desktop. Tampilan blog versi mobile memang terlihat lebih sederhana karena untuk mempercepat loading halaman web di ponsel. Pada halaman depan terlihat hanya tampilan summary/snippet dari suatu artikel blog Anda. Jika artikel Anda memuat gambar, maka akan terlihat gambar yang otomatis berukuran kecil (thumbnail) beserta ringkasan artikel (snippet) Anda.

Anda dapat dengan mudah merubah tampilan blog Anda untuk versi desktop menjadi seperti versi mobile, di mana halaman depan (homepage) hanya terlihat summary artikel, thumbnail, serta link Read More (dalam bahasa Indonesia: baca selengkapnya) untuk menuju ke artikel yang lengkap (full article).

Link Read More ini bukanlan read more yang Anda sisipkan pada saat membuat postingan di blog Anda, melainkan read more yang otomatis tampil pada saat Anda menyisipkan kode di template Anda nantinya.

Berikut tutorial cara membuat snippet, thumbnail serta read more di Blogspot dengan mudah:

  1. Masuk melalui template editor Anda.
  2. Berikan tanda centang Expand Widget Templates dan temukan kode
    <data:post.body/>
    
  3. Ganti kode di atas dengan kode berikut:
    <!-- Tampilan static page dalam artikel lengkap -->
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
    
    <b:else/>
    
    <!-- Tampilan halaman selain halaman postingan/artikel lengkap akan membentuk snippet, thumbnail dan readmore -->
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    
    <b:if cond='data:post.thumbnailUrl'>
                  <div class='item-thumbnail'>
                    <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
                  </div>
    </b:if>
    <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
          <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:else/>
    <data:post.body/>
    </b:if>
    </b:if>
    
  4. Save template Anda.

Jika tampilan thumbnail tidak sesuai dengan yang Anda inginkan, misalnya Anda menginginkan thumbnail berada pada posisi kiri snippet artikel, Anda dapat memberikan kode tambahan css di template Anda.

Cara mudah menambahkan CSS di template Blogspot

  1. Pada menu template, klik tombol Sesuaikan (Customize).
    Customize Template Blogger
  2. Akan tampil Perancang Template Blogger. Pilih menu Tingkat Lanjut > Tambahkan CSS.
    Advance Add CSS Blogger
  3. Pada kotak kosong Tambahkan CSS khusus, sisipkan kode css berikut untuk memposisikan gambar di sebelah kiri snippet:
    .item-thumbnail {
    float: left;
    margin: 0 5px 5px 0;
    }
    

    Optional. Jika Anda ingin menambahkan shadow/bayangan pada thumbnail, sisipkan lagi kode css berikut di bawah kode css di atas.

    .post-body .item-thumbnail img {
    padding: 5px;
    background: #FFF;
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
    }
    
  4. Klik tombol di kanan atas, Terapkan ke Blog (Apply to Blog).Selesai!.

Tutorial ini tanpa penggunaan kode javascript dalam menentukan ukuran thumbnail. Thumbnail secara otomatis terbentuk pada saat Anda mengupload gambar. Ukuran thumbnail 72 x 72 pixel.

Update 23-09-2012
Penambahan data alt, height, dan width pada thumbnail (SEO Analyzer Bing Webmaster Tool)

Baca juga cara terbaru membuat meta descriptions dengan gampang di Blogger.

Pasang Google CSE di Blogger

Penambahan fitur Google CSE di halaman blog Anda sangat membantu dalam melakukan navigasi pencarian seluruh artikel Anda. Apalagi sekarang telah tersedia Google Custom Search Element versi 2 yang semakin membuat Google CSE semakin mudah untuk di modifikasi.

Kode Google CSE terbaru ini juga dapat dipasang di blog Blogger/Blogspot khususnya di halaman sebagai berikut:

  • Halaman Label.
  • Halaman Pencarian (search result).
  • Halaman Error 404 (Page Not Found).
  • Halaman Postingan.

Berikut cara pasang Google CSE di Blogger:

  1. Masuk di template editor blog Anda Template > Edit HTML.
  2. Centang Expand Widget Templates dan temukan kode
    <b:include data='top' name='status-message'/>
    

    (Jika ada 2 kali kode tersebut, tetapkan kode yang kedua (yang bukan untuk mobile web).

  3. Tempatkan kode Google CSE di setiap halaman berikut setelah kode di atas. Anda dapat menggabungkan kode Google CSE ini semuanya.

    Google CSE di halaman Label

    Eksekusi nama label menggunakan kode <data:blog.searchLabel/>.

    <!-- Google CSE Halaman Label -->
    <b:if cond='data:blog.searchLabel'>
    <script>
    var myCallback = function() {
    if (document.readyState == &#39;complete&#39;) {
      var element = google.search.cse.element.getElement(&#39;cseresult&#39;);
            element.execute(&#39;<data:blog.searchLabel/>&#39;);
      } else {
    google.setOnLoadCallback(function() {
    var element = google.search.cse.element.getElement(&#39;cseresult&#39;);
            element.execute(&#39;<data:blog.searchLabel/>&#39;);
    },true);
    }
    };
    window.__gcse = {
      parsetags: &#39;onload&#39;,
     callback: myCallback
    };
    (function() {
      var cx = '1234:567'; // Sisipkan ID Google CSE di sini
      var gcse = document.createElement(&#39;script&#39;); 
          gcse.type = &#39;text/javascript&#39;; 
          gcse.async = true;
      gcse.src = (document.location.protocol == &#39;https&#39; ? &#39;https:&#39; : &#39;http:&#39;) +
          &#39;//www.google.com/cse/cse.js?cx=&#39; + cx;
      var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(gcse, s);
    
    })();
    </script>
    <gcse:searchbox gname='cseresult'/>
    <gcse:searchresults autoSearchOnLoad='true' gname='cseresult'/>
    </b:if>
    

    Google CSE di halaman Pencarian (Search Result)

    Query yang dieksekusi berdasarkan url parameter q. Search result yang tampil secara autofill.

    <!-- Google CSE Halaman Pencarian -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:blog.searchQuery'>
    <div id='cseresult'/>
    <script>
    var myCallback = function() {
      if (document.readyState == &#39;complete&#39;) {
        google.search.cse.element.render(
            {
              div: &quot;cseresult&quot;,
              tag: &#39;searchbox-only&#39;
             });
      } else {
        google.setOnLoadCallback(function() {
            google.search.cse.element.render(
                {
                  div: &quot;cseresult&quot;,
                  tag: &#39;search&#39;
                });
         }, true);
      }
    };
    window.__gcse = {
      parsetags: &#39;explicit&#39;,
      callback: myCallback
    };
    
    (function() {
      var cx = '1234:567'; // Sisipkan ID Google CSE di sini
      var gcse = document.createElement(&#39;script&#39;); gcse.type = &#39;text/javascript&#39;;
      gcse.async = true;
      gcse.src = (document.location.protocol == &#39;https&#39; ? &#39;https:&#39; : &#39;http:&#39;) +
          &#39;//www.google.com/cse/cse.js?cx=&#39; + cx;
      var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(gcse, s);
    })();
    </script>
    </b:if>
    </b:if>
    

    Google CSE di halaman Error 404 (Page Not Found)

    Kode berikut juga dapat dipakai untuk modifikasi halaman error 404 di Blogger.

    <!-- Google CSE Halaman Error -->
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <script>
    var myCallback = function() {
    if (document.readyState == &#39;complete&#39;) {
      var element = google.search.cse.element.getElement(&#39;cseresult&#39;);
            element.execute(&quot;&quot;);
      } else {
    google.setOnLoadCallback(function() {
    var element = google.search.cse.element.getElement(&#39;cseresult&#39;);
            element.execute(&#39;&#39;);
    },true);
    }
    };
    window.__gcse = {
      parsetags: &#39;onload&#39;,
     callback: myCallback
    };
    (function() {
      var cx = '1234:567'; // Sisipkan ID Google CSE di sini
      var gcse = document.createElement(&#39;script&#39;); 
          gcse.type = &#39;text/javascript&#39;; 
          gcse.async = true;
      gcse.src = (document.location.protocol == &#39;https&#39; ? &#39;https:&#39; : &#39;http:&#39;) +
          &#39;//www.google.com/cse/cse.js?cx=&#39; + cx;
      var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(gcse, s);
    
    })();
    </script>
    <gcse:searchbox gname='cseresult'/>
    <gcse:searchresults autoSearchOnLoad='true' gname='cseresult'/>
    </b:if>
    

Google CSE di halaman Postingan

Untuk pasang Google CSE di halaman postingan/artikel (single post), Anda bisa baca postingan Autofill Google CSE dengan Keyword Label Blogspot

Penempatan kode Google CSE di atas untuk template default yang ada di Blogger. Untuk template selain di Blogger, kemungkinan penempatannya berbeda-beda.