Membuat Widget Pinterest dengan Javascript dan CSS

Membuat Widget Pinterest dengan Javascript dan CSS

Bola Hero Gawai

Membuat Widget Pinterest dengan Javascript dan CSS

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:
Setyo Gilang Wahyu Anrokhi

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×