Show Mobile Navigation
,

Add a Keep Stay Tuned Widget for Blogger

Hemant Verma - 6:55 PM
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) 

2 comments:

  1. Awesome design...! Bookmark your site for more updates...!

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete

You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

 



Make Your Blog Like a Pro
About | Contact | Affiliates | Privacy Policy | TOS