Dilediğiniz Zaman Arayın Canlı SOHBET Edelim: 
(İlk 5 Dakika Bedava)

Cansu: 008818200818

Esra: 0034951250447

31 Ağustos 2012 Cuma

Blogunuzun Başarısını Nasıl Ölçersiniz?

Blogunuz sizce başarılı mı ya da ne kadar başarılı? Buna nasıl karar verebilirsiniz? Blogunuzun başarısını ölçümlemenin ne gibi yolları vardır? Bir blogu başarılı kılan kriterler nelerdir? Sizlerin de katılımı olursa bu konuyu biraz tartışmak isterim.

 

Başarı

 

Başarı = Hit midir?

 

Bloglarda başarı deyince blogcular arasında akla ilk gelen şey günlük/aylık hit oluyor.Yani ziyaretçi sayısı.Peki hitin ne kadar yükse o kadar başarılımısın gerçekten? Kesinlikle hayır.Hitiyle övünen bloglara bakarsanız ( bir kısmı ) Google aramalarından ziyaretçi çekmek için gündemdeki her soruya ait hazır yanıtları yayınladıklarını görürsünüz.Yani içerik üretmezler.Hazır bilgiyi çoğaltarak kullanarak.Tamam aramalardan günde 3-5 bin hit aldınız, bravo.Peki bu ziyaretçilerin kaçını blogunuzda tutabiliyor ya da kaçını okuyucuya dönüştürebiliyorsunuz? ( CTR ya da Engagement Rate dediğimiz şey ) Bu durumda arama motoru için içerik yayınlayan 5bin hitli bir bloga göre okuyucuları için içerik üreten ve etkileşim oranı  çok daha yüksek olan bir kişisel blog, günlük 500 hiti olmasına rağmen bence çok daha başarılıdır.

 

Bence Başarı

 

Evet ziyaretçi sayısı, abone sayısı, yorum sayısı, takipçi sayısı, pagerank, alexa rank gibi şeyler bir blog için önemli şeyler olabilir ama benim için başarı kriteri asla değildir.Ben blogumun başarısını koyduğum hedeflere ne kadar yaklaştığımla ölçerim.

 

Blogumu ilk oluşturduğumda kendime bir hedef koyarım.1 yılda 100 abneye ulaşmak gibi.1 yıl sonunda koyduğum bu hedefe ulaşabildiysem kendimi ve blogumu başarılı sayarım.Devamında yeni ve daha büyük hedefler koyarım.Bu benim başarı grafiğimi arttırma isteğimdir.

 

Söz Sizde

Sizce bir blogu başarılı kılan kriterler nelerdir? Bir blogun başarılı olup olmadığına nasıl karar versiniz? Kendi blogunuzun ve Blog Hocam’ın başarılı olduğunu düşünüyormusunuz? Neden? Fikirlerinizi yazarsanız sevinirim.

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://lh4.googleusercontent.com/-HWSg3XpqQ-g/UDVXYDk-2sI/AAAAAAAADoU/L_ocmIpZIlY/s90/fb7-right.png);
}
.fblbCenterOuterTw.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://lh6.googleusercontent.com/-RSOxWdI1Wog/UDVXa_w56mI/AAAAAAAADok/2ZSxBpiTLxo/s90/tw7-right.png);
}
.fblbCenterOuterGp.fblbRight .fblbTab7 .fblbHead {
    width: 28px;
    height: 90px;
    background: url(https://lh4.googleusercontent.com/-M7DWykh3zsg/UDVXZ_T3l5I/AAAAAAAADoc/3IVAPxuPzKI/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.

17 Ağustos 2012 Cuma

Banner Ve Logo Oluşturabileceğiniz Online Araçlar

Blogunuzun header bölümünde yani başlığında blogunuzun ismini ve sloganını metin olarak göstermek yerine şık bir banner olarak göstermek daha iyi olmaz mıydı? ( Örneğin benim yaptığım Blog Hocam  daha iyi bloglar için gibi )

 

Ben kendi bannerımı grafik düzenleme programları yardımıyla yaptım anck bu yazıda size bunun daha pratik yollarını göstermek istiyorum.Aşağıda ücretsiz ve kolay bir şekilde banner yada logo hazırlayabileceğiniz online araçları listeledim.

 

Cool Text

 

Cool Text

 

Önce logonuzun modelini belirliyorsunuz.Daha sonra logoda yazmasını istdiğiniz metni yani blogunuzun isimini, kullanmak istediğiniz fontu (font seçenekleri  oldukça zengin), boyutunu ve rengini seçtikten sonra logonuzu oluşturuyorsunuz. [ http://cooltext.com/ ]

 

Logo Maker

 

Logo Maker

 

Önce logonuzun konusunu seçiyorsunuz.Daha sonra o konuya ait hazır ikonlardan birini temel olarak kullanarak istediğiniz gibi düzenlior ve kendi orjinal logonnuzu yaratıyorsunuz. [ http://www.logomaker.com/ ]

 

Logoease

 

Logoease

 

Logonuzu 3 adımda kolayca oluşturabileceğiniz bir ara.Çeşitli kategorilerden bir logo seçiyorsunuz.İkinci admda onu istediğiniz gibi düzenliyorsunuz.Son adımda ise oluşturduğunuz logoyu bilgisayarınıza indiriyorsunuz. [ http://www.logoease.com/ ]

 

Online Logo Maker

 

Online Logo Maker

 

3 bileşen kullanarak harika logo ve bannerler yapabilirsiniz.İsterseniz hazır sembollerden birini kullanabilir, isterseniz bilgisayarınızdaki herhangi bir imajı kullanabilirsiniz.Bunlara metin ekleyip düzenleyerek logonuzu oluşturabilirsiniz. [ http://www.onlinelogomaker.com/ ]

 

 

Oluşturduğunuz Logoyu Blog Başlığında Gösterme

 

Bunlar benim önerebileceğim online logo ve banner hazırlama araçlarıydı.Şimdi sıra oluşturduğunuz bu bannerları blogunuzda kullanmaya geldi.Bunun için Blogger kumanda panelinize girdikten sonra soldaki menüden Yerleşim’e tıklayın.Üst Bilgi gadgetını düzenle dedikten sonra açılan pencreden Resim kısmında bilgisayarınızdan logonuzu seçin.Seçeneklerden Başlık ve tanımın yerine seçeneğini işareteyin.

 

Oluşturduğunuz Logoyu Blog Başlığında Gösterme

15 Ağustos 2012 Çarşamba

Bloglar Ve Kariyer Fırsatları Üzerine Bir Başarı Öyküsü [Röportaj]

Daha önce blog yazmanın bana kazandırdıklarından bahsederken yeni kariyer fırsatlarını da listeye dahil etmiştim.Gerçekten de yeteneklerinizi, meraklarınızı blogunuzda sergileyerek kariyer fırsatları yakalayabilmeniz mümkün.

 

Yakın zamanda tanıştığım bir arkadaşımın da kendi düşüncelerini yazdığı blogu sayesinde yeni kariyer fırsatları yakaladığını öğrenince kendisinden feyz almanız için onunla bir röportaj yapmak istedim.İlginizi çekeceğini düşünüyorum.

 

Hayat - Medya Galaksisi

 

- Merhaba, öncelikle bize kendini tanıtır mısın? Hayat Kimdir? Eğitimi, kariyeri nedir?

Valla benim eğitimim aslında çok karışık diyebilirim. Oradan oraya yer değiştirerek geçti küçüklüğüm. Babamın mesleği dolayısıyla… (Emekli Büyükelçi kendisi şu anda). Ankara ve İsviçre’nin Cenevre kentinin çeşitli okullarında okudum. Tevfik Fikret Lisesi’nden tut, Ankara Fransız Konsolosluğunun okulu sonra Cenevre’de ‘Ecole Internationale de Geneve’… Lise bittikten sonra yine Cenevre’de 1 senelik bir ‘Uluslararası İlişkiler’ macerası, Webster University’de. Fakat çocukluğumdan beri kararım karardı, mutlaka medya ile ilgili bir şeyler yapacaktım. İnat ettim ve İstanbul’a dönüp ÖSS-ÖYS sınavlarını kazanarak Marmara Üniversitesi Radyo Tv Sinema bölümüne girdim. Henüz çıkmadım aslında yani diploma orada duruyor çünkü alttan birkaç dersim var. Biraz fazlaca uzatmaları oynadım, oyundan sıkılarak açıkçası soğudum ve uzaklaştım öğrencilikten. Birgün yeniden o motivasyon gelirse belki Af falan filan geri dönüp veririm o dersleri.  Kariyerime gelince bir turizm şirketinde kısa dönem Müşteri İlişkileri bölümünde çalıştıktan sonra esas kendimi bulduğuma inandığım Cosmopolitan dergisine girdim. Orada çalıştığım iki yıl boyunca çok sayıda röportajlar yazıp yazılar yazdım, çeviriler yaptım. Şimdi ise hem medya galaksisi blogumla ilgileniyorum hem de Okan Bayülgen’in ekibinde On8Tv’deki yerimi almaya hazırlanıyorum. Bizim işlerimiz Eylül’de başlayacak.

 

- Medya Galaksisi isiminde bir blogun var.Bu blogu yazmaya nasıl ve ne zaman karar verdin?

Aslında 2010’dan beri bir blog açmak hep gündemimdeydi fakat bir türlü girişimde bulunmamıştım. 2011 yaz aylarında, kuzenimin büyük teknik ve manevi desteğiyle bir akşam medya galaksisi doğdu. Sormamışsın ama hemen söyleyim, medya galaksisi ismini de öyle uzun uzadıya düşünmedim. Bir anda spontane gelişti aslında herşey.

 

 

- Blog yazıların sayesinde Okan Bayülgen’in ekibine katıldın.Bize bu olayın gelişme sürecinden bahseder misin?

Okan Bayülgen zaten çok uzun süredir beni twitterdan takip ediyor. Blogumu da biliyordu. Daha sonra ise bir çekim vesilesiyle kendisiyle tanıştık, arka arkaya birkaç görüşmeyle ise sohbeti ilerlettik. Fakat ben bildiğiniz klasik CV göndermiş olmanın dışında işe girmek istediğime dair bir girişimde bulunmamıştım. Her şeyin bir yeri ve zamanı olduğuna inanırım. Birgün karar verdim, ‘başka bir şey deneyeceğim’ diyerek… Okan Bayülgen’e twitter üzerinden komik tatlı ‘Beni işe al’ tweetleri ve video/yazıları gönderdim. Hatta o hafta içinde sosyal medyadaki takipçilerimi ayağa kaldırdığımı söyleyebilirim. Sağolsunlar beni çok desteklediler. Okan beyin bana geri dönüşü ise çok kısa süre içinde oldu. Bir hafta en fazla on gün diyelim… Birgün stüdyoya programı izlemeye gittiğimde beni işe aldığını söyledi. Geçtiğimiz günlerde ise kendisiyle ciddi bir iş görüşmesi yaptık ve Eylül’den itibaren ben de On8 takımında yer alacağım.

 

 

- Okan Bayülgen ile birlikte önümüzdeki günlerde hangi proelerde, hangi görevlerde yer alacaksın?

Aslında biraz politik davranarak Okan beyle iş görüşmesinde neler konuştuğumuzu buradan aktarmasam ve hep birlikte yaşayarak görelim desem?:))) Fakat ben yazmayı seviyorum, programlarda yazı işlerinde mutlaka olacağım gibi… Sosyal medya ve halkla ilişkiler ayağında da bir şeyler olabilir. Fazla detaylara girmiyorum çünkü ben de yaşayarak öğreneceğim.

 

- Medya Galaksisi’nde sağlıktan güncel konulara, televizyon programlarından röportajlara kadar çok geniş bir içerik var.On8 Tv projesiyle birlikte sitede ne gibi değişiklikler olacak? Eskisi kadar vakit ayırabilecek misin?

Eskisi gibi vakit ayırabileceğimi pek sanmıyorum fakat yaşayıp görmeden de büyük konuşmayım. Ne gibi değişiklikler olacak? Bir defa artık ekipte olduğum için Okan Bayülgen’le ilgili yazı yazamayacağım. Bunu etik bulmadığım için kendisiyle ilgili son yazımı geçtiğimiz günlerde yazdım.

 

 

- Yazılarını Okan Bayülgen dışında pek çok ünlü kişini ve magazin gazetecileri de takip ediyor.Onlardan aldığın tepkiler nasıl ve twitterdan seni takip eden ünlüler kimler?

Twitterda 1700’den fazla takipçim olduğu için arada kaynayan ve beni takip edip de farkında olmadığım ünlü kişiler var mıdır acaba diyorum?:)) Fakat Okan Bayülgen dışında beni Emre Altuğ, Serdar Ortaç, Nil Burak, Ayşe Mine, Merih Ermakastar, Tolga Futacı, Aydan Kaya gibi sanatçılar takip ediyorlar. Televizyon dünyası hakkında en sıkı takip ettiğim site olan tvaktuel’in twitter hesabı da beni takip edenler arasında ve tabii ki bir sürü sevilen sanatçıların PR’ları, Okan Bayülgen’in ekibinin tamamına yakını, birkaç magazin sitesi takip ediyorlar… Ben Okan Bayülgen dışında bu güne dek en güzel geri dönüşümü Emre Altuğ’dan aldım. Kendisiyle hiç alakası olmayan bir sürü yazımı twitter hesabından paylaştı. Ciddi bir motivasyon kaynağı oldu benim için. Ayrıca yazılarımı paylaşması bakımından İskender Paydaş’ın da bana büyük desteği oldu bu güne dek… Bu vesileyle teşekkür ediyorum kendisine ve canım İnci Razaki’ye.

 

 

- Bu kadar özgün ve güncel blog yazmak için yazmaktan keyif almak ve motivasyonu üst seviyrede tutmak gerekir.Seni en çok motive eden şeyler neler?

Beni en çok motive edenler tabii ki güzel geri dönüşümler ve yazılarımın paylaşılması. Başka türlü ben evde kendi kendime de oturur yazardım. Bu açıdan yazılarım ne kadar çok retweet edilip paylaşılırsa o kadar daha motive oluyorum. Hele ki yüksek sayıda takipçisi olan kişiler tarafından Retweet alırsam… Gerçi yaz aylarında herkes bir tatil kafasında olduğundan eski trafiğim azaldı. Paylaşımlar da daha az olduğu gibi benim de yazı yazma enerjim azaldı. Hatta şu son günlerde blogu açtığımdan beri en düşük gittiğim dönemde olduğumu söyleyebilirim. Örneğin son on gündür yeni bir yazı giremedim ki bu benim için bir rekor oldu. Bir an önce toparlamak için kendime yeni bir motivasyon kaynağı bulmam şart! Kolay değil sahiden günceli yakalayabilip her gün aynı seviyede tansiyon düşürmeden yazabilmek…

 

- Sosyal medyaya hakkında ne düşünüyorsun? Twitter’da çok aktifsin ve çok sayıda kişi tarafından takip ediliyorsun.İnsanlar seni neden takip etmeli?

Şunu söylemem gerekir ki artık devir sosyal medya devri. Özellikle de twitterda bir şekilde olman şart mı şart! Yani örneğin şöhretli kişiler artık PR’larını daha ziyade sosyal medya üzerinden yapıyorlar. Orada aktif olan, kazanıyor… Olmayan ise daha geriden takip ediyor. Çünkü artık eskisi gibi gazeteleri açıp ‘Hangi sanatçı nerede konser veriyormuş, hangi gün falanca televizyon programına mı çıkıyormuş?’ diye okuma alışkanlığı kalmadı. Twitterdan paylaşılanlardan görüp duyuyoruz olanı biteni. Tüm sanatçılara şiddetle tavsiyem şudur ki, twitterda aktif olun! Çünkü sosyal medya tahmin bile ettiğinizden çok daha yoğun bir şekilde hayatımızı ele geçirmiş durumda. Dar bir çerçeveden, sadece sosyal medyanın PR desteğine verdiği katkıyı anlattım. Yoksa burada sosyal medya hakkında ne düşündüğümü tam olarak cevaplamaya kalksam sanırım sayfalar sürer.  Sosyal medya üzerindeki ‘bana’ gelince… Evet twitterda aktifim ama bence çok sıkıcıyım. Çünkü neredeyse tamamen kendi yazılarımın linkini paylaşıyorum. Bu yüzden bir sürü unfollow yediğimi de biliyorum. Gündemdeki bazı konular hakkında tweetler atarım ama pek kimseye dalaşmam etmem. Reytingim yok! Özel hayatımı ise sıfıra yakın paylaşırım twitter üzerinden. Bir de gönüllü PR’lık yaparım gayet güzel… Sevdiğim kişilerin işlerini kendi takipçilerime duyurmaktan zevk alırım. Valla insanlar beni neden takip etsinler bilmiyorum… İsterlerse gayet sıkıcı olduğum için isterlerse de öylesine takip etsinler… Biraz takılıp vazgeçerler bence. Bu sıkıcılığıma bir an önce son vermeyi de düşünüyorum tabii önümüzdeki günlerde.

 

 

- Senin gibi güncel blog yazmak isteyenlere neler tavsiye edebilirsin?

Öncelikle özgün olmalarını tavsiye ederim. Çünkü çok sayıda kopyala yapıştır tarzında bloglar görüyorum. Sonra mutlaka sabırlı olmalılar. Çünkü blog öyle bir günde tanıtılıp sevdirilebilen bir alan değil. Okusunlar, araştırsınlar, kimler neleri takip ediyor, hangi konularda yazı yazmak gerekiyor, genel talepler neler falan bunların nabzını ölçebilmek de önemli. Gerisi kendiliğinden geliyor…

 

Son Söz

Hayat’ın bloguna göz atarsanız güncel konularda kendi düşüncelerini yazdığını göreceksiniz.Yazıları o kadar değer görmüş ki 2 milyona yakın takipçisi bulunan Okan Bayülgen tarafından tweetlenmiş.Sonuç olarak medya üzerine yazılar yazan Hayat, şuanda medya sektöründe çok büyük bir projenin içinde.

 

Siz de blogunuzu bir vitrin gibi kullanarak yeteneğinizi sergileyebilir, yeni fırsatlar yakalayabilirsiniz.Yeter ki kendiniz olun, dürüst olun, samimi olun.

 

Son olarak Hayat’a zaman ayırıp sorularımı yanıtladığı için teşekkür ediyorum ve yeni medya macerasında kendisine başarılar diliyorum.

13 Ağustos 2012 Pazartesi

Size Kazançlı Bir Teklifim Var

Bugüne kadar blog yazarlarının kendilerini ve bloglarını geliştirmelerine yönelik pek çok faydalı yazı yazdım.Şimdi de uzun süredir bünyesinde oluğum ve size her bakımdan çok şey kazandıracak Bumerang Network’ten bahsedeceğim.

 

Bumerang Nedir?

 

Bumerang; Hürriyet’in blog yazarları için oluşturduğu, blogcuların trafik ve para kazanmasını sağlayan bir projedir.Bumerang’a katılmanın size sunduğu avantajlar şunlardır:

  • Aylık 500bin’den fazla ziyaretçisi olan Yazar Kafe’de yazılarınızı yayınlayabilirsiniz.
  • Hurriyet.com.tr’de blogunuzun tanıtımını yapma fırsatı yakalayabilirsiniz.
  • Hurriyet’in dizini olan Hurlist’e blogunuzu ekleyebilirsiniz.
  • Sponsor firmaların reklamlarını yayınlayarak para kazanabilirsiniz.

 

Hemen Üye Ol, 20 TL Kazan!

 

Bumerang İkili Kazanç Sistemi isminde bir kampanya başlattı.Bu kampanya sayesinde başlangıcı 20 TL ile yapabilirsiniz.Nasıl mı?

 

1. Adım: Bumerang üyelik sayfasına gidin.

 

2. Adım: Bumerang üyelik ekranında promosyon kodu bölümüne T1DD5604 yazın.

 

Bumerang Üyelik Ekranı

 

3. Adım: Eğer promosyon kodunu doğru girdiyseniz kısa bir süre sonra yayınlamanız için bir teklif gelecek ve o teklifi başarılı bi şekilde yayınladığınız taktirde 20 TL hesabınıza aktarılacak.

 

Peki Ya Sonra?

Bundan sonra Bumerang Network’un nimetlerinden faydalanmaya devam edeceksiniz.Bumerang skorunuzu arttırarak tekliflerden daha çok kazanabilir, platin üye olarak Yazar Kafe’ye yazılarınızı gönderebilir, sosyal medya paylaşımları yaparak çeşitli hediyeler kazanabilirsiniz.

10 Ağustos 2012 Cuma

Jquery İle Sayfa Üstüne Sabit Açılır Menü Ekleme

Jquery sayesinde web sitelerine görsel açıdan oldukça zengin öğeler eklemek mümün oluyor.Daha önce jquery ile oluşturulmuş dikey bir menü paylaşmıştım.Bu yazıda ise onun yatay versiyonu diyebileceğim bir menü paylaşacağım.

 

Jquery İle Sayfa Üstüne Sabit Açılır Menü

 

Dikey versiyonunda olduğu gibi yatay versiyonuna da ikonlardan faydalanıyoruz.Sayfa açıldığında smenünün sadece yazılı bölümü gözüküyor.Üzerine gelindiğinde ise aşağı doğru açılarak ikon gözüküyor.Aşağıdaki video daha net anlatacaktır.

 

 

Bu menüyü blogunuza eklemek isterseniz şablonunuzdan </body> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

 

<div class='clear'/>
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#eeeeee;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .anasayfa a {
background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Home-icon.png);
}
ul#navigation .hakkimda a {
background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Friends-icon.png);
}
ul#navigation .takipet a {
background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Link-icon.png);
}
ul#navigation .arsiv a{
background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Search-icon.png);
}
ul#navigation .iletisim a {
background-image: url(http://icons.iconarchive.com/icons/delacro/once/48/Mail-icon.png);
}
</style>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(function() {
var d=300;
$(&#39;#navigation a&#39;).each(function(){
$(this).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},d+=150);
});
$(&#39;#navigation &gt; li&#39;).hover(
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-2px&#39;
},200);
},
function () {
$(&#39;a&#39;,$(this)).stop().animate({
&#39;marginTop&#39;:&#39;-80px&#39;
},200);
}
);
});
</script>
<ul id='navigation'>
<li class='anasayfa'><a href='http://bloghocam.blogspot.com'>Ana Sayfa</a></li>
<li class='hakkimda'><a href='http://bloghocam.blogspot.com/p/hakkmda.html'>Hakkımda</a></li>
<li class='takipet'><a href='http://bloghocam.blogspot.com/p/takip-et.html'>Takip Et</a></li>
<li class='arsiv'><a href='http://bloghocam.blogspot.com/p/arsiv.html'>Arşiv</a></li>
<li class='iletisim'><a href='http://bloghocam.blogspot.com/p/iletisim.html'>İletişim</a></li></ul>

 

İsterseniz .png uzantılı ikonların yerine kendi ikonlarınızı kullanabilirsiniz.Menüde kendi sayfalarıma link verdim.Kodlarda benim bloguumua ait adreslerin yerine kendi sayfalarınıza ait adresleri yazın.

8 Ağustos 2012 Çarşamba

3 Farklı Etiket Bulutu Stili

Blogunuzda ister etiketleme, ister kategorileme sistemini kullanın kenar çubuğuna bunu eklemeniz ziyaretçilerin blogunuzda okumak istediği şeyleri okumasına yarar. Ziyaretçileriniz sayfalar arasında geçiş yaparak ilgisini çeken içeriği aramak yerine ilgilendiği konudaki etiket ismine tıklayarak o konudaki yazılara hızlı bir şekilde ulaşabilir.

 

Etiket listelerinin veya etiket bulutlarının kötü yanı ise tasarım olarak zayıf kalmaları ve çoğu zaman blog temasına uyum göstermemeleri.Bunun için daha önce flash animasyonlu etiket bulutu eklemeyi anltamıştım.Şimdi internette denk geldiğim ve paylaşmak istediğim bu 3 farklı stil ile etiket bulutunu daha görsel bir hale getireceğiz.

 

Öncelikle blogunuza Etiketler gadgetını ekleyin ve görüntüleme seçeneği olarak bulutu işaretleyin.Nasıl yapacağınızı bilmiyorsanız daha önce yazdığım etiket bulutu ekleme yazıma bakabilirsiniz.

 

İkinci olarak şablonunuzda ]]></b:skin> kodunu bulun ve kullanmak istediğiniz stilin altındaki kodları ]]></b:skin> kodunun hemen üstüne ekleyin.

 

Stil 1

 

Etiket Bulutu

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0; 
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

 

Stil 2

 

Etiket Bulutu

 

 

 

 

 

 

 

 

 

 

 

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

 

Stil 3

 

Etiket Bulutu

 

 

 

 

 

 

 

 

 

 

 

 

 

.label-size {
float:left;
margin:0 0 7px 20px;
position:relative;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size:0.75em;
font-weight:bold;
text-decoration:none;
color:#996633;
text-shadow:0px 1px 0px rgba(255,255,255,.4);
padding:0.417em 0.417em 0.417em 0.917em;
border-top:1px solid #d99d38;
border-right:1px solid #d99d38;
border-bottom:1px solid #d99d38;
-webkit-border-radius:0 0.25em 0.25em 0;
-moz-border-radius:0 0.25em 0.25em 0;
border-radius:0 0.25em 0.25em 0;
background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
-webkit-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);
box-shadow:
inset 0 1px 0 #faeaba,
0 1px 1px rgba(0,0,0,.1);

z-index:100;
}

.label-size:before {
content:'';
width:1.30em;
height:1.39em;
background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
position:absolute;
left:-0.69em;
top:.2em;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
border-left:1px solid #d99d38;
border-bottom:1px solid #d99d38;
-webkit-border-radius:0 0 0 0.25em;
-moz-border-radius:0 0 0 0.25em;
border-radius:0 0 0 0.25em;
z-index:1;
}

.label-size:after {
content:'';
width:0.5em;
height:0.5em;
background:#fff;
-webkit-border-radius:4.167em;
-moz-border-radius:4.167em;
border-radius:4.167em;
border:1px solid #d99d38;
-webkit-box-shadow:0 1px 0 #faeaba;
-moz-box-shadow:0 1px 0 #faeaba;
box-shadow:0 1px 0 #faeaba;
position:absolute;
top:0.667em;
left:-0.083em;
z-index:9999;
}
.label-size:hover {
background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color:#e1b160;
}

.label-size:hover:before {
background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color:#e1b160;
}
#Label1 {height:210px !important;}



 



Son bir hatırlatma etiket gadgetını eklerken esçeneklerdeki Her etiketteki kayıt sayısını göster seçeneğini işaretlemeyin.

6 Ağustos 2012 Pazartesi

Float Blogger Teması

Yeni bir orjinal tema paylaşımı ile karşınızdayım.Bu temanbın ismi ise Float.Blogcuların kullandıüı temalar birbrine o kadar benziyor ki böyle usta tasarımcıarın elinden çıkan orjinal bir tema ile karşılaştıımda çok hoşuma gidiyor ve paylaşma ihtiyacı duyuyorum.

 

Float Blogger Teması

DemoDownload

 

Üstteki yatay menüyü düzenlemek için şanblondan şu kodlrı bulun:

 

<ul class='menu' id='menu-menu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Styling</a></li>
<li><a href='#'>Drop-down</a>
<ul class='sub-menu'>
<li><a href='#'>News</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Some Link</a></li>
</ul>
</li>
<li><a href='#'>Archives</a></li>
<li><a href='#'>Contact</a></li>
</ul>

 

Menüdeki her bir öğeyi şu şekilde düzenleyeceksiniz:

 

<li><a href='Açılacak link'>Öğenin adı</a></li>

 

Düzenlemeniz gereken diğer bir yer ise sosyal butonlar.Bunun için şablondan aşağıdaki kodları bulun:

 

<ul>
<li><a href='#' id='dribbble'>Dribbble</a></li>
<li><a href='http://facebook.com' id='facebook'>Facebook</a></li>
<li><a href='#' id='flickr'>Flickr</a></li>
<li><a href='http://twitter.com' id='twitter'>Twitter</a></li>
<li><a href='#' id='google'>Google+</a></li>
<li><a href='#' id='tumblr'>Tumblr</a></li>
<li><a href='#' id='pinterest'>Pinterest</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' id='rss'>RSS</a></li>
</ul>

 

Her bir sosyal ağın önündei # işareti yerine o sosyal ağa ait adresinizi yazın.Örneğin:

 

<li><a href='http://twitter.com/bloghocam' id='twitter'>Twitter</a></li> gibi

 

Eğer listedeki sosyal ağlar arasında hesabınız olmayanlar varsa o satırı tamamen silebilirsiniz.

3 Ağustos 2012 Cuma

Slayt Manşet [ JavaScript Versiyonu ]

Çok kişi istediği için daha önce kullandığım Featutured Content Slider isimli slayt manşet eklentisini paylaşmıştım.Paylaştığım o eklentide Jquery kullanıldığı için blogu yavaşlatıyordu.Kullananlar da bundan şikayetçiydi.

 

Daha hızlı  ve daha patik bir slayt çin çözümler ararken asdece JavaScript kullanılarak oluşturulmuş bu pluginle karşılaştım.Özelliklerini ve kağnağını görmek için buraya tıklayabilirsiniz.

 

slayt-ozellikli

 

Bu slaytı blogunuza eklemek için Blogger kumanda panelinde tasarım ayarlarından sayfa öğeleri ( yerleşim ) bölümünü açın ve Üst Bilginin altındaki gadget ekleme yerine HTL/JavaScript gadget olarak aşağıdaki kodları ekleyin.

 

<style type="text/css">

#mcis {
display: none;
}

#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: url(https://lh6.googleusercontent.com/-cy-BZ1wyfXQ/UA52HRCCytI/AAAAAAAADbE/3r3-D9RaOPI/s109/ribbon-ozellikli.png) no-repeat;
z-index: 7;
}

#slider {
width: 500px;
height: 218px;
background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
color: #DA0;
}

div.navBulletsWrapper {
top: 250px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://lh3.googleusercontent.com/-b7wufyyYIC4/UA5yZFv42DI/AAAAAAAADa4/1lcw553icuI/s22/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
_position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0 -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style>

<script src="https://dl.dropbox.com/u/60346665/bloghocam-slayt.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="http://bloghocam.blogspot.com/2012/05/blog-hocama-misafir-olmann-faydalar.html"><img src="http://lh3.ggpht.com/-YPJmPpZ96ww/T8YL135hG7I/AAAAAAAADGE/ggxFbMhZPKg/s1600/bloghocama-misafir-olmanin-faydalari.jpg'" alt="blog hocam'a Misafir Olmanın Faydaları"/></a>

<a href="http://bloghocam.blogspot.com/2011/12/mini-e-kitabm-okuyun-misafir-blogculuk.html"><img src="https://lh4.googleusercontent.com/-ls1UOTN4EUA/TueqzcdHexI/AAAAAAAABt0/31fNpWdT41M/s576/misafir-blogculuk.png'" alt="misafir blogculuk"/></a>

<a href="http://bloghocam.blogspot.com/2011/06/basarl-blogcularn-alskanlklar.html"><img src="https://lh4.googleusercontent.com/-iFKdyxyIKs4/TgXFh7b3tDI/AAAAAAAAAt8/NEUf0jQEgJQ/basarili-blogcularin-aliskanliklari.jpg'" alt="başarılı blogcuların özellikleri"/></a>

<a href="http://bloghocam.blogspot.com/2011/08/bir-blogcunun-sahip-olmas-gereken-5.html"><img src="https://lh5.googleusercontent.com/-HDEPfJhX8iE/TjfiWyEmDdI/AAAAAAAAA0E/TEc_YhNkMq8/bir-blogcunun-sahip-olmasi-gereken-5-beceri.jpg'" alt="bir blogcunun sahip olması gereken 5 temel beceri"/></a>


                </div></div>

 

Slaytta gösterilecek öğelerin kodlarını şu şekilde düzenleyeceksiniz:

 

<a href="Resme tıklayınca açılacak asyfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>

1 Ağustos 2012 Çarşamba

Kullandığım E-Posta Aboneliği Eklentisi

Blogumun kenar çubuğunda gördüğünüz e-posta aboneliği kutusu ilk yaptığm günden beri çok beğenildi ve çok kişi tarafından istendi.Sanırım bu eklentiyi siznle paylaşmanın zamanı geldi.

 

e-posta-abonelik-formu

Tasarımı ve kodları bana ait olan bu eklentiyi blogunuzda kullanmak isterseniz değiştirmeniz gereken yerleri değiştirdikten sonra kodları HTML/Java Script gadget olarak eklemeniz yeterli.

 

<style>
#subscribe {
  float:right;
  width:258px;
  padding:10px;
  margin:0 0 20px 0;
background: url(https://lh5.googleusercontent.com/--PGII37MHuc/T4QdJl4a4rI/AAAAAAAACsU/iQgow_B8swY/s266/e-posta.png)  no-repeat 0px 0px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px
  height:auto;
border:1px solid #656E75;
color:#000;
font-weight:bold;

}

#subscribe h {
font-size:12px;
color:#F1921A;
}

.feed {
  width:260px;
  min-height:60px;
  margin:0 0 10px 0;
  padding:0;
}
.input{
  margin:10px 7px 0 0;
  float: left;
  width: 175px;
  padding: 4px 5px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
border:1px solid #656E75
}

.sbutton {
  background:#F1921A;
  margin:10px 0 0;
  float: left;
  height:26px;
  border: 1px solid #656E75;
  color: #fff;
  width:65px;
  -webkit-border-radius:4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.sbutton:hover {
  background:#E6E7E8;
color:#669900;
}
</style>
<div id='subscribe'>
<div class='feed'>
         <br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=bloghocam&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;;}' type='text' value='E-Mail Adresiniz...'/>
<input name='uri' type='hidden' value='bloghocam'/><input name='loc' type='hidden' value='en_US'/><input class='sbutton' type='submit' value='Abone Ol'/></form>
       </div>
       <div>
       Blog Hocam&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
       </div></div>

 

Değiştirmeniz gereken yerleri kırmızı renkle gösterdim.

  • bloghocam yerine kendi FeedBurner ID’nizi yazın.
  • Blog Hocam&#39;da yayınlanacak yeni yazılar e-mail adresinize gelsin.
    yerine kutunun altında olmasını istediğini yazıyı yazın.

Son olarak bu eklentiyi kendi blogum için hazırladığımdan dolayı genişlikler sizin temanıza uygun olmayabilir.Bu durumda genişlikleri düşürmek yetmez.Arkaplan olarak kullandığım resmi de değiştirmeniz gerekebilir.