Fix Pin It Hover Button Not Showing Up in Blogger

Pin it hover button not showing up on your blogger blog? When you hover your mouse over an image, has the pin it button disappeared? You need this post that will fix the Hover Pin It Button Issue on Blogger Blog. Also, if you need the original tutorial for installing a pin it button on your blogger blog, you can find that here: Install a Custom Pin It Button On Your Blogger Blog. 

I first noticed that my blog's pin it button magically disappeared last Friday when I went to pin an image for a sponsored post. Being a firm believer that nothing just stops working without explanation, I set out to get the issue fixed.  I quickly realized that the coding from Bloggersentral was down. 

I then set out to find another way of having a custom pin it hover button. NOTHING. 

Seriously people, nothing. If you have a custom pin it button, and you are on blogger, then your pin it button is currently not working. Every single tutorial I found on the internet linked to Bloggersentral's script. I tried emailing them, I tried tweeting them, I also noticed that other people were trying to contact them over the issue as well. All with no response from them. Yikes. 

After what I swear to you was HOURS of searching, I found a solution on twitter of all places. I searched "pin it hover" and saw a tweet from an account called Georgia Lou that seemed promising. The link in their tweet didn't work, but I managed to track down the post with their solution to the problem. I had to tweak the code a bit to get it to work on my blog, but I finally got my pin it button up and running again. I swear to you I had tears in my eyes. Ok, maybe not, but I was overjoyed.

I'm a little bit nuts when it comes to solving blog related problems. I can't stop until I've got a solution. If you have a blogger template from me that I've recently installed, I went ahead and made the change for you, so you're all good! 

NOTE: If you have a blogger blog, and you have a custom pin it button, there's a 95% chance yours is not currently working. This will fix it. 

1. Back up your current template

Before you ever make edits to your blog, do a backup. 

Go to TEMPLATE

Backup/Restore

Download Full Template

2. Search for the code you'll need to edit

Go to TEMPLATE on the left side of your dashboard

Click Edit HTML

Click your mouse anywhere inside that text box full of coding that pops up. 

If you're on PC hit CTRL + F... If you're on Mac hit Command + F to open the search box

Search for "Bloggersentral" 

3. Find the following code:
WE will be replacing this code but FIRST, you'll want to copy the link to your pin it button, so you don't lose that. You'll find that link located in the 4th line. Copy that link into a text editor or somewhere you can access it in just a minute.

As you can see mine is:
http://i979.photobucket.com/albums/ae274/venustrappedinmars/venustrappedinmars108/pinit.png

<script> //<![CDATA[ var bs_pinButtonURL = "http://i979.photobucket.com/albums/ae274/venustrappedinmars/venustrappedinmars108/pinit.png"; var bs_pinButtonPos = "center"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script> <br /> <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 bloggersentral.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>
4. Replace that code with the following code
Replace all of that code above, with this code: 


<!-- PINT IT HOVER BUTTON START --><script> //<![CDATA[ var bs_pinButtonURL = "YOUR_URL_HERE"; var bs_pinButtonPos = "center"; var bs_pinPrefix = ""; var bs_pinSuffix = ""; //]]> </script><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script id='bs_pinOnHover' type='text/javascript'> //<![CDATA[ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('1i(1j).1k(q($){$(\'M\').1l(\'<6 9="r:D;" N="A" O="\'+11+\'" >\');$(\'#12\').1m();3 l;3 m;3 n;$(\'.A\').1n(q(){m=$(\'.A\').E(F);n=$(\'.A\').G(F);$(\'.A\').1o()});3 o=$(\'#12\').1p().1q("1r.13");o!=-1&&14();q 14(){$(\'.s-15 6,.H-M 6,.s-16 6\').1s(\'.17,.17 6\').1t(q(){$(\'.7-8\').t("r","D");18(l);3 a=$(p);3 b=19(a.t("P-u"));3 c=19(a.t("P-v"));3 d;3 e;1u(1v){B\'1w\':d=a.4().u+a.G(F)/2-n/2;e=a.4().v+a.E(F)/2-m/2;C;B\'1x\':d=a.4().u+b+5;e=a.4().v+c+a.E()-m-5;C;B\'1y\':d=a.4().u+b+5;e=a.4().v+c+5;C;B\'1z\':d=a.4().u+b+a.G()-n-5;e=a.4().v+c+a.E()-m-5;C;B\'1A\':d=a.4().u+b+a.G()-n-5;e=a.4().v+c+5;C}3 f=a.1B(\'O\');3 g=a.1C(\'.H,.1D,.s\').Q(\'.H-R,.s-R,.s-1E\');3 h=g.1F();w(S T===\'U\'){T=\'\'}w(S V===\'U\'){V=\'\'}w(g.Q(\'a\').1G){W=g.Q(\'a\').I(\'X\').1a(/\\#.+\\b/1b,"")}Y{W=$(1H).I(\'X\').1a(/\\#.+\\b/1b,"")}3 i=\'<1c N="7-8" 9="1d:x;4: 1I;z-1J: 1K; 1L: 1M;" ><a X="1N://1O.13/1P/1Q/1R/?1S=\'+W+\'&1T=\'+f+\'&1U=\'+T+h+V+\'" 9="1d:1V;1W:x;" 1X="1Y"><6 N="1Z" 9="-20-J-K:x;-21-J-K:x;-o-J-K:x;J-K:x;22:23;P: 0;24: 0;25:0;" O="\'+11+\'" R="26 1e 27" ></a></1c>\';3 j=a.Z().28(\'a\')?a.Z():a;w(!j.y().29(\'7-8\')){j.2a(i);w(S l===\'U\'){j.y(\'.7-8\').I("1f","p.9.1g=1;p.9.r=\'10\'")}Y{j.y(\'.7-8\').I("1f","p.9.1g=1;p.9.r=\'10\';18(2b)")}}3 k=j.y(".7-8");k.t({"u":d,"v":e});k.t("r","10");k.L().1h(2c,1.0,q(){$(p).2d()})});$(\'.s-15 6,.H-M 6,.s-16 6\').1e(\'2e\',q(){w($.2f.2g){3 a=$(p).y(\'.7-8\');3 b=$(p).Z(\'a\').y(\'.7-8\');l=2h(q(){a.L().t("r","D");b.L().t("r","D")},2i)}Y{$(\'.7-8\').L().1h(0,0.0)}})}});',62,143,'|||var|position||img|pinit|wrapper|style||||||||||||||||this|function|visibility|entry|css|top|left|if|none|next||pinimgload|case|break|hidden|outerWidth|true|outerHeight|post|attr|box|shadow|stop|body|class|src|margin|find|title|typeof|bs_pinPrefix|undefined|bs_pinSuffix|pinitURL|href|else|parent|visible|bs_pinButtonURL|bs_pinOnHover|com|hoverCheck|content|summary|nopin|clearTimeout|parseInt|replace|gi|div|display|on|onmouseover|opacity|fadeTo|jQuery|document|ready|append|hide|load|remove|html|indexOf|bloggersentral|not|mouseenter|switch|bs_pinButtonPos|center|topright|topleft|bottomright|bottomleft|prop|closest|hentry|header|text|length|location|absolute|index|9999|cursor|pointer|http|pinterest|pin|create|button|url|media|description|block|outline|target|_blank|pinimg|moz|webkit|background|transparent|padding|border|Pin|Pinterest|is|hasClass|after|bsButtonHover|300|show|mouseleave|browser|msie|setTimeout|3000'.split('|'),0,{})) //]]> // This Pinterest Hover Button is brought to you by bloggersentral.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><!-- PINT IT HOVER BUTTON END -->

5. Make the edits for YOUR blog...
In line 3, where it says YOUR_URL_HERE be sure to paste that URL link to your pin it button that you copied from step 3.

*Note, be sure to leave the quotation marks surrounding that URL. 

Also, under the URL, you can move the location of your pin it button. I always have mine in the CENTER, but you can also do the following placements:

topleft

topright

bottomleft

bottomright

6. Save Template

The code in the light blue box below is what yours should look like now. 

If it does, click Save Template. 

 
Now this is a little complicated, so just a reminder again to PLEASE backup your template before you start any heavy code lifting! If you have any questions, just let me know, I'll do my best to help. 

If this was helpful, I'd sure love it if you'd either pin this or save this post on bloglovin! It was nearly impossible to find the solution to this problem, and I think bloggers are going to be searching high and low for a fix to the disappearing Pin It Hover Button!