Showing posts with label Bookmarking Gadgets. Show all posts
Showing posts with label Bookmarking Gadgets. Show all posts

How to Add CSS3 Spinning Social Media Icons to Blogger

Today i will tell you how to add cool CSS3 spinning social media icons in Blogger with cool spinning hover effect. These icons spin around 360 degree when we hover our mouse cursor over them.
superb-spinning-social-media-icons-for-blogger 


View Demo Button

How to Add CSS3 Spinning Social Media Icons

  • Go to Blogger.com.
  • Login to your Blogger Dashboard.
  • Then navigate to Template (Design in old interface) –> Edit HTML.
  • Tick the Expand Widgets Templates box.
  • Now click Ctrl + F and find for this code ]]></b:skin>.
  • Copy the below code and paste it just before the ]]></b:skin>.
  • Now all you have to do is, paste the following code just before/after it.
/* Spinning Social Media Icons by My Blogging Techniques*/

.spinning_icons a{
width:48px;
height:48px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.twitter{ background:url('http://1.bp.blogspot.com/-mxUHRwVg-0g/TzvZYtAEyrI/AAAAAAAACts/f7_QxX03c9k/s1600/twitter_32.png'); }
.digg{ background:url('http://2.bp.blogspot.com/-ooYCSeCOB5I/TzvZTy7y41I/AAAAAAAACs8/4yuBMS3tUPA/s1600/digg_32.png'); }
.email{ background:url('http://4.bp.blogspot.com/-lXL2ZEpOcDw/Tzvlb5LTRCI/AAAAAAAACuA/oQXdvFvkw-o/s1600/email_32.png'); }
.facebook{ background:url('http://3.bp.blogspot.com/-TScBRGxU9Lc/Tzvlcv90XGI/AAAAAAAACuE/chFHrMti4HA/s1600/facebook_32.png'); }
.linkedin{ background:url('http://1.bp.blogspot.com/-4NFlcfudgWg/TzvZXZcmSbI/AAAAAAAACtc/7mn2HcWX00g/s1600/linkedin_32.png'); }
.rss{ background:url('http://4.bp.blogspot.com/-F61pBeMGnlI/TzvldKuhfeI/AAAAAAAACuQ/frfzGvY6X8s/s1600/rss_32.png'); }
.stumbleupon{ background:url('http://3.bp.blogspot.com/-rPU_iNN7Wk8/TzvZYPlQLPI/AAAAAAAACtk/LT-XQiVJZpY/s1600/stumbleupon_32.png'); }
.youtube{ background:url('http://4.bp.blogspot.com/-zJVHywcJLgQ/TzvZZfljGUI/AAAAAAAACt0/jKrO2ijfC3c/s1600/youtube_32.png'); }
/* Spinning Social Media Icons by My Blogging Techniques */
  • Now find this code given below.
<div class='post-footer'>
  • Paste the below code just below the <div class='post-footer'>
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div class="spinning_icons">
<a href="YOUR-TWITTER-URL-GOES-HERE" class="twitter" title="twitter">Twitter</a>
<a href="YOUR-DIGG-URL-GOES-HERE" class="digg" title="digg">Digg</a>
<a href=”http://feedburner.google.com/fb/a/mailverify?uri=MyBloggingTechniques” class="email" title="email">Email</a>
<a href="YOUR-FACEBOOK-URL-GOES-HERE" class="facebook" title="facebook">Facebook</a>
<a href="YOUR-LINKEDIN-URL-GOES-HERE" class="linkedin" title="linkedin">Linkedin</a>
<a href="YOUR-FEED-URL-GOES-HERE" class="rss" title="rss">RSS</a>
<a href="YOUR-STUMBLEUPON-URL-GOES-HERE" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
<a href="YOUR-YOUTUBE CHANNEL-URL-GOES-HERE" class="youtube" title="youtube">YouTube</a>
</div>
</b:if>
  • Important Note : Before saving your template don’t forget to replace these with your social profile url.
  • YOUR-TWITTER-URL-GOES-HERE with your Twitter User Name.
  • YOUR-DIGG-URL-GOES-HERE with your Digg User Name.
  • MyBloggingTechniques with your feed name.
  • YOUR-FACEBOOK-URL-GOES-HERE with your Facebook Fan Page.
  • YOUR-LINKEDIN-URL-GOES-HERE with your Linked In User Name.
  • YOUR-FEED-URL-GOES-HERE with your RSS Feed User Name.
  • YOUR-STUMBLEUPON-URL-GOES-HERE with your Stumbleupon User Name.
  • YOUR-YOUTUBE CHANNEL-URL-GOES-HERE with your Youtube channel User Name.
  • Save Your Template. And refresh your page to see social profile icons dancing on your site.
If you like this then please subscribe to Our feeds and Like us on Facebook for Future Updates. Thank you.

How To Insert "Add This" Sharing Buttons To Blogger

Social bookmarking gadgets are the main source for blog’s traffic, when your visit your blog and they find your post interesting they share it with their friends/their in their social networking sites. Let your blog visitors share your blog contents easily with other popular website such as Facebook, Twitter, Google +, Technorati etc. They can also simply bookmark your blog, print or E-mail to his/her friends or family.
addthis-wallpaer-with-social-icon-set
ADD This is one of the world’s most popular social sharing and bookmarking tool, and millions of websites are using this tool to drive traffic from their visitors. This tool also allows you a numeric counter to see how many times share or bookmark your site till now.
 

How to insert AddThis Social Sharing Button to Blogger

add-this-button-style
  • Click Get Add This
  • Now copy the code from the box, the code looks like this...
addthis-sharing-code-example
  • Now login to Blogger Dashboard
  • Click on your blog title
  • Click Template –> Edit HTML –> Proceed
  • Click "Expand Widget Templates"
  • Search for <data:post.body/> by pressing Ctrl+F
  • Now paste AddThis Code just below <data:post.body/>
  • Click Save Template
  • Reload your blog page and see the AddThis buttons are appearing after your post in every page of your blog.
That’s all. If you have any problem or need to customize it please ask us friendly. We’ll try to serve you best.
Proudly powered by Blogger