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/AVvXsEiUA8LXjXTuLxH7Y7xcK2HIvNBlmQrcngVUKrMg31LtcP2tGsTjPi7tFPK8xZPK7F9y1P50N1xyjVEIPB54NP-geVYDoCY9UQq6Y9-ZlKZ0TG2OQ0BjeKEb2091GzYIBOM1RinTG4uYhzOD/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/AVvXsEiwBR5_Z_gBlEzFMquOk8TAkVGr5HvuDEmRdllgcGAjVFUeTqlpw_7DgXGedwfnmaQMUkwm9Ine-b2Bnh71_EHxXhLOWfcnC5_Y9k8BRiU7IzEyYanso7wnUtDY8gyao3UzMhmDV9AJbqNA/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/AVvXsEiUA8LXjXTuLxH7Y7xcK2HIvNBlmQrcngVUKrMg31LtcP2tGsTjPi7tFPK8xZPK7F9y1P50N1xyjVEIPB54NP-geVYDoCY9UQq6Y9-ZlKZ0TG2OQ0BjeKEb2091GzYIBOM1RinTG4uYhzOD/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.

<div id='mintshare_mini'>
<a class='sharetext'><b>Share This</b></a>


<div class='flyout'>
<ul class='icons'>
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDdchL14_5q_c9SCGtfWdDaMhb-HhLTvNB89gr-EFdMCkeSYpwP0judML9FOey3Hi0GdFS59BFrDZqjyxG3dYyn6E11eeV5n4zQnd0__gRbk9E10b7dL67PxVRn9ZHMbnRFO4zQUa588k0/s1600/facebook_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgd_PnE-mqsF0Y6-G8uTEhAKWFEum5VKAiawdiDYfKrsdJp34D-xrCAF8WNbp6y6bV8Uymo3qzURN7o8wyofWViQZg8LYvipbZuiR2FeNg35SirQY0NrTlIxpnCWLcretocdWK2ELf1iCq/s1600/twitter_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnBtk_mgexA8ZN_enf9vRHYRLX-ZrJywfsWzK2K1NxdviMjXaSTu6NK0e6apPCaIBKI3DgCRYdvaE8joC6Fz0FiQW-Nbq7nX2SPf3k-cljdjKQezty3dbfVosL3wnnqSYqlSJPOzu3XNak/s1600/stumbleupon_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMelTsUSyqx4YyeL9W7lHDumvBxDajDyMk95QltEGrnaI-9mHqwGYOt2oiOTQNUbECVMSa7-1UBzC7Ln8l-ydPRjQ_wnn3GF0u3owkbEzHkJ6i33bvvAWtHh5l7d7fnfLkPME78dnLVcxL/s1600/digg_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgav28gLrGeyw_9TU2J2E1ESYB93MQAytVffHp3pAIZ5Qu6Euk88wTSSoP5WdIQFepAuY5Hsqe-1m-RpmuHqWGDfVkzZYkyTIjZx7LWRl_78IK4j1BE5knumprhxzOY1MDE75cKliKmAflu/s1600/technorati_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidb5v89tnUBcmuy2s98U96yBRDNDU70RVnO7p8FYMtUVcCTq62Sd2Jf4iahus7tO4DCWQzXHOPm2hmyrQlnKPD55FX7BOvfo-cgAjCmWSmnHUuFmWGmtg7kwC6AeiUK-eJMQ5N9udO5oEc/s1600/reddit_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2mdgk_53EIWPZT7r58TwovkEt9uI5WCehcIFzl2pmt6-042V_JLW60OtezsybjWsKpErr1K39EE_27uMIpvaUliR36gbYMLFBgARnTU-eIbTRMAQYEahwT0VFn_2A591ONpDRa7fmlil/s1600/yahoo_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4wpNQpzgtbuX4XXyX5Q6v8WedFyUzzAVrkWa2BbP3q2Zr-FUfi_61lcU7E5GPUMY85_VczKuwKyVX3qzqt_SOwW5x3UuAwSVRKKqU-wTAvireTk7vOBtX8T_tWIbKf8zMCBn9T0LFuS32/s1600/delicious_small.png"/></a></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>

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.

<div class="mintshare-wrap"><a class="top-a">Share This</a>

<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>

</div>

Kaynak;

1 yorum:

Unknown8 Haziran 2014 21:58
Hocam bu Butonlar benim templatenin altina olmuyor..sebebi temanin kendi yayin altinda paylasim butonlari var ben bunu kaldirip burda olan paylasim butonlarini eklemek istiyorum ...yardimci olurmusunuz ...http://www.cineasya.net burda konu altinda bakin nasil yapabilirim bi yardim edin lütfen..
YanıtlaSil
Yanıtlar