Tutorial: How to Change Blogger's Share Buttons to Cute Custom Images

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!

The buttons included are for Facebook, Twitter, Email, and Pinterest. If you keep reading there is also a code to add in a Google+ and Tumblr button as well.

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='http://1.bp.blogspot.com/-Doe-nHNRph0/VXi6oEYHpiI/AAAAAAAALf0/vehf0HZG3W8/s1600/Share%2Bthis%2BPost.png'/></a><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook share' border='0' src='http://4.bp.blogspot.com/-1zDqh-W7LLk/VXi6ntQsYtI/AAAAAAAALfQ/Pprvi03-NpQ/s1600/Facebook%2BButton%2BShare.png'/></a><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='http://4.bp.blogspot.com/-9ot9ZrDBORw/VXi6olHElFI/AAAAAAAALfg/FgkFZtzhM7E/s1600/Twitter%2BButton%2BShare.png'/></a><a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='http://3.bp.blogspot.com/-b8J3nxp5Zek/VXi6oOIafaI/AAAAAAAALfU/0U0YQQdo2Z0/s1600/Pinterest%2BButton%2BShare.png'/></a><a class='addthis_button_email'><img alt='Email This' border='0' src='http://1.bp.blogspot.com/-0Wsj8_RX-B4/VXi6noTVdDI/AAAAAAAALfI/ZjlhX2fT9mA/s1600/Email%2BButton%2BShare.png'/></a>
</div></div></div><script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</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:

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='http://1.bp.blogspot.com/-Doe-nHNRph0/VXi6oEYHpiI/AAAAAAAALf0/vehf0HZG3W8/s1600/Share%2Bthis%2BPost.png'/></a><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook share' border='0' src='http://4.bp.blogspot.com/-1zDqh-W7LLk/VXi6ntQsYtI/AAAAAAAALfQ/Pprvi03-NpQ/s1600/Facebook%2BButton%2BShare.png'/></a><a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='http://4.bp.blogspot.com/-9ot9ZrDBORw/VXi6olHElFI/AAAAAAAALfg/FgkFZtzhM7E/s1600/Twitter%2BButton%2BShare.png'/></a><a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='http://3.bp.blogspot.com/-b8J3nxp5Zek/VXi6oOIafaI/AAAAAAAALfU/0U0YQQdo2Z0/s1600/Pinterest%2BButton%2BShare.png'/></a><a class='addthis_button_tumblr'><img alt='Share on Tumblr' border='0' src='http://1.bp.blogspot.com/-fla_oko-g4I/VXi6oeLUW7I/AAAAAAAALfc/3mpJuBDo8YY/s1600/Tumblr%2BIcon.png'/></a><a class='addthis_button_google_plusone_share + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share on Google Plus' border='0' src='http://1.bp.blogspot.com/-SVErwlOWPws/VXi6n0s0yQI/AAAAAAAALfM/trsRWvm8eNk/s1600/Google%2BPlus%2BShare.png'/></a><a class='addthis_button_email'><img alt='Email This' border='0' src='http://1.bp.blogspot.com/-0Wsj8_RX-B4/VXi6noTVdDI/AAAAAAAALfI/ZjlhX2fT9mA/s1600/Email%2BButton%2BShare.png'/></a>
</div></div></div><script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->
ANOTHER UPDATE: Some users were getting a strange code appearing at the end of their url after adding these buttons. I have fixed this problem and updated the coding already!

CUSTOMIZE IT

If you want to customize it, you can replace the img src links with the links to your own images. Here's an example of how you could customize this code:


See? Relatively easy. If your blog template has a border around your images, you might want to take the automatic border off, but that's your call.

Do you want it centered, or aligned right (It is set to align left currently)? Find the line: <div style='text-align: left;'> and change the left to "center" or right".

Do you want to change the wording of "Share this post"? Right now this is saved as an image. If you want it to say something else, you can either a) make your own image or b) just type in your own text. To type in your own find the line: <div class='addthis_toolbox'> and type in your new text right BELOW. for example: "Like this post? Share it:". You will then want to delete the Share this post image by deleting this line of code: <a class='addthis_button_share'><img alt='Share this Post' border='0' src='http://1.bp.blogspot.com/-Doe-nHNRph0/VXi6oEYHpiI/AAAAAAAALf0/vehf0HZG3W8/s1600/Share%2Bthis%2BPost.png'/></a>

Do you only want the buttons to appear/not appear on certain pages? Follow this tutorial. You can skip to the part about "inserting conditional tags." It tells you how to just have them on your homepage, just on post pages, pretty much anything you want. Also, a fellow blogger shared her success with removing it from her static pages. She did this:

insert this bit of html code right after the </b:skin>:
<style type=\'text/css\'> 
<b:if cond=\'data:blog.pageType != \"index\"\'>
.post-footer {display:none !important;}
</b:if>
</style>
and this bit of CSS code in the Edit HTML section of the static pages:
<style type=\"text/css\">
.feed-links {display:none !important;}
and presto! nothing on the bottom of your static pages. Hooray!

FAQ & TROUBLESHOOTING

If you are having trouble with the code above, you can try downloading straight from our dropbox here. (there are two versions included, the original and the one with tumblr and google+ added).
I have answered a lot of questions in the comments. If you are having trouble PLEASE read through this section, and all of the comments first, BEFORE contacting me with questions. I love helping, but I love my time too, so let's respect :). Below are the questions I get asked the most about. If the buttons are not working for you, the anwer is probably somewhere right here: 

Q. "I can't find the <div class='post-footer'> code. I don't think my blog has it." 
A. 99.9% of the time, your blog has that code in it somewhere. First make sure you are searching within your CODE and not within your BROWSER (Refer to the instructions again on how to do this). If it is still not finding the code, try searching for just "post-footer" or just "footer". NOTE: there are multiple occurences of the <div class='post-footer'>  code. To find all of them just keep hitting enter and it will take you to all of the found occurrences. 

Q. I put the code in but the buttons are not showing. 
A. There are a couple different reasons why this could be happening. 1)The most common problem for this is that you put the code after the first occurrence of the <div class='post-footer'> code, and not the second. Make sure it is after the second. 2) You might need to try different locations, ex: right before the <div class='post-footer'>, or even before, after, or within one of your post-footer lines. 4) You did not copy the whole code. Make sure your code starts with<!-- AddThis Button BEGIN --> and ends with <!-- AddThis Button END -->. 4) Your post-footer is set to not show. If this is the case there will be a display:none code somewhere in your template code that is making your post-footer not show, no matter what you try and put in there. So do a search for "display:none" and see if it finds anything.  

Q. The buttons are working but I only want them to display on my homepage, or just a certain page.
A.  This tutorial should help you do that! You can skip to the part about "inserting conditional tags."


HIRE ME OUT!

Ya know, if you are new to all of this and are currently going bald pulling all of your hair out trying to do it yourself, or if you just don't want to do it yourself, I can do it for you! Purchase a customization here and I'll get those buttons on there for ya! I'll be like your own personal fairy godmother (my toddler is into Cinderella right now).  If you want me to design your own custom custom buttons to boot just purchase two and I'll do that too. Fun! (just note in your purchase you are wanting share buttons).

Enjoy!

Photobucket

251 comments:

  1. Enjoyed this tutorial but couldn't actually get it the images to display.

    ReplyDelete
    Replies
    1. I have a suggestion for you. The new script is still work 100% and free.
      There is also an example of if you want to see results:
      http://www.kangsigit.com/2016/01/Script-POOL.html

      Note: This is not linked to FACEBOOK, so no third party.

      Delete
  2. Hi Wanda - Sorry it didn't work for you. Try pasting the code directly after the first div class='post-footer' tag rather than the second. Sometimes if you have a heavily tailored blog design, yours will be slightly different.

    ReplyDelete
  3. Dear Tiana,

    Thank you so much for sharing this with us!
    I changed it a little bit, as I needed something really simple - just the buttons without the text - and I hope you don't mind; )
    By the way, I love your design work.

    /Olívia
    (a beginner blogger from Hungary)

    ReplyDelete
  4. Olívia - Of course I don't mind! I'm glad you were able to tailor it to your needs and I'm glad you like it :)

    ReplyDelete
  5. Thank you! I've been looking for a way to customize these on my blog. I saw all the services, but couldn't figure out how to code my own buttons. Much appreciated. :-)

    ReplyDelete
  6. Enduring Epilepsy-So happy it helped you! Enjoy!

    ReplyDelete
  7. Thank You! I had to post your html when the share buttons was on. Then my post footer showed up. I copied your address and then saved and went back and check off the google buttons. I don't know if this makes since but it worked. Thank you!

    ReplyDelete
  8. Melissa-Don't you just love html sometimes?! I'm glad it worked!

    ReplyDelete
  9. Hi Tiana,

    Thank you for sharing such a wonderful tutorial. My blog is still a work in progress and I LOVED how you customized the sharing buttons. I've made this attempt several times and I am getting an error message:

    'Could not load template preview: Error parsing XML, line 1947, column 75: Open quote is expected for attribute "src" associated with an element type "img".'

    Do you think you can help me, please? And a most gracious thanks!

    ReplyDelete
  10. Hi Hammermamma ~

    Today's my day off, but if you email me at theblogdecorator (@) gmail (.) com, then I should be able to help you out tomorrow. (Your blogger profile isn't set up to respond via email, otherwise I would have contacted you directly. I hope you come back here to check for a response!) I think your problem lies in not copying over your own custom image links correctly (you might be deleting some quotation marks by accident.)

    ReplyDelete
  11. Thanks so much! I had to fiddle around with the new template editor, but once I figured it out it worked:)

    ReplyDelete
  12. This is exactly the type of tutorial I have been looking for. I have 2 questions though. How do you add a Google+ button so people can share the post and is there any way to a via twitter username to it as well? Thanks for sharing this tutorial.

    ReplyDelete
  13. Hi Kimberly - I couldn't figure out a way to add a Twitter username without making the code go wonky, but you can add Google Plus pretty easily. Blogger isn't letting my paste the code for it since their commenting system isn't allowing the HTML, but I'll email it to you. If anyone else is wanting Google Plus, just shoot me an email. :)

    ReplyDelete
  14. Hi there! It worked for me -- however when clicked it shares the blog "in general" not the post... Make sense?

    ReplyDelete
  15. Hi Britni - The code is such that it will automatically pull the URL from wherever the site visitor is at - so if they're on a specific post, it will pull that URL, and if they're on the homepage, it will pull that URL. If it's something that really bothers you, you could always change it so that the buttons don't appear on the homepage, but only appear on the post pages. If you want to do that, here's a tutorial that can help you out. Hope that helps!

    ReplyDelete
  16. I got it! Thanks! You're awesome!!! :)

    Putting my vote in now for a post on how to make unique date headers in Blogger ;)

    ReplyDelete
  17. Britni - When you say "unique date headers" what exactly are you meaning? How to put the date inside an image (like what's seen on my Halle template), how to put an image to the side of it (like what's seen on my Kate template) or how to change the font (like the Kate template)?

    I can do a tutorial on any of those, but it'd help if I knew what you were looking for :) Once you let me know, make sure you subscribe to my blog so you'll know when I post it!

    ReplyDelete
  18. You are so awesome! Thank you for these cute buttons! I didn't like the share buttons but know I need them. This is a great way to display them.

    Thanks!
    www.mysoulisthesky.com

    ReplyDelete
  19. Thanks ever so much for this tutorial - it really saved my blog!

    I'm going to email you with arequest for the Google Plus code.

    Thanks again.

    Lauren

    ReplyDelete
  20. it worked! thanks a lot
    http://showfirepost.blogspot.com/

    ReplyDelete
  21. This is an awesome tutorial! Thanks!

    ReplyDelete
  22. Hello, thank you so much for this tutorial. It is indeed a blessing!

    I was wondering what would I have to change in this code to go with google plus and tumblr icons .

    Persis.

    ReplyDelete
  23. Hi Persis - I sent you an email with the Google Plus and Tumblr added in :)

    ReplyDelete
  24. Thank you for this simple and to the point post, I have literally scoured the interwebs for over an hour, and your post was the best. HAHAHA Only down side is when I try and find "div class='post-footer'" it shows 0 results, I have even red through all the code trying to find it and it just isn't there. :( Help!!

    ReplyDelete
  25. When I look at your code I can see it ... That's where your labels section is housed as well as your comments. So it is there! I'm not sure why you can't find it in your code. Did you try clicking inside the HTML box before doing CTRL F? Blogger has made some changes so that if you're not actually clicked inside the box it will return zero search results.

    ReplyDelete
  26. Hi, Corinne! Thanks for this tutorial, I am really excited to try this one for my new blog but it doesn't work for me. Even the default share buttons dont work and wont show up under every posts, which in fact i enabled already the social sharing buttons in my blog post configuration. ca you tell me what's wrong with it? or was it a conflict with my template? been trying a lot of times...
    my blog is yourquotesdiary.blogspot.com, please lend me a hand on how i could do this like yours.hope to hear from you! thanks in advance..god bless :)

    ReplyDelete
  27. Hi Jhem - It sounds like you have some corrupt template code. :( You could try following this tutorial to resetting your corrupt widgets, but make sure you hit preview first before saving, because this could alter some of your other widgets. Also make a back up copy.

    If that does not help, then it's something in your template that is set to "hide" the post footer, in which case, I can't really help you much since I wasn't the one who created that code. Hope that helps!

    ReplyDelete
  28. Corrine, thanks for your response! i gladly appreciate it, but it still wont work. so maybe you are right, its a template matter. thanks ayway for giving me an answer.. take care!

    ReplyDelete
  29. I have searched the web inside and out for this type of post! It's perfect thankyou. Question- How can I move these buttons to show on the full post when viewers click on the 'read more' button?

    www.blushousbeauty.blogspot.com

    ReplyDelete
  30. Scratch that! It does show on the full page. Is there a way I can remove it from the homepage and it just be viewed once the view full post button has been clicked. Also I would love to add in a tumblr and bloglovin icon, do you have these? Thank you so much!

    www.blushousbeauty.blogspot.com

    ReplyDelete
  31. Hi Alex - In a previous comment I explained how to do what you're asking, but here's the link again for the tutorial on how to remove share buttons from homepage, but leave them on the post pages.

    I don't have a bloglovin icon, but I do have a tumblr. Like I've mentioned before, Blogger won't let me paste the code in a comment, so you'll need to email me for me to send it to you (your Blogger profile doesn't have your email address for me to grab).

    Sundays are my day off, so if you email me, I should be able to send that to you tomorrow.

    ReplyDelete
  32. good one....but how to add this sharing button left side to your post

    ReplyDelete
  33. Hi Bhavuk - It's automatically set to display on the left. If it's showing up somewhere else on your template, that means your template post-footer has a different justification hard coded in. If you don't want to change the code that's in your template, you could try following these directions to change where the share buttons are displayed within the code I created.

    ReplyDelete
  34. I could not find the code in the widget template.

    ReplyDelete
  35. Hi Jessica - I'm not sure what you mean ... Do you mean you couldn't find the "post-footer" part in your template? If so, it's kinda hard for me to help you, since you didn't leave a link to your site and your profile is set to go to your google+ page, which also doesn't have any links to your site. Since I can't email you or contact you in any way to help, I hope you come back to leave more information :)

    ReplyDelete
  36. Hello Tiana, your tutorial was very helpful and it worked for me with some changes. I was wondering if the same thing is possible for social media counters as well, or if the code can be adjusted to receive customized counters. Looking forward for your reply.
    Best regards,
    Chris.

    ReplyDelete
  37. Hi Chris - No, as far as I know, you can't have customized images with the auto counters, nor can you set up a customized look for the counters. :/ I might be wrong, but I personally don't know how it'd be done. Sorry!

    ReplyDelete
  38. So awesome...very new to blogging and just starting to get everything close to the way I like it. (Although I have a feeling that it will be a never-ending process since I am a bit of a perfectionist!) This tutorial was just what I was looking for thanks!

    http://www.naturenurturegrow.com/

    ReplyDelete
  39. Hi!
    How do I add a google+ share button along with these?

    ReplyDelete
  40. Hi Rachel - As I've mentioned in both the post and in the comments, you'll need to email me if you want that code. Your Blogger profile isn't set up correctly to receive emails, so I can't email you unless you email me first.

    ReplyDelete
  41. Hey Tiana! Thank you so much for this tutorial and for answering my mail about the Google + button so promptly! You are a blog angel! ^^

    ReplyDelete
  42. not working for my blog
    http://urblue.blogspot.com/

    ReplyDelete
  43. Hi Tito - I'll need a little more information to be able to help you out. Did you get an error message? If so, what exactly did it say? Or did you try it, get no error message, but it's just not showing up? If that happened, then try putting it after a different time of the div class='post-footer' code (like the first time). I see that the original share buttons are still up on your blog, so are you sure you followed all the steps?

    ReplyDelete
  44. Thank you so much for this tutorial! I love your blog :)

    ReplyDelete
  45. Very helpful article on adding sharing buttons in Blogger posts.
    Thanks a lot!

    ReplyDelete
  46. Hi Tiana! Your code worked out perfectly! Although I was wondering if there's a way to get the comments to be on the same line as the share buttons (I have them both on the post-footer-line-1, but the comments part is showing up below)? I want my comments to be aligned to the right and the share buttons to the left.

    Thanks!
    Anne

    ReplyDelete
  47. Hi Anne,

    To get them to display on the same line, you'll need to go into the layout part of your blog. You'll see the skeleton of your design there. Find the part where your blog posts sit, click on "edit" in the lower right hand corner and rearrange the elements in your footer there :)

    If this doesn't work, then you might have hard coded your design too much for a simple drag and drop. In which case, you'll need to insert the code in a different part of your HTML code. You'll need to look for the part where the comments are in your footer in your blog HTML, look for the opening and closing tags of that widget, and then place this code before. Make sure you hit preview first so that you don't accidentally break anything :)

    For your specific blog, if it's saying it's all on post-footer line one, you might need to delete div class='post-footer-line post-footer-line-2' all the way through the ending end div tag, including all the brackets before and after (I can't post it here or it will break the comment). Again, make sure to hit preview first!!! You could also try adding a div align='right' code into your comments widget to see if that puts them in where you're wanting (You'll have to end the div align left from the share buttons, then add the div alight right to the comments and end that as well.

    Hope that helps! Let me know if you have questions, and sorry for the super long reply :)

    ReplyDelete
  48. hi Tiana!
    i'm so late to find this tutorial post but wanted to thank you for this beautiful work.
    this works perfectly well for my blog and makes a huge difference.
    thank you so much! xoxo

    http://www.lenallure.com

    ReplyDelete
  49. do u also have button for tumblr ? thank u..

    ReplyDelete
  50. Hi Bree - Yes, I do also have a Tumblr. But your Blogger profile isn't set up to receive emails. So, as I've mentioned before in the post and in the comments, you'll need to email me in order for me to send it to you. I can't put code into a Blogger comment.

    ReplyDelete
  51. Hi Tiana,

    Thank you for this tutorial. I have customised and added these images to my blog design here http://atfirstblink-coldmountain.blogspot.in . I was wondering if there was any way through which I could get these share buttons, and the 'labels' (label 1, label 2) to show up in the same line. So that the labels could be on the far left and the custom icons at the far left side under the blog post but all in one line.

    Any help with this would really be helpful.

    Thanks once again.

    Loves, Persis.

    ReplyDelete
  52. Hi Persis - Look up above at the comment I wrote to Anne, you'll need to do the same thing (Sorry, it was a long comment and I don't want to write it all out again!) :)

    ReplyDelete
  53. Hi Tiana,

    Thanks for your reply. I tried all the methods you have suggested Anne, but somehow am unable to get the comments, label and icons in one single line.

    If it's not too much to ask can you please take a look at my blog http://atfirstblink-coldmountain.blogspot.in and suggest an alternative? If not, then that's okay too and thanks once again for this great tutorial and taking the time to answer all queries :)

    Persis.

    ReplyDelete
  54. Hi Persis - Well, I'm in a bit of a conundrum...

    I was going to offer to go into your design and make the changes for you, but then when I visited your site, I found that you are actually a fellow designer who sells premade Blogger templates! I can't really offer to fix your template for you if you're going to then sell that design in competition with my own, and claim all the work and profits as your own. Especially when the problem lies with your footer, and not my tutorial.

    I am aware that other designers are probably using this tutorial, but I can't really in good conscience do all the "heavy-lifting" work of getting your design to show it exactly how you want it to when my original tutorial has done it's job of getting the share buttons to be customized.

    I'm really sorry. I'm trying to be nice, but it just doesn't make good business sense for me to take my own free time to educate and help out my competition! I'm glad you got the share buttons to work on your site, and I hope you'll be able to figure out how to get your footer to display the way you're wanting for your template. Please don't take it personally, but I won't be able to help you.

    ReplyDelete
  55. Hey Tiana! I really appreciated this tutorial. Much like a lot of the other bloggers, I couldn't figure out how to create my own share buttons. Thanks so much for this tutorial!
    Also much like the other bloggers, could I get the coding for Tumblr and Google Plus, please? That would be super helpful. Thank you!
    -Amy

    ReplyDelete
  56. PS: (so sorry) here's my blog - fastest way to find how to contact me.
    http://glitterinmytea.blogspot.com/2013/08/contact-me.html

    ReplyDelete
  57. Hi Tiana,

    It's no problem at all if you can't help me any further. I apologise if I didn't tell you earlier on that I am a self taught blog designer. I really had no idea that the tutorials were only meant for non designers. If I had any bad intention in mind I could easily have written to you from another id and shown you some other template instead of my commercial design. Like I said.. I had no idea about the limitations of your tutorials.

    In all fairness I would like to say that it is a bit of a grey area since one cant lay claim to html coding which forms the crux of all blog designs, one can certainly lay claim to their creations and while I may have used the html codes from your tutorial to learn to change share buttons to images, I have not used any of the images created by you on any of my commercial templates.

    I hope you will appreciate this and I once again apologise for taking your time. We both may be fellow designers but the blogosphere is huge and there is plenty of work for everyone. You can rest assured that I will never knowingly intrude in your work space. Wishing you all the very best and my sincerest apologies for asking you to take out time in assisting me with this tutorial.

    Regards, Persis.

    ReplyDelete
  58. Hi Persis,

    Oh, other designers can use my tutorials (so don't feel like you can't use this one!), I just can't take the time to help out my competitors when the problem isn't with my tutorial but is with something else (in your case, the problem is with the layout of your 'post-footer' section, not the share buttons themselves).

    I really do appreciate you using your own images and being transparent about which site you were using and everything. So thank you for that! I wish you the best of luck in getting your template the way you'd like - As a self-taught designer myself, I do know how important online tutorials are, so you are welcome to use it. I'm sorry if my comment wasn't more clear. I didn't want to call you out for using the tutorial! I just wanted to explain why I couldn't take the time to fix your footer myself.

    P.S. You might find the following tutorial helpful... http://www.blogbulk.com/2009/02/moving-elements-in-post-footer-labels.html

    ReplyDelete
  59. Dear Tiana,

    Thank you for your positive response and for guiding me towards blogbulk. Really appreciate you taking the time out for this. All the best :)

    Persis.

    ReplyDelete
  60. OH MY GOODNESS that you SO MUCH for posting this! I have been trying to fix this for HOURS and it finally works!! HOORAY!!

    ReplyDelete
  61. This comment has been removed by the author.

    ReplyDelete
  62. This was great and very helpful! I uploaded my own share buttons on a draft post and copied and pasted the image url in the img src tag. Worked like a charm. Thanks! :)

    ReplyDelete
  63. Thanks, it took me a minute but i did it! I love it!

    ReplyDelete
  64. Thanks so much! Worked perfectly.

    ReplyDelete
  65. thank you so much, it really really works for my blog.

    ReplyDelete
  66. Hey,
    Is there an option to remove these share buttons from specific pages..
    My blog is http://qumbr.com
    I want the buttons to appear on posts but not on pages..
    Please help. Thanks :)

    ReplyDelete
  67. Hi Qumber ~ In a previous comment to Alex, I explained how to remove this code from the home page and only have it display on post pages. The same tutorial should be able to help you do what you're wanting :)

    ReplyDelete
  68. This comment has been removed by the author.

    ReplyDelete
  69. I guess it ain't working.
    Any other way..?
    Please have a look and help.
    www.qumbr.com
    Thanks :)

    ReplyDelete
  70. Hi Qumber,

    Take a look at these two tutorials and see if one of them might be able to hide it for you - you don't necessarily want to hide your sidebar, but if you edit the HTML code, you should be able to get it to just hide the post footer from your pages. Hope that helps! (PS. Also, I noticed you used the share buttons but also had your own for Google Plus added on - There's coding for Google Plus as part of my share buttons as well if you want them all to match!)

    http://www.bloggersentral.com/2010/02/apply-different-layoutstyling-to-static.html

    http://forums.bloggerplugins.org/topic/hiding-sidebar-and-footer-on-static-pages/

    ReplyDelete
  71. Thanks Tiana :)
    Your help was great..

    ReplyDelete
  72. SO sorry! I have read through all of these posts, found a similar problem to mine, as well as your response. However, I've tried all the options to "fix" the problem and the buttons still don't show for me. I've tried inserting the code after the first set of footer div's, as well as the second. I've also tried adding an html widget with the code, but still nothing works. Anything you can recommend is greatly appreciated...Been searching for WEEKS and have been completely disappointed in the button options...UNTIL I FOUND YOURS!

    ReplyDelete
  73. My goodness, sorry again! My site is carissaanneholiday.blogspot.com. You can email me at carissaanne2@gmail.com. Thanks!

    ReplyDelete
  74. Just wanted to say thank you!!!! I love this update to my blog. Much improved and appreciated for all your hard work!

    ReplyDelete
  75. I used this on my blog. Thank you for this post. Very helpful! You're the best!!!

    ReplyDelete
  76. Hi! Awesome tutorial but I have a problem... When I click on my post, both the default share buttons and these buttons are there. How do I get rid of the default share buttons? [ http://kirdouven.blogspot.com/2014/01/warna-cermin-apa-sih.html#.Usk43dIW3E0 ]

    ReplyDelete
  77. Hi KIR - In my post I gave instructions on how to delete the original share buttons. Did you try that?

    If you did and it didn't work for you, you'll want to remove them from your hard coding. Like I've mentioned before, I can't paste HTML code into a blog comment, so I can't give you detailed instructions unless you email me (and if you do email me, I won't be getting back to you until tomorrow, because Sunday's are my day off). If you want to try tackling it on your own, you can look for the code 'post-share-buttons' in your template and remove it entirely, starting with the first 'div' tag and all the way through it's ending 'div' tag. Make sure you hit 'preview' before you hit save!!

    If you can't get it to work, go ahead and email me and tomorrow I'll look at your specific coding to let you know what you need to do.

    ReplyDelete
  78. First let me say that I love this simple design. Works perfectly with my blog. This being said, it doesn't matter if I have it on the main page or the post page, it still posts the entire blog "in general" and not just the one post :/

    ReplyDelete
  79. Hi Summer - You didn't leave me with your email to contact you, and your blog is set to private. So I'm afraid I won't be able to help you troubleshoot.

    If you email me, I should be able to help you out tomorrow, since I take Sunday's off.

    ReplyDelete
  80. INCREDIBLE!!! I am so incredibly grateful!!! THANK YOU!

    ReplyDelete
  81. Hi I tried searching for the Post footer code but nothing came up? Any chance you can help me please?

    ReplyDelete
  82. Hi Rebecca, I sent you an email. To anyone else who might have the same problem, here's what I would recommend:

    When you searched for the code, are you sure you put your cursor inside the "edit" box, rather than just searching the whole page? Blogger changed it so that you actually have to click inside the HTML before searching, otherwise it won't search the template HTML (annoying, I know).

    ReplyDelete
  83. Update: I underestimated how popular this post would be! I feel like I've answered all the questions people might have with this tutorial, so I'm turning off the comments for this post. Please read the ENTIRE tutorial step by step, and then read ALL the comments if you are struggling with this tutorial. If you've tried everything and you still can't get it to work for you, then you can email me and I'll see if I can help you. MAKE SURE YOU GIVE ME YOUR SITE URL in your email, otherwise I won't be able to see your code in order to help. I don't mind helping, but please respect my time by only requesting help if you have honestly tried everything else first.

    ReplyDelete
  84. Hello! A lot of you have been asking for a tutorial on how to have the buttons show on just your homepage, or just on a certain page. The old tutorial I had linked to is no longer available, but this tutorial should help you out! You can skip to the part about "Inserting Conditional Tags." Enjoy!

    http://www.codeitpretty.com/2013/11/how-to-show-and-hide-blogger-sidebar.html

    ReplyDelete
  85. Hi, thank you for your tutorial:
    My problem is the following: I always get this fault indication: "The reference to entity "t" must end with the ';' delimiter." Can you help me out with this problem please?

    ReplyDelete
  86. Hi Vogueuplikethis,

    Thank you for pointing out this problem. The text boxes the code was in was altering the code. I have updated the post accordingly and also added a link to where you can download it from our dropbox. That should resolve the issue!

    -Corinne

    ReplyDelete
  87. Hi!
    I was just wondering if there was a way to use this method without the dots at the very bottom of my blog. Pls help!
    my blog: www.livsweetblog.blogspot.com

    ReplyDelete
  88. Got the cute buttons to show! Such a helpful post!

    My only problem is that the buttons do not show on my mobile site. Is there a way to change that?

    ReplyDelete
  89. Hi Liv Kim,

    I don't see the dots you are referring to? Was it putting dots at the bottom of your blog? I've never had that happen. We definitely don't want that!

    ReplyDelete
  90. HI Elizabeth,

    The only way to get them to show on mobile is to turn off your mobile view so it shows the regular desktop view on mobiles instead. There is no way to show them on mobile view. Sorry!

    ReplyDelete
  91. Hi again! i was just wondering if there was a way to center the share buttons. thanks again!

    ReplyDelete
  92. HI Liv Kim!

    There absolutely is! Just change the line: text-align: left, to text-align: center. (that's in the tutorial btw :))

    -Corinne

    ReplyDelete
  93. thank you! this is awesome x

    ReplyDelete
  94. great i'll apply it here http://9komik.blogspot.com/

    ReplyDelete
  95. Hi! I sent a message earlier, but i just wanted to know if there was a way to change the colors of the share buttons for Blogger? Right now, they are gray, and the colors I have on my blog are #f29381 and #91b4ae , either of those colors would be great! If you could tell me how to change the color, I will. the link to my website is below if you want to check it out and whichever color looks better!

    http://wifeconfessions1.blogspot.com/

    ReplyDelete
  96. Hi Blog Decorator ! it works really well and i'm happy !
    If anyone had troubles with it, please read all of these comments first.
    And you can take a look at my blog post here, that it turns out so beautiful ! >>
    http://felicialatte.blogspot.com/2015/07/18-best-dresses-at-espys-as-your-style.html#.VatbfHJi6n0
    Have a nice day everyone.

    ReplyDelete
  97. Applied it here: http://ich-konnte-den-hund-noch-nie-leiden.blogspot.de/

    Works like a charm and looks much better than the built in version from blogger!

    ReplyDelete
  98. This comment has been removed by the author.

    ReplyDelete
  99. Hi Allie,

    To change the color you would just need to make your own new images and then swap out the original src links with your new src links for each button!

    ReplyDelete
  100. Thanks a bunch...they look really cute. Check them out http://thrillingtravel.blogspot.in/.

    Any code for adding stumbleupon here?

    Cheers

    ReplyDelete
  101. Hi! Is there anyway to center the social media buttons instead of having them aligned to the left?

    ReplyDelete
    Replies
    1. There absolutely is! Just change the line: text-align: left, to text-align: center. (that's in the tutorial btw :))

      -Corinne

      Delete
  102. I'm having trouble with the Google Plus share button for speciffic posts on my main blog scroll. My other share buttons work fine, it's just Google Plus only works from within a blog post. Any idea what might be causing it? http://www.bombvapes.co.uk/

    ReplyDelete
    Replies
    1. I honestly am not sure why it's not pulling the post. The google+ button has always pulled the post when I've tested it. When you go to the post's specific page it does share that post, but just not from the home page...grrr. Sorry I'm not more help on that one.

      Delete
  103. Love this tutorial, successfully added my customized share button to my blog whoooop!! xx
    Check it out: http://officialtashika.blogspot.co.uk/

    ReplyDelete
  104. 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 :).


    Mine is still doing this ..... HELP?

    ReplyDelete
    Replies
    1. Hi Tashika. It looks like all the buttons are working except for that darn google+. I need to look into that google+ button and update it because it was working in the past. I'll let you know when I find the solution.

      Delete
  105. I am just starting out my blog and have installed your buttons. They are simple and chic. Check this out: http://www.raisinglittlestars.com. Your tutorial is clear and simple enough for a new blogger.

    However, I notice the buttons do not appear when I assess my blog on mobile version. Did I miss out anything? How to get it up on mobile mode?

    ReplyDelete
  106. You are a life saver! Thank you so much lovely :) x

    http://www.isabellouisebeauty.com/

    ReplyDelete
  107. Thank you so much for this, very helpful!

    Maggie May xx

    secretlifeofmaggiemay.blogspot.com

    ReplyDelete
  108. Fantastic tutorial thank you so much!

    ReplyDelete
  109. Just the help I wanted and it worked like a charm, i.e., no hitches at all. Thank you so much!

    ReplyDelete
  110. Hello Blog Decorator! I know I'm late, but there is a way to have to icons show on your mobile template you have to add the code two time. If you have two instances of class='post-footer'> then add the code under both. I don't know if it works for other blog templates but for me it did

    ReplyDelete
    Replies
    1. Total awesomeness! I've tried this, but never had it work. I'm glad to hear it works on some designs. Definitely worth trying.

      Delete
  111. it worked to my blog http://jobslatest14.blogspot.com/

    ReplyDelete
  112. Hi, I don't think anyone has commented this yet, but when I view my site on mobile, the buttons are HUMONGOUS! How do I fix this? Here's my blog for reference: www.thejinxedgoblet.com

    ReplyDelete
    Replies
    1. Oh My! That doesn't look pretty. It's something with your formatting for your post footer. It's hard to say now that the buttons aren't there, but I would look at your post-footer html.

      Delete
  113. Great information, thanks so much. I am a neophyte. Can you please tell me how to remove the gray box around the entire widget/gadget or to make the background color match my blog's background? Thanks, again.

    ReplyDelete
    Replies
    1. It has to do with a border automatically being put around all images. Remove the border code, and it will remove the border. Or there is a trick to remove it specifically from the buttons. Check out this tutorial (http://www.southernspeakers.net/2011/08/removing-border-and-shadow-from-blogger.html) to guide you.

      Delete
  114. Thank you very much for the code!

    ReplyDelete
  115. Thank you ever so much. This works very well.

    ReplyDelete
  116. Just wanted to say thank you! Gradually getting more used to HTML stuff so seeing posts that make it so straightforward and do exactly what you want is just amazing. (And it actually works!!)
    When the time comes for me to update my blog and customize it more, you will definitely be my first stop :-)

    ReplyDelete
    Replies
    1. Hooray! That sounds wonderful. We would be love to work with you!

      Delete
  117. I've searched a tutorial about this like a milion times and yours was the only one that worked. Thx a lot *-*
    Hugs from Brazil =D

    ReplyDelete
    Replies
    1. That's so awesome! I'm glad you finally found us!

      Delete
  118. Hi, those icons are very pretty! I have no trouble adding them up on my blog, but the links won't work! What could be the problem?

    ReplyDelete
  119. This comment has been removed by the author.

    ReplyDelete
  120. Hi, thank you for the tutorial, I have a major issue though, only your FB and Twitter buttons are working at the moment in my blog. Here is a link: http://julietdiadem.blogspot.in/ There definitely, seems to be an issue.

    ReplyDelete
    Replies
    1. Hi There! I check out your blog and they are all working on my end. It could be something to do with your browser's pop-up settings.

      Delete
  121. After hours and hours of struggling to get the Blogger Share buttons to work in exactly the way I need them to, your tutorial helped me fix it.

    Thank you ever so much.

    ReplyDelete
  122. hey! I was wondering how to remove the automatic borders please?
    Everything else worked great thanks so much! :)
    Also, can you change the font of Share This Post? I know how to use custom fonts with google fonts, but where in the code would I put those fonts?

    ReplyDelete
    Replies
    1. Hi There! The border is coming from your template code. Probably from your post border settings. If you can find that code and remove it, that is the easiest way to get the border to disappear. You can change the font by updating your post-footer font code as well. Or making an image for it instead. Then you can use any font you want. I hope that helps!

      Delete
    2. Sorry for asking so much but I can't find the code to change the font, could you help me thanks!

      Delete
  123. Thank You A Lot .....Keep It Up :)

    ReplyDelete
  124. Thank you for these attractive buttons! I did not like the share buttons but know I require them. This is a huge mode to show them. You are so remarkable!

    ReplyDelete
  125. This is great. But i has a problem with it. After i applied this code to my blog, then i realize there's a strange code right next to my URL on every single post in my blog. But when i deleted your template from my blog, the strange code has gone. There's something to do with your code that cause the strange code that exist in the URL after applied it in the blog. So i do not applied this code in my blog coz it was bother me so much to have a strange code at my blog URL. After all, it is a very attractive template i would say. It will be better if the strange code doesn't appear in the URL or else i will be applying this template in my blog.

    ReplyDelete
    Replies
    1. I am so sorry Zharif. I thought I had fixed this problem. Thank you so much for bringing it to my attention. Luckily, it is a super easy fix! In the code, do a a search for the word "true" and change it to "false". This will remove that weird code! Yay! Problem solved. I will update it in the tutorial right away.

      Delete
  126. This was an awesome and really amazing tutorial. Thanks so much. Worked like a complete charm. I love that these buttons go with everything!
    http://www.xoxorebecca.com

    ReplyDelete
  127. I did everything right, the buttons are place perfectly, but when I click on them (from the post preview at my homepage) they share the actual homepage instead of the post. Any way to fix this?

    ReplyDelete
    Replies
    1. http://tissylicious.blogspot.com

      Delete
    2. Hi Fanny, I am finding out that on some browsers it decides to not share the actual post, while on some it works perfectly. For example, when I go to your page and test them out, it works perfectly. Sorry, I'm not sure why or how to resolve it. The only sure fire way to share the exact post is to go to the post's actual page (like when you click on the posts title). That will work every time.

      Delete
  128. Thanks for sharing, really need this tutorial to make my blog prettier.. :")

    ReplyDelete
  129. TFS
    Visit US - http://anytipsntricks.blogspot.com/

    ReplyDelete
  130. Thanks for sharing! It worked for me.
    Check it out http://www.fullscoops.net/

    ReplyDelete
    Replies
    1. Update - although I loved these icons, there's a strange, long code that appears right next to my URL on every single post in my blog. But when i deleted your codes from my template, the strange code has gone. So I have removed these codes. Disappointed as the share buttons looked so pretty!

      Delete
    2. Hi Beulah, another commenter brought this to my attention as well. I am so sorry. I thought I had fixed it already. Luckily, it is a super easy fix! In the code, do a search for the word "true" and change it to "false". This will remove that weird code! Yay! Problem solved. I will update it in the tutorial right away.

      Delete
  131. Great tutorial and thanks for sharing. However it didn't work when I placed the code directly after said part. I had placed it just above it and it worked.
    http://www.tanishalynne.com

    ReplyDelete
    Replies
    1. Hi Tanisha,

      Thanks for sharing. I'm glad you were able to keep experimenting to get it to work! Everyone's blog is a bit different so sometimes it requires some extra trial and error. Enjoy!

      Delete
  132. Great tutorial and thanks for sharing. However it didn't work when I placed the code directly after said part. I had placed it just above it and it worked.
    http://www.tanishalynne.com

    ReplyDelete
  133. This was great. How can I add a break before the code so I have some extra space between my post and the buttons?

    ReplyDelete
    Replies
    1. adding a simple line break tag will do it! Add as many as you like until you like the look. like this: br/ with < and > at the beginning and end. (the comments wont let me put in the code. It just makes a line break for me when I do :))

      Delete
  134. I needed this as a new blog owner

    http://games-gameworld.blogspot.com

    ReplyDelete
  135. Hi! I'm not sure if anyone still replies to this or not, but it isn't working for me. I paste it in different places, and so the buttons do show up on preview mode. However after I save it, and then view my blog they don't show up. The show buttons box is unchecked.

    ReplyDelete
    Replies
    1. Hi Joey,

      Yes, I still reply. Sometimes it's hard to keep up with the comments but I stay updated on it when I can. I'm sorry to hear they are not working. Did you try the troubleshooting tips in the post? If so, send me a link to your blog and I can take a look at it as well if you want to give it a try again.

      Delete
  136. Yes I finally got this to work after leaving it and coming back to it with fresh eyes!!! Sometimes when you're working to hard on a bunch of projects at once you have to come back another day to work on it and I did it correctly this time! Ugh! Thanks so much for this tutorial!

    ReplyDelete
  137. I could not get this to work, so I went back into blog edit to click for the original share icons. I am not sure what has happened, but my original share icons are no longer showing up either. Please help!

    ReplyDelete
    Replies
    1. Hooray! Way to be diligent. I"m glad you were able to solve the problem. It's reasons like this that it is always a good idea to backup your original code before doing edits. That way it's not too stressful if something weird happens. Enjoy the buttons!

      Delete
    2. I thought I would mention (maybe it is working fine for other blogs). The following share icons are recognizing the individual post url when sharing directly from the main page: facebook, twitter, pinterest, tumblr. However, google+ and email are not. These two share icons only share the main url web address, when sharing a particular post directly from the main page. I hope this makes sense?(my blog in case you need to check: http://www.thevisionaryspace.com/)

      Delete
  138. thanxxx...works for me.

    www.techmash.in

    ReplyDelete
  139. it works for me, I appreciate if you tell me the code for google plus also (I sent you an email), thank you very much!
    http://eikones-kai-psithyroi.blogspot.gr/

    ReplyDelete
  140. This comment has been removed by the author.

    ReplyDelete
  141. hello, it worked for me but i want to remove it from certain pages, please help

    ReplyDelete
    Replies
    1. Hi Egunleti,

      There is a section on how to do this in the post. Visit this site: http://www.codeitpretty.com/2013/11/how-to-show-and-hide-blogger-sidebar.html. Skip to the part about inserting conditional tags. There are a couple of different options for where you can get them to display/not display. Good luck!

      Delete
  142. Hello, Thank you for taking the time to write this post. I installed the code and the buttons show and work correctly while on a pc, but not on the mobile view when looking at if from an idevice. Did I do something wrong?
    Thank you for the help,
    Elizabeth
    http://www.easybreezylife.com/

    ReplyDelete
    Replies
    1. Hi Elizabeth,

      If you turn your mobile view off and select to display the desktop view on mobile, the buttons should show. They will not show if it is set to mobile responsive most of the time however. I have heard one instance where the blogger added the code to both occurences of the post-footer code and the buttons showing on mobile, but that does not prove true across the board. it is worth a try though!

      Delete
  143. Hello!
    Thank you for this awsome tutorial. It worked perfectly but I cant seem to figure out how to remove them buttons from certain pages. Ive looked through the instrutions you have linked and I know more or less what I need to do but I cant seem to find the widget ID to add the tags. Ive spent days trying to figure it out and looked for ways to find out what the ID is but it's not written in the code? Id appreciate it if you could help me with that. Thank you!

    ReplyDelete
    Replies
    1. Hi Kreete,

      yes, that tutorial is just a guide to lead you in the right direction, you are right, it isn't exactly what you need to do. Sorry! Maybe I will add a tutorial of my own on how to do it for this. Since you are adding it straight into your code, it won't be in a widget or have a widget ID. So you need to add it directly into the code itself. so for example, if you want the buttons to only show on the post pages, you can insert the conditional tag for that (found in the tutorial I linked to) right after the "add this button begin" part of the code, and the ending tag right before the "add this button end" part of the code. That should do it! Let me know if you run into any problems.

      Delete
  144. This comment has been removed by the author.

    ReplyDelete
  145. Hi Tiana,

    is there a way to make those buttons visible on mobile sites? i meant on mobile version of a blogger?

    Thanks

    ReplyDelete
    Replies
    1. Some have had success getting it to show on mobile view by adding it to the first AND second occurrence of the post-footer code. Other than that it will only show on desktop view.

      Delete
  146. Hello,
    I've just added this to my blog, and I am surprised it works directly just by following the direction you made. Thank you for sharing, it is really useful! ^^

    ReplyDelete
  147. Thank you!!!!! The tutorial was spot on and so easy to use!

    ReplyDelete
  148. Hi I really like it! How can I change the color? And later I would like to change the lettering so I would have to make my own image right? how do you add it?

    Thanks :))

    ReplyDelete
    Replies
    1. Hi Fabio. Yes, to change the color or lettering you can make your own images. You can do this by uploading your own images to a photo hosting site (photobucket, or even just through a blogger post), grabbing the direct link, and replacing the current image links with your new custom ones. Enjoy!

      Delete
  149. Hello. I love this tutorial! It works perfectly with my blog! I was wondering how I could add my twitter @mention to it so it would be in the tweet and if there was a way to add a custom hover color.
    In another unrelated question do you have a tutorial for social media icons? I was using pow.r plugins and it was cute and worked well with my blog but now they added ads to the free version so I had to remove the plugin as I don't want their ads on my blog. I would love to have something like the buttons here. With YouTube, Twitter, Instagram, Tumblr, Facebook, Pinterest, and Bloglovin'. Right now I just have them in a link list on my blog and it looks rather unprofessional. Thanks for the help!

    ReplyDelete
    Replies
    1. Hi Cassie! I'm so glad you like it! I'm not aware of any way to add your twitter or give it a custom hover color. I would be happy to design some matching social media icons for you! They are $10 and include design and installation. I can even do a custom hover color on those if you would like. You can purchase two "client Customizations" (found here: http://shop.theblogdecorator.com/product/client-customizations) if you would like to go ahead and do that!

      Delete
  150. Hi Tiana, thank you for this very clear and helpful tutorial. I've managed to install the social media sharing buttons I want into my blog footer, but I'd like them to appear on the same line as the comment link. I've tried going through the advice you gave Anne in an earlier comment and even tried the code in various places in the footer HTML without any success. Would you have any ideas about what I am doing wrong? I can be found at: www.papermoonliving.blogspot.co.nz. Ultimately, I would like to have the comment link and social media buttons change colour when the mouse is hovered over them and for them to be centre-aligned. Any advice about this would be appreciated. Thanks for your time.

    ReplyDelete
  151. Will it show on mobile? I don't seem to find it!

    ReplyDelete

 

Facebook Fans

Connect with Us

Search Away

Get Our Button

THE BLOG DECORATOR

Subscribe by Email