29 Ağustos 2012 Çarşamba

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/AVvXsEgaCNM82NrNS503Wo9m8xLEZvulgW7jpEC68nGALXf3MB2jK5oK-1BIde_t9ObL-pVZH_XyOgn27c5bJMb-3Giw35NSrgkDevn_wdS1gM1PT6LPOCDVEpxEum-aziIsDr4jntia5iXdrr-G/s90/fb7-right.png);
}
.fblbCenterOuterTw.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiCWaviBHzmd-TvAy48jsSrWeOq0lcx2zqrcq8bqWIX8Ty7kk5g_FhuwISNFJKtANTB4WyJE3QBk4XGV0a7hQvjYFzzw2F8aJjD3IYmGWAtMQYGMpBdpD0740AMcRIdH6vwRZ2AV_bzJL0/s90/tw7-right.png);
}
.fblbCenterOuterGp.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYaWIgQJn5F7kVzCW7xlUu9MSndIsxYAb0vQnHxd_bISLzHb2_REjNZItK9d54gEDj0cpaJdd1x2l_SNVQ7SLhYjFJ9deSP0DQc8xSgC1qRSaAFaflvEIfEGMH79hbW5FoXj8nX94qJFd/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:

27 Ağustos 2012 Pazartesi

Harika Bir Galeri Teması: Pegasus

Pegasus teması, ana sayfada sadece yazıda kullanılan resimlerin gösterildiği çok şık bir tema.Resimlerin üzerine geldiğinizde o resme ait yazı başlığı beliriyor ve tıklandığında kayıt sayfasına yönleniyor.

 

Ana sayfada kayıtlara ait resimlerin dışında 4 sütunlu footer alanı ve yatay açılır menünün bulunduğu bir header var.Sayfalar arasındaki geçiş sayfa nbumaralandırma eklentisi kullanılarak kolaylaştırılmış.

 

Bu temanın sidebarı nerede diye sorabilirsiniz.Ana sayfada minimalist bir tasarım istendiği için sidebar sadece kayıt sayfalarında gözüküyor.

 

Son olarak yorum bölümünden bahsetmek istiyorum.Yorumlarda dişli yorum sistemi mevcut ve güzel bir stil kullanılmış.Ayrıca blog yazarının yorumlarının bir rozet kullanılarak belirginleştirlmesi güzel bir detay olmuş.

 

Pegasus Blogger Template

DEMO & DOWNLOAD

 

Demosuu inceleyip temayı kullanmaya karar verdiyseniz düzenlemeniz gerekenttekyer olan üstteki yatay menüyü nasıl düzenleyeceğinizi göstereyim.Menünün kodları şunlar:

 

<div class='menu-main-container'>
<ul class='sf-menu' id='menu-main'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Styling</a></li>
<li><a href='#'>Skins</a>
<ul class='sub-menu'>
<li><a href='#'>Black</a></li>
<li><a href='#'>Blue</a></li>
<li><a href='#'>Purple</a></li>
<li><a href='#'>Teal</a></li>
<li><a href='#'>Green</a></li>
<li><a href='#'>Orange</a></li>
<li><a href='#'>Silver</a></li>
<li><a href='#'>Yellow</a></li>
</ul>
</li>
<li><a href='#'>Templates</a>
<ul class='sub-menu'>
<li><a href='#'>Portfolio &amp; Blog Mixed Homepage</a></li>
<li><a href='#'>Full-Width Page</a></li>
<li><a href='#'>Full-Width Page with Featured Image</a></li>
<li><a href='#'>Full-Width Page with Slider</a></li>
<li><a href='#'>Standard Page with Featured Image</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Blog Categories</a>
<ul class='sub-menu'>
<li><a href='#'>Animals</a></li>
<li><a href='#'>Places</a></li>
</ul>
</li>
<li><a href='#'>Portfolio Categories</a>
<ul class='sub-menu'>
<li><a href='#'>Places</a></li>
<li><a href='#'>Animals</a></li>
<li><a href='#'>People</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Purchase</a></li>
</ul>
</div>

 

Menüde yer alan her öğeye ait kod  <li><a href='#'>Contact</a></li> şeklinde gösterilir.Buraadaki # yerine Contact yazısına tıklayınca açılmasını istediğiniz sayfanın URLsini yazacaksınız.

22 Ağustos 2012 Çarşamba

Herkesin Bir Gravatar’ı Olsun

Eğer sık sık diğer bloglara yorum yazan biriyseniz Gravatar ile mutlaka tanışmalısınız.Kişisel markanızı yaratmak ve tanınırlığınızı arttırmak için bir Gravatar hesabı oluşturmalısınız.Eğer Gravatar’ın ne olduğunu bilmiyorsanız bu yazı sizin için.

 

Gravatar Nedir?

 

Blogger altyapısı kullanan bloglara Google profiliniz ile yorum yaptığınızda isminizin yanında belirlediğiniz profil resminiz yani avatarınız gözükür.Wordpress altyapısı kullana bloglara yorum yaptığınızda isminizin yanında bış bir resim gözükür.Bazı kişilerin ise Wordpress bloglara yorum yaptığında bile isminin yanında profil resmi yani avatarı gözükür.İşte bunu sağlayann hizmetin adı Gravatar’dır.

 

E-posta adresinizle gravatara kayıt yaparak o e-posta adresini kullanarak yaptığınız yorumlarda gösterilmesini istediğiniz profil resmini belirlersiniz.Daha sonra bir blog yorum yaparken e-posta adresinizi yazdığınızda profil resminiz otomatik olarak tanınır ve isminizin yanında gösterilir.

 

Örnek olarak Batuhan’ın blogunun yorum bölümünü göstereceğim.Aşağıda resimde gravatarı olmayan bir kullanıcının yaptığı yorumu görüyorsunuz.

 

Gravatarsız Yorum

 

Bu resimde ise gravatar kullanan ben ve Batuhan’ın yoruunu görüyorsunuz.

 

Gravatar Yorum

 

Gördüğünüz gibi gravatar kullanarak yapılan yorumlar daha dikkat çekici oluyor ve farkındalık yaratııyor.

 

Gravatar Nasıl Oluşturulur?

 

1.Adım: Gravatar ana sayfasına giderek e-mail adresinizi yazın ve Get Your Gravatar butonuna tıklayın.

 

2.Adım: Mail adresinize gelen maildeki aktivbasyon likine tıklayın.

 

3.Adım: Bir kullanıcı adı ve şifre girerek Signup butonuna tıklayın.

 

4.Adım: Sağ üst taraftaki My Account yazan yere tıklayınca açılan menüden Gravatarlarımı yönete tıklayın.

 

5.Adım: Açılan sayfadak Add one by clicking here! yazan yere tıklayın.

 

6.Adım: İnternetten  ve bilgisayarınızdan bir resim seçerek Sonraki butonuna tıklayın.

 

7.Adım: Seçtiğiniz resmi gösterilmesini istediğiniz şekilde kırparak Kırp ve bitir! butonuna tıklayın.

 

8.Adım: Açılan sayfada 4 adet seçenek göreceksiniz.Bunlardan rated G olana tıklayın.

 

Tebrikler.Artık o e-posta adresini kullanarak yaptığınız yorumlarda belirlediğiniz profil resmi gçözükecek.

21 Ağustos 2012 Salı

Philip Zimbardo - ZAMAN PARADOKSU

Philip zimbardo: The Secret Powers of Time
Philip Zimbardo - The Secret Powers of Time
Araştırmalara göre insanların yaşadığı altı ana zaman dilimi vardır. ikisi geçmişe , ikisi şimdiki zamana , ikisi gelecek zamana odaklı.Geçmişe odaklanan insanlar hep eski güzel günleri hatırlar. Başarılar ,mutlu doğum günleri nostanji.. Bunlar aila fotoğraflarını tutan aileye ait ritüelleri hatırlayan kişilerdir.Başkaları vardır sadece pişmanlıklarına odaklanırlar sadece başarısızlıklara sadece geçmişteki kötü şeylere odaklanan bu yüzden onları pozitif geçmiş - negatif geçmiş olarak ayırıyoruz. Yaşamanında şimdiki zamanda iki yolu var.

Philip zimbardo: The Secret Powers of Time

18 Ağustos 2012 Cumartesi

Joomla makale kaydetme sorunu

Joomla makale kaydetme sorunu
Joomla 1.5.8 sürümü bir çok yeniliğe imza attığı gibi yeni eklenen bazı özelliklerin joomla kullanıcıları tarafından tam olarak bilinmediğinden bazı aksaklıklar çıkabiliyor. Bu aksaklıklar çok küçük ayrıntılar olsa da bilinmediğinden zaman kaybı ve sinirlerin gerilmesi şeklinde yan etkiler oluşturabiliyor. Bu kısa anlatımımızda da bir yenilik, bu yenilikle beraber içeriklere veya yeni oluşturulmak istenen bir modüle html kod yada flash dosyanın eklendiğinde, kodların yazılıpta eklendiği ama kaydet butonuna basıldığında html kodun adeta uçtuğu yani html kodları joomlanın kabul etmemesi durumu ortaya çıkıyor. Bu özellik önceki sürümlerden farklı olarak 1.5.8 sürümünde yeni bir fonksiyon olduğu için her hangi bir seçimde yapılamadığından bu durum çok can sıkıcı olabiliyor, şimdi bu fonksiyonumuza ve sorunumuzun nasıl giderileceğine bakalım.
  • İçerik ekleme (makale yönetimi) kısmına geliyoruz ve aşağıdaki resimdeki gibi "Özellikler" butonuna tıklıyoruz.
Joomla Özellikler
  • Ajaxlı bir pencere çıkacak ve az aşağıya indiğimizde "Süzgeç Seçenekleri" ve "Süzgeç Grupları" kısmını göreceksiniz.
Joomla Süzgeç Seçenekleri
  • Bu kısımdan html kod ekleyebileceklerin dışındaki herkesi seçerek "Kara Liste (varsayılan" kısmı seçiyoruz, görüldüğü gibi sadece süper yöneticiyi seçmedik bu demek oluyor ki süper yönetici dışında herkese yasak ama bize bu eklemeler serberst olmuş olacak, eğer kullanıcılarında içerikte video, flash vb... eklemelerini istersen o zaman "Kayıtlı" kullanıcı grubunu da seçmeden tıpkı süper yönetici gibi izinli kılabiliriz.

Artık bundan sonra süper yönetici olarak, makale, html kod, resim veya swf dosyası eklediğinizde gösterilmeme gibi bir problemden de kurtulmuş olacağız.