 |
| Change Share Buttons to Custom |
Description of Change Blogger's Own Share Buttons to Cute Custom Images
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 about this post. Please read this tutorial with details. If you work properly with this tutorial. If you've tried everything and still can't get it to work, 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. I don't mind helping, but please respect my time by only requesting help if you have honestly tried everything else first.
 |
| Change Share Buttons to Custom |
Blogger already has the option for share buttons, I think they look ... meh. One of my Friends wanted to do something classic and customized on her site, so I looked ALL OVER online and tried to find a tutorial on it and think about what I do. I couldn't find it anywhere, which is why I decided to share my own tutorial on how I did it. I spent too long way about this, so hopefully this saves you the headache!
If you're saved with HTML, you can customize this to have your own images and match your blog colors. If you're looking for any type of solution, I have made some cute grey buttons that must match almost any blog. 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 account Dashboard, and click the Layout tab. there, you'll see the skeleton of your blog. Find the place of blog posts, at the bottom of your blog post, you'll see a link that says Edit. Click that Edit link.
 |
| Change Share Buttons to Custom |
Once you're in, you'll see a window that you configure the blog posts. One of the options is Show the Share Buttons. Make sure these buttons are NOT clicked and save. Okay. Now that the Blogger share buttons are removed/close, you can add the cute ones! Now you're going to your Template section of your blog.
How to Add Blogger's own Share Buttons to Cute Custom Images
Once you are in the HTML of your blog, Expand Widget Templates.Find the following piece of code of Pressing Ctrl + F : <div class='post-footer'> You mightfind that more than once - if so, you want the SECOND one. DIRECTLY after that code, paste the following code mention Blow :
Change Blogger's own Share Buttons to Cute Custom Images Wedget
<!-- AddThis Button BEGIN -->
<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/AVvXsEjIIHz4vub31-UYANGhESHfMcXJSSK9r7tWH_HNnsx0whmyjECIkcIIXM7hGGbl-vj9Dp1aFZSMjkDyE6vMEOQOeHPLF5ItMNYtmdVqu5-oSEBcc2VM2ThYli2-hPGx4ijgTvSxPdSqQqX-/s1600/Share+this+Post.png'/></a>
<a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjACVfzsmEJKvu6ip6nyblo0AHkg9iCBG-v40M1XLT0E5AgHKlIisNbcpZbAdhnB8wRvSCEpgS8xFagavqKSt5PkEMmkxmp-FAnS3tYGXDkOAAePZh-zibdVsYvqsuH3Wn9e2nsFcTspXW-/s1600/Facebook+Button+Share.png' width='30'/></a>
<a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC9faWoU6AaUNpqGBFoRC7pPKKHJD05RkKTytlRbgV5E4lqiAAbhOSmCazCp1pm5cwr2fHiPEb-tAjvP3gEVqhfsUqssTyR2-WYTW-r8aLrX_dX5SUiaID4D5578YUPBQ4ThL8o9Mrpmz1/s1600/Twitter+Button+Share.png' width='30'/></a>
<a class='addthis_button_email'><img alt='Email This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgN_zr6T6JMsBa4YWAI7STB3mPKV6N1qBG0SpdYW_qJPcte-M-bTknEw-klsFTJ8cH6eZ6WbI_ikvN4QyAKtukfUkzdkeorhTVMBiSVW1WmSggIMOvLGviMJwLgZIQHT4ffo8hNoyeMK5/s1600/Email+Button+Share.png' width='30'/></a>
<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ot_6fm7Tk1xgX_rYu1U0DziBcLCnQZ72zkiXIuz2yrAuM-DhZ4Z8VxlTiw4JX27OFPwHr2_Gu7Sgi_J_hVm2TYBBllA1Xtbimx0Qjm9CSedmdPihiWlIeVd7gvDBXTGrNcIjrcjfXpq2/s1600/Pinterest+Button+Share.png' width='30'/></a>
</div>
</div>
<script type='text/javascript'>var addthis_config = {"data_track_addressbar":false};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->
Video Tutorial of Change Blogger's Own Share Buttons to Cute Custom Images
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:
Like on my Facebook Page
Subscribe to me on YouTube
More Tricks and Training from Blog
No comments:
Post a Comment