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.
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'> <ul> <li> <a class='entypo-twitter' href='https://twitter.com/LatestTipTricks' target='_blank'> <span>Twitter</span> </a> </li> <li> <a class='entypo-gplus'https://plus.google.com/+LatesttipsandtricksTutorials' target='_blank'> <span>google+</span> </a> </li> <li> <a class='entypo-tumblr' href='http://www.tumblr.net' target='_blank'> <span>tumblr</span> </a> </li><li> <a class='entypo-facebook' href='https://www.facebook.com/pages/Tips-And-Tricks/570662356389204' target='_blank'> <span>facebook</span> </a> </li> <li> <a class='entypo-rss'
'http://feeds.feedburner.com/LatestTipsAndTricksTutorials' target='_blank'>
</a> </li> </ul> </div><style type='text/css'>/*<![CDATA[*/@charset "utf-8";/* CSS Document *//* ---------- ENTYPO ---------- *//* ---------- Latest Tips and Tricks : http://www.allappslab.blogspot.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; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 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; }/*]]>*/</style>
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
0 Comments
Aslam-O-aliakum friend you Are Connecting With Me xThanks