31 Mart 2012 Cumartesi

Açılan Kalp Şeklinde Sosyal Paylaşım Butonları

26 yorum

Şu ana kadar gördüklerinizden çok farklı bir sosyal paylaşım butonu eklentisine hazırmısınız? Görsel açıdan oldukça orijinal olan bu eklentinin özellikleri şöyle:

 

Orijinal Efektli Sosyal Paylaşım Butonları

 

Blounuzda belirlediğiniz pozisyonda sabit, asılı kalan bir kalp ikonu var.Kalbin üzerine geldiğinizde güzel bir slide efektyle ikiye ayrılıyor ve içinden sosyal paylaşım butonları.O an blogunuzda hangi sayfa açıksa, bu butonlar ile içinde bulunduğuuz sayfayı sosyal medya paylaabiliyorsunuz.Aşağıdaki video size bu eklentiyi daha iyi açıklayacaktır.

 

 

Bu eklentiy blogunuza eklemek için öncelikle aşağıdaki kodu şablonunuzun </head> kodundan önce ekleyin.

 

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

 

İkinci olarak ise aşağıdaki kodları şablonunuzun </body> kodundan önce ekleyin.

 

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script>

 

Kodlarda hiç bir değişiklik yapmannıza gerek yok.

26 yorum:

  1. Yine bir blog hocam öğretisini blogumuza uyguladık çok teşekkürler! www.intrustweeat.tk

    YanıtlaSil
  2. Çok güzel olmasına rağmen kullanıcılarımız bunu sayfayı beğenme uygulaması olarak algılayabilirler diye düşündüm :) teşekkürler serdar abim

    YanıtlaSil
  3. Konuyla alakası yok ama bir şey sormak istiyorum. Yorum sayısını gösteren balonları sitemize nasıl ekleyebiliriz? Sitenizde aradım ama bulamadım.

    YanıtlaSil
  4. güzel bir paylaşım,ancak google paylaşım butonu ekleyebilir miyiz.

    YanıtlaSil
  5. Harika bir eklenti bu ben denemiştim ama blogumu çok yavaşlattığı için kaldırmak zorunda kaldım bunu önleyecek bir öneriniz varsa tekrar eklemek isterim,saygılar..

    YanıtlaSil
  6. @Değmesin Yağlı Boya
    Aslında jquery olmadığı için çok yavaşlatmaz ama bunun dışında başka java scriptler de kullanıyorsanız hepsinin aynı anda çalışması zor olur.

    YanıtlaSil
  7. hocam konuyla alakasız ama herkes görsün diye buradan soruyorum son zamanlarda bloglarda sayfalar arası gezerken service unavailable diye bir hata yazısı çıkıyor sizin blogta da oluyor dikkatimi çekti sorayım dedim blogger ne yapmaya çalışıyor? ya da hata bende mi ?

    YanıtlaSil
  8. @ADMİN
    Sorun sizde değil.Belli ki Blogger sunucularında bakım veya benzeri bir çalışma var.

    YanıtlaSil
  9. Konuyla alakası yok ama bir şey sormak istiyorum. Yorum sayısını gösteren balonları sitemize nasıl ekleyebiliriz? Sitenizde aradım ama bulamadım.

    YanıtlaSil
  10. yorum balonlarından bahsetmiştim. gönderdiğiniz konuyla alaka kuramadım. örneğin bu konu için en üstte "yeşil" renkli ufak bir balon var yanında 12 yorum yazıyor. teşekkürler şimdiden alakanız için.

    YanıtlaSil
  11. Pardon yanlış anlamışım.Şablonun stil kodlarına şunu ekleyin:

    .post-comment-link {
    background:url(http://yorumbalonu.png);
    background-repeat:no-repeat;
    }

    YanıtlaSil
  12. tam olarak hangi tagın altına eklyirouz. bir de bu kodlar gördüğüm kadarıyla sadece yazının üstüne balon ekliyor. ben sizin ki gibi bir şey düşünüyorum

    YanıtlaSil
  13. Stil kodlarının arasında her hangi bir yere ekleyebilirsiniz.Yazı başlığının altında sağ tarafta X yorum var yazısının yanındaki küçük yorum balonunu göstermek için ben bu kodu kullanıyorum.

    YanıtlaSil
  14. ben aynı sizin ki gibi yorum sayısı ve balon istiyorum. verdiğiniz kod gördüğüm kadarıyla sadece yorum balonunu gösteriyor? ya yorum sayısı? bu arada hangi TAGIN ALTINA NEREYE EKLEYECEĞİZ BİR YAZSANIZ. başlıkta olduğu için h3 ün altına ekledim bir şey çıkmadı!

    YanıtlaSil
  15. X yorum var yazısının mı görünmesini istiyorsunuz? O yazı zaten bütün temalarda olduğu için ben yorum balonu ikonundan bahsediyorsunuz sandım.X yorum yazısının görünmesini istediğiniz yere şunları koyun:

    <span class='post-comment-link'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:post.allowComments'>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
    </b:if>
    </b:if>
    </span>

    YanıtlaSil
  16. bu linkleri koyacağım da şunun tam yerini bir yazsanız :) iki linki koyacağım yeri. çok minnettar olacağım

    YanıtlaSil
  17. İlk verdiğim kodları stil kodlarının arasında her hangi bir yere koyabilirsiniz farketmez.İkinci verdiğim kodları da X yorum var yazısının nerede gözükmesini istiyorsanız oraya koyun.

    Konuyla alakası olmayan bir sorunuz olduğunda iletişim formundan sorarsanız konuya ait yorum bölümünü alakasız mesajlarla işgal etmemiş oluruz.

    YanıtlaSil
  18. ben bunu yapamadım beceremedım.nasıl yapcam :)yardımcı olun lutfen

    YanıtlaSil
  19. noolur acılıb kapanan kalpı kurmama yardımcı olun.yapamadımyaa:(

    YanıtlaSil
  20. @ayn ozmen

    Öncelikle Şablon > HTML'yi düzenle > Devam et diyerek kodların bulunduğu sayfayı açın.Ctrl+f tuşlarına basarak açalın arama kutusuna </head> yazın.Kodu bulduktan sonra bu kodun hemen üstüne şu kodları ekleyin:

    <script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
    <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

    İkinci olarak yine ctrl+f tuşlarını kullanarak açtığınız arama kutusuna </body> yazarak kodu bulun ve hemen üstüne aşağıdaki kodları ekleyin:

    <div style='position: fixed; bottom: 2%; left: 2%;'>
    <div class='shareEgg' id='shareThisShareHeart'/>
    </div>
    <script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script>

    YanıtlaSil
  21. cok tesekkur ederım yaptım bu sefer.gecen gunde aynen boyle uyguladım.nedense olmamıstı.bu kez basardım :)sagolun

    YanıtlaSil
  22. Çok teşekkürler,oldu ve harika durdu :)

    YanıtlaSil
  23. çok teşekkürler,harika oldu :))
    http://mycreationandinspiration.blogspot.com/

    YanıtlaSil
  24. Bende uyguladım teşekkürler :)
    http://bebekstyle.blogspot.com.tr/

    YanıtlaSil

Picardes

LİNKLER