Sabit Açılır Sosyal Kutular

Daha geniş kitlelere ulaşmak isteyen blog yazarları için sosyal medya bulunmaz bir nimet.Bu yüzden çoğumuzun Facebook, Twitter ve Google+ gibi sosyal platformlarda hesabı var.Sosyal medyada takipçi sayımızı arttırdıkça okuyucu kitlemiz genişleyecek ve yazılarımız daha çok kişiye ulaşacaktır.Bu yüzden bloglar için sürekli sosyal medya eklentileri geliştiriliyor.

 

Sabit Açılır Sosyal Kutular

 

Daha önce paylaştığım sabit açılır Facebook beğen kutusunu hatırlıyor musunuz? Bu yazıda, o eklentinin Twitter ve Google+ versiyolarını da paylaşacacğım.Üstelik üçünü aynı anda kullanabileceksiniz.Eklentinin nasıl çalıştığını görmek için videoyu izleyeblirsiniz.

 

 

Eklentiyi blogunuzda kullanmak için aşağıdaki kodları HTML/Javacscript gadget olarak eklemeniz yeterli.

 

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<script src="http://widgets.twimg.com/j/2/widget.js"></script>


<script>
if (typeof (jQuery) == 'undefined') {
    //output the script (load it from google api)
    document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
</script>
<style type="text/css">
.fblbCenterOuter *, .fblbReset * {
    clear: none;
    margin: 0;
    padding: 0;
    border: 0;  
    font-size: 100%;
    line-height: 18px;
}
.fblbCenterOuter {
    position: fixed;
    top: 0;
    height:100%;
    display:table;
    vertical-align:middle;
    z-index: 10000;
}
.fblbCenterInner {
    position:relative;
    vertical-align:middle;
    display:table-cell;
}
/* Fixed top */
.fblbCenterOuter.fblbFixed {
    position: fixed;
    top: 0;
    height: auto;
    display: block;
    vertical-align: top;
    z-index: 10000;
}
.fblbFixed .fblbCenterInner {
}

.fblbWrap {
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    position: relative;
}
.fblbRight .fblbForm {
    /* margin-left: 60px;*/
}
.fblbHead {
    position: absolute;
    z-index: 9999;
    top: 50%;
    display: block;
    text-indent: -9999em;
    overflow: hidden;
    cursor: pointer;
}
.fblbForm {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.fblbInner {
    min-height:150px;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.fblbHeader {
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
}
/*
.fblbInnerlight {
    background: #fff;
}
.fblbInnerdark {
    background: #333;
}
.fblbTheme0 .fblbForm {
    background: #3b5998;
}
*/
/* Tabs */
.fblbCenterOuterFb.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmJgH3-DVdi9_oqocRWj27otrWkdJ9UQyCFPJUkJWJkEqAZUFfKM-XwVjSnfvTApp_mbrbBOo9-2l6Hz8Grta_fkP_WOvo_ah4Y9C2dhg9Ndb_C5k_-3-_hEkbLZLAkg_FzJkPAH04dsT/s90/fb7-right.png);
}
.fblbCenterOuterTw.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdE3BcYxYHOBwO3cUyFoPpr92aALVvFXFFeCHbURddQ2nB9DhNbj2veBfnFIan1VxKG485ByY644ehOiotPZ5xWxtCvn-uKi0bgFMqjPlbdziKBzvl1HnZWsF1T9reCzeu2ppYTPHvRDv/s90/tw7-right.png);
}
.fblbCenterOuterGp.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisopd8jTYzfaM_dcFfRT5MfjnXY5fnWO-KqeF_wnFd7Ib1Htsw6Um8E-Us46gR6dlxtunrAJO0ghXzoW3DELlW7pwSS_Xu2HJn2rEJ4vxZN_tfAyhOlHGuaKIQ99Qg3aJy_eQksVhNAtiH/s90/gp7-right.png);
}
</style>
<script type="text/javascript">
//Setting_begin
var Fb_Url='http://www.facebook.com/bloghocam';
var Tw_Url='bloghocam';
var Gp_Url='https://plus.google.com/108761595756468128383';
var Tab_Style=7;
var Fix_Right=true;
var Fb_En=true;
var Tw_En=true;
var Gp_En=true;

//Setting_end


////Hidden widget to display as plugin
////and pre load media for not delay when user hover other image
document.write('<div class="bitp3pots-achor-hook" style="display:none"></div>');
$('.bitp3pots-achor-hook').parents('.widget').each(function(){
        $(this).children('h2').remove();                   
        $(this).attr('class','bitp3pots-plugin');
        $(this).attr('style','margin:0!important;padding:0!important;width:0!important;height:0!important;');                        
});

 

var Tp_Fb = '<div class="fblbCenterOuter fblbCenterOuterFb fblbFixed '+((Fix_Right) ? 'fblbRight':'fblbLeft')+'" style="margin-top: 50px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #3b5998; height: 350px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -175px; '+((Fix_Right) ? 'right':'left')+': 305px;">Facebook</h2><div class="fblbInner" style="background: #ffffff;"><div class="fb-like-box" data-href="'+Fb_Url+'" data-width="292" data-height="350" data-show-faces="true" data-stream="false" data-header="true"></div></div></div></div></div></div>';

var Tp_Tw = '<div class="fblbCenterOuter fblbCenterOuterTw fblbFixed '+(Fix_Right? 'fblbRight':'fblbLeft')+'" style="margin-top: 250px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #33ccff; height: 400px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -200px; '+((Fix_Right) ? 'right':'left')+': 305px;">Twitter</h2><div class="fblbInner"><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 3,interval: 30000,width: 300,height: 335,    theme: {shell: {background: \'#33ccff\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#000000\',links: \'#47a61e\'}},features: {loop: false,live: false,scrollbar: true,avatars: true,behavior: \'all\'}}).render().setUser(\''+Tw_Url+'\').start();<\/script></div></div></div></div></div>';

var Tp_Gp = '<div class="fblbCenterOuter fblbCenterOuterGp fblbFixed '+(Fix_Right? 'fblbRight':'fblbLeft')+'" style="margin-top: 150px;  '+((Fix_Right) ? 'right':'left')+': -305px;z-index: 1000;"><div class="fblbCenterInner"><div class="fblbWrap fblbTheme0 fblbTab1 fblbTab'+Tab_Style+'"><div class="fblbForm" style="background: #000000; height: 150px; width: 300px; padding: 5px 0 5px 5px";"><h2 class="fblbHead" style="margin-top: -75px; '+((Fix_Right) ? 'right':'left')+': 305px;">Google Plus</h2><div class="fblbInner" style="background: #000000; height: 150px;"><link href="'+Gp_Url+'" rel="publisher" /><script type="text/javascript">window.___gcfg = {lang: \'en-US\'};(function() {var po = document.createElement("script");po.type = "text/javascript"; po.async = true;po.src ="https://apis.google.com/js/plusone.js";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po, s);})();<\/script><div class="g-plus" data-href="'+Gp_Url+'" data-size="badge"></div><div style="padding: 15px; overflow: auto; height: -16px;"></div></div></div></div></div></div>';

var Tp_Main = ((Fb_En) ? Tp_Fb : '') + ((Tw_En) ? Tp_Tw : '') + ((Gp_En) ? Tp_Gp : '');

 

 

 

document.write(Tp_Main);
</script>


<script type="text/javascript">
<!--
jQuery(document).ready(function(){
var fblbFbOrgRight=jQuery('.fblbCenterOuterFb').css('right');
var fblbFbOrgLeft=jQuery('.fblbCenterOuterFb').css('left');
jQuery('.fblbRight.fblbCenterOuterFb').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({
    right: -3
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({
    right: fblbFbOrgRight
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width());
});
jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({
    left: -3
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterFb').stop(true,false).animate({
    left: fblbFbOrgLeft
   }, jQuery('.fblbLeft.fblbCenterOuterFb').find('.fblbForm').width());
});
var fblbTwOrgRight=jQuery('.fblbCenterOuterTw').css('right');
var fblbTwOrgLeft=jQuery('.fblbCenterOuterTw').css('left');
jQuery('.fblbRight.fblbCenterOuterTw').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({
    right: -3
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({
    right: fblbTwOrgRight
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width());
});
jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({
    left: -3
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterTw').stop(true,false).animate({
    left: fblbTwOrgLeft
   }, jQuery('.fblbLeft.fblbCenterOuterTw').find('.fblbForm').width());
});
  
  
var fblbGpOrgRight=jQuery('.fblbCenterOuterGp').css('right');
var fblbGpOrgLeft=jQuery('.fblbCenterOuterGp').css('left');
jQuery('.fblbRight.fblbCenterOuterGp').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({
    right: -3
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({
    right: fblbGpOrgRight
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width());
});
jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').hover(
  function(){
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({
    left: -3
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width());
  },
  function(){
   jQuery(this).parents('.fblbCenterOuterGp').stop(true,false).animate({
    left: fblbGpOrgLeft
   }, jQuery('.fblbLeft.fblbCenterOuterGp').find('.fblbForm').width());
});
  
// ===================
jQuery('.fblbCenterOuter').find('.fblbForm').hover(
  function(){
   //jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).hide();
   jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index', parseInt(jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index'))-100);
  },
  function(){
   //jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).show();
   jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index', parseInt(jQuery('.fblbCenterOuter').not(jQuery(this).parents('.fblbCenterOuter')).css('z-index'))+100);
});
});
-->
</script>

 

Değiştirmeniz gereken yerler şunlar:

30 yorum:

  1. Gerçekten görüntü bakımından güzel ama ben böyle uygulamları sitelerde çok görünce sinir oluyorum :) mousun kullanım lanı daralıyor her yerden birşey çıkıyor bu yüzden az sayıda kullanılmalı:(

    YanıtlaSil
  2. Bu üçüne ek olarak fazladan bir sosyal paylaşım sitesi eklemek istersek ne yapmamız gerekiyor hocam ?Teşekkürler...

    YanıtlaSil
  3. @GÖK-TÜRK
    Ek bir sosyal ağ kutusuna ait kodlar varsa elinizde burada kullanılan scripti tamamen iptal edip, her bir sosyal ağa ait kutunun kodunu ayrı ayrı eklemek gerekir.

    YanıtlaSil
  4. Bunun gibi script kodları siteyi yavaşlatıyor ama.

    YanıtlaSil
  5. bende olmadı hiç bişey gözükmüyor ?

    YanıtlaSil
  6. Çok güzel anlatmışsınız, Boloff.com'a uygulamayı deniyeceğim, bakalım yapabilecek miyim. Yapamazsam biraz başınızı ağrıtırım :)

    YanıtlaSil
  7. google adresimi nasıl alabilirim?

    profil urlsini yapıştırdım koda ama olmadı

    YanıtlaSil
  8. @Okan Öztürk
    Sanırım oraya kişisel profil adresini yazdın.Bu eklenti Google+ sayfaları için.Bir Google+ sayfası oluşturup o profil adresini yazmalısın.

    YanıtlaSil
  9. Merhaba,
    Blogumu "blogger ile blog oluşturma" yazınızla açtım. Teşekkürler... Bu eklentiyi de kullanmayı çok istedim ama olmadı. Bende de sadece twitter linki doğru çalıştı face ve google+ hata veriyor, google+ profil adresimi girmiştim ama yine de olmadı:(

    YanıtlaSil
  10. @Nuray Gonulsen
    Facebook ve Google+ kutuları kişisel profiller için değil, sayfalar için.Yani öncelikle blogunuz için birer sayfa oluşturmalısınız.

    YanıtlaSil
  11. Bravo bana jeton şimdi düştü, teşekkürler...

    YanıtlaSil
  12. Estağfurullah, yazıda belirtmemişim.Benim hatam.

    YanıtlaSil
  13. HTML/Javacscript gadget olarak eklemeniz yeterli.

    Birazdaha acarmısınız bunları java script soyası olarak kaydedit kodlardanmı sorgulatacağız yoksa direk sayfanın içinemi gömeceğiz?

    YanıtlaSil
  14. Tasarım > Sayfa Yerleşimi > Gadget Ekle > HTML/JavaScript yolunu izleyin.

    YanıtlaSil
  15. hocam bende de başarılı oldu sadece google + çalışmamıştı yorumları okuyunca ayrı sayfa açmam gerektiğini anladım.Şimdi onun üzerinde çalışacağım Var olun sağ olun...

    YanıtlaSil
  16. https://plus.google.com/103411449599138568239 hocam kodum bu dogru da girdim google+ yı başaramadım :(

    YanıtlaSil
  17. Bloguma daha profesyonel bir görünüme kavuşturmamı sağladığınız için öncelikle çok teşekkür ederim, Serdar Bey. Ben açıkçası blogum için facebook ve google plus ta sayfa oluşturmak istemiyorum. Diğer ikisini iptal edip yalnızca Twitter kutusunu kullanmanın kolay bir yolu var mı acaba?

    YanıtlaSil
  18. £@Murat Can Bilgincan
    Evet, sadece Twitter kutusu da ekleyebilirsiniz.İsterseniz ben size nasıl ekleneceğinin anlatıldığı linki vereyim:

    http://www.techehow.com/2012/08/add-twitter-fan-box-to-blogger.html

    YanıtlaSil
  19. Selam, acaba bu kutuları sola alma şansımız var mı?

    YanıtlaSil
  20. benimde şablonumda bu özellik var. ancak böyle hesaplarım yok nasıl silebilirim. bir deneme bloğu açtım ancak ona kullandığım bloktaki yazıları nasıl yükleyeceyim.şablon kodlarını değiştirebileceyimi hiç sanmıyordum sayenizde çok şey öğrendim. teşekkürler.

    YanıtlaSil
  21. gerçekten çok güzel olmuş hocam elniize sağlık

    YanıtlaSil
  22. Merhabalar,

    Bu eklentiyi siteme entegre etmek istiyorum nasıl yapabilirim

    YanıtlaSil
  23. ya bende kutuların boyutu hariç bir sorun yok.kutuların boyutu çok küçük isterseniz bir bakın
    http://habirehaber.blogspot.com/

    YanıtlaSil
  24. çok teşekkürler paylaşımınız için hemen yaptım

    YanıtlaSil
  25. hocam twitter çalışmiyor...bir baksanız sevinirim.
    kendidefterim.blogspot.com

    YanıtlaSil
  26. @Urfalı
    Usernamei yanlış yazmış olabilirmisiniz?

    YanıtlaSil
  27. yok hocam doğru yazdım. aynı dediğiniz şekilde yazdım. birde logomun altındaki siyah şeridin rengini nasıll değiştirebilirim.

    YanıtlaSil
  28. EWT HOCAM DOĞRU TWİTTER ÇALIŞMIYOR BENDEDE ÇALIŞMIYOR Bİ BAKARMISINIZ

    YanıtlaSil
  29. Hocam Twitter Çalışmıyor???

    YanıtlaSil

Blogger tarafından desteklenmektedir.