Blogger Css ile Hareketli Paylaş Butonları

Yazılarımızın sosyal medya da paylaşılması popülerliğimizi arttırmaya yardımcı olmaktadır. Bunun için ise yazılarımızın altına yada üstüne yazılarımızı beğenen okuyucularımızın rahatlıkla paylaşım da bulunabilmelerini sağlamalıyız.

Css ve Html kullanılarak hareket verilen sosyal paylaşım butonlarımız faremiz üzerine geldiğinde sayfanın sol kenarından gelerek şık bir açılma efekti ile karşılıyor. Faremiz butonların üzerinden ayrıldığında geri yerine ekranımızdan kayboluyor.

ÖNİZLEME

Botunlarımızı sayfamıza eklemek için 2 yolumuz bulunmaktadır;

1. Yol:

Blogger Kontrol Paneli > Şablon > Html'yi Düzenle yolunu takip ederek ]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıdaki css kodları yerleştiriyoruz.

Css Kodlarımızı ekledikten sonra <data:post.body/> bulup hemen sonrasına aşağıdaki HTML kodlarını yerleştiriyoruz.

UYARI: Bazı Şablonlarda bir kaç tane <data:post.body/> kodundan bulunabilir. Şablonunun durumuna göre hangi koddan sonra yerleştirmeniz gerektiği değişiklik göstermektedir.

2. Yol: 

Bu yol diğerine göre çok daha kolay bir yol. Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek açılan pencereye aşağıdaki kodları yapıştırıyoruz. Eklediğimiz Gadget'i Sayfamızın istediğimiz alanına yerleştiriyoruz. Sonucunda Paylaşım butonlarımız kullanıma hazır duruma geliyor.

<style type="text/css">#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/AVvXsEgzZ0JNNSXseOOxQOW5aQccfcYLnKPOfZMARKyvEEzfOaGLEtJ1x57YAT-eqlKQegNeGrMBiZE1xfo-ON_i56ExhrmgA4zE0poqfxVwjoDfrK4g_2LNY-NTornQ3ZwvUD_y3ys8bxsGdDTh/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/AVvXsEiii3hzMpxgoi6KqHtny1WIRooktBp4ECYdtnVo4AtAb8wBcGh21Dhrz5d9I2KaLrij03iVoa3RFlBVpeoZgQW4CsgMzSL7JWl_L3oVo7-NQwexBD6Q1402_224y8Kf2LMKbkeW8EWM1bQO/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/AVvXsEgzZ0JNNSXseOOxQOW5aQccfcYLnKPOfZMARKyvEEzfOaGLEtJ1x57YAT-eqlKQegNeGrMBiZE1xfo-ON_i56ExhrmgA4zE0poqfxVwjoDfrK4g_2LNY-NTornQ3ZwvUD_y3ys8bxsGdDTh/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;list-style:none;position:absolute;left:-2000px;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);}#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);}#mintshare_mini .get_mintshare {font-size: 10px;margin-left: 5px;position: relative;top: 2px;}</style>

<div id='mintshare_mini'><a class='sharetext'><b>Paylaş</b></a><div class='flyout'><ul class='icons'><li class="drop-li"><a rel="nofollow" href="http://www.facebook.com/sharer.php?u=https://www.facebook.com/Xtrealblog"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfgt3Fqjz3US_HuiVXyi3m2qtrcztjGSybOP6jXSu8368ZH74V_alFIgiOZfhhtE4c5uYnEWoXuFY7v-fbvK269JOeru0_u8vsVcfd9i-8bXOsbzw3SYVdEypC4vTRlnGep6ihcWkK53qP/s1600/facebook_small.png"/></a></li>

<li class="drop-li"><a rel="nofollow"  ref="http://twitter.com/share?url=https://twitter.com/xtrealblog"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKW_RO0scvs2NZOxkbCEsIT1EMQQWmL-719jv9ONy9f8loahmnzef48n08Z8oAsyYdYInINcocdVEuZ3i1Yk8NpOCvbgnFbBGDlWupoyeaem1toQLLlrGVPRmqhrnk1hhDmsJpNDvQF0MX/s1600/twitter_small.png"/></a></li>

<li class="drop-li"><a rel="nofollow"  ref="http://www.stumbleupon.com/refer.php?url=URL BURAYA"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb1yKHFxGyzqDDSU39HhAUybWDTMx-KbN-ink8ai5iXYeFFPCfzHSXvGGm9JbTmt4pXCwWrNtHeBR84XhT3IUb0BJ8M8Bswr3XhPhE9Vc_45K4z-HLsKvPCL2NFQqjYMDIkmUaYyV-7ikg/s1600/stumbleupon_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<li class="drop-li"><a rel="nofollow"  ref="http://digg.com/submit?phase=2&amp;url=URL BURAYA" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKWPJTzi9oeMQ1dsdvury0VJDNjhjDRMlVtrjhvdJuZrrc9rRlbuwiMAkXLP2-crhT2kJhUDVwcGddlNhyphenhyphenvkhiO9hrFDcIGio83ptpfqoDq6MvF20fTh0k0shTrSuf1df0PNC-_IoCY4Cd/s1600/digg_small.png"/></a></li>

<li class="drop-li"><a rel="nofollow"  ref="http://www.technorati.com/faves?add=URL BURAYA" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYFOjlPvdrUYXaB379nVKqNfcxLI1nmFlhsCAPcwNdoyHfw0Y22jfOkhvap_zD_asw2rD7Fv4PusMTiecdeIsGvNC4NfJLgBUuCm4NS8ioHQD0BVKPtlVmdqq6zM2AXAzLu55sVDA9pref/s1600/technorati_small.png"/></a></li>

<li class="drop-li"><a rel="nofollow" href="http://reddit.com/submit?url=URL BURAYA"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfs4xriWD5cAhl6tGCPNdNO5aI3b5TwCd-IxMLKgcTDw5BhCmF8PhTOSjeL35jJxHpXHLIRbmdeB6riuB9AtEHYvZ7nmimfrl2qWAMc6eKSO63__pZfvDJ87unjtCLNfECLVwgfbAswscN/s1600/reddit_small.png"/></a></li>

<li class="drop-li"><a rel="nofollow" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=URL BURAYA" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7SfJvlbP9NAxVDL6L_T4VDMix44zSAnWbCnG7ikqaw2D8LGA0GWIZfwTGhenMsH8BW_gQ6Xw48vkHLrdYByNWfe4y8IZf9nfRlOz-qUvcivf23mVdouJUbKNdzoaoYzhI4wj1m0yje5Jd/s1600/yahoo_small.png"/></a></li>

<li class="drop-li"><arel="nofollow" href="http://delicious.com/post?url=URL BURAYA"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdLt6jYAsUb5Ocx4GEso5Z8nn_1pDf0ntU1PGWr356eH9ZZbiHGQLgw5Aong3FRR9IXcD9ip1I-1kpsmpk0HYqYZ6qUkM661SFRtu-xBB9RrTnUIfmA8ZgcB4yzaMlf-eZjSfxeuq0mAoG/s1600/delicious_small.png"/></a></li><span class="get_mintshare"><a href="http://www.bloggermint.com/2011/01/mintshare-social-bookmarking

-sharing-button-widget/">Sitene Ekle</a></span></ul></div></div>

Kodlar içersinde Değiştirmemiz gereken yerler ise;
URL Buraya yazan yerleri kendi url lerinizi ekleyiniz.
Xtrealblog yazan yerlere ise kendi Facebook ve Twitter isimleriniz ile değiştirin.