Youtube stili paylaş(share) butonları

Blog’uğumuz da ki içerik çeşitliliğini zengin tutmak için bulduğumuz yeni uygulamaları sizinle paylaşıyor hatta blog’uğunuza ekleyebilmeniz için gerekli adımları da  anlatamaya çalışıyoruz. 

paylaş-share

 

Şuan tanıtacağım uygulamada  kendi hazırladığımız bir uygulama, o yüzden  isim olarak ta Youtube stili paylaş butonları adını verdik.

 

Uygulamamız 2 bölümden oluşuyor ilk bölüm sayfanızda görünen bölüm bu bölümde daha önce tanıttığımız Facebook Like düğmesi ,Twitter ve Google+ gibi 3 temel sosyal medya servisinin beğen butonları bulunuyor, tabi diğer imleme ve sosyal medya servislerinide unutmadık bu servisleride içeriğinizin paylaşılabilinmesini sağlayacak butonları ve daha fazlasının görüntülenebilmesi içinde yine bu bölüme paylaş diye bir buton ekledik.

 


share-gif 

Paylaş yazan butona tıklanıldığı zaman yazılarınıza kısa bir url oluşturulan aparatın yanında , sizi sosyal medyadan takip edebilecekleri bağlantıların ve diğer imleme servislerinin bulunduğu ikinci bölüm açılıyor.
Uygulamayı kendi blog’unuz da kullanmak için aşağıdaki adımları takip edebilirsiniz.

 

1. Adım HTML Kodlarını blog'unuza ekleyin


   HTML'yi düzenle 

 

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle gidin.

 

Yapacağımız işlemlere başlamadan önce HTML’yi düzenle sayfasında  Tam şablon yükle yazan bağlantıyı kullanarak Blog şablonunuzu yedeklemenizde fayda var. Daha sonra yapacağınız her hangi bir hata sonrası şablonunuzu geri yükleyerek yapmış olduğunuz tüm değişiklikleri geri alabilirsiniz.

HTML’yi düzenle sayfasında klavyenizin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda    <data:post.body/> ifadesini aratın.

 

<data:post.body/> yazan ifadeyi bulduktan sonra aşağıda bulunan HTML kodlarını bu ifadenin hemen altına gelecek şekilde ekleyin, bu uygulamanın hemen yazılarınızın altında görünmesini sağlayacaktır.

 

HTML kodları

 

Uygulamanın linklerini düzenleyin.

Yukarıda da bahsettiğimiz gibi uygulamamıza blog ziyaretçilerinizin yazılarınızı beğenip , paylaşabilecekleri gibi Facebook, Twitter  ve Google+ gibi belli başlı sosyal medya hesaplarınızdan sizi takip edebilecekleri linkleri de ekledik.

 

Kodları ekledikten sonra bu linkleri kendi hesabınıza yönlendirmek için sırası ile bağlantıları düzenleyin.

 

Sarı  ile renklendirdiğimiz bölümlere, Facebook hayran sayfanızın ,Twitter hesabınızın ve Google+ sayfanızın  linklerini yazın.

 

2. Adım CSS Kodlarını Blog'unuza ekleyin

 

HTML kodlarını ekledikten sonra  ]]></b:skin> ifadesini bulup tam üstüne gelecek şekilde aşağıda bulunan CSS kodlarını ekleyin.

 

CSS kodları

#blogger-share {
    padding: 3px 0 0 0;
    margin: 0;
        border:1px dashed #e8e8e8;
font-family:&quot;helvetica&quot;,&quot;verdana&quot;,&quot;Courier&quot;,monospace;
font-size:14px;

}

ul#share-menu {
    list-style-type: none;
    padding: 2px 3px 2px 0;
    margin: 0;

}
ul#share-menu li {
    display: inline;
}
ul#share-menu li a {
  text-decoration: none;
  color: #1B1B1B;

margin:0 5px 0 0;


}


a.btn-slide  {
  text-decoration: none;
  padding: 0 0 0 50px;
  color: #1B1B1B;
  background: url(http://1.bp.blogspot.com/-YOa8G_Gr18Y/TfjVzw5fE7I/AAAAAAAAEjQ/z5oeLWl7Ows/s1600/share-bg.png)  left center no-repeat;
}

.blogger-share-head {
    padding: 2px 0 2px 5px;
    margin: 2px 0 0;
}

.blogger-share-panel {
    padding: 0px;
    margin: 0px 0 0;        border-top:1px dashed #e8e8e8;


}

#share-panel { border-top:1px dashed #e8e8e8;

display:none;


padding:0px;
margin:2px 0;
}
ul.share-menu-panel {
list-style: none;   
padding: 0px 0; margin: 8px 0 0  8px;

float:left;

}
ul.share-menu-panel li { background: url(http://4.bp.blogspot.com/-a72FuxCFD_s/TffA2w4HRnI/AAAAAAAAEjE/lzfgUbisieU/s1600/2011-06-14_213251n.png) repeat-x 0px 0px;

padding:3px 5px  3px; border:1px solid #aaa; -moz-border-radius:3px; -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5); -webkit-border-radius:3px;

-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,0.5):

color:#242424;
float:left;
list-style: none;   
margin:0px 5px 5px 0;
}
ul.share-menu-panel li a { text-decoration: none; padding: 0 0 0 0px;
color:#242424;
padding:0 0px 0 20px;

}
ul.share-menu-panel li:hover {
background: url(http://3.bp.blogspot.com/-m0TF1c2xtuM/TffAufaYBsI/AAAAAAAAEjA/2r-xwUfGexM/s400/2011-06-14_213251.png) repeat-x 0px 0px; color:#141414;

}

form#shorturl {
margin:0px 2px 10px;
padding:0px 5px 0;
color:#999;
font-size:12px;
width:160px;
}

#shorturl input { color:#777; margin:0px 2px 2px;
border: 1px solid #BCEEFF;
padding:3px 3px;
outline:none;
width:100px;

}
#shorturl input:hover {
color:#000;
border: 1px solid #99CCFF;

}


.share-follow{
color:#000;
margin:0 5px 0 5px;
}
.facebook-share{
background: url(http://2.bp.blogspot.com/_OAaYyqbZjJY/TEXhdKH6viI/AAAAAAAACyw/khwigdYZ1zA/s320/facebook.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}

.twitter-share{
background: url(http://4.bp.blogspot.com/_OAaYyqbZjJY/TEXho1qdjPI/AAAAAAAACy4/WwG6cCtfDZE/s320/twitter.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.google-share{
background: url(http://3.bp.blogspot.com/-7g2r9GOynNU/TvH3iFeG83I/AAAAAAAAACA/XAtX4JT2K4o/s1600/faviconr.png) left center no-repeat;
padding:0 0px 0 20px;
}
.friendfeed-share{
background: url(http://friendfeed.com/static/images/icons/internal.png) left center no-repeat;
padding:0 0px 0 20px;
}
.linkedin-share{
background: url(http://4.bp.blogspot.com/-dCvh3clwPUA/TgMVBNgucMI/AAAAAAAAEjg/QXwHqloaY_g/s1600/in.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.delicous-share{
background: url(http://4.bp.blogspot.com/_OAaYyqbZjJY/TEXiQwzxtUI/AAAAAAAACzI/DoTKDilChtE/s320/delicious.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.digg-share{
background: url(http://4.bp.blogspot.com/_OAaYyqbZjJY/TEXicKH8gVI/AAAAAAAACzQ/NzJiyURTmjU/s320/digg.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.yahoo-share{
background: url(http://3.bp.blogspot.com/_OAaYyqbZjJY/TEc6_X3ImhI/AAAAAAAAC1A/CEfs3tbPfXk/s320/yahoo.png) left center no-repeat;
padding:0 0px 0 20px;
}
.googleb-share{
background: url(http://1.bp.blogspot.com/_OAaYyqbZjJY/TFa7x8zpWwI/AAAAAAAADE8/9KOuo71BX1g/s320/google-share.gif) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.livespace-share{
background: url(http://3.bp.blogspot.com/_OAaYyqbZjJY/TEXjo8OEATI/AAAAAAAACzg/WCmTjt5yt9E/s320/live-spice.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}

.myspace-share{
background: url(http://1.bp.blogspot.com/_OAaYyqbZjJY/TEXh7P0hM3I/AAAAAAAACzA/SvZCBEhkTRw/s320/myspace.png) left center no-repeat;
padding:0 0px 0 20px;
}
.technorati-share{
background: url(http://2.bp.blogspot.com/_OAaYyqbZjJY/TEXlF2qDPnI/AAAAAAAACz4/VNBk8zey5m0/s320/technorati.png) left center no-repeat;
padding:0 0px 0 20px;
}
.sutumble-share{
background: url(http://3.bp.blogspot.com/-DlXGfsRmJCs/TgMVCHxTSII/AAAAAAAAEjk/nXnFx27lkPI/s1600/stumbleupon.png) left center no-repeat;
padding:0 0px 0 20px;
}

 

3. Adım Javascript kodlarını blog'unuza ekleyin

Son olarak  aşağıda bulunan Javascript kodlarını ]]></b:skin> ifadesinin hemen altına gelecek şekilde ekleyin.

 

Javscript kodları

Paylaş !

57 yorum:

  1. @The-Ice
    sanırım artık çalışıyordur ...

    YanıtlaSil
  2. http://saidrisblog.blogspot.com/2010/08/vaktimiz-sosyal-aglarda-geciyor.html ekledim fakat hatalı oldu

    YanıtlaSil
  3. Evet Can kodları doğru şekilde eklemişsin -- sorun slayt için eklediğin diğer javascript kodlarında olabilir yani iki uygulama bir arada çalışmıyor olabilir
    .şablonunu yedekledikten sonra sorunu anlamak için slayt ın javascript kodlarını kaldırıp deneye bilirsin.

    birde javascript kodlarını gadget olarak eklmeyi dene.

    Bu arada headerdaki widgetladan birinde bir s harfi görünüyor bilmem farkındamısın.

    YanıtlaSil
  4. saolun oldu fakat yinede bi tuhaflık var boyutlar.

    YanıtlaSil
  5. CSS Kodlarını kendi blog'uğunun css kodları içerisine ekle .. ayrıca slayt kullanmak istersen burada tanıttığımız uygulama ile birlikte sorunsuz çalışacaktır.
    http://bloggermodifiye.blogspot.com/2010/06/blogunuza-bir-slayt-ekleyin.html
    Biraz meşkatli olacaktır fakat kendi şablonunu özellştiriken iyi bir başlangıç olacağına emnim.

    YanıtlaSil
  6. http://www.scroll.com.tr/ şu sitedeki gibi bişi varmı blogger da bildiğiniz

    YanıtlaSil
  7. şablon değil slide demiştim, ben slide deçiş butonları
    ( 1,2,3,4 )gibi olan varmı diye sormuştum

    YanıtlaSil
  8. O radaki şablonların kodlarından slayta ait olanları alabilirsin dediğin şekilde birde slayt olması gerekiyor.. orada yoksa bile elinin altında google var

    Slide geçiş butonları (1.2.3.4)

    YanıtlaSil
  9. Merhabalar öncelikle konu için teşekkür ederim. fakat bende bir sıkıntı yaşadım.Verdiğiniz kodları düzgün bir şekilde yerlerine yapıştırdığımı düşünüyorum. Facebook ta paylaştığım zaman aşağıda ki gibi görünüyor mesaj. Nedeni ne olabilir acaba?

    Bir Fincan Sevgi: Kaç Kişi Çıkar ki! (Blog ismi ve Konu Başlığı)

    birfincansevgi.blogspot.com (Bağlantı Adresi)

    yukarıdakilerde problem yok

    Mesaj Bölümünde ise aşağıdaki kodlar görünüyor.

    skip to main | skip to sidebar $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); BitlyClient.addPageLoadEvent(function(){ BitlyCB.myShortenCallback = function(data) { /.../ this is how to get a result
    Paylaş

    YanıtlaSil
  10. Sonda ki Paylaş Yazan yer yok:)

    YanıtlaSil
  11. Valla oldu ama yazının sonunda değil başında görünüyor ?? Nasıl düzeltebiliriz bunu ?

    YanıtlaSil
  12. Hocam ben ekeldim kodu yalnız bende e-posta,facebook ve twitter kodu çalışmıyor..Onları nasıl halledebilirim.Actığım zman bu blog bulunamadı ikazı alıyorum..

    YanıtlaSil
  13. Allah sizden razı olsun, hazır temamdan kaybaklanan sorunlardan dolayı facebook like butonu dahil ekleyememiştim ve diğer paylaş butonlarınıda, süper oldu helal size! :)

    YanıtlaSil
  14. Benim temamda < div class='post-footer' > kodu bulunmuyor ne yapmalıyım?

    Sitem: www.nuridizisi.net

    YanıtlaSil
  15. aşağıda ki kodu bul hemen ardından kodları ekle.
    post-footer-line-2'>

    YanıtlaSil
  16. Teşekkürler,hallettim..

    YanıtlaSil
  17. bende ne < div class='post-footer' > nede post-footer-line-2'> yazmıyor ben neyapıcam :D

    YanıtlaSil
  18. Gerçekten mikemmel. :D Bir hata varmı diye bakarsanız çok makbul geçer teşekkürederim. http://ameleist.blogspot.com/

    YanıtlaSil
  19. interference

    kodlrı doğru bir şekill de eklemişsin fakat uygumayı bir süre sonra güncelliyecem o zaman güncellemeyi unutma.

    YanıtlaSil
  20. Merhaba

    div class='post-footer'

    Bu kodu bulamıyorum. Alternatif bir kod yok mu acaba?

    YanıtlaSil
  21. bu kod da yok: post-footer-line-2'>

    YanıtlaSil
  22. Merhaba Carmentos
    div class='post-footer' senin blog'uğunun kodlarındada var Widget şablonlarını genişlet yazan kutucuğu işaretleyip,öyle dene.

    YanıtlaSil
  23. Teşekkür ederim. Şimdi dediklerinizin hepsini yapıp önizleme yapıyorum fakat blogda en ufak bir değişiklik yok gözüküyor. Sorun nedir sizce?

    YanıtlaSil
  24. Carmentos
    Ön izlemede göremezsin eklenti sadece yazı sayfalarında çalışır yani şuan bulunduğun sayfa gibi yorum yapılabilen sayfalarda bu sayfalarıda ön izlemede göremezsin.. fakat tam şablon yazan bağlantıya tıkladıktan sonra şablonunu yedekledikten sonra kaydet yazan butona tıkla ve eklentiyi görmek için yorum yapılan sayfaya git.

    bir sorunla karşılaşırsan indirdiğin şablonu geri yükler yaptığın tüm işlemleri geri alabilirsin..

    YanıtlaSil
  25. Yardımcı olmaya çalıştığınız için teşekkür ederim. Dediğinizi uyguladım, uygulama çalıştı fakat benim temaya göre ölçülere tutmadı. Yani butonlar yana kaydı sığmadılar. Şu şekilde daha iyi anlarsınız ne demek istediğimi:

    http://i55.tinypic.com/10ht8c8.jpg

    Ayrıca, beğen ve paylaş butonları yoruma tıklamadan da gözükse ya da yorum penceresi bu sitedeki gibi görünür nasıl yapabilirim? "Yorum" yazısına tıklayınca açılıyor pencere bende. Ziyaretçiler tıklamadan direk yorum yazsınlar burada benim yaptığım gibi daha iyi olur. Yardımcı olursanız memnun olurum.

    YanıtlaSil
  26. panelin boyutunu değiştirmen gerekir cellspacing='0' width='580'> buradaki width='580' ni 480 veya 460 yaparsan sanırım panel sığacaktır fakat paneli küçülttüğün için bu seferde facebook beğen butonu sığmayacaktır. o kodların hemen altında facebok beğen butonuna ait kodların içinde width:450px; yazan kodu da width:380px; filan yaparsan sığacaktır.


    diyelimki bunların hepsini yaptın olmadı senin amacın facebook beğen butonunu ve yazılarını paylaşabilecekleri butonları eklemekse alternatif bir yöntemde .. buradan facebook beğen düğmesini eklersin paylaş share butonları olarakta bloggerın düğmelerini kullanabilirsin onları da kumanda paneli--- yerleşim yolunu takip edip blog kayıtları yazan bölüme tıkladıktan sonra açılan pencere de kolayca ekleyebilirsin.

    diğer bir alternatifinde add thise üye olarak butonunu ekleyebilirsin.

    son soruna gelecek olursak yorumları da sadece yazı sayfalarında göstermek için Kumanda panelinden --Ayarlar bölümüne geçerek burada "Yorumlar" sekmesine geçtikten sonra seçeneklerde yer alan "Yorum Formunun Yerleştirilmesi" seçeneğini " Aşağı katıştırılmış kayıt" olarak işaretlemen yeterli..

    YanıtlaSil
  27. Tayfun facebook, twitter, buzz ve e-mail butonları çalışmıyor. Bilgine..

    YanıtlaSil
  28. Merhaba. Bire bir sizin uygulamanın aynısını yapabilmem mümkün mü? Yardımınız için şimdiden teşekkür ederim. (Paylaş ve Takip et: vs)

    YanıtlaSil
  29. haliyletasarım ayarlarını bitirdikten sonra yazıyı güncellediğimizde ,kendi blog'umuzda kullandığımız uygulamanın bire bir aynısını tanıtacağız..

    YanıtlaSil
  30. Çalıştı fakat sizden bir ricam var bunu nasıl sayfanın altına alabilirim ? ( Şuan yazının üstünde çıkıyor )

    YanıtlaSil
  31. Birader senin bu butonlar dışarıya link sayımı 142'ye çıkardı bunu düşürmenin yolu yok mu?

    YanıtlaSil
  32. http://wmaraci.com/link-cikartici
    www.facematrax.com

    YanıtlaSil
  33. bu butonları eklmesen de link sayın 100 geçecektir. kaldı ki geçse ne olur , önemli olan verdiğin bğlantıların bozuk olmaması.

    YanıtlaSil
  34. Merhabalar uygulama gayet güzel şuanda denedim oldu fakat sorun şu ki ana sayfada hangi konunun altındaki paylaş butonuna tıklasam son konu olanda açılıyor paylaş menüsü nasıl çözerim bunu. Aslında bu kadar fazla bişey istemiyorum http://100mbonepiece.blogspot.com/ adresteki paylaş butonlarını başka bi temaya nasıl aktarırım? Tema değişimi yapmak isitiyorum fakat kullanmak istediğim temanın kendinden yok paylaş butonları. Teşekkürler saygılar.

    YanıtlaSil
  35. Merhaba Tayfun bey; Kolay gelsin.öncelikle çalışmalarınızdan dolayı sizleri kutlarım bende diğer kodları sildim ve denedim.Sonuçlar.
    1.Anlatımda eski kodları arkadaşlar silmeleri lazım.Bir uyarı koyulursa iyi olur.
    2.Live Space : meneame diye bir linke gidiyor
    3.Tweet yazan yerde ico çıkmadı yazı gözüküyor.bunun ismi twitter olması lazım değilmi ?
    4.Facebook : bloggermodifiye yönleniyor
    5.Takip et kısmında: Twitter : bloggermodifiyeye yönleniyor RSS de aynı

    Çalışma güzel acil cevap bekliyorum.Teşekkürler...

    YanıtlaSil
  36. kırık_çocuk ve Adnan bey uygualma üzerinde bazı değişiklikler yaptım fakat yazıyı daha güncellemedim en kısa süre içinde yazıyı güncellediğim de sıraladığınız tüm sorunlara cevap bulabileceksiniz.

    YanıtlaSil
  37. Beklemedeyim Tayfun Bey, güncellemeyi yorum olarak duyurursanız sevinirim, abonelikten dolayı mail gelir farketmek daha kolay olur güncellemeyi.

    YanıtlaSil
  38. Nedir durum güncelendi mi konu?

    YanıtlaSil
  39. Tayfun sana zahmet şu müzik eklemeyi ayrıntılı bı anlatırsan sevınırım ben denedim ılk başta oldu ama daha sonra skın kayboldu sayfa karardı sadece play buttonu kaldı ..... şmdiden saolasın.

    YanıtlaSil
  40. @sall eklediğin eklenti bizim blogtaki yahoo media playermı ?

    YanıtlaSil
  41. Tüm şablonlarda sorunsuz çalışması için uygulamanın kodlarını sıfırdan yazdım ve güncelledim, sorun yaşayan arkadaşlar daha önce ekledikleri kodları silip yukarıdaki işlemleri tekrarlayabilirler.

    YanıtlaSil
    Yanıtlar
    1. Ağa olmuyor naısl olucak hepsini yaptım ama nerde çıkacagını bilmiyorum çalışsa bile gözüme gözükürdü nasıl çalışcak :S

      Sil
  42. Daha önce kullanıp kaldırdığım bir eklentiydi tekrar ekleyeyim dedim sorunsuz çalıştı gerçekten :)
    Bu arada size bir mail gönderdim geri dönüş yaparsanız çok sevinirim..

    YanıtlaSil
  43. benim şablonda çıkmıyor bile. ne yapacağız?

    YanıtlaSil
  44. Çok güzel ve pratik eklentiler için teşekkür ederim.

    YanıtlaSil
  45. iyi günler tayfun bey,
    siteniz gerçekten çok güzel ve çok yararlı bir site olmuş..
    merak ettiğim bir konu var. sizin sitenizde bulunan "Paylaş" yazılı facebook twitter ve google+ patlaşma butonlarını kendi sitemize nasıl ekleyebiliriz?

    YanıtlaSil
    Yanıtlar
    1. daha önce gelen sorular üzerine twitter,facebook ve google+ butonları için alternatif bir anlatım hazırlamıştık buradan bakabilirsin , fakat onda paylaş diye yazan bölüm yok, kodları eklemeden önce haberin olsun sadece butonlar var...

      Sil
  46. Abi acaba bu bitly kısaltmalarını kendi hewsabımız üzerinden yapma imkanımız var mı ?

    YanıtlaSil
  47. İyi akşamlar, öncelikle verdiğiniz tüm bilgiler için çok teşekkür ederim. Yukarıda verdiğiniz yönergeyi adım adım uyguladım ancak başarılı olamadım, sorun nerede bilemiyorum,yardımcı olursanız sevinirim.

    YanıtlaSil
  48. Kodları geri kaldırdım...Açıklamalarınız güzeldi ama yapamadım...

    YanıtlaSil
  49. Merhaba

    Siteme böyle bir kod ekleme gereksinimi duydum ve ekledim de. Şimdi kodda 2 sorun var onları yazacağım ve en kısa sürede düzeltirseniz bu kodu kullanmak istiyorum. Düzelmez ise mecbur başka bir kod aramak zorunda kalacağım :((

    1-) Facebook beğen butonu çalışmıyor.
    2-) Takip et kısmındaki Facebook,Twitter, Google+ butonları yeni sekmede açılmıyor.
    3-) Paylaş tıklayınca alttaki butonlar kasarak açılıyor. Onun yerine şık bir şekilde aşağı sekerek düşüp açılsa güzel olur. (olmasada olur :D, 1-2 kesin hallolsun da ne olursa olsun :D)

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz