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
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/AVvXsEiWvqdtisDFFhlStb75fspkt5qAv-CVWQY2J2tLkL43fMEsW_9XTTj5iEOpOkah4R8txggD3oxGse0jACGFas-v8wDEw6bYuCAF618RH2uRXJxEtSRQ8DJAgLg6UeeR0TemzJclkNKAQePU/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/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/s1600/wg-keep-stytune.png") no-repeat;
}
.wg-stytuchwidgt li .twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/s1600/wg-keep-stytune.png") no-repeat 0px -45px;
}
.wg-stytuchwidgt li .gplus {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/s1600/wg-keep-stytune.png") no-repeat 0px -90px;
}
.wg-stytuchwidgt li .pinterest {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/s1600/wg-keep-stytune.png") no-repeat 0px -135px;
}
.wg-stytuchwidgt li .rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/s1600/wg-keep-stytune.png") no-repeat 0px -180px;
}
.wg-stytuchwidgt li .linkedin {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/s1600/wg-keep-stytune.png") no-repeat 0px -225px;
}
.wg-stytuchwidgt li .tumblr {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/s1600/wg-keep-stytune.png") no-repeat 0px -270px;
}
.wg-stytuchwidgt li .youtube {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/s1600/wg-keep-stytune.png") no-repeat 0px -315px;
}
.wg-stytuchwidgt li .mail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqKsepCGWoG_LCdhM8crjIGKNv4_8TFBEsug3Yxd4RALuBLcHXYkMvCJ8LdJKXNQTje0qN-08-Hx7IqJP_x9WG2KDPnsGfIVszSalpp7H5OCPcBUqTnPweGJ1yHlKHWVKqOKiS8CtSiIm6/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.
Sign up here with your email
ConversionConversion EmoticonEmoticon