15 Haziran 2013 Cumartesi

Sitene Skype Canlı Destek Ekle

Blog kullanıcılarımızın sorularını en kısa sürede yanıtlamak bizim için her zaman artık puan kazandıran etkenlerdendir. Kullanıcılarımız içeriğimiz hakkında sormak istedikleri her şeyi bizlere sorabilmeliler fakat bizimde onlara zaman kaybetmeden cevap vermemiz gerekmektedir.

Günümüzde herkes online iletişim konusunda Skype'yi kullanır durumda buda anlık iletilerde bizlere kolaylık sağlar. Blogumuzu ziyaret eden ve aklına takılan en küçük bir konuyu bize sormak isteyen bir kullanıcı için anında çevrim için destek verebilmemiz Skype ile mümkün. 

Skype ile blogumuzu ziyaret eden kullanıcılarımızın bizimle anlık iletişim kurabilecekleri bu eklentiyi nasıl ekleyeceğimizi gösterelim;

İlk olarak Skype Developer Area adresine girş yapalım.

1. adım olarak ENTER YOUR SKYPE NAME alanına skype adımızı yazalım.





2. adımda ise kullanıcılarımızn bize nasıl ulaşacaklarını yani arama mı yoksa mesaj yoluyla bize ulaşaklarını belirliyoruz.







3. adımda ise renk ve botun boyutunu belirliyoruz.




4. ve son adım olarak bize verilen kodları sitemize eklemek kalıyor.






Tüm bu işlemlerini yaptıktan sonra sıra geldi blogumuza bu kodları eklemeye;

İlk olarak Blogger kontrol panelinden şablonu düzenle diyoruz ve CTRL+F tuşlarına basarak </head> kodunu aratıp buluyoruz. Hemen üzerine aşağıdaki kodu yaıştırıyoruz.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">


</script>

Sonra ise Bloggler Kontrol panelinden yerleşim kısmından Gadget ekle ve Html/Javascrpit diyerek açılan pencerede aşağıdaki kodları yazıyoruz.


<script type="text/javascript">

//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfb6vq03xIrfj-xpG3iTnOnnUcQdvbG26Uo8YaWwn-LGh1u23udIrWTjC1ReKzOrUZ_alXtvwOYDwWYOWcbMmc6WvOkMRN1CJl5TprGbWdvvVcl_mdxSXxR04sVH9kF57du4jsi3o3-7Ho/s1600/canlidestek.gif") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:400px;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style="">
<div>
<script type="text/javascript" src="http://cdn.dev.skype.com/uri/skype-uri.js"></script>
<div id="SkypeButton_Dropdown_xtreal.blogspot.com_1">
  <script type="text/javascript">
    Skype.ui({
      "name": "dropdown",
      "element": "SkypeButton_Dropdown_xtreal.blogspot.com_1",
      "participants": ["xtreal.blogspot.com"],
      "imageSize": 32
    });
  </script>
</div>
</div></div>

Kırmızı Renkli kodları Skype den alıdğımız kodlarla değiştirdiğimizde canlı iletişim eklentisi blogumuza eklenmiş oluyor.

Demo için tıklayınız.
PTV5X2HX4Q5X

Hiç yorum yok:

Yorum Gönder