 |
| Pinterest |
Cara Membuat Pint it Button Pinterest - Ya kali ini saya akan berbagi cara membuat button atau tombol Pint It Pintersest yang berada pada setiap gambar blog anda. Cara membuat tombol ini sangat mudah, dan sebagai demo dari tutorial cara membuat tombol pint it pinterest ini adalah anda bisa melihat pada setiap gambar atau foto di blog ini di bagian kanan bawah setiap gambar pasti ada button pint it pintrest bukan? nah nantinya blog sobat juga akan seperti itu. Lalu bagaimana tutorial
cara membuat tombol pinterest di setiap gambar blog? simak tutorialnya berikut ini. Oh iya cara ini untuk pengguna blogspot ya dan jangan lupa di back up dahulu template anda apabila nanti ada kesalahan.
Langkah pertama adalah memastikan bahwa template anda sudah memiliki kode script JQuery seperti di bawah ini :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
Jika sudah ada maka silakan dilanjutkan ke langkah berikutnya memasang plugin JQuery, penempatannya bisa di bagian bawah inti JQuery atau anda juga bisa mencobanya meletakkannya di bagian sebelum tag </body> Direkomendasikan.
<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/AVvXsEhXlsJWyxFf__fwIZX516OMEgtSQLapUekRH8U2rcFA1YI9e-1Z7Xbqm5xSeQq7Y8F3XE5LVgGYcRBURVN3R1-cf4w_rSee2M7EaQz4-A0FTxWG41D57BUjm1znOTRbHnJAhxg4PsEd8HDK/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>
Perhatikan kode script yang berwarna merah tersebut :
$('.post img')
.post img = Unique ID.
.height() > 105)
105 = minimal tinggi image yg dapat ditampilkan button pinterest.
.width() > 205)
205 = minimal lebar image yg dapat ditampilkan button pinterest.
Langkah selanjutnya ialah cari kode </b:skin> dan sisipkan CSS dibawah ini :
.pinned .pin {
opacity: .7;
position: absolute;
margin-left: -45px;
}
.pinned .pin:hover {
opacity: 1;
}
Selanjutnya SAVE template anda, dan jangan lupa untuk menambahkan atribut ALT di setiap gambar / image. Karena itu nanti akan terpharse menjadi Title pinterset. Selamat mencoba.