Adding Pinterest correct to your Blogger site can be a bit challenging; most people take the easy way out and add it site-wide as opposed to adding it to the specific post footer code. Why is it better to add it to the specific post footer? Because you can add default descriptive information into the pin!
The following code (here's the clean version) and instructions show you how to add the button to your post footer next to all of your other social sharing buttons.
Go to the template editor, Edit the HTML, check the box to expand the widget template, search for:
<b:includable id="shareButtons" var="post">
Scroll down that section of code where are the share buttons are, and about the last line or so you'll see:
<b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container' style='width: 32px; overflow: hidden;'><data:post.dummyTag/></div></b:if>
Add the following code right before that line:
<div class='goog-inline-block dummy-container'><a href='javascript:void((function()%7Bvar%20e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999); document.body.appendChild(e)%7D)());'><img alt='Pin It' onclick='doPinIt();' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibbk_81wrTAABemQSaDhk5bGZBe6_q_iBpfs8hahrVODnkSURy-f4_pI0dw03xrCEzKIXkBWRyYvcwYdTDQ94Y1fm-RB9czIMYOXFfTktNJrXkNUB6ipgiWhVv2b3nfOsQCBhcBrNSbtw/' style='margin-top: -3px; margin-right: 0; margin-bottom: 0; border: 0; padding: 0;'/></a></div>
Before you go overboard on social sharing buttons please read this article: Forget Facebook, keep your fans to yourself!
Home
›
beginner
›
blogger
›
blogspot
›
intermediate
›
layout
›
pinterest
›
share buttons
›
social media
›
template
›
tip
Related Posts
Popular
-
Loops, loop positions, and isFirst variables in BloggerLooping through the listing of blog posts <b:loop values='data:posts' var='post'…
-
Tip: Cropping (square) and resizing your Picasa/Blogger imagesSomething that we've discovered is that there is more to the crazy URL string that you get when…
-
Tip: Removing default spacing between images in BloggerSometime in the switch to the new interface (perhaps?) a new default behavior was added to Blogger:…
-
Using Namecheap as your Domain provider with BloggerOur advice for anyone with a blog on +Blogger is that the moment you feel you'd be sad if you…
-
Tip: Using Masonry to create a fluid layout for your BlogAre you a fan of Pinterest , and like the way that they have a fluid layout of boxes down the site,…
-
Tip: Making the comment link more intuitive for BloggerWe came across a comment on Google+ this morning that had us scratching our heads, mainly because …
-
Tip: Making a Google Doc submission form email you the resultsIn an earlier article we detailed how you can use Google Docs to create a submission form in your …
Post a Comment
Post a Comment