Add Button Pinterest, Automatic for Image Blogger

Sebenarnya lagi empet mosting. Mati lampu, bahan buat memosting hilang semua belum tersimpan :( Sial banget bin sue apes! Ternyata tidak enak juga kalau cuma jadi penerima itu ;) Tidak tahu alasan apa Beben Koben si bloglang anu ganteng kalem tea ingin berbagi trick snippet jQuery, cara bagaimana memasang tombol pinterest otomatis untuk gambar. Kalau kebanyakan membahas adding pinterest pin it button, Koben mah pasang tombol pin-it automatic for image! Setelah melakukan blog walking in the pret, paling sederhana gue nemuin pinterest buttons on every image in a Blogger/Blogspot post using jquery (may be)
Bila kepengen memakai yg itu, sobat-sabit tinggal melakukan perubahan (menyesuaikan) UNIQ-ID '.entry-content img' dengan unik ID bagian postingan blog kalian. Biasanya sih .post, .post-body,...etc.

Sederhana memang, namun kekurangan trik ini adanya keikutsertaan pemanggilan //assets.pinterest.com/js/pinit.js dan tata letak tombol yg keberadaannya kurang sreg (harus diatur sendiri/manual, kalo ngerti itu jg) ;)) Terlebih-lebih hasil akhir yang merubah tombol menjadi sebuah iframe mode :p Karena JavaScript itu tadi tuh kayaknya ;)) Melongo & melihat ke Pinterest Web memang image kebanyakan yang di sharing!
Bagaimana versi aku...:">
Terinspirasi dari situs www.maf.org setelah melihat image disana kok ada yg terasa unik. Kok ada tombol pin-it di gambarnya yach? kata seorang pengunjung bertanya...Gimana cara buatnya dong Om, tunjukin kemari yah :))
Screenshot setelah melakukan uji coba!

Langkah pertama, pastikan template anda memiliki script jQuery<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Jika sudah ada, lanjutkan memasukan plugin jQuery berikut. Penempatan boleh dibawah script jQuery inti, atau dapat dicoba tempatkan sebelum tag </body> (Recommended)

<script type='text/javascript'>
//<![CDATA[
// surround each image with div class='pinned'
$('.post img').each(function() {
    if ( ($(this).height() > 105) && ($(this).width() > 205) ) {
        $(this).wrap("<div class='pinned' />");
    }
});
// grab each image div with class of .pinned
var each_image = $('div.pinned');
// iterate through all divs
each_image.each(function() {
    var pinned_height = $(this).find('img').height();
    if ($(this).find('img').hasClass("imageLeft") == 'true') {
        $(this).addClass('imageLeft');
    }
    if ($(this).find('img').hasClass("imageRight") == 'true') {
        $(this).addClass('floatRight');
    }
    //if (pinned_width > 205 && pinned_height > 105) {
        // dynamically add span and empty pin button
        $(this).append('<span class="pin"><a href="" target="_blank" class="pin-it-button" count-layout="vertical" title="Pin it On Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNBGapS-R5nU_cWvkgK8hdIqxG6O5R0c78tytt5I9qDmhiBwtxIOrMuFC_kzFHhtiEQirC8CrkpyTa7sGBSbZdf1illWdu7LaI0SO12IogzTcG7ZTlCwTv8dFToTlFumF6LV6XVQvpWP4p/s1600/pinterest.png" /></a></span>');
        $(this).find('.pin').css('marginRight', '2px');
        $(this).find('.pin').css('marginTop', pinned_height - 22);
        // cache variables
        var $this = $(this),
        // cache this
        image_source = $this.find('img').attr('src'),
        // grab image src
        web_title = $(location).attr('href'),
        image_height = $this.find('.pinned').height(),
        // grab current page title
        description = $this.find('img').attr('alt'),
        // grab img alt text
        slug = $this.find('a.pin-it-button');
        // find the Pinterest link
        // modify Pinterest href with new image details
        if (image_source.indexOf(".com") == -1) {
            image_source = window.location.protocol + "//" + window.location.host + image_source;
        }  
        slug.attr('href', 'http://pinterest.com/pin/create/button/?url=' + web_title + '&media=' + image_source + '&description=' + description + '');
    //};
});
//]]>
</script>

Perhatian:

1. $('.post img')
.post img = Unique ID.
2. .height() > 105)
105 = minimal tinggi image yg dapat ditampilkan button pinterest.
3. .width() > 205)
205 = minimal lebar image yg dapat ditampilkan button pinterest.

Cari kode </b:skin> sisipin CSS berikut.pinned .pin {
opacity: .7;
position: absolute;
margin-left: -45px;
}
.pinned .pin:hover {
opacity: 1;
}SAVE mas brooo.
Saya tidak paham mengenai script²an, kalau ada yg salah tolong koreksi. Modal JS Bin and praktek doang gue mah, berhasil tapi :d Jangan lupa mengisikan atribut ALT pada image, karena itu akan terphrase menjadi TITLE ke pinterest web! Good luck :)

Demo

Perhatikan pojok kanan bawah pada image!
Happy pinterest button \m/