Blogger veya siteniz için kayan sexy sosyal medya takipci butonu ekleyin.
How To Add Follow Me Sliding Gadget/Widget Button To Blogger?
Blogger'a Ekleme:
1. Blogger Kumanda Panelinize gidin.
2. Yerleşim sekmesine tıklayın.
3. Istediginiz bölümde Gadget/Widget Ekle'ye basın.
4. Açılan pencerede HTML/JavaScript seçeneğini seçin.
5. Aşağıdaki kodu isteğinize göre ayarlayarak, kopyalayın ve yapıştırın.
6. isterseniz bir başlık ekleyebilirsiniz.
<style type="text/css">
#meftunsm{list-style:none;text-decoration:none;font-size:.9em;font-family:arial,trebuchet ms,sans-serif;}
#meftunsm a{text-decoration:none;font-family:arial,trebuchet ms,sans-serif;}
#meftunsm li{position:relative;height:38px;cursor:pointer;padding:0!important;}
#meftunsm .facebook,.googleplus,.Youtube,.rss,.twitter{position:relative;z-index:5;display:block;float:none;width:210px;height:38px;border-radius:5px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYzWCnoUjJ1ZHPe8Vaa7PCKZ3qzz3UwXhblzVaHwI6ZihqKL9wJVyRLLBEvWwD021Zei0zyjlq1BdNxrsaEgcsxzysEFHELD10Y1xst9qOatleR_I1xlLxYug16lPY8jhglmCdbQhUuygc/w35-h158-no/MEFTUN_Social_Icons_Sprites.png) no-repeat;background-color:rgba(217,30,118,.42);-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;box-shadow:rgba(0,0,0,.28) 0 2px 3px;color:#141414;text-align:left;text-indent:50px;text-shadow:#333 0 1px 0;white-space:nowrap;line-height:32px;-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;transition:width .25s ease-in-out,background-color .25s ease-in-out;-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;margin:10px 0 0;}
#meftunsm li:after{position:absolute;top:0;left:50px;z-index:2;display:block;height:38px;color:#141414;content:attr(data-alt);line-height:32px;}
#meftunsm .icon{overflow:hidden;color:#fafafa;}
#meftunsm .facebook{width:32px;height:32px;background-color:rgba(59,89,152,0.42);background-position:0 0;}
#meftunsm .twitter{width:32px;height:32px;background-color:rgba(64,153,255,0.42);background-position:0 -33px;}
#meftunsm .googleplus{width:32px;height:32px;background-color:rgba(228,69,36,0.42);background-position:-3px -66px;}
#meftunsm .Youtube{width:32px;height:32px;background-color:rgba(174,45,39,0.42);background-position:0 -95px;}
#meftunsm .rss{width:32px;height:32px;background-color:rgba(255,102,0,0.42);background-position:-3px -126px;}
#meftunsm li:hover .icon,.touch #meftunsm li .icon{width:210px;}
.touch #meftunsm li .facebook,#meftunsm li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #meftunsm li .twitter,#meftunsm li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #meftunsm li .googleplus,#meftunsm li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #meftunsm li .Youtube,#meftunsm li:hover .Youtube{background-color:rgba(174,45,39,1);}
.touch #meftunsm li .rss,#meftunsm li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="meftunsm">
<li data-alt="Facebook'ta takip edin">
<a class="icon facebook" href="http://www.facebook.com/meftunmede.blogger" target="_blank">Facebook'ta takip edin</a>
</li>
<li data-alt="Twitter'da takip edin">
<a class="icon twitter" href="http://www.twitter.com/MeftunMEDE" target="_blank">Twitter'da takip edin</a>
</li>
<li data-alt="Google+'da beni izleyin">
<a class="icon googleplus" href="http://plus.google.com/113884753756003696845" target="_blank">Google+'da beni izleyin</a>
</li>
<li data-alt="Pinterest ile abone olun">
<a class="icon Youtube" href="http://pinterest.com/meftunmede" target="_blank">Pinterest ile abone olun</a>
</li>
<li data-alt="RSS ile abone olun">
<a class="icon rss" href="http://feeds.feedburner.com/MeftunMede" target="_blank">RSS ile abone olun</a>
</li>
</ul>
Kodu denemek için Online html editor'ü kullanabilirsiniz.
Yukarıdaki kırmızı ile belirttiğim alanları kendi adınıza göre düzenlemeyi unutmayın! Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...
Kaynak:http://www.meftunmede.com/
Yorum Gönder