View Image Blogger with jQuery

Berkunjung terus ke para master blogger agar bertambah selalu ilmu dan skill kita bos. Masih ingat dengan J.S. Blog Stop, salah satu blog yang mungkin agak sedikit berkurang eksistensinya dalam memosting dikarenakan kesibukan di dunia nyata :d Kunjung punya silaturahmi ternyata ada satu artikel menarik menggunakan trick jQuery plugin guna memanggil photo/image/gambar/ yang pernah kita upload waktu memosting!
View Your Blog as Images membuat kita akan melakukan sedikit kesenangan dengan images yang ada di blog kita. Singkat ceritanya menampilkan photo dari album picasa menggunakan teknik JSON, dipanggil memakai jQuery maka tampilah itu si photonya ;)) (Koben juga tidak mengerti soal script mah) =))

Struktur Images jQuery Plugin for Blogger

<script type='text/javascript'>
//<![CDATA[
var jsBloggerCollage = function(){
   var $collages = [],
   init = function(){
       var $tempCollages = jQuery(".blogger-collage");

       $tempCollages.each( function() { //spawn off a collage for each item
       $collages.push(new Collage($(this) ) )
       });     
   };
   function Collage(parent) {
   var $parent = parent,
   config = {
   "blogUrl": "",
   "maxResults": "1000",
   "showMax": 10,
   },
   init = function() {
   //load config options and clean if needed
   jQuery.extend(config, jQuery.parseJSON( $parent.attr("data-config") ) )
   if(config.blogUrl > "") { //only request if valid url
   //clean blogUrl
               config.blogUrl = config.blogUrl.replace(/\/$/, ""); //remove trailing backslash
               var index = config.blogUrl.search(/(?: (http\:\/\/|https\:\/\/))/i);
   if(config.blogUrl.search(/(?: (http\:\/\/|https\:\/\/))/i) === -1) { //prepend http:// if not found
   config.blogUrl = config.blogUrl.replace(/[\/:]/, ""); //remove backslashes and : just in case
   config.blogUrl = "http://" + config.blogUrl;
   }
               var qs = {
                   alt : "json",
                   "max-results": config.maxResults
               },
               url = config.blogUrl + "/feeds/posts/summary?callback=?";
               jQuery.getJSON(url, qs, process);
   }
   else {
   $parent.append("<h3>Invalid blogUrl Provided</h3>");
   }
   },
   process = function(data, status, xhr) {
   var i = 0,
   nShown = 0,
           entries = data.feed.entry,
           //$picTemplate = $("<span><img></img></span>"),
           $pic;
   
           for (i; i < entries.length; i++) {
               if(entries[i].media$thumbnail){
                   $pic = jQuery("<span class='js-collage-entry'></span>");
                   $pic.append("<a target='fullsize' href='" + entries[i].media$thumbnail.url.replace("/s72-c/", "/s1600/") + "'><img src='" + entries[i].media$thumbnail.url + "'></a>");
                   $parent.append($pic);
                   nShown++
                   if(nShown >= config.showMax) {
                   break;
                   }
               }
           }
   };
   init();
   }
   jQuery(document).ready(init);
}();
//]]>
</script>

Kode pemanggil<div class='blogger-collage' data-config='{"blogUrl": "URL-YOUR-BLOG.blogspot.com", "showMax": 10}'></div>

Apabila sobat mau membuat variasi CSS dengan gambar yang sudah terpanggil, perhatikan kode berikut .blogger-collage

Misalkan kepengen lebarnya 100px, tingginya 75px dan lain-lain tinggal bikin saja :D Contoh:.blogger-collage {
width: 100px;
height: 75px;
padding: 5px;

dan blab-bla disini tempatnya
}Penulisan dengan teknik Add a Gadget ► HTML/Javascript akan terlihat seperti

<script type='text/javascript'>

ISI SCRIPT JQUERY PLUGIN-NYA

</script>

<style>

ISI CSS BUAT GAYA-GAYANYA

</style>

<div class='blogger-image' data-config='{"blogUrl": "URL-YOUR-BLOG.blogspot.com", "showMax": 10}'></div>

Semuanya langsung dimasukin saja tanpa harus edit² dalaman template ;))
Contoh koben praktek coba tengok deh yah ;)

demo View Image Blogger with jQuery
Happy blogging \m/