Blogger Css'li Konu Paylaşma Kodları

Merhaba arkadaşlar Blogger tabanlı siteleriniz için kullanabileceğiniz güzel ve şık bir eklenti konu altında veya nerede isterseniz yanda Widget olarak ta kullanabileceğiniz Css görünümlü Paylaşma kodları yapmanız gerekenleri aşağıda anlatacağım , zaten yapmanız gereken 2 şey var 

Öncelikle Temanızın Yedeğini Alın Arkadaşlar Herhangi bir sorun olursa temanızı geri yüklemek için

Demo Görmek isteyenler konu altına bakabilir hemen ilk Paylaşma butonları


1.İşlem
Aşağıdaki Css kodlarını Sitenizin Şablonundaki Css Bölümüne Yapıştınız


.share-story-container{display:block;min-height:41px;border-top:5px solid #F1F1F1;width:100%;position:relative;margin:0;padding:4% 0 0} .share-story-container ul{list-style:none;text-align:center;margin:0;padding:0} .share-story-container ul li{text-align:center;display:inline-block;margin:0 10px} .tweet,.fb-tips,.googleplus,.linkedin,.pin-it,.stumble{color:#666;border:1px solid #CCC;font-family:helvetica;-webkit-transition:.07s ease-in;-moz-transition:.07s ease-in;-o-transition:.07s ease-in;transition:.07s ease-in;padding:10px 25px} .tweet:hover,.fb-tips:hover,.googleplus:hover,.linkedin:hover,.pin-it:hover,.stumble:hover{color:#FFF} .tweet.tips:hover{background:#00A0D1;border:1px solid #00A0D1} .fb-tips:hover{background:#3B5998;border:1px solid #3B5998} .googleplus.tips:hover{background:#DA4834;border:1px solid #DA4834} .linkedin.tips:hover{background:#0077B5;border:1px solid #0077B5} .pin-it.tips:hover{background:#CB2027;border:1px solid #CB2027}


2.İşlem 
Aşağıdaki Html Kodlarını Bu eklentinin nerede görünmesini istiyorsanız oraya yapıştırın 
(genellikle konu altı daha uygun oluyor ) 


  <div class='post-footer-line post-footer-line-1'> <b:if cond='data:blog.pageType == "item"'> <div class='share-story-container'> <ul class='share-story'> <li><a class='tweet tips' data-title='Twitter' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Tweet It</a></li> <li><a class='fb-tips' data-title='Facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Like It</a> </li> <li><a class='googleplus tips' data-title='Google+' expr:href='"https://plus.google.com/u/0/share?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Google+</a></li> <li><a class='pin-it tips' data-title='Pin it' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'>Pin it</a></li> </ul> </div> </b:if> </div>