Saturday Sessions: How To Install a Pin It Button On Your Blogger Blog

I'm super pumped because I'm starting to have lots of requests for Saturday Sessions tutorials! If I haven't done a request you submitted, just be patient with me, there are only so many Saturdays in a week........... as in one. It sure would be nice if there were more though. I'd allow it.

This week's Saturday Sessions tutorial comes to us from Dog Hair Lover Adriana, requesting a "Pin-It Button" tutorial. Most tutorials I do, I think are pretty easy. This one is much more difficult, so be sure to follow the directions precisely.

Remember, be sure to backup your blog first before operating heavy HTML machinery.

Step One: Design Your Button.

Although I always design in Photoshop, PicMonkey is just as good for designing a "Pin-It" button. I want my button to be pretty small so it doesn't overshadow the entire picture. I'm going to make mine 50x50px. I'm not going to go in detail about designing in PicMonkey, if you want more help with designing the button, use this tutorial here.

Step Two: Upload Your Button to Photo Bucket.

Or another image hosting website.

Step Three: WARNING, HTML AHEAD!

Go to your blog's dashboard, find and click template on the left side, then edit HTML.

Right ABOVE that tag, you will copy and paste this code:

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

Where it says YOUR_URL_HERE

Replace that with the direct link provided in Photo Bucket.

You can also replace center in that 4th line if you want your pin it button to be located in a different place. You can replace center with:

topleft

topright

bottomleft

bottomright

I opted for topright.

Here is what my finished HTML script looks like: