Sosyal Medya Takipçi Butonları Eklentisi

Sosyal Medya Takipçi Butonları Eklentisi: Web Sitenize Sosyal Etkileşimi Eklemek

Sosyal medya, modern çağın iletişim ve etkileşim dünyasının merkezinde yer alıyor. Web sitenizde sosyal medya takipçileri ile etkileşimi artırmak, içeriklerinizi geniş bir kitleye ulaştırmak ve marka bilincini güçlendirmek için önemlidir. Sosyal medya takipçi butonları eklentisi, ziyaretçilerinizi kolayca sosyal medya hesaplarınıza yönlendirmenin etkili bir yoludur.

Bu makalede, web sitenize nasıl basit ve çekici sosyal medya takipçi butonları ekleyebileceğinizi adım adım öğreneceksiniz. Okuyucularınızın içeriklerinizi takip etmelerini sağlayarak daha geniş bir erişim elde edebilirsiniz. Sosyal medya takipçi butonlarıyla sitenizin etkileşimini artırın ve dijital varlığınızı güçlendirin.

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/AVvXsEiG6CdgXwFJr0LLahaaW_e9l0OgvwhmrXrVVh1LI7HAYZht3IIoWzYo48yENTAg8jBaFFPFtBZUZI7TruhcEnVj4jwfkZjvVN1CODdbD6x31vEwZPiN1k-LLRftOroHlNsiP9AobnKlKuIU/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="https://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="https://www.twitter.com/MeftunMEDE" target="_blank">Twitter'da takip edin</a>
</li>
<li data-alt="Google+'da beni izleyin">
<a class="icon googleplus" href="https://plus.google.com/113884753756003696845" target="_blank">Google+'da beni izleyin</a>
</li>
<li data-alt="Pinterest ile abone olun">
<a class="icon Youtube" href="https://pinterest.com/meftunmede" target="_blank">Pinterest ile abone olun</a>
</li>
<li data-alt="RSS ile abone olun">
<a class="icon rss" href="https://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...