Membuat Widget Pinterest dengan Javascript dan CSS

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.
Postingan ini dikirim oleh:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments