Hello Friends, It is one more Social widget for blogger. Now I am Directly come to How can you use in blogger?
How to Add Follow Me social Widget to blogger?
- Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML)
- Find
Ctrl +F for the code below
]]></b:skin>
- Just above that paste the following code.
#buttoncb ul {margin:10px 15px;padding:0px;}Now Add Html Code by widget or in templates where want to show widget.
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiix9_HVmDU1k7Jl34fD2w9cO7E3FH04zNtugh_iCBDwhOJY9zPdpO0B_gW9xMDLw3MbDbnn8cxrLNqM3Sdy0MXsXtFoImlVv7zjE8XNI9WrjItEtd4mNbz5BmsdTod5QPj-gSZnqYQdpg/s1600/blsocial12.png') 0 0 no-repeat; height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #A00;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb { background-position: 0 -384px;}
#buttoncb a.twiter { background-position: 0 -432px;}
#buttoncb a.google { background-position: 0 -480px;}
#buttoncb a.pint { background-position: 0 -528px;}
#buttoncb a.linkedin { background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube { background-position: 0 -672px;}
#buttoncb a.rss { background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover { background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover { background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover { background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover { background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover { background-position: 0 -288px;color: #A00;}
#buttoncb a.rss:hover { background-position: 0 -336px;color: #EC5601;}
- Go to Blogger Dashboard > Layout
- Click on Add a Gadget (below header)
- Select HTML/JavaScript
- Copy below code and paste inside it.
<div id="buttoncb">
<ul>
<li ><a href="#" class="icon fb" ><span>Facebook</span></a></li>
<li ><a href="#" class="icon twiter" ><span>Twitter</span></a></li>
<li ><a href="#" class="icon google" ><span>Google+</span></a></li>
<li ><a href="#" class="icon pint" ><span>Pinterest</span></a></li>
<li ><a href="#" class="icon linkedin" ><span>LinkedIn</span></a></li>
<li ><a href="#" class="icon devart" ><span>DeviantArt</span></a></li>
<li ><a href="#" class="icon ytube" ><span>Youtube</span></a></li>
<li ><a href="#" class="icon rss" ><span>RSS</span></a></li>
</ul>
</div>
Replace # with your respective social networking URLs
and save it.
I hope you like this beautiful social widget for blogger, If you still have any problem please share it by using a comment, Thanks.
0 comments:
Post a Comment