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.