Blogger yayın altına Sosyal paylaşım Buttonları

blogger sitenizdeki konuların altına güzel bir sosyal  paylaş  eklentisi bunu  kendi sitemizdede kullanıyorus örneğini konuların  içine girip baka bilirsiniz. çokta hoş bir görüntü sağlıyo diğerlerinden biraz daha farklı  hemen kodu  verelim öncelikle HTML genişletip  ]]></b:skin> kodunu buluyoruz ve hemen üstüne aşağıdaki kodları ekliyorus

ul#social-ikonzs,ul#social-ikonzs li{list-style:none;padding:0;margin:0}
ul#social-ikonzs li{float:left;position:relative}
#social-ikonzs a{width:32px;height:32px;display:block;margin:0 5px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL1wvO7Gc6G0_kF9dBM_CpqU8_EgELmAlNZUv_GTOVvUdAE1kHCQWI6SkZUViVEfLYaPWI2lS8iCRq8vDBCFy_SPYMyWnlBBhs9ljIqAJdnbRKhyqlhER_Hl76gzKNA0dL31s0OQxhH0/s1600/sprite+images.png);background-position:0 0;background-repeat:no-repeat}
ul#social-ikonzs li.facebook a{background-position:-32px 0}
ul#social-ikonzs li.twitter a{background-position:-192px 0}
ul#social-ikonzs li.google a{background-position:-64px 0}
ul#social-ikonzs li.stumbleupon a{background-position:-160px 0}
ul#social-ikonzs li.digg a{background-position:0 0}
ul#social-ikonzs li.delicious a{background-position:-224px 0}
ul#social-ikonzs li.linkedin a{background-position:-96px 0}
ul#social-ikonzs li.reddit a{background-position:-128px 0}
ul#social-ikonzs li.technorati a{background-position:-256px 0}
#social-ikonzs strong{display:block;width:auto;padding:8px;position:absolute;background-color:#ee6067;color:white;left:200%;bottom:40px;-webkit-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-khtml-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden}
#social-ikonzs li:hover strong{left:20%;-khtml-opacity:1;-moz-opacity:1;opacity:1;visibility:visible}
.ikonz-social{margin-bottom:30px;padding:0 10px;height:46px;background-color:#fff}
.ikonz-social span{float:left;font-family:"Oswald",arial,sans-serif;font-size:170%;padding:0;margin:12px 0 0}
ul#social-ikonzs{float:left;margin:7px 0 0}
.post-body a{color:#ee6067}
.post-body a:hover{color:black}
.bwh-title{overflow:hidden}
@media only screen and (max-width:959px){
  .ikonz-social span{font-size:150%}
  #social-ikonzs a{margin:0 2px}
}
@media only screen and (max-width:767px){
  #social-ikonzs a{margin:0}
  .pager-isi h6{font-size:120%}
  .post h1.post-title {font-size: 200%;}
  .pager-isi h5{font-size:110%}
  .post-body img{max-width:100%}
}
@media only screen and (max-width:479px){
  #social-ikonzs a{margin:0 2px;width:25px;height:25px}
  .ikonz-social span{display:none}
  .pager-isi a{padding:10px 20px}
  .pager-isi h6{font-size:110%}
  .pager-isi h5{font-size:105}
}

Ve son olarak tekrar html bölümünde bu sefer data:post.body kodunu arattırıp buluyorus ve hemen altına aşağıdaki kodları ekliyoruz

<div class="ikonz-social">
Hemen Paylas : 
<br />
<ul class="social-ikonz" id="social-ikonzs">
<li class="facebook">
<a expr:href="&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title" href="http://draft.blogger.com/null" onclick="window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;" rel="nofollow" title="Share this on Facebook"><b>Facebook</b></a>
</li>
<li class="twitter">
<a expr:href="&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url" href="http://draft.blogger.com/null" rel="nofollow" title="Tweet This!"><b>Twitter</b></a>
</li>
<li class="google">
<a expr:href="&quot;https://plus.google.com/share?url=&quot; + data:post.url" href="http://draft.blogger.com/null" onclick="javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;" rel="nofollow" title="Share this on Google+"><b>Google+</b></a>
</li>
<li class="stumbleupon">
<a expr:href="&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="http://draft.blogger.com/null" rel="nofollow" title="Stumble upon something good? Share it on StumbleUpon"><b>StumbleUpon</b></a>
</li>
<li class="digg">
<a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="http://draft.blogger.com/null" rel="nofollow" title="Digg this!"><b>Digg</b></a>
</li>
<li class="delicious">
<a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="http://draft.blogger.com/null" rel="nofollow" title="Share this on del.icio.us"><b>Delicious</b></a>
</li>
<li class="linkedin">
<a expr:href="&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;" href="http://draft.blogger.com/null" rel="nofollow" title="Share this on LinkedIn"><b>LinkedIn</b></a>
</li>
<li class="reddit">
<a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" href="http://draft.blogger.com/null" rel="nofollow" title="Share this on Reddit"><b>Reddit</b></a>
</li>
<li class="technorati">
<a expr:href="&quot;http://technorati.com/faves?add=&quot; + data:post.url" href="http://draft.blogger.com/null" rel="nofollow" title="Share this on Technorati"><b>Technorati</b></a>
</li>
</ul>
</div>

Continue Reading