How to Add a Glued Fixed Flaping Social Widget in Blogger-Blogspot
Social network is very important for website. Without social network we can never promote your blog soon. With the help of social network you can get high traffic very soon.Because when you show your blog or website to people. After showing they can visit your blog. If your blogger is interested then the people will drive automatically to your blog. On social network no need any SEO or Any pay for promoting. Just share your posts. In this social media is most using for updation him self form occurrence around you.
Now i carry for you a
glued fixed flaping Social widget in blogger.this is very stylish widget. This widget will make your blogger more attractive and most responsive. Now i will show How to Add a Glued Fixed Flaping Widget in Blogger .I have given some css code in this post add it for Glued fixed flaping social widget in blogger.
Follow these steps to Add a Glued Fixed Flaping social Widget in Blogger.
- Now i m going to show you some easy steps to add this Code
- First of all open your blogger dashboard
- Go>Template >click on Edit HTML
- After clicking a new page will open .This is code area .Click under code area
- And press Ctrl + F from your keyboard .A small search box will open .
- Now copy the below <b:skin> and past it in blogger search box and press enter to find the tag.
- After Finding this tag.
- Copy the below code and past upper /Above/before the <b:skin> tag .and click on
- Save Template .
]]></b:skin>
CODE # 1
ul.wgsqurflip{
position:fixed;
padding:0 0 3px 0;
bottom: 22%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
perspective: 10000px;
}
ul.wgsqurflip li{
margin:0;
display: block;
width: 25px;
height: 25px;
margin-bottom: 39px;
background: transparent;
text-transform: uppercase;
text-align: center;
}
ul.wgsqurflip li a{
display:table;
font: bold 36px Arial;
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out;
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}
ul.wgsqurflip li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
ul.wgsqurflip li a img{
border-width: 0;
vertical-align: middle;
}
ul.wgsqurflip li:hover a{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: transparent;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
ul.wgsqurflip li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
After Adding Upper Code # 1 Now Add Code # 2
- Now find </body> Tag
- And past Code #2 above /before form the tag (</body>
- And Save Template
CODE # 2
<ul class='wgsqurflip'>
<li><a href='https://www.facebook.com/#'><span><img src='http://1.bp.blogspot.com/-QNjU7EuYWSY/U3zimEKVtFI/AAAAAAAAERM/LVXokaVW_Eg/s1600/facebook.png'/></span></a></li>
<li><a href='http://www.twitter.com/#'><span><img src='http://3.bp.blogspot.com/-8Vffl9w_qBA/U3zioQ0tjHI/AAAAAAAAERo/rmE_WFsLssM/s1600/twitter.png'/></span></a></li>
<li><a href='https://plus.google.com/b/#'><span><img src='http://4.bp.blogspot.com/-ZMIdv_IxQlw/U3zimfqx9GI/AAAAAAAAERQ/xzB1yFyp0jE/s1600/googleplus.png'/></span></a></li>
<li><a href='http://feeds.feedburner.com/#'><span><img src='http://4.bp.blogspot.com/-ZVuhm2wRtnY/U3zioPrWl4I/AAAAAAAAERk/1njD2YSEzA8/s1600/rss.png'/></span></a></li>
<li><a href='http://www.youtube.com/#'><span><img src='http://4.bp.blogspot.com/-_CT4jELC91g/U3zio7xqBlI/AAAAAAAAER0/ZXWbhvsxG8s/s1600/youtube.png'/></span></a></li></ul>
Customization in Glued Fixed Flaping Social widget in blogger
- Replace # with you social Username Or ID'S.
Final Words !
Thank you for following us if you face any problem in this post How to Add a Glued Fixed Flaping Social Widget in Blogger or another problem related with blogger .Then
Contact us or comment us .We will solve your problem as soon as soon is possible. this is satisfied Website .From here you can get all hints tips and tricks for your blogger.
- Is this is tutorial is helpful ?
- Need to know your opinion .
- For Advertising Contact Us.
- Admin Moqaddar khan salgary
0 comments: