How to add a Pinterest button to Blogger
Want to make it easy for your Readers to the Pin the Image present on your blog on Pinterest
& add a Pinterest hover button to your Blogger images.
What’s a “hover button”?
It’s a button that appears when you put your mouse over an image. Go ahead and test it out on this image below. Clicking on the pink Pinterest button that appears in the middle of the image will allow you to pin this image to your Pinterest boards.
NOTE: This requires editing your Blogger template. Before proceeding with the instructions below, Don't forget to backup your Blogger template first!
- In your Blogger Dashboard click on Template and then Edit HTML.
- Scroll down to the bottom of the code and find this line: </body>
- Copy the code from below and paste it into your template code right above the </body> code.
- Click the “Save Template” button.
- Click the “Close” button.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> //<![CDATA[ var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_eHVfuYZgjWObqcyfAhOMLrJwT6ncI5wjN2W0csSuHt1dtV24TgMXLmOtuG0RBM8lKjqB4neqQha-WItPKOe51Q3Mn3Kfh1ogcA-Je49x_57zku9egfCQiIx9H5MvscYnsNNv2Sl_B04/s1600/pinterestx1_72.png"; var bs_pinButtonPos = "center"; 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> <script id='bs_pinOnHover' type='text/javascript'> //<![CDATA[ var _0xa776=["\x3C\x69\x6D\x67\x20\x73\x74\x79\x6C\x65\x3D\x22\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3A\x68\x69\x64\x64\x65\x6E\x3B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x6D\x67\x6C\x6F\x61\x64\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x3E","\x61\x70\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x68\x69\x64\x65","\x23\x62\x73\x5F\x70\x69\x6E\x4F\x6E\x48\x6F\x76\x65\x72","\x6F\x75\x74\x65\x72\x57\x69\x64\x74\x68","\x2E\x70\x69\x6E\x69\x6D\x67\x6C\x6F\x61\x64","\x6F\x75\x74\x65\x72\x48\x65\x69\x67\x68\x74","\x72\x65\x6D\x6F\x76\x65","\x6C\x6F\x61\x64","\x62\x6C\x6F\x67\x67\x65\x72\x73\x65\x6E\x74\x72\x61\x6C\x2E\x63\x6F\x6D","\x69\x6E\x64\x65\x78\x4F\x66","\x68\x74\x6D\x6C","\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79","\x68\x69\x64\x64\x65\x6E","\x63\x73\x73","\x2E\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72","\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70","\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74","\x74\x6F\x70","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x6C\x65\x66\x74","\x63\x65\x6E\x74\x65\x72","\x74\x6F\x70\x72\x69\x67\x68\x74","\x74\x6F\x70\x6C\x65\x66\x74","\x62\x6F\x74\x74\x6F\x6D\x72\x69\x67\x68\x74","\x62\x6F\x74\x74\x6F\x6D\x6C\x65\x66\x74","\x73\x72\x63","\x70\x72\x6F\x70","\x2E\x70\x6F\x73\x74\x2D\x74\x69\x74\x6C\x65\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x74\x69\x74\x6C\x65\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x68\x65\x61\x64\x65\x72","\x66\x69\x6E\x64","\x2E\x70\x6F\x73\x74\x2C\x2E\x68\x65\x6E\x74\x72\x79\x2C\x2E\x65\x6E\x74\x72\x79","\x63\x6C\x6F\x73\x65\x73\x74","\x74\x65\x78\x74","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","","\x6C\x65\x6E\x67\x74\x68","\x61","\x72\x65\x70\x6C\x61\x63\x65","\x68\x72\x65\x66","\x61\x74\x74\x72","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x7A\x2D\x69\x6E\x64\x65\x78\x3A\x20\x39\x39\x39\x39\x3B\x20\x63\x75\x72\x73\x6F\x72\x3A\x20\x70\x6F\x69\x6E\x74\x65\x72\x3B\x22\x20\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x2E\x63\x6F\x6D\x2F\x70\x69\x6E\x2F\x63\x72\x65\x61\x74\x65\x2F\x62\x75\x74\x74\x6F\x6E\x2F\x3F\x75\x72\x6C\x3D","\x26\x6D\x65\x64\x69\x61\x3D","\x26\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x3D","\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x62\x6C\x6F\x63\x6B\x3B\x6F\x75\x74\x6C\x69\x6E\x65\x3A\x6E\x6F\x6E\x65\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x3C\x69\x6D\x67\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x69\x6E\x69\x6D\x67\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x2D\x6D\x6F\x7A\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x2D\x77\x65\x62\x6B\x69\x74\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x2D\x6F\x2D\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x62\x6F\x78\x2D\x73\x68\x61\x64\x6F\x77\x3A\x6E\x6F\x6E\x65\x3B\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x3A\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x74\x3B\x6D\x61\x72\x67\x69\x6E\x3A\x20\x30\x3B\x70\x61\x64\x64\x69\x6E\x67\x3A\x20\x30\x3B\x62\x6F\x72\x64\x65\x72\x3A\x30\x3B\x22\x20\x73\x72\x63\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x50\x69\x6E\x20\x6F\x6E\x20\x50\x69\x6E\x74\x65\x72\x65\x73\x74\x22\x20\x3E\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E","\x69\x73","\x70\x61\x72\x65\x6E\x74","\x70\x69\x6E\x69\x74\x2D\x77\x72\x61\x70\x70\x65\x72","\x68\x61\x73\x43\x6C\x61\x73\x73","\x6E\x65\x78\x74","\x61\x66\x74\x65\x72","\x6F\x6E\x6D\x6F\x75\x73\x65\x6F\x76\x65\x72","\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x6F\x70\x61\x63\x69\x74\x79\x3D\x31\x3B\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3D\x27\x76\x69\x73\x69\x62\x6C\x65\x27","\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x6F\x70\x61\x63\x69\x74\x79\x3D\x31\x3B\x74\x68\x69\x73\x2E\x73\x74\x79\x6C\x65\x2E\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3D\x27\x76\x69\x73\x69\x62\x6C\x65\x27\x3B\x63\x6C\x65\x61\x72\x54\x69\x6D\x65\x6F\x75\x74\x28\x62\x73\x42\x75\x74\x74\x6F\x6E\x48\x6F\x76\x65\x72\x29","\x76\x69\x73\x69\x62\x6C\x65","\x73\x68\x6F\x77","\x66\x61\x64\x65\x54\x6F","\x73\x74\x6F\x70","\x6D\x6F\x75\x73\x65\x65\x6E\x74\x65\x72","\x2E\x6E\x6F\x70\x69\x6E\x2C\x2E\x6E\x6F\x70\x69\x6E\x20\x69\x6D\x67","\x6E\x6F\x74","\x2E\x65\x6E\x74\x72\x79\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x20\x69\x6D\x67\x2C\x2E\x70\x6F\x73\x74\x2D\x62\x6F\x64\x79\x20\x69\x6D\x67\x2C\x2E\x65\x6E\x74\x72\x79\x2D\x73\x75\x6D\x6D\x61\x72\x79\x20\x69\x6D\x67","\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65","\x6D\x73\x69\x65","\x62\x72\x6F\x77\x73\x65\x72","\x6F\x6E","\x72\x65\x61\x64\x79"];jQuery(document)[_0xa776[68]](function(_0x8b11x1){_0x8b11x1(_0xa776[3])[_0xa776[2]](_0xa776[0]+ bs_pinButtonURL+ _0xa776[1]);_0x8b11x1(_0xa776[5])[_0xa776[4]]();var _0x8b11x2;var _0x8b11x3;var _0x8b11x4;_0x8b11x1(_0xa776[7])[_0xa776[10]](function(){_0x8b11x3= _0x8b11x1(_0xa776[7])[_0xa776[6]](true);_0x8b11x4= _0x8b11x1(_0xa776[7])[_0xa776[8]](true);_0x8b11x1(_0xa776[7])[_0xa776[9]]()});var _0x8b11x5=_0x8b11x1(_0xa776[5])[_0xa776[13]]()[_0xa776[12]](_0xa776[11]);_0x8b11x5!= -1&& _0x8b11x6();function _0x8b11x6(){_0x8b11x1(_0xa776[63])[_0xa776[62]](_0xa776[61])[_0xa776[60]](function(){_0x8b11x1(_0xa776[17])[_0xa776[16]](_0xa776[14],_0xa776[15]);clearTimeout(_0x8b11x2);var _0x8b11x7=_0x8b11x1(this);var _0x8b11x8=parseInt(_0x8b11x7[_0xa776[16]](_0xa776[18]));var _0x8b11x9=parseInt(_0x8b11x7[_0xa776[16]](_0xa776[19]));var _0x8b11xa;var _0x8b11xb;switch(bs_pinButtonPos){case _0xa776[23]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x7[_0xa776[8]](true)/ 2- _0x8b11x4/ 2;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x7[_0xa776[6]](true)/ 2- _0x8b11x3/ 2;break;case _0xa776[24]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ _0x8b11x7[_0xa776[6]]()- _0x8b11x3- 5;break;case _0xa776[25]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ 5;break;case _0xa776[26]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ _0x8b11x7[_0xa776[8]]()- _0x8b11x4- 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ _0x8b11x7[_0xa776[6]]()- _0x8b11x3- 5;break;case _0xa776[27]:_0x8b11xa= _0x8b11x7[_0xa776[21]]()[_0xa776[20]]+ _0x8b11x8+ _0x8b11x7[_0xa776[8]]()- _0x8b11x4- 5;_0x8b11xb= _0x8b11x7[_0xa776[21]]()[_0xa776[22]]+ _0x8b11x9+ 5;break};var _0x8b11xc=_0x8b11x7[_0xa776[29]](_0xa776[28]);var _0x8b11xd=_0x8b11x7[_0xa776[33]](_0xa776[32])[_0xa776[31]](_0xa776[30]);var _0x8b11xe=_0x8b11xd[_0xa776[34]]();if( typeof bs_pinPrefix=== _0xa776[35]){bs_pinPrefix= _0xa776[36]};if( typeof bs_pinSuffix=== _0xa776[35]){bs_pinSuffix= _0xa776[36]};if(_0x8b11xd[_0xa776[31]](_0xa776[38])[_0xa776[37]]){pinitURL= _0x8b11xd[_0xa776[31]](_0xa776[38])[_0xa776[41]](_0xa776[40])[_0xa776[39]](/\#.+\b/gi,_0xa776[36])}else {pinitURL= _0x8b11x1(location)[_0xa776[41]](_0xa776[40])[_0xa776[39]](/\#.+\b/gi,_0xa776[36])};var _0x8b11xf=_0xa776[42]+ pinitURL+ _0xa776[43]+ _0x8b11xc+ _0xa776[44]+ bs_pinPrefix+ _0x8b11xe+ bs_pinSuffix+ _0xa776[45]+ bs_pinButtonURL+ _0xa776[46];var _0x8b11x10=_0x8b11x7[_0xa776[48]]()[_0xa776[47]](_0xa776[38])?_0x8b11x7[_0xa776[48]]():_0x8b11x7;if(!_0x8b11x10[_0xa776[51]]()[_0xa776[50]](_0xa776[49])){_0x8b11x10[_0xa776[52]](_0x8b11xf);if( typeof _0x8b11x2=== _0xa776[35]){_0x8b11x10[_0xa776[51]](_0xa776[17])[_0xa776[41]](_0xa776[53],_0xa776[54])}else {_0x8b11x10[_0xa776[51]](_0xa776[17])[_0xa776[41]](_0xa776[53],_0xa776[55])}};var _0x8b11x11=_0x8b11x10[_0xa776[51]](_0xa776[17]);_0x8b11x11[_0xa776[16]]({"\x74\x6F\x70":_0x8b11xa,"\x6C\x65\x66\x74":_0x8b11xb});_0x8b11x11[_0xa776[16]](_0xa776[14],_0xa776[56]);_0x8b11x11[_0xa776[59]]()[_0xa776[58]](300,1.0,function(){_0x8b11x1(this)[_0xa776[57]]()})});_0x8b11x1(_0xa776[63])[_0xa776[67]](_0xa776[64],function(){if(_0x8b11x1[_0xa776[66]][_0xa776[65]]){var _0x8b11x12=_0x8b11x1(this)[_0xa776[51]](_0xa776[17]);var _0x8b11x13=_0x8b11x1(this)[_0xa776[48]](_0xa776[38])[_0xa776[51]](_0xa776[17]);_0x8b11x2= setTimeout(function(){_0x8b11x12[_0xa776[59]]()[_0xa776[16]](_0xa776[14],_0xa776[15]);_0x8b11x13[_0xa776[59]]()[_0xa776[16]](_0xa776[14],_0xa776[15])},3000)}else {_0x8b11x1(_0xa776[17])[_0xa776[59]]()[_0xa776[58]](0,0.0)}})}}) //This Pinterest Hover Button is developed by sankz.com. //Visit http://www.sankz.com details //Please do not remove this attribution //]]> </script> |
Note - Line no 9 can be skipped if ajax is already installed in your theme.
Now view one of your blog posts and you should see a red Pin It button appear on top of your images when you put your mouse pointer over an image.
In case you want to customize more keep following.
You can do certain changes in the theme -
You can do certain changes in the theme -
Change the position of the PIN BUTTON
By default, the Pin In button will appear in the center of your image. If you prefer that it appears in the corner of your images instead, you can easily do that. Simply find this line of code in your template’s HTML code (Template > Edit HTML):
var bs_pinButtonPos = "center";
and replace “center” with one of these positions:
topleft
topright
bottomleft
bottomright
- © Sankalp Singh
@chasingthought
Write down your views in the comments. In case you wish me to take a look at your blog. Drop in the comments below.
Instagram Travel Blog: Chasing Whereabouts
Facebook Page: Chasing Thoughts
© Chasing Thoughts (2010-2019), Crafted by Sankalp Singh
No comments:
Post a Comment