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 ifadesini aratın.



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 ]]> 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:"helvetica","verdana","Courier",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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-PcDOnNYfOV5wI-Ybx7bnDVvGV3m_sqyCULAtE_TcziuVEycGqOnPrHG9rDaRQ3sSCXIaJIUZ9O6OmJWxQ0MXqv5UEO0M92s-uSN9nuJY3s8EKFYjg4ua56Wh6DKLQo5ntN7dfJqD4H8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigi7RznTSHKfSElTm8zE227zWI5ifM6CVbALejKehJopW_WvYyi-t1VcgN007ytdkQN8QXRd8Wehrc1GVmb4GAn1kz_wZPn7FW8SrtyfliJ_9ZQxw_lW6ESMm2bbymlrry23P84qzLDt0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk8v_RGNDuO3QfzERS00kF75-GaVOIDQH24WF1Z75Aax04yIhu8rgvlizwyPc2nRGFbRkaUlT59c-wHcykZMdxCy-F6Vi3Gkw40OLus-IzRiCrqtICsZmVU-ljjyNTUA6fIXj_6sBcK1M/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLujuk4RYS6GsXlvwDIdr38DbOblqZvTz9sfTbBxAgFV9_Y5Cc314rX1lohmey9zNwncmxZcZj61mWsoxK1pkSzfWSsR3B4Tyy2YoybdMwXws00qVlnO2JJU0-mKTqywE5W8SrKJhDh1d/s320/facebook.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}


.twitter-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2raaD7LuL00-8rKAGugrcIsCOlyGxFIhgYKSu4-i4_6rPvneoMyu5hU5p9VDuTF03Uv-WAePVcb7mQI0nOzSmufrAvbRQiYQnXN89QT1yew05jGbliYBxhDrhMJ84_bppZ1u3-G-GdfOR/s320/twitter.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.google-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_l2vEa2GtuTBBAHnTEYNh39_b6_lg6TLkVRAk_dWoyaUmMUkSJrMlJX5ry4Vi1G1Q-0tjcoxAGU6WOq_QtqzCHt49DCvg2DOdxLATAXs7CCsjndoILZOd6DoFxPWsyXNMDzaX93Z8RWj/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjEeVNbM3GJEvStYZdXCljiZl9EfSu-_5ha3_nP-JkqHLkl-tikBuhKaMj8s3aK7S4laMs1pOWxajmI8xkVmXqxpXTZCUQ7A3_oHmmABghFmgEJ_J-iq1i5fMDCf0gEPNjV0AV8N20Uazx/s1600/in.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.delicous-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmX-OU7T6Qh5qiymLhNvN_m2rbFAYO3kusnmheMbdgibGnbVx_tYjDAihEjXO2GgI-VDY3Ocs5pDV8uHem3Ag7C7LqVFP-fUurwjrOvW2kHsTcrkZShxX9Dh32KqcOeqMCQ1k2LgrEZJr/s320/delicious.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.digg-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgbNnKvPRF0UJPbzZXm08SXOTEWJGK2-bRN6YtcC31eCN_XxVkULzxbE0nljWqEZmtCaSE00P513NjL8J7B_5Ig7nR_W_fQ6b3qvFZV7ak0hyphenhyphenP0KV78hRuiWR3jRoU4-929oNZGsFbWggd/s320/digg.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.yahoo-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvSbO67iCGZh3CwpUdGB_DTO0pMw8XrozUUtjdwt_smN0Q5xAGFC3P-toJOhcHmyQu68WwR2RpTLV-O8Ha-9LLFQYly5gwreWy3HKyk9Tbav6-pLAA_n7bS-JrYZviSP3xhMSn6pECXNt6/s320/yahoo.png) left center no-repeat;
padding:0 0px 0 20px;
}
.googleb-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-38NnDMUOW5L1tsBPJYbUT-O5MvHjvZtyijOvjMFEH6FS4oiJmHwTXhsKOYz5rE-e8I1mJoAx1jv38Pz0mCzV4bZCEOUVIs9wlIXg3FfpZ0fE9S84esOhTnFYWaXDyQGTCTjnZ7xu9yc/s320/google-share.gif) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}
.livespace-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilSnqjx372W91dilH64AeP5dU91RPC6xW3mCC_-JXED-OfEs08sARVZ0Uzg5SwQKdhbcNR1g0T6eI4ar8BHRjHMGVdx_eT-mi2yqTxYg2gQnPwUWZLoXi77P9nCiJ2tN7lgE7Uc0TjUu3a/s320/live-spice.png) left center no-repeat;
color:#000;
padding:0 0px 0 20px;
}


.myspace-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdyC9O_QtKSVPUXbAGc_gnb79fIhlBJDtSZt_7TZBusinxc8Gb4o0Aju2ilbVuppl4AicCsS6ixW7bOHXMQ5nQDGiLtjvu-lgABcrN2L-jiVhX_0K4kcNJ3HF5FYVAQ7bSLG6gU8Y11MO/s320/myspace.png) left center no-repeat;
padding:0 0px 0 20px;
}
.technorati-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn_LR2ihVmczYmQ6wQGvJ9AdsjIHmqQDy_mw8V4oqfDQXA-MSBQ3Re6x8rO4jAPacHSQ6jXZkDaxSdQBXUFVz3MBHchRQhtKEaXIkTfAoy67DxLwK2gDp6_NISRKvnf-WvEyMogtAeo5BK/s320/technorati.png) left center no-repeat;
padding:0 0px 0 20px;
}
.sutumble-share{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_fvfgxF4YJS-qfkB22kOaOgO_MZZnQEmJ_yQV7Gu97_3ftAYoaJsM-R4ZbRtUyKlDNBrFBeyrVTtogwBbB4eUqwx-tGJ6VfmrnScEK9zWybDkHSjidB5q9k93eSuSKatUo5pm0kdUggOY/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ı ]]> ifadesinin hemen altına gelecek şekilde ekleyin.



Javscript kodları