Keep Stay Tune With Us widget is finally here for bloggers and this is very specially created widget for that kinds of blogs which needs a free and the professional widget for their post footer because many times we need a that kind of widget which need a perfect sociality and this kind of technology wants everyone in their own blog. This widget is made by the
Add Keep Stay Tune Widget in Blogger
Don't try to change codes because all codes are very highly sensitivity.
- Login to Blogger > Dashboard
- Click on Drop Down Menu and select Layout
- Add a HTML/JavaScript Gadget
- Paste below code in it.
<style>
#wg-stytuch{
width: 415px;
height: 80px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi47o2XzhEhiGI7kawlhQeQXsq-5MJbwvibgTQk8V9OFGUDeoUKp1w5UB8iOOOMV7XfM3UvepZ34EmjprHlcVLGqLm26v5LhqRflsYw-EGxhy3t8JWFcLkKVzip2jhPe0AQuKECv4feK4DW/s1600/Bg.png") no-repeat 15px 10px;
padding:22px 0px 15px 100px;
margin: 14px auto;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.wg-stytuchwidgt{
height: auto;
margin: 0 auto;
}
.wg-stytuchwidgt li{
float: left;
list-style: none;
}
.wg-stytuchwidgt li a {
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
margin-top: 20px;
outline: none;
position: relative;
z-index: 2;
text-indent: -9000px;
text-decoration: none;
}
.wg-stytuchwidgt li .facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat;
}
.wg-stytuchwidgt li .twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat 0px -45px;
}
.wg-stytuchwidgt li .gplus {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat 0px -90px;
}
.wg-stytuchwidgt li .pinterest {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat 0px -135px;
}
.wg-stytuchwidgt li .rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat 0px -180px;
}
.wg-stytuchwidgt li .linkedin {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat 0px -225px;
}
.wg-stytuchwidgt li .tumblr {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat 0px -270px;
}
.wg-stytuchwidgt li .youtube {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat 0px -315px;
}
.wg-stytuchwidgt li .mail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-R18IfYSj_x4DtkgkhVOY9sB-XkgiyrylAT_tlHWsZlWEbnxh4VrvgsBUBOmpQ904nxXmJWzjKS0ch5WY-yFWko4xfDUMiVWs6pZONguEUUvoJfjUoyBWCb8jzI0EVIIsFy81jRsyySwj/s1600/wg-keep-stytune.png") no-repeat 0px -360px;
}
.wg-stytuchwidgt li a span {
width: 80px;
height: 20px;
line-height: 20px;
padding: 5px;
left: 50%;
margin-left: -52px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #446cb3;
background: #446cb3;
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 5%;
opacity: 0;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
-moz-transform: translate(35px) rotate(25deg) scale(1.5);
-o-transform: translate(35px) rotate(25deg) scale(1.5);
-ms-transform: translate(35px) rotate(25deg) scale(1.5);
transform: translate(35px) rotate(25deg) scale(1.5);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.wg-stytuchwidgt li a span:before,
.wg-stytuchwidgt li a span:after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 11px solid rgba(0,0,0,0.1);
}
.wg-stytuchwidgt li a span:after {
bottom: -15px;
margin-top: 6px;
margin-left: -12px;
border-top: 10px solid #446cb3;
}
.wg-stytuchwidgt li a:hover span {
opacity: 0.9;
bottom: 50px;
-webkit-transform: translate(0px) rotate(0deg) scale(1);
-moz-transform: translate(0px) rotate(0deg) scale(1);
-o-transform: translate(0px) rotate(0deg) scale(1);
-ms-transform: translate(0px) rotate(0deg) scale(1);
transform: translate(0px) rotate(0deg) scale(1);
}
</style>
<div id="wg-stytuch">
<ul class="wg-stytuchwidgt">
<li><a class="facebook" href=http://www.facebook.com/#"><span>Facebook</span></a></li>
<li><a class="twitter" href=http://twitter.com/#"><span>Twitter</span></a></li>
<li><a class="gplus" href=https://plus.google.com/b/#"><span>Google Plus</span></a></li>
<li><a class="pinterest" href=http://www.pinterest.com/#"><span>Pinterest</span></a></li>
<li><a class="rss" href=http://feeds.feedburner.com/#"><span>RSS</span></a></li>
<li><a class="linkedin"href=http://www.linkedin.com/in/#"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href=http://www.thumblr.com/#"><span>Tumblr</span></a></li>
<li><a class="youtube" href=http://www.youtube.com/#"><span>Youtube</span></a></li>
<li><a class="mail" href=Mailto:#"><span>Mail</span></a></li>
</ul></div>
- Save your widget.
Make Changes...!
- Replace # with your username in social media account (9 times)
Awesome design...! Bookmark your site for more updates...!
ReplyDeleteThis comment has been removed by the author.
ReplyDelete