UPDATE: I overestimated the popularity of this post, which is awesome by the way, but also a little more time consuming than I bargained for. If you have questions, I have added a FAQ & TROUBLESHOOTING section at the bottom of the post. Give those tips a try and also read through the comments first, then if you still have questions after that feel free to email me. Pretty please and thank you!
Blogger already has the option for share buttons, but they don't have a 'pin it' button and honestly, I think they look ... meh. One of my clients wanted to do something classy and customized on her site, so I looked ALL OVER online trying to find a tutorial on how to do what I wanted. I couldn't really find it anywhere, which is why I decided to share my own tutorial on how I did it. I spent waaaaaaay too long figuring this out, so hopefully this saves you the headache!
If you're savvy with HTML, you can customize this to have your own images and match your fonts/colors. If you're looking for an easy solution, I've made up some cute grey buttons that should match most any blog. Voila!
So. First things first, you're going to have to delete the Blogger share buttons that you currently have on your site. To do this, log in to your Blogger Dashboard, and go to the Layout tab. Once there, you'll see the skeleton of your blog. Find the place where your blog posts go, and at the bottom, you'll see a link that says Edit. Click that link:
Once you're in, you'll see a window that lets you configure the blog posts. One of the options is to Show the Share Buttons. Make sure this button is NOT clicked.
Hit save. Okay. Now that the Blogger share buttons are removed, you can add the cute ones! Now you're going to want to go into your Template section of your blog.
Once you are in the HTML of your blog, click within your HTML code and hit Ctrl F (PC) or command F (mac, the command is the button with the apple on it). This will bring up a little search box in the top right corner of your code (if the search box pops up in the right hand corner of your browser, it will not work, you need to click within your HTML code first, and THEN hit ctrl F). Ok, now find the following piece of code: <div class='post-footer'> You might find that more than once - if so, you want the SECOND one. DIRECTLY after that piece of code, paste the following code:
<!-- AddThis Button BEGIN -->
<div style='text-align: left;'>
<div class='addthis_toolbox'>
<div class='custom_images'><a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZBvOru3ZjMmIP4VjXyF12ep94b9OIVd5uszPfbvk9QbGoiIr2jsHMku3xciKh0CTpp5XCMBzUSxTDYkFYpbrZP4Rxld4Y3EbkPAayEkSTPgCxPiEpRWn8UpS87WgWhvyKXBns05vF61-/s1600/Share+this+Post.png'/></a><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGNPTO6zi5LHthSF__cUWSodiPIrceAaswj1_qxkcvt1QwPXbmuPHecxXEprYtnHm2rwB8_gnq_ZkUr5o2oGq3OJtpQ-XTcqFlqs0dG9oseZEqByA7wDYBZLpy9yUGjVdufQ2_ljhi9Os/s1600/Facebook+Button+Share.png'/></a><a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCeVooy8DOu7CqMo5HEJrLL6EieYvTRDZefri7Zgf1ftlZ5DB-fmHnJcDNWstnayBmqPEEaFOG2Sh2HIogWUzKKQcZtaUxJvv4fpZHHQ85Kt_xlRfs-64-SknDGERdi7qN7lM1wOhxZLz/s1600/Twitter+Button+Share.png'/></a><a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1eFlS4W8uxIjb66_X4qSV1zKYDJG2kcS9opYx71_ulFMshB3MCM0uJwt2fKyi5fT_bbTUP26It_0GCj_fyrHtrqZ5akPX_58sAbc1sQG349MHB8BAFliyNr7rO6Nh0wmnh2oraZ2RWdW-/s1600/Pinterest+Button+Share.png'/></a><a class='addthis_button_email'><img alt='Email This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimujU-6cOcRPIAZwDx1v0o64WnNus0vh3HEkrtGiimq7EKUO7SJEbxO1RgVnwD329g-RZgDdaWmIwI6q9Wts3XvQ87mGA4Dna055HSpkLF8PjiEGEzP9Y0WVME6gHFx4lW9k6MF6vV2O15/s1600/Email+Button+Share.png'/></a>
</div></div></div><script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->
Make sure you hit "Preview" to make sure everything looks right! If it does, hit save and you're all set! It should look something like this:
<div style='text-align: left;'>
<div class='addthis_toolbox'>
<div class='custom_images'><a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZBvOru3ZjMmIP4VjXyF12ep94b9OIVd5uszPfbvk9QbGoiIr2jsHMku3xciKh0CTpp5XCMBzUSxTDYkFYpbrZP4Rxld4Y3EbkPAayEkSTPgCxPiEpRWn8UpS87WgWhvyKXBns05vF61-/s1600/Share+this+Post.png'/></a><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGNPTO6zi5LHthSF__cUWSodiPIrceAaswj1_qxkcvt1QwPXbmuPHecxXEprYtnHm2rwB8_gnq_ZkUr5o2oGq3OJtpQ-XTcqFlqs0dG9oseZEqByA7wDYBZLpy9yUGjVdufQ2_ljhi9Os/s1600/Facebook+Button+Share.png'/></a><a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCeVooy8DOu7CqMo5HEJrLL6EieYvTRDZefri7Zgf1ftlZ5DB-fmHnJcDNWstnayBmqPEEaFOG2Sh2HIogWUzKKQcZtaUxJvv4fpZHHQ85Kt_xlRfs-64-SknDGERdi7qN7lM1wOhxZLz/s1600/Twitter+Button+Share.png'/></a><a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1eFlS4W8uxIjb66_X4qSV1zKYDJG2kcS9opYx71_ulFMshB3MCM0uJwt2fKyi5fT_bbTUP26It_0GCj_fyrHtrqZ5akPX_58sAbc1sQG349MHB8BAFliyNr7rO6Nh0wmnh2oraZ2RWdW-/s1600/Pinterest+Button+Share.png'/></a><a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvGVGw-d16WsaLH7Pyf4qJ9caG1QuEFhEdKyxwC3xlPb-iZb8pplt6WBQawJbpXpN5hIc-y0yhKmtZjxjDgsvw5kn-iUDliB1XdV6Cg2FqWCo2SteCubTQAPpD2afwtrVdytwsqzIX_Kax/s1600/Tumblr+Icon.png'/></a><a class='addthis_button_google_plusone_share + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Share on Google Plus' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tfcFRML2DFbIq8ElGLuYOqJu1afLvbOYEMmEScmq9bJlD_A1e13b1Jerqla5zT4J6xNHxL15n9YX0wxdnoPyUvUF1vEMkrBz7v8SBEA2P4eYt01_mLjQWBIGYzaFZP9gvRMyYKLMYZV-/s1600/Google+Plus+Share.png'/></a><a class='addthis_button_email'><img alt='Email This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimujU-6cOcRPIAZwDx1v0o64WnNus0vh3HEkrtGiimq7EKUO7SJEbxO1RgVnwD329g-RZgDdaWmIwI6q9Wts3XvQ87mGA4Dna055HSpkLF8PjiEGEzP9Y0WVME6gHFx4lW9k6MF6vV2O15/s1600/Email+Button+Share.png'/></a>
</div></div></div><script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->
UPDATE! I've gotten so many requests for the Google Plus and Tumblr codes that I've decided to paste the code here. If you want those icons, paste this code in instead:<!-- AddThis Button BEGIN -->
<div style='text-align: left;'>
<div class='addthis_toolbox'>
<div class='custom_images'><a class='addthis_button_share'><img alt='Share this Post' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZBvOru3ZjMmIP4VjXyF12ep94b9OIVd5uszPfbvk9QbGoiIr2jsHMku3xciKh0CTpp5XCMBzUSxTDYkFYpbrZP4Rxld4Y3EbkPAayEkSTPgCxPiEpRWn8UpS87WgWhvyKXBns05vF61-/s1600/Share+this+Post.png'/></a><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGNPTO6zi5LHthSF__cUWSodiPIrceAaswj1_qxkcvt1QwPXbmuPHecxXEprYtnHm2rwB8_gnq_ZkUr5o2oGq3OJtpQ-XTcqFlqs0dG9oseZEqByA7wDYBZLpy9yUGjVdufQ2_ljhi9Os/s1600/Facebook+Button+Share.png'/></a><a class='twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCeVooy8DOu7CqMo5HEJrLL6EieYvTRDZefri7Zgf1ftlZ5DB-fmHnJcDNWstnayBmqPEEaFOG2Sh2HIogWUzKKQcZtaUxJvv4fpZHHQ85Kt_xlRfs-64-SknDGERdi7qN7lM1wOhxZLz/s1600/Twitter+Button+Share.png'/></a><a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1eFlS4W8uxIjb66_X4qSV1zKYDJG2kcS9opYx71_ulFMshB3MCM0uJwt2fKyi5fT_bbTUP26It_0GCj_fyrHtrqZ5akPX_58sAbc1sQG349MHB8BAFliyNr7rO6Nh0wmnh2oraZ2RWdW-/s1600/Pinterest+Button+Share.png'/></a><a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvGVGw-d16WsaLH7Pyf4qJ9caG1QuEFhEdKyxwC3xlPb-iZb8pplt6WBQawJbpXpN5hIc-y0yhKmtZjxjDgsvw5kn-iUDliB1XdV6Cg2FqWCo2SteCubTQAPpD2afwtrVdytwsqzIX_Kax/s1600/Tumblr+Icon.png'/></a><a class='addthis_button_google_plusone_share + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Share on Google Plus' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2tfcFRML2DFbIq8ElGLuYOqJu1afLvbOYEMmEScmq9bJlD_A1e13b1Jerqla5zT4J6xNHxL15n9YX0wxdnoPyUvUF1vEMkrBz7v8SBEA2P4eYt01_mLjQWBIGYzaFZP9gvRMyYKLMYZV-/s1600/Google+Plus+Share.png'/></a><a class='addthis_button_email'><img alt='Email This' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimujU-6cOcRPIAZwDx1v0o64WnNus0vh3HEkrtGiimq7EKUO7SJEbxO1RgVnwD329g-RZgDdaWmIwI6q9Wts3XvQ87mGA4Dna055HSpkLF8PjiEGEzP9Y0WVME6gHFx4lW9k6MF6vV2O15/s1600/Email+Button+Share.png'/></a>
</div></div></div><script type='text/javascript'>var addthis_config = {"data_track_addressbar":true};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->
ANOTHER UPDATE: The original code I had for these buttons would only share the url for a specific blog post if the viewer was on that post's specific page. A little bit unhelpful. I have now figured out how to get it to share the url for a specific blog post straight from your main blog scroll. YAY! I have updated the code already, but I just want to let you know that this tutorial is now even more awesome than before :).
0 comments:
Post a Comment