I am left in utter shock in the aftermath of what has happened in Oklahoma this week. All I can do is extend prayers to all those involved in this horrific event and hope that their families get peace. I have been an emotional wreck this week do to many things going on. Things like this make me stop and realize what things are important in life to me and how I should cherish them.
So for a while now I have noticed Pin it Hover Buttons on a few bloggers’ page. Well I finally broke down and decided to attempt this. Well I will go ahead and say that it seems like anything on my blog is always a pain in the butt. One of my favorite bloggers, Kaitlyn, can attest to this! Well she did a tutorial on how to create a Pin it Hover Button for your blog, and I thought why not try it… let’s give this a go!
Begin by saving this image to your computer. You can simply right click and “save as” to your computer.
Next, go to PicMonkey.com and upload a blank swatch of the background you want to use. I went to a color swatch from my blog design and uploaded and cropped it on PicMonkey.com! It was super easy and simple, and I loved it because it matched my blog completely. You can also do this by checking your template colors and creating your own swatch, such as this one!
Here is the swatch I used to crop my perfect square!
After you upload it, and if needed crop it to the color you want, you need to crop it into a perfect square using the dimensions of 75 x 75. Then select “Frames” and “Rounded Corners”. I had the swatch on hand, but you can easily find your swatch online using the color # from your template design.
Next you need to Slide the “Corner Radius” level all the way to the right & click “Transparent Corners”.
This should give you a perfect solid circle.
After that, Go to “Overlays” & click “Your Own”.
Upload the “P” that you saved from above.
Use the color picker to choose what you would like your “P” to look like. I used a completely white color so that I would have the utmost contrast fro my hover button.
Move and resize your “P” until you are satisfied, and then save the image as a .png on your computer.
Here is what mine looks like:
Once you save it, upload it to the photo sharing website you use. I use Photobucket but you can use whatever photo sharing software you prefer. I just find that Photobucket is super user friendly.
Next (Almost done), go to your Blogger dashboard and click Template which should be along the left hand side of the screen. Then click edit HTML.
Locate the code” </body> “(it should be near the end of the code, Control + F if you can’t find it). As you can see in the picture below, I typed in </body> and hit enter to find where to paste the code. If you Control +F to find it, your computer will highlight the </body> like you see below.
Kaitlyn’s Script looked like this:
<script>
//<![CDATA[
var bs_pinButtonURL = “http://3.bp.blogspot.com/-HfUSaJfr7t4/UNVXY5qwP9I/AAAAAAAAHyA/amPXEMKhKJM/s1600/pinterest-icon+(2).png”;
var bs_pinButtonPos = “center”;
//]]>
</script>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type=’text/javascript’/>
<script src=’http://lordhtml.opendrive.com/files/MV81OTY2MjE0X01Rcmg5/pin.js’ type=’text/javascript’/>
<!– please do not alter or remove the following code –>
<div id=’bs_pinOnHover’><a href=’http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html’>Pin It button on image hover</a></div>
<script>
//<![CDATA[
var bs_pinButtonURL = “http://i1298.photobucket.com/albums/ag51/etagurl89/pinteresthover_zps40031fc9.png”;
//]]>
</script>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type=’text/javascript’/>
<script src=’http://lordhtml.opendrive.com/files/MV81OTY2MjE0X01Rcmg5/pin.js’ type=’text/javascript’/>
<!– please do not alter or remove the following code –>
<div id=’bs_pinOnHover’><a href=’http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html’>Pin It button on image hover</a></div>
</body>
Vola! Now you have COMPLETE directions for creating you own Hovering Pin It Button regardless of what template you have installed.
Linking Up With:
