Memasang tombol Pin it pada Foto Blogger


Memasang tombol Pin pada Foto BloggerPinterest adalah salah satu media sosial yang baru-baru ini lagi nge-hits. Media sosial yang rilis pada bulan Maret 2010 ini merupakan buletin board berbasis web. Di Pinterest kita bisa berbagi foto, gambar dan pernak-pernik yang kita sukai, foto atau gambar yang kita sukai dan kita share ke orang lain itulah yang diberi istilah ‘pin’.

Dan menurut Saya wajib untuk pengelola blog atau situs yang membahas tentang Desain Grafis, Edit Foto Digital dll, untuk memiliki tombol Pit it karna dapat membantu kita untuk pembaca membagikan foto menarik dari posting di blog/situs kita.

Pada bulan April, Pinterest diam-diam merilis update besar untuk tombol Pin It. Sobat sekarang dapat menambahkan tombol Pin It melayang di sudut kiri atas gambar blog hanya dengan satu baris kode. Ini adalah cara yang jauh lebih mudah untuk menambahkan tombol Pin!

Berikut adalah cara untuk menambahkan tombol Pin pada Foto di blog untuk Blogger.

Ini bekerja pada semua template Blogger kecuali Tampilan Dinamis, yang tidak menerima kustomisasi.

Untuk Pinterest Pengguna Widget
Jika Anda sudah menggunakan papan Pinterest resmi atau widget profil di blog, Anda sudah memiliki sebagian besar kode pada tempatnya. Yang perlu Anda lakukan adalah menambahkan data-pin-hover = "true" untuk kode yang ada pada template, sehingga terlihat seperti ini:

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>


Untuk Pengguna Baru
Jika Sobat tidak menggunakan papan atau widget profile, jangan khawatir. Sangat mudah untuk menambahkan kode!

Pertama, Back Up Template Anda
Dari dashboard Blogger, pergi ke "Template" dan klik "Backup / Restore" tombol di sudut kanan atas. Simpan file xml di tempat yang aman..

Cari </ body> Tag
Selanjutnya, buka template dengan mengklik "Edit HTML" tombol di bawah "Pada Blog" lihat screenshot.

Ketika template Anda terbuka, arahkan kursor di atas kode tersebut, klik sekali, dan tekan CTRL dan F pada saat yang sama (PC) atau Command dan F (Mac). Ini akan membuka kotak pencarian di template Anda.

</body> templeate blog

Masukkan </ body> di kotak pencarian, lalu tekan enter. Kode akan "mengarah" ke </ body> tag pada template.

Tambahkan Kode

Tepat di atas </ body> tag, masukkan baris kode ini:

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Sebelum/diatas </body> templeate blog

Tekan orange "Simpan Template" tombol di bagian atas untuk menyimpan template. Kemudian, lihat tampilan pada posting foto di blog. Jika Anda akan melihat tombol Pin nampak di sudut kiri atas gambar ketika Anda mengarahkan kursor di atas masing-masing gambar. Bagus, kan?

Cara Hapus/Hilangkan Tombol Dari Gambar Tertentu
Ada dua cara untuk menghapus tombol dari foto secara terpisah. Jika ingin menghapus atau menghilangkan tombol dari sebuah gambar dan mencegah dari pembaca menyematkan gambar dari pinmarklet, tambahkan "nopin" pada atribut gambar tersebut.

Untuk menambahkan atribut "nopin" ke gambar dalam posting atau halaman, beralih ke tampilan HTML posting atau halaman, dan menemukan img src HTML markup untuk gambar yang Anda ingin "nopin". Ini akan terlihat seperti ini:

Sebelum ditambahkan nopin = "nopin"
Sebelum di tambahkan nopin = "nopin"


Masukkan nopin = "nopin" tepat setelah atribut pada lebar gambar:
Setelah di tambahkan nopin = "nopin"

Bila Anda menyimpan posting, tombol Pin It akan hilang dari gambar itu. Ini juga tidak akan pinnable melalui Pinmarklet, jadi gunakan sesekali saja!

Jika Anda lebih memilih untuk menghapus tombol dari sebuah gambar, tapi masih membiarkan pengguna pinmarklet menyematkan gambar tersebut, Anda dapat menambahkan data-pin-no-hover = "true" atribut ke link gambar Anda sebagai gantinya. Proses ini sama seperti untuk atribut nopin, Anda hanya memasukkan data-pin-no-hover = "true" sebagai gantinya.

Update: Cara menghapus/menghilangkan Pin It Button dari header Images

Ini memang tidak terjadi pada setiap orang, tetapi beberapa dari beberapa yang sudah menggunakan Kode diatas memiliki masalah tombol Pin It juga muncul di gambar header mereka. Jika hal ini terjadi pada Anda dan ingin menghapusnya, Anda hanya perlu menambahkan sedikit kode tambahan.

Pertama, back up template Anda lagi. Kemudian, cari </ body> tag lagi, dan masukkan potongan kode ini

tepat di atas </ body>, setelah kode tombol Pin Anda:

<script type="text/javascript">
document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");
</script>

Pendukung pinterest
Tombol-tombol ini resmi, Pinterest-menciptakan tombol, sehingga kita bisa mendapatkan dukungan langsung dari Pinterest jika kita membutuhkannya. Anda dapat membaca dokumentasi tombol dan dukungan Pinterest kontak di sini.

9 komentar:

  1. terima kasih gan, sekarang saya sudah berhasil memasang pin it pinterest di blogger saya berkat kode dan petunjuk yang agan berikan.. :)

    BalasHapus
    Balasan
    1. manthap gan artikelnya, langsung di praktekin

      Hapus
  2. Makasih sob artikelnya :)
    Ijin share http://apotekherbalkita.com/pengobatan-alami-glaukoma/

    BalasHapus
  3. Makasih gan untuk tutornya, sangat membantu :)
    http://goo.gl/y46Sp3

    BalasHapus
  4. makasih banyak buat tutornya gan,, di coba yaa

    http://goo.gl/mc3qsD

    BalasHapus
  5. Artikelnya mantap gan :)
    http://goo.gl/E9bMYY

    BalasHapus
  6. Thanks sob informasinya :)
    http://goo.gl/j2Mjbi

    BalasHapus
  7. Berguna sekali tutorialnya gan.. 100 it works. Terimakasih banyak.
    Salam http://anwariz.com

    BalasHapus
  8. sangat membantu informasinya
    http://www.kangalip.com/

    BalasHapus

Rules !

* No Spam!
* No Promo
* No Haters
* No Pornography