Blogger Icin Yazi Altina Sosyal Paylasim Butonlari

Blogger Icin Yazi Altina Sosyal Paylasim Butonlari

Blogger Sablonlarinda sabit bulunan  paylasim butonlari kucuk olmalari nedeniyle fazla begenilmiyor daha onceki yazilarimda farkli bir  sitil  yazi alti paylasim widgeti paylasmistim simdi ise bende kendi blogumda kullandigim cok sik bir  blogger icin yazi alti sosyal payalsim buton widgeti paylasacagim kurulum  basit Sablon- Html yi duzenle ve asagidaki kodu arat

1- ]]></b:skin> kodunu buluyoruz Buldugumuz kodun ust tarafina asagidaki kodu ekliyoruz

ul.social_btrix { list-style:none; display:inline-block; margin:15px auto; } ul.social_btrix li { display:inline; float:left; background-repeat:no-repeat; } ul.social_btrix li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; } ul.social_btrix li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; 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); padding:3px; } ul.social_btrix li.abfacebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNB3jjt66j_U7ZJeGLfMUxg1V8Pignv6TlYbTpcQ8B-fN9HrCqu9ckAv-AdWlUFLeFBnKQNYFMqu71_Lx8yrmxXAEKDTodpNSVvrhkMGgq1zzRA1PNzbvLYpDtjeXNXdYo8WwzKBMf4lMd/s1600/btrix-facebook-icon.png); } ul.social_btrix li.abtwitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvXGNdJ4Ui1XR3dsGvXuT4dXHMA-isiAVRqft59SbJU_fJVhckciO33L62iY89472SclvAL2VercqVakxeDcvlFYBb29B8oyTBTjE_4DwammgiOb4MBSKzoVvqX7QJKeu9u70o54gHfnjb/s1600/btrix-twitter-icon.png); } ul.social_btrix li.abgoogleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5d1JA_69i5-oUyhferDC3ar04B4X0upoR9uhGNvBqgZvOi4w42nx-fNhXidUfKVespZrKGAEkXYdQ9r5ML5IlbPtwdrWAl17tOvFtHYr6Bfumu8WoiiUCBl7sJaV69FCVKLd0T5RWJ5Yd/s1600/btrix-google-icon.png); } ul li.abpinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyzp_9wbVFEWwSqc303SXw7C448Lv8DnApofJCWKxqJzkPIUm_5hbxH4Pm7uFEpa7rWw8pDUcBn7SaOtuQkERZJczEWhDvkokOqHwGU0kQzIi-ogwo6aGvswXD_2psV2hbQBlfmTmh6SS9/s1600/btrix-Pinterest-icon.png); } ul.social_btrix li.ablinkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnxsV9OldttCjBoVcG9FZCaKg5PmzvMJGf_0Hz3GFaDpkSQQ2fLQY28I2ITpfbM0bBIOy-ETYh9KujS_hTLQ0-Vp38OOHuUTraMdjCk-8lZVFvelAN-O0pECFHY_6CnSGmCB9IJ1djEpXn/s1600/btrix-Linkedin-icon.png); } #animation_btrix:hover li { opacity:0.2; } #animation_btrix li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; } #animation_btrix li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; } #animation_btrix li:hover { opacity:1; } #animation_btrix li:hover a strong { opacity:1; top:-10px; }

Daha sonra <data:post.body/>  bu kodu aratiyoruz Dikkat edilmesi gereken bir nolta var
bu kodtan (2-3) adet olabilir bende (3) adet var  genelde iki ve ucuncu kod da calisir
yani  sirayla bu kodu denemeniz gerekebilir Asagidaki kodu <data:post.body/>  kodunun altina yerlestirin


<b:if cond='data:blog.pageType == "item"'> <div style='font-size: 22px;'> <b>Share this article with your friends.</b></div> <ul class='social_btrix' id='animation_btrix'> <li class='abfacebook'> <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'><strong>Facebook</strong></a> </li> <li class='abtwitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a> </li> <li class='abgoogleplus'> <a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a> </li> <li class='abpinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a> </li> <li class='ablinkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a> </li> </ul> </b:if>

NOT: Bazen on izleme yaparken kodun calismadigini gorebilirsiniz  once Onizleme yapin site izleme alaninda calisiyorsa  ve widget calismiyorsa Kaydedip birde oyle deneyin Ama once mutlaka Onizleme yapin sorun yoksa Kaydedin