Membuat Widget Pinterest Dengan Javascript Dan Css

Pinterest ialah salah satu pilihan ketika kita share/pin sebuah gambar dari website, penting untuk melaksanakan sharing ke pinterest biar gambar kita sanggup di pin dan dengan gampang kita membukanya, nah kali ini kita akan menciptakan pinterest editan sendiri yang dilengkapi dengan isyarat CSS.

Kita sanggup merubah sesuai ukuran gambar, kita sanggup memodifikasinya dengan sangat mudah, menciptakan pinterest dengan persegi hingga dengan 25 pin gambar, ini merupakan widget pinterest buatan dengan CSS, ringan ketika loading, khusus widget Blogger, dengan gampang kita modifikasi.

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

Rekomendasi template ini sanggup bekerja pada semua template custom Blogger maupun Standar Blogger, bila default Blogger Template dinamis tidak bekerja, dan template yang tidak mendapatkan custom HTML atau JavaScript gadget.

Untuk menerapkanya, salin isyarat 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, kemudian tambah Gadget HTML Javascript, masukan isyarat di atas.

Di sana sudah ada jquery, bila 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 hidangan 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 akibat tinggal kita menuju ke profil pinterest Anda, dan klik papan yang ingin Anda munculkan, salin url papan tersebut sebelum garis / atau garis miring.

rujukan : 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 isyarat CSS margin-left: 25px; di isyarat #pinterest-gadget di atas.

Maksimal lebar pin ialah 236px, jangan terlalu besar biar sesuai memilih ruang gambar di blog Anda.

Postingan ini dikirim oleh:

Setyo Gilang Wahyu Anrokhi

KOMPOR AJAIB - Saya ialah admin blog www.gilang-access.com.

Sumber https://www.kompiajaib.com/

Share this post