Membuat Widget Pinterest dengan Javascript dan CSS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/26/2015

Pinterest adalah salah satu pilihan saat kita share/pin sebuah gambar dari website, penting untuk melakukan sharing ke pinterest agar gambar kita bisa di pin dan dengan mudah kita membukanya, nah kali ini kita akan membuat pinterest editan sendiri yang dilengkapi dengan kode CSS.

Kita dapat merubah sesuai ukuran gambar, kita bisa memodifikasinya dengan sangat mudah, membuat pinterest dengan persegi sampai dengan 25 pin gambar, ini merupakan widget pinterest buatan dengan CSS, ringan saat loading, khusus widget Blogger, dengan mudah kita modifikasi.

Pinterest berikut juga bisa modif bagian pembukaanya, apakah dengan new tab atau di halaman yang sama.

Rekomendasi template ini dapat bekerja pada semua template custom Blogger maupun Standar Blogger, kalau default Blogger Template dinamis tidak bekerja, dan template yang tidak menerima custom HTML atau JavaScript gadget.

Untuk menerapkanya, salin kode di bawah ini..

<!-- BEGIN CODE IT PRETTY PINTEREST GALLERY -->

<style>

#pinterest-gallery {

  overflow: auto;

  width: 210px;

  list-style: none;

}

#pinterest-gallery li {

  float: left;

  width: 100px;

  height: 100px;

  background-size: cover;

  margin: .1em;

  padding: 0;

  border: none;

}

#pinterest-gallery img { border: none; }

.pinterest-link {

  display: block;

  overflow: hidden;

  text-indent: 100%;

  height: 100%;

  white-space: nowrap;

}

/* Internet Explorer correction */

#pinterest-gallery li a {

    color: transparent;

    line-height: 1px;

    font-size: 0px;

}

</style>



<div id="pinterest-gallery"></div>



<!-- If you already have jQuery installed in your template, remove the next line -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- end jQuery link -->



<script type="text/javascript">

$( document ).ready(function() {



  //GALLERY SETTINGS

  var thumbnailCount = 6;

  var username = '';

  var profile = true;

  var board = false;

  var boardname = '';

  var newWindow = false;

  //END GALLERY SETTINGS. DO NOT EDIT BELOW THIS LINE



var url;var urlPrefix="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.pinterest.com/";if(board===true&&profile===true||board===false&&profile===false){$("#pinterest-gallery").append("<p>Error: please choose a profile gallery or board gallery.</p>")}else{if(profile===true){url=urlPrefix+username+"/feed.rss&num="+thumbnailCount}else{if(board===true&&boardname===""){$("#pinterest-gallery").append("<p>Error: Please specify a boardname.</p>")}url=urlPrefix+username+"/"+boardname+"/rss&num="+thumbnailCount}}$.ajax({url:url,dataType:"jsonp",success:function(e){$.each(e.responseData.feed.entries,function(t){var n=e.responseData.feed.entries;var r=n[t].title;var i=n[t].link;var s=n[t].content;var o=s.indexOf("http");var u=s.indexOf('"></a>');var a=s.substring(o,u);var f=$('<li><a class="pinterest-link" href="'+i+'">'+r+"</a></li>");if(newWindow===true){$(".pinterest-link").attr("target","_blank")}f.appendTo("#pinterest-gallery").css("background-image","url("+a+")")})}})

});

</script>

<!-- END CODE IT PRETTY PINTEREST GALLERY-->

Setelah itu menuju dasbor Blogger tambahkan gadget, lalu tambah Gadget HTML Javascript, masukan kode di atas.

Di sana sudah ada jquery, kalau blog Anda sudah ada jquery maka hapus jquery yg ada di atas

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Di menu Galery setting itu untuk mengatur beberapa gambar yang akan muncul..

username yang kosong di setting galery masukan username Anda..

Pengaturan galery default profil = true; dan papan = false; itu pengaturan untuk menunjukkan pin terbaru dari semua gampar Anda.

Setelah semua selesai tinggal kita menuju ke profil pinterest Anda, dan klik papan yang ingin Anda munculkan, salin url papan tersebut sebelum garis / atau garis miring.

contoh : www.pinterest.com/gilang-access/blablabla/
salin : blablabla

var boardname = 'blablabla';

Untuk mengubah lebar galery..

#pinterest-gadget {

  overflow: auto;

  width: 210px;

  list-style: none;

}

210px tersebut ganti sesuai yang Anda kehendaki.

Untuk mengubah ukuran Thumbnail..

#pinterest-gadget li {

  float: left;

  width: 100px;

  height: 100px;

  background-size: cover;

  margin: .1em;

  padding: 0;

  border: none;

}

Bila Anda ingin mengubah dari kiri ke kanan, tambahkan kode CSS margin-left: 25px; di kode #pinterest-gadget di atas.

Maksimal lebar pin adalah 236px, jangan terlalu besar agar sesuai menentukan ruang gambar di blog Anda.