Minggu, 11 Mei 2014

Cara Membuat Tombol "pin it" Pinterest Sendiri


 Blog dengan pin-it button yang unik dan lucu mulai banyak - tidak cuma kotak merah dengan huruf 'P'. Misalnya pin-it button pada blog Hot Chocolate & Mint ini nih...


Lucu banget yaaa :D

Sekarang aku mau berbagi cara membuat "pin-it" button yang lucu dan unik (itu).

1. Buat URL gambar yang akan dijadikan pin-it button
Gambarnya bisa kamu dapatkan dari google atau kamu buat sendiri seperti punya aku (lucu ka...n?)
Kalau kamu mau buat sendiri pin-it button-nya, sebaiknya pakai gambar dengan dimensi sekitar 100x100. Biasanya sih aku pakai photoshop.
Atau kalau mau cari di google, banyak kok pin-it button yang disediakan secara gratis. Kamu bisa dowload pin-it button di sini.
Salah satu pin-it button yang ada pada link tersebut --->


Kalau sudah ada gambarnya, kamu bisa upload di ImageShack. Setelah gambar diupload, klik "get links" dan kamu bakal dapat URL gambarnya.
    2. Mengedit HTML template
    Masuk ke blog >> template >> edit HTML
    temukan </body>, lalu letakkan kode ini tepat diatasnya.
    <script>
    //<![CDATA[
    var bs_pinButtonURL = "http://imageshack.com/a/img834/1166/o4h8.png";
    var bs_pinButtonPos = "center";
    var bs_pinPrefix = "";
    var bs_pinSuffix = "";
    //]]>
    </script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
    // This Pinterest Hover Button is brought to you by ryleeblakeblogspot.com.
    // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
    // Feel free to use and share, but please keep this notice intact.
    </script>
    Kalau kamu mau pakai gambar sendiri, tukar link yang berwarna cokelat dengan URL gambar kamu.Untuk mengatur posisi pin-it button (sekarang di tengah), ganti tulisan yang warna hijau dengan:
    topleft
    topright
    bottomleft
    bottomright

     Simpan HTMLnya, da...n selesai deh! Semoga bermanfaat :)

    Tidak ada komentar:

    Posting Komentar