Posted : Wednesday, March 07, 2012 | Post Author : Paul Crowe | 77 comments
In this post i want to show you a cool new way to have visitors sharing your blog posts.Share This has always been my Bookmark tool of choice and recently they added a cool new interactive Bookmarking gadget.The gadget in question is a love heart with the share this logo and on hover the heart splits to reveal a selection of bookmarking buttons.It looks awesome and the slide effect is very cool while still being practical.When the heart opens it reveals icons for Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and the Share This Icon Offers hundreds more bookmarking choices.I think this gadget fixed in the corner of the page on your blog will grab the attention of visitors and generate lots more shares.So below is a tutorial showing you just how to do that, first check out the live demo.
Add The Split Heart Bookmarking Gadget Top Your Blog
Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template
Step 1. In Your Blogger Dashboard Click Design > Edit Html
Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)
- </head>
Step 3. Copy and Paste the following code Directly Above / Before </head>
<!-- Start Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->
Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)
- </body>
Step 5. Now Copy And Paste This Code Directly Above / Before </body>
<!-- Start Heart Share Code From http://www.spiceupyourblog.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.spiceupyourblog.com/">Blogger WordPress Gadgets</a>
<!-- End Heart Share Code From http://www.spiceupyourblog.com/ -->
Important, Move The Position Of The Gadget :
The Gadget is currently set to be in the bottom right corner of your blog but you can easily change this.In yellow above you can see bottom: 2%; left: 2%;.You can change Bottom to top for it to be at the top of the page and left to right for it to be on the right of the page.You can also change the percentages to have it further from the bottom/top and left/right.
Step 6. Save Your Template.
That’s it the gadget has been added to your blog.Make sure to check out more of our Blog Gadgets and Social Bookmarking Gadgets.
77 comments:
Cool paul, let me try that…
ReplyDelete
Replies
Thanks Ayoola, If you have already added this there was an error in step 5.Change the code from step 5 you added earlier with the updated code there now..
Delete
Okay.
Delete
this gadget is not working properly …… i put it to my blog http://governmentandpvtnaukri.blogspot.in/ but when i press this share button its take me anothe site …its not sharing my blog or post
ReplyDelete
Replies
nitindwiveddi – Thanks for the heads up, i had forgot to make a change to the code in step 5.It’s updated now so replace the code from step 5 earlier with th code in step 5 now..
Delete
thanks now its working
Delete
It works great, nice and easy to install too
http://sylviacookphotography-seniors.blogspot.com/
ReplyDelete
Very cute 🙂
ReplyDelete
wonderful!
ReplyDelete
you are the best. luv this post.
ReplyDelete
so amazing ^^~
thank you 😀
ReplyDelete
Great gadget thanks
ReplyDelete
I can’t able to find this code: < slash body >
ReplyDelete
Replies
The closing body tag is in every site on the web, if you cant find it with the search bar you can try to manually fint it.It will be near the bottom of your template code..
Delete
how can i add that coding area (where you write the codes, that black area) in my blog.
Tell me I needs it.
Delete
First Tick to Expand Widget Templates
Delete
The pin it button does not work!
ReplyDelete
Replies
Hi Sue, I see that on the demo, it is not picking up an image.You can remove the pinterest button by removing this code from step 5 – ‘pinterest’,
Delete
the best blog theere is and there will beeeeeeeeee www.gadgetfiles.tk
ReplyDelete
Hi. This is cute. Do I need to replace your blog name/url with mine in the code?
ReplyDelete
This Was a great Tutorial! Easy to follow *I am a newbie, and I had no troubles at all* Thanks!
ReplyDelete
Its So Co0o0o0l I like it…
ReplyDelete
Thanks for this blog 🙂 One of my blog’s background turned to white and it is not looking good now. I tried correcting it by edit htlm option but I was unable to do so. Please help. Thanks in advance and if you need my blog’s address then please ask:)
ReplyDelete
its good job dude,thanx very much!!!!!!!!!!
ReplyDelete
That’s simply awesome!
Buddy, I’ve shared this gadget with my readers at
http://www.mybloggertips.com/2012/03/slide-open-heart-bookmarking-gadget-for.html
I gave you full credits. 🙂
Cheers!
ReplyDelete
Not sure if my question was received before…can you tell me if this works with Dynamic Views templates? Thank YOU!
ReplyDelete
oops i did as you told but i got an ovel shape widget http://www.colombozone.com/ What do i have to do now?
ReplyDelete
Replies
The ovel shape is another theme for this gadget but I’m not sure why you are getting this not the heart.Try removing the code and adding it again..
Delete
Yahoo! Thanks Paul IT Worked
Delete
Hey Paul,
this is great, but I was wondering is there a way to add the heart at the end bottom of each post?
ReplyDelete
Hi, Paul I tried a lot but I have get a Round Ball Shape not the heart shape. Please tell me what to do.
ReplyDelete
This gadget makes my blog very very fast from 3.80 s to 10.96s
Thanks very beatiful but no..
ReplyDelete
Awesome Widget Can We Replace Heart With Any Other Image ??
ReplyDelete
nice
ReplyDelete
Hi Paul. A couple of days back, I was Googling for new gadgets & widgets. But didn’t know really how to edit the template. But your instructions were so fantastic that I successfully installed it……most important, I have learnt the process of editing html. Thanks a ton. Great work.
My blog address is http://thirstydesires.blogspot.in/
ReplyDelete
Love this, works great!
ReplyDelete
Hi paul, I Need A Random Post Widget Like 2 rows*2 coloumns(Like LinkWithin)…I cannot Find these type of widget On The Web …Please Make This Widget For Me If Possible….Thankyou…
ReplyDelete
Looks great, thank you!
I only have the problem that it kinda disappears beyond the post background. I have this problem with every gadget that is static, like back to top buttons and so on. And i just cant figure out what I have to change.
ReplyDelete
demo is really very good , i will try it soon as possible
ReplyDelete
This is great!
ReplyDelete
Is there a way to put this one every post and not just the homepage?
ReplyDelete
Is there a way to change the color of the heart to pink?
ReplyDelete
Replies
Rachel, you could if you went into the javascript but that’s a lot of work 🙁
Delete
this is awsome widget for my blog
ReplyDelete
Hi Paul, thank you for the widget. I installed it on my blog and also shared this with my readers. I gave you full credit and you can see it at
http://www.craftymeldesigns.com/2012/03/slideout-heart-bookmarking-gadget.html
Thanks again,
Melissa
ReplyDelete
Replies
Glad you liked it Mel and thanks for sharing 🙂
Delete
Just appear at homepage? How about inside posts?
ReplyDelete
Replies
This gadget is set to appear on all pages..
Delete
OMG thank uuuuu!!! i love this widget!
ReplyDelete
Cool Widget… I really love it… Will leave it on my blog permanently 😉
http://the-dirt-farmer.blogspot.com/
ReplyDelete
this is to good but donot use hart
use egg
ReplyDelete
how do i link my interest page and Facebook home page to open up when icons are clicked?
Thanks
ReplyDelete
Is there a way to fix this so that pinterest is showing images when clicked, rather than just removing the button altogether?
ReplyDelete
like this widget, but why use egg instead of heart 🙁
ReplyDelete
I just found your site and i added the widget, it”s really cool.
ReplyDelete
Thanks Paul IT Worked
ReplyDelete
Thank You Man. Worked :*
ReplyDelete
Hello, I followed these directions today and ended up with the egg not the heart. What do I need to do to change it? Otherwise this is really good. Thanks
ReplyDelete
I follow the instructions but my Heart isn’t visible..can you help me?
ReplyDelete
Nice…
ReplyDelete
Its great, I already installed this slide on to my blog (Techmero.com Thankyou for this great coding
ReplyDelete
Not too many peoples’ codes work, but yours does and it is easy, easy! I want more!
ReplyDelete
thanks for the widget..loved it.:)
ReplyDelete
Indeed A Cool Plugin !
I’m Really Going To Apply It On My Blog knowrapid.com …
Great Post !!
ReplyDelete
Thanks so much for this!! I’m not at all good with this kinda stuff but your steps make it so easy!! I’m loving your site right now!!!
ReplyDelete
i need a heart pic now showing the egg pic
ReplyDelete
hey i m try but no display heart….
other rectangle ovil cricle shape.. pls reply
mailformesiva@gmail.com
ReplyDelete
hello paul i placed the code successfully on my blog http://chinizle.blogspot.com but after a while the gadget became transparent and now appears as two rectangular boxes that have made my blog look ugly. please how can i remove the sliding heart?
thanks.
ReplyDelete
Replies
Not sure why you had that problem but I checked your blog and I see you managed to remove th code.
Delete
Tried to add this but can’t seem to get it to work. Probably just me being dim.
ReplyDelete
Hey! Great widget for blogger i must say! Thank a lot! Q: How can i change the heart’s colour? Is there any chance of changing the heart’s opening? maybe downside ?! Thanks for your help!
ReplyDelete
Cool Paul, let me try that…Great widget for blogger.
ReplyDelete
hey, i added the widget,but when someone clicks on facebook for example how do i make sure they will come to my facebook page?
ReplyDelete
Hi Dude. When i was copied the Split Heart Bookmarking Gadget code in my blog it was not working. I am unable to find in my blog. I copied the above code and i paste in Template-> Edit HTML and i followed the above procedure. What is the reason? Could you plz clarify my doubt.
ReplyDelete
Hey, it was working fine for almost six months now, but for the past few days it does not. Nothing is visible except the link to your site.
I really loved it and would like to have it back. Can you look into it?
Does it have anything to do with the new blogger template interface?
@
http://musings-over-nothing.blogspot.in/
ReplyDelete
love love love egg !!
thank you !
ve may bay di ha noi
ReplyDelete
There is no head on my blog’s HTML.
ReplyDelete