Ads Top

Blogger Sosyal Medya Eklentisi-Hareketli


Merhaba arkadaşlar bugün gene güzel bir o kadar da şık bir sosyal platform eklentisi ile karşınızdayım. Normalde siyah beyaz bir görüntü ile ziyaretçilerinizin karşısına çıkacak olan bu eklentinin üzerine gelindiğinde asıl renkleri ortaya çıkıyor ve diğer eklentilerden değişik olduğunu gösteriyor. Kullandığınız temanızda sosyal butonlar yok veya beğenmediyseniz her siteye uygun bu eklenti tam da size göre tasarlanmış. Eklentinin demosunu aşağıda verdiğim giftten görebilirsiniz.



Hemen gelelim bu eklentiyi sitemize nasıl ekleyeceğimize.

Blogger panelinden Yerleşim sayfasına giderek sosyal butonların nerede gözükmesini istiyorsanız oradaki Gadget Ekle butonuna basıyorsunuz ve karşınıza gelen seçeneklerden HTML/JavaScript Ekle diyerek aşağıda verdiğim kodları kendinize göre düzenleyerek ekliyorsunuz son olarak Kaydet demeniz ile bu eklentiyi başarı ile kurmuş oluyorsunuz.


<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>
</div>

Kodları sitenize eklemeden kırmızı ile belirttiğim yerleri kendinize göre düzenlemeyi unutmayın.

Hiç yorum yok:

Blogger tarafından desteklenmektedir.