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
-
Tip: Automatically resize your Blogger post's imagesYou've been blogging along for a while now, inserting your images into your blog posts and sizi…
-
Tip: A better automatic thumbnail and summary script for BloggerWhen we first started creating custom websites using Blogger, one of the first real script needs th…
-
Hangout On Air: Friday Request Line for 10/12/2012Web fonts, social sharing, focusing on your user experience, rel=author and much more more!
-
Using Blogger page types to affect your blog designIn many of our tips we recommend wrapping the Javascript code that we're providing in something…
-
Tip: How do I remove the Blogger bar at the top of my site?This is, far and away, the #1 question we're asked when people see the work we've done with…
-
Featured Blogger Site: Pinch GalleryPinch Gallery in Northampton, MA is a vibrant, eclectic artisan gallery with a focus on art for th…
-
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…
Post a Comment
Post a Comment