Amazing Animated Social Media Widget for Blogger!

There are different types of Social Sharing and other Important widget available on internet for Blogger. I have also shared a few of them. And my personal suggestion for to use these widgets on your blogs or websites. Because social media widgets not only help you to increase your site's traffic but also help you to increase your site's Alexa Rank and Pagerank. If the widgets are little different then they can easily attract the visitors. The Social Media Widget that I am sharing today is very much different from the earlier shared widgets.

• Related Post: CSS Animated Social Share Buttons for Blogger!!!

This Social Media Widget includes 7 (seven) social media icons, these are Facebook, Twitter, Google Plus, Pinterest, LinkedIN, Youtube and RSS Feed. This is an animated social media widget, that is why it is very attractive. When you mouse hover on any media icon of this widget the color of that icon will appear behind it. Although the widget is very highly decorated but adding it to your blog/site is very easy. Because you can add this widget to your blog/site with a little customization. Let's add this Social Media Widget to Blogger. See the belo demo...


Demo--->

Adding Animated Social Media Widget to Blogger:

• First Sign Into your Blogger Account.
• Then click on Layout option and click Add a Gadget link where you want to place this widget.
• Then from the Gadgets list choose HTML/JavaScript.
• Now Copy the below code and Paste in the Content box.


<style>#WG-SWS {width: 260px;margin: 5px 20px;padding:5px;}#WG-SWS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#WG-SWS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4-sW05RN6yg_lR4JrdfPsltj7Fu_M0M52TfruBFR57G3ymhcuBMLNLsdRiFWG7t3fXXToetnAVwhguXaRKDz7EI724LpXK4UJi5DwDblpu-MjGcDbRb30LXn3kTeGsBCmqMGZrQPxivM/s1600/NBT-Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#WG-SWS span:hover {visibility: hidden;}#WG-SWS span {display: block;top: 15px;position: absolute;left: 90px;}#WG-SWS .icon {color: #fafafa;overflow: hidden;}#WG-SWS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#WG-SWS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#WG-SWS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#WG-SWS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#WG-SWS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#WG-SWS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#WG-SWS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#WG-SWS li:hover .icon {width: 250px;}#WG-SWS li:hover .icon {background-color: #d91e76;}#WG-SWS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#WG-SWS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#WG-SWS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#WG-SWS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#WG-SWS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#WG-SWS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#WG-SWS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#WG-SWS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="WG-SWS">
<li><a class="icon fb" href="http://www.facebook.com/ittimesbd">Like us on Facebook</a>Like us on Facebook </li>
<li><a class="icon twit" href="https://twitter.com/ittimesbd">Follow us on Twitter</a>Follow us on Twitter </li>
<li><a class="icon google" href="https://plus.google.com/+Ittimesbd-com">Follow us on Google+</a>Follow us on Google+ </li>
<li><a class="icon pint" href="http://www.pinterest.com/ittimesbd">Follow us on Pinterest</a>Follow us on Pinterest </li>
<li><a class="icon linked" href="http://in.linkedin.com/ittimesbd">Follow us on LinkedIn</a>Follow us on LinkedIn </li>
<li><a class="icon ytube" href="http://www.youtube.com/user/ittimesbd">Follow us on Youtube</a>Follow us on Youtube </li>
<li><a class="icon rss" href="http://feeds.feedburner.com/ittimesbd">Subscribe via RSS</a>Subscribe via RSS</li>
</ul>


• Then click on Save button to complete the addition.

Customization:

• Before saving the widget in the above code Replace ittimesbd with your Facebook, Twitter, Google Plus, Pinterest, LinkedIN, Youtube and Feedburner Username.

That's it. Now view your blog and you will see that the widget is showing your Social Media buttons.

Stay with www.iTTimebd.com for more IT related Post

CSS Animated Social Share Buttons for Blogger!!!

Social sharing buttons are those buttons of a site by which visitors can share its post on several social networking site. By default blogger has a few social sharing buttons located at the bottom of each post. But these buttons are not effective, because they are not attractive.

• Related Post: Open Heart - Social Sharing Widget for Blogger

Basically social sharing buttons becomes more effective when they are attractive. And today I am gonna share a CSS animated sharing button widget for blogger. This is a very attractive social share widget with a really  cool hover effect. This widget includes four social media icons, these are Facebook, Twitter, Google+ and Pinterest. Lets have a look at the below demo...


Demo:--->Mouse Hover

• Share t

• 

  

• his page

• 

  

Tips: Now the question is which place is the perfect place to add this widget. You can add this anywhere in your blog. But my personal recommendation is to add this widget in the Post Footer. And here I am showing how to add this widget in the Blogger post footer.


Adding CSS Animated Share Button to Blogger:

• First Log Into your Blogger Account and go to Dashboard.
• Then click on Template option and click on Edit HTML button. You will land on the HTML page.
• Here in the HTML page find ]]></b:skin> tag and Paste the following CSS code just Above it.
.share_button { width: 300px; height: 50px; margin: 10px auto; } .share_button ul { width: 50%; height: inherit; float: left; list-style: none; margin: 0 !important; padding: 0 !important; } .share_button ul h1 { margin-top: 9%; overflow: hidden; width: 100%; color: #4889F0; font-size: 18px; text-shadow:2px 2px 2px #fff; } .share_button ul li { position: absolute; height: inherit; width: 150px; margin: 0 !important; padding: 0 !important; background: #EEEEEE; -webkit-transition: all 600ms; -moz-transition: all 600ms; -o-transition: all 600ms; -ms-transition: all 600ms; transition: all 600ms; text-align: center; } .share_button ul li h2 { display: inline-block; width: 32%; height: 40px; overflow: hidden; margin-top: 5%; cursor: pointer; border: 0 !important; } .share_button ul:first-child li:first-child{ text-align: right; } .share_button ul:last-child li:first-child{ text-align: left; } .share_button ul:first-child li:last-child, .share_button:hover ul:first-child li:first-child { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -o-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); } .share_button ul:last-child li:last-child, .share_button:hover ul:last-child li:first-child { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } .share_button:hover ul:first-child li:last-child, .share_button:hover ul:last-child li:last-child { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }

• Then again find <div class='post-footer'> tag here. You may find this tag several times. But you need to Paste the following code just Above the Second one.
<div class='share_button'> <ul> <li><h1> Share t </h1> </li> <li><h2> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6qivSc5rd2rqIR_Mzt4c85leIoArlFTxuzW9YPoB0X50ZfnuKOuA4wGdmVfVJoY57VZrrVZyYqZVjJ97py5zk6cGA6lvH5SlIk162bBFukqB-_K6XellxlFQxFQFNkQxmGUoVQ_ZMAvmZ/s1600/Facebook.png"/></a></h2> <h2> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6orCb0M4YM5EiF8yqZDgJTf8qmdk7PZ1zRVgGjwhNROYhRDR3m4z_z-a9ZL4AU7jPFVDetnuMpnyEQTc5_pwiPJRanjErOwTDNPMZc7hVTQKnfcvRysjWv3ctUXHGznReR4akimkEw4q9/s1600/Twitter.png"/></a></h2> </li> </ul> <ul> <li><h1> his page</h1> </li> <li> <h2> <a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha45zJTCWZnugx0RzCOYA0dSP5paJS3T_ymVfDCZ-8czGajHUQxwWsMNjok_j_OZmFgz4Q7HQpyc4PmX094p1kQxTwolOlNCoYrcdFaA2NRpm5ftObGnkUsj0s7a-LtBFkUQxuiXFRh2WB/s1600/Google-plus.png"/></a></h2> <h2> <a href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjgXTcobnaKmOcLAQouzrTJeJqYaHW_gBQ-TnPK8VF7VLY_OlmZmgCwYhqx3R0uuxeejDZcGCnf6c5RgxeZVQHtdLG_dpzCaUpZ9TjjPohhNukGrQXmxNA1Ubr867hG_McDZCMX8NcOxwJ/s1600/Pinterest.png"/></a> </h2> </li> </ul> </div>

• Now click on Save Template button to add this widget.

That's it. Now view your blog and you will see this social sharing widget in your blog.

Stay with www.iTTimebd.com for more IT related Post

Open Heart - Social Sharing Widget for Blogger

Social Sharing widgets are very important for a site to get successful social connectivity. It can also increase your site's page views to a greater extent. There are many social sharing widgets available on internet. Some website offer free social sharing gadgets for Blogger. Sharethis.com is one of them. It launch different social sharing gadgets on different occasion. They released Open Heart sharing widget as the Valentine gift.

• Related Post: Touch Me - Social Sharing Widget for Blogger

This is one of the most attractive social sharing widget from Sharethis.com. This gadget has cool slide out effect that split the Heart icon every time when you mouse hover it. This widget includes several social sharing buttons like Facebook, Twitter, Pinterest, Linkedin, Stumbleupon, Email and many more. By default it takes place at the corner of the page. So, it can easily grab attention of the visitors and make them share your post easily.

• DEMO:--->Mouse Hover

Adding Open Heart Sharing Widget to Blogger:

• First Log Into your Blogger Account and go to Dashboard.
• Then click on Template option and click on Edit HTML button. You will land on HTML page.
  
• Here in the HTML page find </head> tag and Paste the following code just before it.
<!-- Start Open Heart Bookmarking Gadget From http://www.ittimesbd.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 Open Heart Bookmarking Gadget From http://www.ittimesbd.com/ -->

• Now again find </body> tag and Paste the following code just before it.
<!-- Start Open Heart Bookmarking Gadget From http://www.ittimesbd.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> <!-- End Open Heart Bookmarking Gadget From http://www.ittimesbd.com/ -->

• Then click on Save Template button to add the widget.

That's it. Now view your blog and you will see this social sharing widget in your blog.

Stay with www.iTTimebd.com for more IT related Post

Touch Me - Social Sharing Widget for Blogger

There are a lot of social sharing tools and services are developing day by day because of the rapid advancement of social media and the growing interest of the people on social networking sites. Website owner and bloggers are using these tools on their sites because web traffic from social media have overtaken search traffic.

A social sharing widget is more effective when it can attract the visitors. To help you to increase blog traffic by social media today I am sharing a attractive social sharing widgets from blogger named Touch Me. The name Touch Me is because as you can see in the above image that the social buttons are moving when the mouse cursor is moving over them. As a result it inspire the visitors to follow you site's social page.

Adding Touch Me Sharing Widget To Blogger:

1. First Log Into your Blogger Account and go to Dashboard.
2. Then click on Layout.
3. Now click on Add a Gadget button where you want to place this widget.
4. Then select HTML/Javascript.
5. Then Copy the below code and Paste it in the Content box.
6. Then click on Save button.

<style> /*--------Touch Me Sharing Widget ------*/ .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; -webkit-transition: ease-in 0.2s all;  -moz-transition: ease-in 0.2s all;  -o-transition: ease-in 0.2s all;  -ms-transition: ease-in 0.2s all;  transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <div class='touchme'> <!--RSS--> <a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a> <!--Google Plus--> <a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a> </div>

Customization:

• Replace YOUR RSS LINK with your Feedburner link.
• Replace YOUR GOOGLE PROFILE LINK with your Google+ URL.
• Replace YOUR FACEBOOK LINK with your Facebook URL.
• Replace YOUR TWITTER LINK with your Twitter Profile URL.

That's it. Now visit your site and you will see the widget on your site. Move your mouse cursor over these icon.

Stay with www.iTTimesbd.com for more IT related Post