Diig stili paylaş (share) menüsü

Blog’uğunuzu oluşturup bir taraftan içerik girerken bir taraftan da blog’uğunuza yeni özellikler kazandırmak için eklentilerle geliştirirken aklınızdan daha fazla nasıl ziyaretçi çekebilirim diye geçirdiğiniz olmuştur.

           
Peki blog’uğunuza daha fazla ziyaretçiyi nasıl çekebiliriniz?
Cevap çok basit blog ziyaretçilerinize kendi sosyal ağlarında sizin yazılarınızı paylaşabilecekleri araçlar sunmak.

Bunlara güzel bir örnekte sosyal imleme servisi Digg’in kullanıcılrının içeriği kendi sosyal ağlarında paylaşabilmeleri için oluşturulmuş menü.
Bu menüyü bir defa blog’uğunuza ekledikten sonra kendinize göre özelleştirme imnkanınızda bulunuyor 


    

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle gidin.

Tam şablon yükle yazan bağlantıyı kullanarak şablonunuzu yedekledikten sonra Widget Şablonlarını Genişlet yazan kutucuğu işaretleyin.


Bu işlemlerden onra  klavyenizin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan arama formunda ]]></b:skin>  ifadesini aratın.

]]></b:skin> ifadesini bulduktan sonra hemen üstüne gelecek şekilde aşağıdaki CSS kodlarını ekleyin.

CSS Kodu

#shareit-box { position:absolute; display:none; } #shareit-header { width:138px; } #shareit-body { width:138px; height:100px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgivyWJhDEB0DtOnRBF0GpfVTCEJfSfxl_8z_SO6-u8OdX2_yQJxfU8voNVaaz6Luc_Y463UtZfgOMeq3N99BsMCdM3053goRlfDjX6nzw6j8OTb8yX9b_l3izh3YDOGV7x9_4Vao3LXPQV/s320/shareit.png); } #shareit-blank { height:20px; } #shareit-url { height:50px; text-align:center; } #shareit-url input.field{ width:100px; height:26px; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCftU2VXGA5iueju1F7OxcHpBdF29YmDDy5JYQE_CVJaCsOGwmzog_QXuJQaX2X09uwXQizU2SMK-ABcC4GwR71NcXcYy7iwQaXNIlTtonR3JQQtHTYhY6lXNco-5q8T-CsANU7Q3Vvyp/s320/field.gif) no-repeat; border:none; outline:none; padding:7px 5px 0 5px; margin:3px auto;font-size:11px; } #shareit-icon { height:20px; } #shareit-icon ul { list-style:none; width:130px; margin:0; padding:0 0 0 8px; } #shareit-icon ul li{ float:left; padding:0 0px; } #shareit-icon ul li img{ border:none; }

Css kodlarını ekledikten sonra yine ]]></b:skin> ifadesinin hemen altına gelecek şekilde aşağıda bulunan Javascript kodlarını ekleyin.

Javascript Kodu

<span id="preservebf9ff688871a4fafb5c36720817608af" class="wlWriterPreserve"><script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script></span> <span id="preserve57562c54cc864eada235ee5df5bd34a3" class="wlWriterPreserve"><script> $(document).ready(function() { //grab all the anchor tag with rel set to shareit $('a[rel=shareit], #shareit-box').mouseenter(function() { //get the height, top and calculate the left value for the sharebox var height = $(this).height(); var top = $(this).offset().top; //get the left and find the center value var left = $(this).offset().left + ($(this).width() /2) - ($('#shareit-box').width() / 2); //grab the href value and explode the bar symbol to grab the url and title //the content should be in this format url|title var value = $(this).attr('href').split('|'); //assign the value to variables and encode it to url friendly var field = value[0]; var url = encodeURIComponent(value[0]); var title = encodeURIComponent(value[1]); //assign the height for the header, so that the link is cover $('#shareit-header').height(height); //display the box $('#shareit-box').show(); //set the position, the box should appear under the link and centered $('#shareit-box').css({'top':top, 'left':left}); //assign the url to the textfield $('#shareit-field').val(field); //make the bookmark media open in new tab/window $('a.shareit-sm').attr('target','_blank'); //Setup the bookmark media url and title $('a[rel=shareit-mail]').attr('href', 'http://mailto:?subject=' + title); $('a[rel=shareit-delicious]').attr('href', 'http://del.icio.us/post?v=4&noui&jump=close&url=' + url + '&title=' + title); $('a[rel=shareit-designfloat]').attr('href', 'http://www.designfloat.com/submit.php?url=' + url + '&title=' + title); $('a[rel=shareit-digg]').attr('href', 'http://digg.com/submit?phase=2&url=' + url + '&title=' + title); $('a[rel=shareit-stumbleupon]').attr('href', 'http://www.stumbleupon.com/submit?url=' + url + '&title=' + title); $('a[rel=shareit-twitter]').attr('href', 'http://twitter.com/home?status=' + title + '%20-%20' + title); }); //onmouse out hide the shareit box $('#shareit-box').mouseleave(function () { $('#shareit-field').val(''); $(this).hide(); }); //hightlight the textfield on click event $('#shareit-field').click(function () { $(this).select(); }); }); </script></span> <style> #shareit-box { position:absolute; display:none; } #shareit-header { width:138px; } #shareit-body { width:138px; height:100px; background:url(images/shareit.png); } #shareit-blank { height:20px; } #shareit-url { height:50px; text-align:center; } #shareit-url input.field{ width:100px; height:26px; background: transparent url(images/field.gif) no-repeat; border:none; outline:none; padding:7px 5px 0 5px; margin:3px auto;font-size:11px; } #shareit-icon { height:20px; } #shareit-icon ul { list-style:none; width:130px; margin:0; padding:0 0 0 8px; } #shareit-icon ul li{ float:left; padding:0 2px; } #shareit-icon ul li img{ border:none; } </style>

Uygulamamızın hemen yazıların altında görünmesi için kodlarımın içerisinde
<div class='post-footer'> ifadesini bulduktan sonra hemen üzerine gelecek şekilde aşağıdaki HTML kodlarını ekleyip kaydediyorum.

HTML Kodu

<a expr:href='data:post.url' rel='shareit'>Paylaşmak Güzeldir</a> <div id='shareit-box'> <div id='shareit-header'/> <div id='shareit-body'> <div id='shareit-blank'/> <div id='shareit-url'> <input class='field' id='shareit-field' name='shareit-field' type='text' value=''/></div> <div id='shareit-icon'> <ul> <li><a class="shareit-sm" href="#" rel="shareit-mail"><img alt="Mail" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVDQ31NmO9Fq6y8OphN-sfPTttU7iTmCiXZku4hW97nl2akrJGxkx8tgU7xhb8hI-koQXyIylb3PlOOTn8auHkNcxqqFKEW_arP7H6EwhZ2QRO79rDEyVRTO6K0vLugyRt59Q2TKLUb3N2/s320/sm_mail.gif" title="Mail" width="16" /></a></li> <li><a class="shareit-sm" href="#" rel="shareit-delicious"><img alt="Delicious" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrevm_-CSMgVW0R8JfjEGnm_WxGiqW3AHk0XvHURPw87sqrcyvNzpgI2wGl96Jc1-JZvuhkyvgS19bSNKy85ykHB2OC1q3lV4hw2-7OAMOKCmxL9pOrvvv1ItCLYn0w4WKQOon0Aqvzjec/s320/sm_delicious.gif" title="Delicious" width="16" /></a></li> <li><a class="shareit-sm" href="#" rel="shareit-digg"><img alt="Digg" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiT9jJ367_o0UUDfnvUj_EwZscNR3RHBaJfwo_kvhvwF6R9LW1_jXyF-smjeu_5GDBFWBAP6wmWGMTgJ4U2K0EZJfc3aSdcyOXhq3BUfcfm2dyWA6mutJTLhvI0T-WHC-OZGyeKPY3iCrG/s320/sm_digg.gif" title="Digg" width="16" /></a></li> <li><a class="shareit-sm" href="#" rel="shareit-stumbleupon"><img alt="StumbleUpon" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5ysUBwEvyLwHQuUPhYlq-EYU9K88v68Atw3gTcRwg69MzwCD-I2kqUvGqXhbSG-wlQUQZXFfhFNpfohhBTeK8VB3rmds8Jdx9Jjpg4Af7jU8srYR-ciWPyDeJkZE_zaz3xovBPPraJMJI/s320/sm_stumbleupon.gif" title="StumbleUpon" width="16" /></a></li> <li><a class="shareit-sm" href="#" rel="shareit-twitter"><img alt="Twitter" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisXqopVc7IRCApWC0v4-CnfGgJNNXiqGcHgaXvuPcO8GLcpS15pZlIMid-6gF2PY1QlyhUUyZHpFUaBfseib5FBImGMfJOZPKoGclsHckIb3lrjpF9BvhySz3TYikm7ta6yB_lzIrTmZiP/s320/sm_twitter.gif" title="Twitter" width="16" /></a></li> </ul> </div> </div> </div>

Tüm işlemleri doğru bir şekilde yaptıysanız yazılarınızın altında aşağıdaki Paylaşamak güzeldir bağlantısı görünmeye başlayacaktır.

Kayanak:http://www.queness.com/post/309/create-a-digg-style-post-sharing-tool-with-jquery