Phalia Software LAB
  • Home
  • Features
  • _Multi DropDown
  • __DropDown 1
  • __DropDown 2
  • __DropDown 3
  • _ShortCodes
  • _SiteMap
  • _Error Page
Bloger Trails

Add Professional Social Media Widget in Blogger

Mirza Bilal Arif
by Mirza Bilal Arif
8:52 PM

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.
Bloger Trails blogger Blogger Templates Blogger Widgets
  • Newer

  • Older

Mirza Bilal Arif

Posted by Mirza Bilal Arif

He was born on September 12, 1996 (Age , 27 Years) in Dhunni Kalan. Currently, he Lives In Phalia Mandi Bahauddin with his family. It all started in 2017 when he began to make videos on the Youtube along with his friends.

You may like these posts

Post a Comment

0 Comments

Aslam-O-aliakum friend you Are Connecting With Me xThanks

Popular Posts

Tags

Recent

  • Home
  • Features
  • _DropDown Menu
  • __DropDown Menu 1
  • __DropDown Menu 2
  • _ShortCodes
  • _SiteMap
  • _Error Page
  • Mega Menu
  • Documentation
  • Video Documentation
  • Download This Template
  • Home
  • About
  • Contact

Archive

Tags

About Us Adsvistment Best Antiviruses Bloger Trails blogger Blogger Templates Blogger Widgets Chat Room Computer Tricks Convert Audio to the OGG format DMCA Policy Domain Names f Drivers How to Install Drivers Islamic Books Mobile New Software Social Share Plugins Top 10 Windows Xp Themes Tricks Videos trails Windows Activator Winrars WordPress Themes

Powered By DMCA

DMCA Policy
☺☺☺☺☺☺☺☺
☻☻☻☻☻☻☻☻

Social Widget

Created By SoraTemplates | Distributed By Blogger Templates