Blogger İçin Güzel Sosyal Butonlar (Css/ Jquey)
Merhaba Arkadaşlar;
Yine beğeneceğinizi düşündüğüm güzel eklentiyi sizlerle paylaşmak istiyorum.Bu eklenti çoğu sosyal paylaşım butonu gibi blog kayıtlarının en altında yer alıyor.Resimden de anlaşıldığı üzere fareyi butonun üzerine getirdiğinizde diğerleri soluklaşıyor.
Daha önce butonda yer alan google buzz paylaşım butonu artık kullanılmadığı için kaldırdım ve yerine google plus butonunu ekledim.
Kurulum,
Blogger > Şablon > Html'yi Düzenle > Widget Şablonlarını Genişlet dedikten sonra Ctrl + F tuşuyla</head> kodunu bulup aşağıdaki kodu hemen üzerine yapıştırıyoruz.
Blogger > Şablon > Html'yi Düzenle > Widget Şablonlarını Genişlet dedikten sonra Ctrl + F tuşuyla</head> kodunu bulup aşağıdaki kodu hemen üzerine yapıştırıyoruz.
<style type='text/css'>
/* Sosyal Butonlar Başlangıç */
ul.sosyal-buton { list-style:none; margin:15px auto;display:inline-block; }
ul.sosyal-buton li { display:inline; float:left; background-repeat:no-repeat; }
ul.sosyal-buton li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.sosyal-buton li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.sosyal-buton li.sosyal-facebook { background-image:url("http://4.bp.blogspot.com/-iL1yn4RuH78/T7Kd0GRPNeI/AAAAAAAAC_0/4edv38UA2-A/s1600/facebook.png"); }
ul.sosyal-buton li.sosyal-twitter { background-image:url("http://3.bp.blogspot.com/-LgqftoheYqw/T7Kd3rmV6xI/AAAAAAAADAk/dBVNeD8mn7A/s1600/twitter.png"); }
ul.sosyal-buton li.sosyal-googleplus { background-image:url("http://3.bp.blogspot.com/-4O2a3av0u48/T7jUo_Jvu5I/AAAAAAAADBs/O9Q-WNyBm34/s1600/googleplus.png"); }
ul.sosyal-buton li.sosyal-stumbleupon { background-image:url("http://2.bp.blogspot.com/-qp2PKfTOXv4/T7Kd2uUDPFI/AAAAAAAADAU/2fEKOaDUAz8/s1600/stumbleupon.png"); }
ul.sosyal-buton li.sosyal-digg { background-image:url("http://2.bp.blogspot.com/-ahvs-Kvo2wk/T7KdzkLdnEI/AAAAAAAAC_s/IGiQexDswrA/s1600/digg.png"); }
ul.sosyal-buton li.sosyal-delicious { background-image:url("http://1.bp.blogspot.com/-Jwa9clujegs/T7KdzM8Sk_I/AAAAAAAAC_o/-66Qxu5a_rQ/s1600/delicious.png"); }
ul.sosyal-buton li.sosyal-linkedin { background-image:url("http://2.bp.blogspot.com/-D37-DiMhkSU/T7Kd1qk-KHI/AAAAAAAADAI/jIWP1Jbpc6o/s1600/linkedin.png"); }
ul.sosyal-buton li.sosyal-reddit { background-image:url("http://2.bp.blogspot.com/-AJcH3iqZaGk/T7Kd2K7awlI/AAAAAAAADAM/WdRr4jGm_Eo/s1600/reddit.png"); }
ul.sosyal-buton li.sosyal-technorati { background-image:url("http://2.bp.blogspot.com/-OajJZjyaXOw/T7Kd3BfKywI/AAAAAAAADAc/U0P-tBiiNto/s1600/technorati.png"); }
#sosyal-cssanime:hover li { opacity:0.2; }
#sosyal-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#sosyal-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#sosyal-cssanime li:hover { opacity:1; }
#sosyal-cssanime li:hover a strong { opacity:1; top:-10px; }
/* Sosyal Butonlar Bitiş */
</style>
2-Sonra Ctrl + F tuşuyla <data:post.body/> kodunu bulup bu koddan hemen sonra aşağıdaki kodu yapıştırıyoruz.
<b:if cond='data:blog.pageType == "item"'>
<ul class='sosyal-buton' id='sosyal-cssanime'>
<li class='sosyal-facebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank' title='Facebook'ta Paylaş'><strong>Facebook</strong></a>
</li>
<li class='sosyal-twitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank' title='Tweetle!'><strong>Twitter</strong></a>
</li>
<li class='sosyal-googleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=" + "tr&url=" + data:post.url' rel='nofollow' target='_blank' title='Google Plus'da Paylaş'><strong>GooglePlus</strong></a>
</li>
<li class='sosyal-stumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='StumbleUpon'da Paylaş'><strong>StumbleUpon</strong></a>
</li>
<li class='sosyal-digg'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Diggle!'><strong>Digg</strong></a>
</li>
<li class='sosyal-delicious'>
<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Del.icio.us'da Paylaş'><strong>Delicious</strong></a>
</li>
<li class='sosyal-linkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank' title='LinkedIn'de Paylaş'><strong>LinkedIn</strong></a>
</li>
<li class='sosyal-reddit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Reddit' Paylaş'><strong>Reddit</strong></a>
</li>
<li class='sosyal-technorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank' title='Technorati'de Paylaş'><strong>Technorati</strong></a>
</li>
</ul>
</b:if>
3-Ve son olarak önizleme yapıp problem yoksa şablonumuzu kaydedebiliriz.
