Tuesday, July 10, 2012

Slide Out Open Heart Bookmarking Gadget To Blogger


Share this team has already added a new excellent slide out open heart bookmarking widget as a Valentine gift from them. The widget comes with love heart with the slide out effects and when you mouse place on the heart it splits and opens several bookmarking buttons like Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and many more bookmarking choices. This awesome widget/gadget comes with fixed position mostly at the left corner the page to amuse your readers and encourage them to share your articles easily.



Open Heart Bookmarking Gadget


Please just view the demo. I am sure you will be pleased after watching demo


View Demo


  • Go to Blogger Dashboard → Design → Edit HTML tab





  • Backup your tempalte





  • Find the following code using F3





  • </head>

  • Now copy and paste the following code just before/above </head>

    <!-- Start Heart Bookmarking Gadget Code From http://www.edutechnology.net/ -->
    <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: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, 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.edutechnology.net/ -->

  • Now the following the code





  • </body>

    And copy and paste the following code just before </body>

    <!-- Start Heart Share Code From http://www.edutechnology.net/ -->
    <div style='position: fixed; bottom: 2%; left: 2%;'>
    <div class='shareEgg' id='shareThisShareHeart'/>
    </div>
    <script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://www.edutechnology.net/">Technology Blog</a>
    <!-- End Heart Share Code From http://www.edutechnology.net/ -->

  • Save the template and done :)





  • The widget is generally placed at the bottom right corner of the webpage but you can place it at the TOP right or TOP left corner.

    Bottom to Top: If you want to place the heartfall at the Top corner of the page then simple change bottom: 2%; to top: 2%;

    Left to Right: If you want to place the button at the Right corner of the page then simple change left: 2% to right: 2%

    Enjoyed the article ? Please share if so. Thank for reading

    0 comments:

    Click Here To add Comment