Bloguna hareketli sosyal aglar ekle

 
Herkese selamlar sevgiler..gun ortasi bilgisayara oturamadigimi az once bilgisayarin basina gecince fark ettim..baktim ki ogle uykularim yuzunden gece uykum gec saatlere tasinmaya basladi..dolayisiyla sabah erken kalkmak oldukca zorlasmaya basladi..bu yuzden ogle uykusunu kaldirip aradan gece daha erken yatmayi garanti ettim sayilir :)
Sabahin ilk saatlerinde ayakta olmak herkes uykudayken kahvemi sessiz bir mahalle ve balkonda icmek tarifsiz guzel..:)
Bilgisayarin basina gecince calistigim sablona ara vererek guzel bir eklentiyi paylasmak istedim..
Blogumuzda farkli gorunumlu hareketli sosyal aglar eklentileri eklemek isteyen dostlarim bunu cok sevecektir eminim..
Bir cok arkadasim bunu kolayca yapmak istediginden de eminim..genelde sosyal baglantilar HTML bilgisi gerektiriyor..bunun daha kolay yolu nedir diye bakarken karsima bu eklenti cikti..

Blogumuza kolayca zorluk cekmeden,hata yapar miyim-basarabilir miyim endisesini yasamadan ekleyebiliriz..hatta o kadar guzel hareket ediyor ki mouse'u uzerine tutmaktan kendinizi alikoyamayacaksiniz :)

Eklentiyi bu adresimde canli gorebilirsiniz:CANLI GOR-DEMO

Peki nasil yapilir?..

Bismillah..

Kumanda panelimizden Yerlesim diyoruz..

Yerlesim kismindan Gadget ekle diyoruz..

Eklentiler listesinden HTML/Javascript eklentisini seciyoruz..

Bunu hazir ettik buraya kadar hersey tamam..


Asagidaki kodlari kopyalayarak..

<style>
/*--------Social Sharing Widget ------*/
.socialsharing a {
display:block;
height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgev6YVY17EFabOsYi9NIxR957JoJNCQSc-B1LQFsqKNo7k6XRbXOICm7mqRJCAUDhlJQhRIaIjdVk12R7BwKXGUb7d7iVXge9jDMj7GyQLJ5AOriKd_M8_wrk7Q5L1Y6KJasemZWIyjmM/s1600/Sharing+buttons.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;
}
.socialsharing a.googleplus {
background-position: 0px -58px;
}
.socialsharing a.googleplus:hover {
background-position: 0px 0px;
}
.socialsharing a.twitter {
background-position: 0px -290px;
}
.socialsharing a.twitter:hover {
background-position: 0px -232px;
}
.socialsharing a.facebook {
background-position: 0px -406px;
}
.socialsharing a.facebook:hover {
background-position: 0px -348px;
}
.socialsharing a.rss {
background-position: 0px -174px;
}
.socialsharing a.rss:hover {
background-position: 0px -116px;
}
</style>
<br />
<div class="socialsharing">
<a class="rss" href="RSS Besleme linki" rel="external nofollow" target="_blank"></a>
<a class="googleplus" href="Google profil linki" rel="external nofollow" target="_blank"></a>
<a class="facebook" href="Facebook hesap linki" rel="external nofollow" target="_blank"></a>
<a class="twitter" href="Twitter hesap linki" rel="external nofollow" target="_blank"></a>
</div>

 

Kodu daha once actigimiz HTML/Javascript eklentisinin icine yerlestiriyoruz.

Kaydet demeden once yukaridaki resimde altini cizmis oldugum,kodun sonlarina dogru bulunan yerlere arzu ettiginiz sosyal aglardaki hesabinizin linkini girdikten sonra eklentiyi kaydedebilirsiniz..

Bu tur eklentileri blogunuzun en alt kismina yerlestirmeniz blogunuzun islevselligini etkilemeyi onleyecektir canlarim..

Onizleme yaparak hersey yolundaysa Kaydet deyip cikiyoruz..