Add This’ten yesyeni paylaş(share) uygulamaları

Daha önce bir çok kez tanıttığımız Add This’in boş burduğunu sanıyorsanız yanılıyorsunuz. Geliştirdiği uygulamalarına sürekli yenilerini ekleyen Add This’in şuan tanıtacağım bazı uygulamaları da gerçekten kullanılmaya değer.


HTML, CSS ve jquery kullanılarak hazırlanmış bu uygulamalar hoş animanimasyonlar sayesinde blog’uğunuz renklendirmek için kullanmayı düşünebileceğiniz güzel uygulamalar. Hazırladığımız Gadget sayesinde blog’uğunuza kolayca ekleyebilmenizde diğer bir artısı.

Sabit yan menü.

Uygulamayı blog’uğunuza ekledikten sonra sayfalarınızın soluna yerleşen sosyal imleme butonları sayesinde blog ziyaretçilerinizin içeriğinizi kolayca paylaşabilmelerini sağlayan bu uygulamnın CSS kodlarıyla oynayarak kendinize göre özelleştirebilmenizde mümkün.

Uygulamanın demosuna buradan bakabilir aşağıdaki gadgetı kullanarak ta kolayca blog’uğunuza ekleyebilirsiniz.

<div class="addthis_toolbox atfixed"> <div class="custom_images"> <a class="addthis_button_facebook"><img src="http://www.addthis.com/cms-content/images/gallery/facebook32.png" alt="Share to Facebook" /></a> <a class="addthis_button_twitter"><img src="http://www.addthis.com/cms-content/images/gallery/twitter32.png" alt="Share to Twitter" /></a> <a class="addthis_button_stumbleupon"><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon32.png" alt="Stumble It" /></a> <a class="addthis_button_more"><img src="http://www.addthis.com/cms-content/images/gallery/addthis32.png" alt="Daha Fazla..." /></a> </div> </div> <style type="text/css"> .addthis_toolbox.atfixed { position: fixed; top: 50%; left: 20px; border: 1px solid #eee; padding: 5px 5px 1px; width: 32px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .addthis_toolbox .custom_images a { width: 32px; height: 32px; margin: 0; padding: 0; cursor: pointer; } .addthis_toolbox .custom_images a img { border: 0; margin: 0 0 1px; opacity: 1.0; } .addthis_toolbox .custom_images a:hover img { margin: 1px 0 0; opacity: 0.75; } </style> <!-- AddThis Script --> <span id="preservec15e845217244d8085035cbff6d0947a" class="wlWriterPreserve"><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script></span>
Uygulamanın kodlarını kopyalayarak blog’uğunuzun kodları arasında gelmesi gerektiği yere yerleştirebilir veya altta bulunan düğmeye tıklayarak kenar çubuğuna gadget olarak ekleyebilirsiniz.

-----------------------------------------------------------------------------------

Share Stack (Paylaş sepeti)

Sepet şeklindeki ikona tıkladıktan sonra açılan sosyal imleme servislerin bulunduğu bu uygulamanın demosuna buradan blog’uğunuza eklemek içende aşağıdaki gadgetı kullanabilirsiniz

<style type="text/css"> .stack { position: fixed; bottom: 28px; right: 40px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; } .stack * { margin: 0; padding: 0; } .stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; } .stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; } .stack ul li { position: absolute; } .stack ul li img { border: 0; } .stack ul li span { display: none; } .stack .openStack li span { display: block; position: absolute; top: 17px; right: 60px; height: 14px; line-height: 14px; background-color:#000; border: 0; padding: 3px 10px; text-align: center; text-shadow: #000 1px 1px 1px; font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: 12px; color: #fcfcfc; border-radius: 10px; opacity: .85; filter: alpha(opacity = 85); -webkit-border-radius: 10px; -moz-border-radius: 10px; } /* IE Fixes */ .stack { _position: absolute; } .stack ul { _z-index:-1; _top:-15px; } .stack ul li {*right:5px;} </style> <div class="stack addthis_toolbox"> <img src="/cms-content/images/gallery/stack.png" alt="stack" /> <ul id="stack" class="custom_images"> <li><a class="addthis_button_facebook"><span>Facebook</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="Share to Facebook" /></a></li> <li><a class="addthis_button_stumbleupon"><span>StumbleUpon</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="Stumble It" /></a></li> <li><a class="addthis_button_reddit"><span>Reddit</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="Share to Reddit" /></a></li> <li><a class="addthis_button_digg"><span>Delicious</span><img src="http://www.addthis.com/cms-content/images/gallery/digg.png" alt="Share to Digg" /></a></li> <li><a class="addthis_button_more"><span>More...</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis.png" alt="More..." /></a></li> </ul> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <script type="text/javascript"> $(function () { // Stack initialize var openspeed = 300; var closespeed = 300; $('.stack>img').toggle(function(){ var vertical = 0; var horizontal = 0; var $el=$(this); $el.next().children().each(function(){ $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed); vertical = vertical + 55; horizontal = (horizontal+.75)*2; }); $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack') .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed); $el.animate({paddingTop: '0'}); }, function(){ //reverse above var $el=$(this); $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed); $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed); $el.animate({paddingTop: '35px'}); }); // Stacks additional animation $('.stack li a').hover(function(){ $("img",this).animate({width: '56px'}, 100); $("span",this).animate({marginRight: '30px'}); },function(){ $("img",this).animate({width: '50px'}, 100); $("span",this).animate({marginRight: '0'}); }); }); </script>

Uygulamanın kodlarını kopyalayarak blog’uğunuzun kodları arasında gelmesi gerektiği yere yerleştirebilir veya altta bulunan düğmeye tıklayarak kenar çubuğuna gadget olarak ekleyebilirsiniz.



----------------------------------------------------------------------------------

OS X Styled Sharing Dock

Dock stili bu uygulamada yine sayfalarınızın altına yerleştikten sonra farenin imleci üzerine geldiğinde büyüyen sosyal imleme butonlarından oluşuyor uygulamanın demo sayfasına buradan blog’uğunuza eklemk içinse diğer uygulamalarda olduğu gibi altta buluna gadgetı kullanabilirsiniz.

<style type="text/css"> #sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; } #dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; } .dock-container { position: relative; background: url(/cms-content/images/gallery/dock-background-sm.png) no-repeat bottom right; height: 50px; padding: 20px; } .dock-contaner-left { background: url(/cms-content/images/gallery/dock-background-sm.png) no-repeat left bottom; width: 15px; height: 32px; position: absolute; bottom: 0; left: -15px; } .dock-container .custom_images a { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; } .dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .dock-container .custom_images img { border: 0; margin: 5px 10px 0px; width: 100%; } </style> <div id="sharedock"> <div id="dock"> <div class="dock-container"> <div class="dock-contaner-left"> </div> <div class="addthis_toolbox"> <span>Facebook</span><img src="http://www.addthis.com/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /> <a class="addthis_button_twitter"><span>Twitter</span><img src="http://www.addthis.com/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a> <a class="addthis_button_myspace"><span>MySpace</span><img src="http://www.addthis.com/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a> <a class="addthis_button_stumbleupon"><span>Stumble</span><img src="http://www.addthis.com/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a> <a class="addthis_button_reddit"><span>Reddit</span><img src="http://www.addthis.com/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a> <a class="addthis_button_delicious"><span>Delicious</span><img src="http://www.addthis.com/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a> <a class="addthis_button_more"><span>More...</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis_64.png" alt="More..." /></a> </div> </div> </div> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://www.addthis.com/cms-content/images/gallery/fisheye-iutil.min.js"></script> <script type="text/javascript"> $(function () { // Dock initialize $('#dock').Fisheye( { maxWidth: 30, items: 'a', itemsText: 'span', container: '.dock-container', itemWidth: 50, proximity: 60, alignment : 'left', valign: 'bottom', halign : 'center' } ); }); </script>

Uygulamanın kodlarını kopyalayarak blog’uğunuzun kodları arasında gelmesi gerektiği yere yerleştirebilir veya altta bulunan düğmeye tıklayarak kenar çubuğuna gadget olarak ekleyebilirsiniz.



Add This’in diğer uygulamaları incelemek içinse Add This Glary’e göz atabilirsiniz