Blogger sürükle paylaş eklentisi

Yayınlanma Tarihi: Temmuz 28, 2010 - Yazar: Ahmet b.   ·   Yorum Yok ___________________________________________________________________________

sürükle paylaş

Bu makale son günler büyük ilgi gören ve birçok blog tarafından da kullanılan en güzel bookmark eklentilerinden birini nasıl blog sayfalarınıza entegre edebileceğinizi anlatacak. Yazılarınızın sonuna yada sayfalarınızın yan tarafında social simgeleri görmek sizi rahatsız ediyorsa tam size göre bir eklenti.

Peki nasıl olacak bu iş.?

İşte böyle:

Yerleşim > Html’yi düzenle > Widget şablonlarını genişletin,

Aşağıdaki kodu bulun:

]]>

Hemen üstüne aşağıdaki kodları ekleyin:

{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%}

Daha sonra aşağıdaki kodu bulun:

</body>

Hemen üstüne şu kodları ekleyin:

<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>

Kodlama kısmında yapacağınız değişiklikler bu kadar.

Bu eklentiyi yazınızda kullanmanız için yapmanız gerekenler ise şunlar:

Yazınız içerisinde paylaşılmasını istediğiniz şey bir link ise:

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

Yazınız içerisinde paylaşılmasını istediğiniz şey resim ise:

<a href="http://www.blogoji.net" rel="prettySociable"><img src="http://www.resimadresi.com" ></a>

kodlarını kullanmanız gerekiyor.

Takılan arkadaşlar yorum aracılığıyla konuya dahil olsunlar lütfen sorularınızı cevaplayacağım.

Eti-CAT:  , , , , , , , , ,

Beğendiyseniz Paylaşın...

Konuya yazılmış yorumlar (0)




COPYRIGHT © .