She Who Fears

A Christian lifestyle blog that exists to glorify Jesus, encourage community, and build a healthy fear of the Lord

Custom Pin-It Button On Photos

blog tipJordynComment

I had a ton of emails regarding the custom pin it button, so here's a quick tutorial for you!

Feel free to share!

1. Create Button & Get URL

+ I used photoshop to make a custom button, but you can also just search for one online and use that!

- If you do use photo bucket, make sure and create it with a transparent background and save it as a PNG file. JPEG does not support the transparency so you will end up with a dumb white square block if you try it. (Trust me, I learned the hard way)

+ Once you’ve got your image, upload it to photo bucket and under the share option, get the direct link.

2. Install Your Code:

+ Now, go into your blog’s template and click edit html

+ Click in the text area and [command+f] or [control+f] for non-mac users and search for the < / body > tag. It should be near the bottom of the template.

+ Copy the code below and insert it right above that tag. This code will give you the button I currently have on my photos.

<script>

//<![CDATA[

var bs_pinButtonURL = "

http://i36.photobucket.com/albums/e38/JordynBrazil/a9ec710e-58a1-41c2-af56-13dad521e03a_zpsb830fdb8.png

";

var bs_pinButtonPos = "bottomright";

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 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 shewhofears.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>

+ To use your own button, just replace the URL in the third line with the direct link from step one. However, when you paste, make sure and stay within the quotes or the coding won’t work.

+ If you want to reposition the button, just replace 

bottomright 

in the fourth line with one of these:

topleft

topright

bottomleft

center

+ Now just click save and it should work!

 photo signature_zps51a15d94.png