How to add "Pin It" button on your Blog // Blogspot users Only

Hello, sunshine 😎 Yes, I'm 'finally' back! My final exams are done 🙌 So, anyways, today I'll share a step-to-step tutorial about how to add "Pin It" button on your Blog (it's super easy, trust me)

Why to add "Pin It" button, it's so unnecessary. 

No, my friend. Imagine this, a reader came to your blog. Liked a blog post & wanted to share it on Pinterest, BUT... there's no "Pin It" button. Plus, I don't think someone will save the picture, then go to Pinterest and come back to your blog to get the link. (if you do this, you're a rare human-being & I'm ready to protect you no matter what).

Let's start! 

Step one: Get yourself a picture. Personally, I think it'd better if you get creative & step outside the box. For example, I personally don't use a button that says "Pin It" instead I use a picture. The picture I'm using, I created it by myself so I don't really know where you can find good buttons. But, if you want me to create one for you, then please let me know.

Step two: Get your picture's link. 
1. Click on 'New Post' 
2. Insert the picture. 
3. Choose 'HTML'
4. Look for a link that will end with '.jpg' // that's your picture's link. 

Step three: Click on 'Template' then choose 'Edit HTML'. 

Step four: Press CTRL and F together on your keyboard. You'll see a small search box. 

Step five: Type </body> 

Step six: Copy & paste this ABOVE  it. 

var custom_pinit_button = "YOUR-PICTURE'S-LINK";
var pinit_button_position = "center";
var pinit_button_before = "";
var pinit_button_after = "";
<script src='' type='text/javascript'></script>
<script id='pinit-img-button' type='text/javascript'>
// Visit for more widgets and tricks.
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(r($){$(\'M\').1l(\'<6 p="4:D;" N="A" O="\'+13+\'" >\');$(\'#7-6-P\').1m();3 l;3 m;3 n;$(\'.A\').1n(r(){m=$(\'.A\').E(F);n=$(\'.A\').G(F);$(\'.A\').1o()});3 o=$(\'#7-6-P\').1p().1q("1r.1s.14");o!=-1&&15();r 15(){$(\'.s-16 6,.H-M 6,.s-17 6\').1t(\'.18,.18 6\').1u(r(){$(\'.7-4\').t("4","D");19(l);3 a=$(q);3 b=1a(a.t("Q-u"));3 c=1a(a.t("Q-v"));3 d;3 e;1v(1w){B\'1x\':d=a.9().u+a.G(F)/2-n/2;e=a.9().v+a.E(F)/2-m/2;C;B\'1y\':d=a.9().u+b+5;e=a.9().v+c+a.E()-m-5;C;B\'1z\':d=a.9().u+b+5;e=a.9().v+c+5;C;B\'1A\':d=a.9().u+b+a.G()-n-5;e=a.9().v+c+a.E()-m-5;C;B\'1B\':d=a.9().u+b+a.G()-n-5;e=a.9().v+c+5;C}3 f=a.1C(\'O\');3 g=a.1D(\'.H,.1E,.s\').R(\'.H-S,.s-S,.s-1F\');3 h=g.1G();w(T U===\'V\'){U=\'\'}w(T W===\'V\'){W=\'\'}w(g.R(\'a\').1H){X=g.R(\'a\').I(\'Y\').1b(/\\#.+\\b/1c,"")}Z{X=$(1I).I(\'Y\').1b(/\\#.+\\b/1c,"")}3 i=\'<1d N="7-4" p="1e:x;9: 1J;z-1K: 1L;" ><a Y="1M://1N.14/1O/1P/P/?1Q=\'+X+\'&1R=\'+f+\'&1S=\'+U+h+W+\'" p="1e:1T;1U:x;" 1V="1W"><6 N="1X" p="-1Y-J-K:x;-1Z-J-K:x;-o-J-K:x;J-K:x;10: 0.8;20:21;Q: 0;22: 0;23:0;" O="\'+13+\'" S="24 1f 25" ></a></1d>\';3 j=a.11().26(\'a\')?a.11():a;w(!j.y().27(\'7-4\')){j.28(i);w(T l===\'V\'){j.y(\'.7-4\').I("1g","q.p.10=1;q.p.4=\'12\'")}Z{j.y(\'.7-4\').I("1g","q.p.10=1;q.p.4=\'12\';19(29)")}}3 k=j.y(".7-4");k.t({"u":d,"v":e});k.t("4","12");k.L().1h(2a,1.0,r(){$(q).2b()})});$(\'.s-16 6,.H-M 6,.s-17 6\').1f(\'2c\',r(){w($.2d.2e){3 a=$(q).y(\'.7-4\');3 b=$(q).11(\'a\').y(\'.7-4\');l=2f(r(){a.L().t("4","D");b.L().t("4","D")},2g)}Z{$(\'.7-4\').L().1h(0,0.0)}})}});',62,141,'|||var|visibility||img|pinit||position||||||||||||||||style|this|function|entry|css|top|left|if|none|next||loadpinitbutton|case|break|hidden|outerWidth|true|outerHeight|post|attr|box|shadow|stop|body|class|src|button|margin|find|title|typeof|pinit_button_before|undefined|pinit_button_after|pinitURL|href|else|opacity|parent|visible|custom_pinit_button|com|hoverCheck|content|summary|nopin|clearTimeout|parseInt|replace|gi|div|display|on|onmouseover|fadeTo|jQuery|document|ready|append|hide|load|remove|html|indexOf|helplogger|blogspot|not|mouseenter|switch|pinit_button_position|center|topright|topleft|bottomright|bottomleft|prop|closest|hentry|header|text|length|location|absolute|index|9999|http|pinterest|pin|create|url|media|description|block|outline|target|_blank|pinimg|moz|webkit|background|transparent|padding|border|Pin|Pinterest|is|hasClass|after|pinitOnHover|300|show|mouseleave|browser|msie|setTimeout|3000'.split('|'),0,{}))


How easy was that! (was it?) // P.S. a HUGE thanks to Helplogger, I learnt this from them! And I hope that you guys found this helpful. Talk to you soon :) 



  1. Oh, cool! Great & helpful post! <3
    I'm happy your final exams are done :) Did you find them difficult or were they easy?

    1. Thank youuu! They were confusing + math exam was only for 50 mins! Like am I supposed to finish the exam in just 50 mins?!? But, no worries ♡

    2. Yeah... I think the time we're given on exams is TOO short!
      I hope your results will be good ♥

    3. I hope so! Thank you so much, Ann! You're the best ♡

  2. Oh what a helpful post! This is such an easy to follow guide for placing Pin button on the blog :-) thank you for sharing this!

    lots of love, Jasmin

    1. So glad that you found this helpful! Thank you ♡

  3. That is quite a long piece of coding but so useful! pinning posts is so great to keep them saved somewhere and get back to them! thank you for the helpful post!

  4. Great post - I'm sure this will help many people! Hope your exams went well! Thank you for sharing :)


  5. html can be so tricky for sure but this is a very helpful post! thanks for sharing :_

    Melissa |

    Moonlight Mel

  6. This looks super helpful and will help so many people! Having a pin it button on your photos is a great idea. I hope your exams went well too. Thanks for sharing! xx

    Bexa |

  7. wow you changed your theme right?
    I love it it's so "sleek" xoxo


Post a Comment