Tell me and I forget, teach me and I may remember, involve me and I learn - Benjamin Franklin
Halo Blogger friends!! Hope you had great week.
If you want to promote your blog, the first step is your presentation and photos. Photos are awesome stuff which you deliver your messages better than words. Next step we need to promote on social media. That's the best option if you already decided. So today we going to meet the both in same. Yes, in your blog images try to connect the social media. Now i am going to explain the steps how to hover the pinit button on the blog images. Its really simple with the below 4 steps. Just follow the steps and let me know your comments. All the best Blogger friends and have fun.
Step 1 - Edit HTML
Navigate to Blogger > Theme > Edit HTML as shown in the below screenshot.
Step 2 - Copy the below provided code.
<div class="”code”">
![CDATA[ var custom_pinit_button =
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRjAn_YZX1dUBp0VKUmDc9ZzNINO59x1htKOf7kKWVthBUU_k3C9v1frH1oc4Gp5xAEegB1gw3za3iYkRmw6RbfIOxTXY8JIysOErWKmsPsyrU_Wx5aO2J3duaPf-KS16wDFcGjiivQLQV/s1600/pinit-button.png";
var pinit_button_position = "center"; var pinit_button_before =
""; var pinit_button_after = "";
//]]></b></div>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
type="text/javascript"></script>
<script id="pinit-img-button"
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(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|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,{}))
//]]>
Step 3 - Paste the provided code in the Edit HTML above tag.
Click on Save Theme.
Step 4 - Preview the post and Just see the below screenshot
for your reference.
Bonus Note:
Step 1 - Search the below line in the provided code.
<pre class="brush:css">var
pinit_button_position = "center";</pre>
Step 2 – Now replace the "center" with any of the
below list.
<div class="”code”">
<pre class="brush:css">topleft
topright
bottomleft
bottomright</pre>
<pre class="brush:css"></pre>
</div>
That’s it!!! Have fun and enjoy with the new feature in your
blog.
