21 September 2014

, ,

Add Professional Social Media Widget in Blogger

How to Add Professional Social Media Widget in Blogger

As we Know Social Media is Very Important to Make your Blog Popular and Trusted and With Social Media site you Get Huge Traffic On your Blog So Today in This Tutorial i will Share you How to Add Professional Social Media Widget in Blogger Blog This Widget is Fully Professional and Beautiful.

Also Read:
Top Five Tips to Write Perfect Blog Post

Add Professional Social Media Widget in Blogger

Step (1) Go to Blogger.com and then Sign in your Account.

Step (2) Then Go to Layout and Then Click on Add Gadget.

Step (3) Now Add Html/JavaScript

Step (4) Now Copy The Below Code and Paste in Content Field

<div id='social-sidebar'>
<a class='entypo-twitter' href='https://twitter.com/LatestTipTricks' target='_blank'>
<a class='entypo-gplus' href='https://plus.google.com/+LatesttipsandtricksTutorials' target='_blank'>
<a class='entypo-tumblr' href='http://www.tumblr.net' target='_blank'>
<a class='entypo-facebook' href='https://www.facebook.com/pages/Tips-And-Tricks/570662356389204' target='_blank'>
<a class='entypo-rss' href='http://feeds.feedburner.com/LatestTipsAndTricksTutorials' target='_blank'>

<style type='text/css'>
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Latest Tips and Tricks : http://www.Latesttipsandtricks.com/---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }

Now Change The Orange Address with Your Social Media Address.

Step (5) Now click on Save.

Congrats You are Done And Please Don,t Forget to Like us on Facebook and Google Plus.


Post a Comment

Give your Thoughts about this Post in Comments.

Top Ad 728x90