Blogeer Açılır Kapanır Paylaşım Butonları

Bugün sizlere oldukç.a şık bir sosyal paylaşım butonunun blogger'a nasıl ekleneceğini dilim döndüğünce anlatmaya çalışacağım. Aşağıda anlattıklarımı yapmadan önce blogunuzun temasının yedeğini almanızı öneriyorum. ''Bloğumun nasıl yedeğini alabilirim'' derseniz buradan faydalanabilirsiniz. 

İlk önce Blogger > Şablon > HTML'yi Düzenle  > Widget Şablonlarını Genişlet dedikten sonra ctrl + f tuş kombinasyonunu kullanarak </b:skin> kodunu aratınız.

Bulduğunuz kodun hemen üzerine gelecek şekilde aşağıdaki kodları ekleyiniz.


#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJw4OG6VpEQprNXAdUaq2fjrDeW_ZeotRgADioq9iyiOiDgn_PbiMrpTkWRamrwHQm3b_g4hFAafV4sQ4s99PfsHdOY5l_1JDgwpD_vfYb-2_FODfDe5Zml7m_aZjXPT5sbP0AUUXACDk1/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDIs8DhZQpW4_6DXs0CGJ__teJSvnMVpfwfF675EiTthlJGRWG_LI5AtcOwAVdzFyLYIH6ufZopeGcNrX1VHVO-bf1cSEe5ZaTG-gjLSrRRWpTYVDU8YH9DV8IK83GzxYYujFQXnuXiIr/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_mini a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}


#mintshare_mini .flyout {
    background: none repeat scroll 0 0 #AAAAAA;
    height: 113px;
    left: 40px;
    position: relative;
    top: -4px;
    width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}

#mintshare_mini .flyout ul {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJw4OG6VpEQprNXAdUaq2fjrDeW_ZeotRgADioq9iyiOiDgn_PbiMrpTkWRamrwHQm3b_g4hFAafV4sQ4s99PfsHdOY5l_1JDgwpD_vfYb-2_FODfDe5Zml7m_aZjXPT5sbP0AUUXACDk1/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute; 
left:-1000px; 
top:-27px; 
width:365px; 
height:30px; 
border:1px solid #888; 
border-left:0; 
padding-right:10px;
z-index: 500;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}

#mintshare_mini:hover .flyout ul{
left:50px;
}

#mintshare_mini .flyout ul li {
float: left;
}

#mintshare_mini .flyout ul li a{

}

#mintshare_mini .flyout ul a img {

}

#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}


#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}

#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}


/* For IE6 */

#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_mini .get_mintshare {
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

Daha sonra <data:post.body/> kodunu aratıp yine hemen üstüne gelecek şekilde aşağıda verdiğim kodları ekleyiniz.

<!-- MintShare Mini -->
<div id='mintshare_mini'>
<a class='sharetext'><b>Share This</b><!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class='flyout'>
<ul class='icons'>
<li class="drop-li"><a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD0u1lOjPTcOAr4gRhBkiCPmAl0hh0HYxwXVTzOr4cUB4ChBeDjdYdCxZPU2Bj9Cs5aLLAVrgIfBdfWw2CmjvZ4pk3a-GujLlE-BFNXjd2mZxXga4406wgdthNbCBLp95EuVLD57e7ncpZ/s1600/facebook_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijbW0KXbHYt4CC4ijSAfqZx4HPIzR2jOryQQnpfgjDgpJ1rmKbOxs_hyBtR2njPcg9aSrXlyyRRK3qcxWNEftJSmjJ8RvwxAmKb0g3GWFO7LFaJLVkD_fm0ysbIx-kpTarj1zOX1UvmFpf/s1600/twitter_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrWukqWW8pii-OoL1z5TrDFwFph3zo5yy_PmeZKhsOrSxRMB1kmGavUbfoBKo63tykWcGmV1m2z2y8azNuXBt-AP9H72wr1L6LJIUrEZoPcUZeWni6lHw1RHcoQLQbuc5jMHOTytMEo7p8/s1600/stumbleupon_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj40JrjPwRnL2En_c3U9Ykfp6Ruu_TCIC59ODur7Dx7UDRXsC0QUgmDtUGO2i-3r-ggEDrFtSd7pq-bmW1nZR8xq1hVV5VpK2QhBT5zYcPrdKpaU27t9795HyD2oWshdBP4xB6eCL-7L_0_/s1600/digg_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8fJKQRyGN_iKy10Y02ahSD2HLt13weItPiivy39q2kEmdKipDmTZ8pBrm373HQ5nvZlY9XoxZkmdNN8GSvAvqYy61mPr2bzevffHYt-yqB66o2krkTD0hZgDPXOrvHgwz5TOzBwfDJ3tS/s1600/technorati_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZixvA2lLWKIiKXYC0o6jXUAVouBfN5Gr3CZvvExNWxLAY-ANYFq8nxoCZKZjlES1p-IH9jtQmxnHp1018Svl6_IzLlvtqrL6hjxE91FkRzEiXywAycvlvBQ2UBJ7OK9XY7quqbIjdJSe/s1600/reddit_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDQKDNLMTnrjzidIwMHCmZVLjWd6qCRKzqwRPYyXFSBX4Uz7EC-kO7CJEfwHzV64Tj9fkVVr_h7JE8o-aoXN-6bnOPvH-Dl0xVLpnzLNJJoBR5RbCISR5HoX6ZYPGUwv5Y7iCdcjFJtxCj/s1600/yahoo_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5qE-d6HIxrDu0LmZ2kao43yzMThA4YCatz0fbDKqz17F80Xd5NdLEvotguMAVVJ-Eoc1xlghnq3UTQ37f8JpkrgPZ9oDKy9-DHTjVevqIE4tz-soKZbjEPpOCBEN4losG2bpPUxcFsdt9/s1600/delicious_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<span class="get_mintshare"><a href="http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget/">Get MintShare!</a></span>

</ul>
</div>
</div>
<!-- MintShare Mini End-->

Ekledikten sonra şablonunuzu kaydedip çıkabilirsiniz. 

Yukarıdaki kodları ekledikten sonra paylaşım botunu aşağıdaki gibi olacaktır.

Butonların yana değilde aşağıya doğru açılmasını istiyorsanız aşağıdaki kodları <data:post.body/>  kodunun hemen üstüne ekleyiniz.

<!-- MintShare Compact -->

<div id="mintshare_c">

<div class="mintshare-wrap"><a class="top-a">Share This<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div class="flyout">

<ul class="icons">

<li class="drop-li"><a expr:href="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlb4k3Ul0G0Vhn4Zp0CePU9-RRZrLVFt1OiM-m3DCOXBbNQboQrFWIUkS2e0sszjpW7CUpWyrLqpLGLqrPNdDc4ER8xACT_in0c2zbn2R1F9XmxVLRoKyNkgxhVsWiwesEYbUbd7MCVhyc/s1600/facebook_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<li class="drop-li"><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4HkzFZWP8CWEXvxmq6BKqH2YhkDwbUP4OcpShRm-8-c8_lf10eJ0tpQzUyjnSkptYA0wObT3n0dglJErpW75O0xTJWZ6PzH096dNGKvq2W-Ry5LXZVvD_nETDr-BVsSFxJ-AQCcvtT4sc/s1600/twitter_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<li class="drop-li"><a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGTFmLLwSYxHdOuFkIhbUNq0XxwWqVSDlCrVQv7j7r9k0cqeHvGMh8JFqvyLOSUSgOPb3sYEsZ9pa-0p6kt2tGnzezG5Twt16wVytjcQIvvtvTHCpEKzknc4-A8IE4bdf6I217ABwNV8_/s1600/delicious_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<li class="drop-li"><a expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbvz0QBAFMMrUaxYJLU2kUeZeIerCDmwR-pw97jJD5-fA1NHejsZbIfO9vR15tKh_JyKaIqtIkqvwuv0kszmZyzVUsGQhJXXAmr8UmV_jwDT73fgootmk1V8btT4K_aDjoKfXLIqs4vJyl/s1600/stumbleupon_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<li class="drop-li"><a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5VSabyPTVQFFWDo7O-5Q1G0VGeoyInbuefVPVl_aHeFvHdzN4ZB6muo0ZMzeWWglx0mq6iZPbZJnnea2snrVHGOdy4ALH6EsiSsGXIrMUAj3efgVgZu8krB-Tum4yXi4gDDoTYya6aYG/s1600/digg_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<li class="drop-li"><a expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9AjxojOMTkQJk5fslBKoEEgpF7W4OezygNid1LcUWv32eS-4ycriafYA4VXZEcZ3RsX8zlhMwFpklFhRv6BN2kL_edN2NHKDxby4yz4_gb0aB-UKAEXBlLikn3a2jbiLLW3899gmzqlYI/s1600/technorati_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<li class="drop-li"><a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_7nSOW29XEUbxMdGdVgRMLUnPGGeACG_SWVqZwtGg1j4iLkN_Z3oNsYKsI0o_Ygn3CYsRIswbGuOSXQTC6GVIPOYHeKL1dXLrXLChR5IWf9bunZO2Mt89xro7nj7P92B8AA5MqdKoFSR/s1600/reddit_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<li class="drop-li"><a expr:href="&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFKTn5wUJkXG3dIJ1t-px2sfKAQOiHs5gHExbGipkTq95eR7ru_lahXLVjJ3R42Zi1wQLy-hPOh5NncDSAbmYF0k2u8My9ht3IYB8GuE44VLSFO3p0kE13VJyc4shAeqn0IfIlQnxSQ9iG/s1600/yahoo_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<span class="get_mintshare"><a href="http://www.bloggermint.com/2011/01/mintshare-social-bookmarking

-sharing-button-widget/">Get MintShare Now</a></span>

</ul>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</div>

</div>

<!-- MintShare Compact End-->

Kaynak;