Twitter Takip

Blogger Paylaşmak İçin Sürükle Eklentisi





Bir çok blog sitesinin kullandığını biliyordum ve bilmeyenler için bu eklentiyi ele almaya karar verdim. Bildiğiniz gibi bu eklentide yazıyı veya resmi üzerinden tutup istediğimiz paylaşım sitesinin üstüne sürüklüyoruz.

Hemen kuruluma geçeyim.

İlk önce:

]]></b:skin>

kodunu buluyoruz ve hemen üstüne

{border:0;padding:0}*,#ps_tooltip p{margin:0}p{margin:0 0 10px 0}#page{margin:0 auto;width:900px}#page,.ps_ft,.ps_bd,.ps_hd,#ps_websites ul{position:relative}.thumbnail{margin:10px}body,html,
#ps_overlay{height:100%}#ps_hover,#ps_tooltip,#ps_websites .ps_label,#ps_overlay{left:0;top:0}#ps_hover,#ps_title,#ps_tooltip,#ps_websites,#ps_websites .ps_label,#ps_overlay{position:absolute}#ps_hover,.ps_ft,.ps_bd,.ps_hd{z-index:1000}.ps_hd{background:url(http://i50.tinypic.com/of6bv8.jpg) top right no-repeat}.ps_hd,.ps_ft,.ps_bd{padding:0 8px 0 0}.ps_hd .ps_c{background:url(http://i50.tinypic.com/bdm97q.jpg) top left no-repeat}.ps_ft{background:url(http://i47.tinypic.com/x5dy4w.jpg) top right no-repeat}.ps_ft .ps_c{background:url(http://i48.tinypic.com/161mfpk.jpg) top left no-repeat}.ps_bd{background:url(http://i45.tinypic.com/k0ggwp.jpg) top right repeat-y}.ps_bd .ps_c{background:url(http://i45.tinypic.com/2s609y1.jpg) top left repeat-y;padding:0 0 0 8px}.ps_bd .ps_s{background:#fff}.ps_ft .ps_c,.ps_hd .ps_c{font-size:1px;height:8px}#ps_title{background:url(http://i48.tinypic.com/iqiye1.jpg) top right no-repeat;padding:0 5px 0 0;font-weight:normal;left:8px;top:-15px;z-index:999}#ps_title,#ps_websites .ps_label{color:#fff}#ps_title,#ps_tooltip{font-size:10px}#ps_title .ps_tt_l{background:url(http://i48.tinypic.com/10sfbkw.jpg) top left no-repeat;line-height:20px;padding:0 0 0 5px}#ps_tooltip{width:250px}#ps_tooltip,#ps_websites ul{z-index:1010}#ps_tooltip strong{font-size:1.2em}#ps_websites{left:50%;top:50%}#ps_websites,#ps_overlay{z-index:1005}#ps_websites .ps_label{display:none;font-size:2em;white-space:nowrap}#ps_websites ul{list-style:none;width:400px}#ps_websites li,#ps_websites a{display:block}#ps_websites li{float:left;margin:0 30px 40px 0}#ps_overlay{background:#000;width:100%}

kodlarını ekliyoruz.

Daha sonra

</body>

kodunu buluyoruz ve hemen üstüne

<script src='http://iblogerz.5gigs.net/prettySociable/js/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://iblogerz.5gigs.net/prettySociable/js/jquery.prettySociable.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(document).ready(function(){
$.prettySociable();
});
</script>

kodlarını ekliyoruz.

Şablon düzenlemede işimiz bitti. Şimdi bu kodları nasıl aktif hale getireceğiz bunu anlatacağım.

Eğer yazınızda bir linki paylaşmak için istiyorsanız

<a href="http://www.bloggerturkiye.org" rel="prettySociable>Linkin yazısı buraya yazılacak.</a>

kodunu kullanacaksınız. Blogun linkini yazdığım yere kendi yazmak istediğiniz adresi ve diğer yere linkin yazısını yazmalısınız.

Eğer yazınızda bir resmi paylaşmak için istiyorsanız.

<a href="http://www.bloggerturkiye.org" rel="prettySociable"><img src="http://1.bp.blogspot.com/_x7CRO2IciTA/S2skef72R7I/AAAAAAAABGE/YXHceZA9F-E/s400/20rqqvd.png" ></a>

kodunu kullanacaksınız.

Link yazdığım yere resme tıklanıldığında gidilecek adresi, diğer koyu yere resmin adresini yazmalısınız.

Hepsi bukadar. Herhangi bir sorunda yorum bölümünü kullanabilirsiniz.
Bu yazı şuana kadar hiçbir yerde yazılmamıştır. Alıntı yapacaksanız lütfen kaynak belirtin.



Kaan Akyıldız | 21:32 | 8 yorum

8 yorum:

  1. merhaba
    blogunuzdan çokça faydalandım öncelikle teşekkür ediyorum... blogunuzda olduğu gibi üst menü nasıl oluşturabiliriz, bu konuda bir yazı yazarsanız çok yardımcı olursunuz. kategorileri üst menü olarak nasıl kaydedebiliriz bu konuda bir yazı çok işimize yarar. başarınızın devamını diliyorum kolay gelsin...

    YanıtlaSil
  2. Bu üst menü temanın kendisinden var.
    Fakat böyle menü yapabiliriz tabiki.
    En kısa zamanda böyle bir yazı yazacağım.
    Desteğiniz için teşekkür ederim.

    YanıtlaSil
  3. Javascript dosyalarında sitenin ismi gözüküyor zaten. Kaynak yabancı bir site. Ekledim.

    YanıtlaSil
  4. Kaan çalışamalr çok güzell..Başarılar

    YanıtlaSil
  5. Rica ederim. Teşekkürler.

    YanıtlaSil
  6. son kodu nereye yapıştırıyoruz?

    YanıtlaSil
  7. Ekleyeceğin son kod ' kodunu buluyoruz ve hemen üstüne ' deki kod. Diğerlerini resimlere uygulayacaksın.

    YanıtlaSil

Takipçiler