Blog Tasarımında Yapılan 9 Ciddi Hata

Başlığa okuyup bu yazıyı tasarımcılar veya kod yazarları için yazdığımı düşünmeyin lütfen. Bu yazı, hazır Blogger şablonlarını “Şablon Düzenleyici”yi veya burada paylaşılan ipuçlarını kullanarak düzenleyen, standart Blogger kullanıcıları için.

 

Standart bir Blogger kullanıcısı Blogger şablon düzenleyiciyi kullanarak görsel değişiklikler yapabilir, HTML düzenleyici yardımıyla burada veya benzer sitelerde paylaşılan kod değişikliklerini yapabilir, yerleşim bölümünden istediği gadgetları ekleyebilir. Bu sayede kendine özgü br blog tasarımına sahip olabilir.

 

Fakaaaaat

 

Yukarıda belirtilen yollarla blog tasarımını özelleştiren kullanıcılara şu hataları yapmamalarını şiddetle öneriyorum.

 

 

1. Yatay Menüye Çok Fazla Link Eklemek

 

Yatay menü blogun genellikle üst kısmında bulunur, ziyaretçileri önemli sayfa ve yazılara yönlendirmek için kullanılır. Buraya çok fazla link eklediğinizde blogun genişliğini aştığından tek satır olmaktan çıkar, 2-3 satır olur. Bu da hem görünüm hem de kullanılabilirlik açısından hoş bir durum değildir. Yatay menüde sadece önemli sayfalara link vermenizi, eğer fazla link ekleyecekseniz açılır menüler kullanmanızı öneririm.

 

2. Sidebar’a Aşırı Gadget Eklemek

 

Kenar çubuğu dediğimiz sidebar blog tasarımının en önem verilmesi gereken yerlerinden biri. Bu alanlara faydalı öğeler ekleyerek blogumuzun takipçi ve okunma sayısını arttırabiliriz. Fakat bu alanlara çok sayıda gadget eklenmesi blog tasarımında sık yapılan hatalardan biri. Blogun hızını yavaşlatacağı gibi ziyaretçilerin de kramaşık bir siteyle karşılşmasına yol açar. Sidebar’a sadece önemli ve işlevsel gadgetları eklemenizi öneriyorum.

 

3. Göz Yoran Renkler Kullanmak

 

Her blog yazarı sevdiği rengi blogunda kullanmak isteyebilir, buna bir itirazım yok ama çok parlak ve iddialı renklerin insanın gözünü yoduğu da bir gerçek. Sevdiğiniz rengin yumuşak tonlarını tercih edebilirsiniz.

Renk kullanımında ypılan bir diğer büyük hata da arkaplan rengi ile metin rengini benzer tutmak. Koyu renk arkaplanınız varsa metni açık bir renk seçmeniz gerekir. Kontrast renkler kullanmak yazıyı okumayı kolaylaştırır.

 

4. Okuması Zor Fontlar Kullanmak

 

Şık veya farklı görünmek adına blogda değişik fontlar kullanılması normal. Özellikle de “handwriting” dediğimiz el yazısı şeklinde fontlar çok tercih ediliyor. Belki yazı başlıkları  bu tür fontları kaldırabilir ama içerikte mutlaka basic fontlar kullanmanız gerekir.

 

Font kullanımında dikkat etmeniz gereken bir diğer nokta ise Türkçe karakterleri destekleyip desteklemesidir. Zira “ı,ğ,ş” gibi karakterli kullandığınızda kötü bir görüntü ortaya çıkabiliyor.

 

5. Sosyal Paylaşım Butonları Kullanmamak

 

Belki çok küçük bir detay gibi gelebilir ama benim gibi beğendiği yazıları soysal hesaplarında paylaşmak isteyen kullanıcılar yazının üstünde veya altında paylaşım butonları görmediğinde zahmete girmek istemiyor ve yazıyı paylaşmakan vazgeçiyor. Soyal medyadan gelecek potansiyel trafiği düşündüğünüzde neler kaybettiğinizi tahmin edebilirsiniz.

 

Blogger’ın knedi sosyal paylaşım butonları hem görsel hem de işlevsel olarak zayıf ne yazık ki. Bana kalırsa Blogger’ın kendi butonlarını kullanmak yerine tasarımınıza uygun butonları yazı başlığının altında veya yazının bitimine eklemek çok daha iyi.

 

6. İletişim Seçenekleri Eklememek

 

İletişim dendiğinde akla ilk gelen şey iletişim formunun olduğu bir iletişim sayfasıdır. Evet blogunuzda iletişim formunun olduğu bir iletişim sayfası mutlaka olmalı ve ana sayfadan iletişim sayfasına en az bir görünür bağlantı vermelisiniz. Ancak iletişim seçenekleri bununla sınırlı olmamalı. Blogunuzun kenar çubuğundaki sosyal medya hesaplarınıza bağlı butonlar veya kutular da bir blog tasarımında olması gereken iletişim seçenekleridir.

 

7. Düşük Çözünürlükte Görseller Kullanmak

 

Görseller bloglarımızın vazgeçilmez öğeleri ve hemen hepimiz çeşitli yerlerde görseller kullanıyoruz. Fakat gerek yazı içerisinde, gerek blogun diğer kısımlarında kullandığımız görseller düşük çözünürlükte, kalitesiz olduğunda kötü bir görüntü ortaya çıkıyor. Bu da blounuzun prestijine zarar veriyor bence.

 

8. Otomatik Çalan Müzik Ve Videolar Kullanmak

 

Çok evdiğiniz bir şarkıyı veya videoya blogunuza eklediğinizi düşünün. Benim de kalabalık bir ofis ortamında blogunuzu ziyaret ettiğimi düşünün. Ciddi bir ofis ortamı, onlarca çalışan, belki, üst düzey yöneticiler ve birden benim bilgisayarımdan yükselen bir şarkı sesi…. Düştüğüm durumu tahmin edebiliyorsunuz sanırım. Belki siz kendinizi iyi hissediyor olabilirsiniz ama blogunuzun size özel olmadığnı, herkese açık olduğunu hatrlayın ve bu tür otomatik açılan multimedya öğelerini kullanmayın.

 

9. Flash Bileşenler Kullanmak

 

Flash öğeler size eğlenceli gelebilir ama pek çok açıdan faydadan çok zararı vardır. Ziyaretçiler blogunuza gösteri izlemek için gelmiyorlar. Bilgiye hızlı bir şekilde ulaşmk istiyorlar. Flash introlar veya animasyonlarla insanların içeriğinize ulsşmasını engellemeyin.

 

Son olarak

 

Evet yaratıcılık, görsellik önemlidir ama blog tasarımı yaparken önceliğiniz ziyaretçiye yardımcı olmaktır. Blogunuzun hedef kitlesini doğru tanımlayın veya bu kitleye uygun sade, kullanışlı bir tasarım için çaba harcayın.

BLOGGER YORUM FORMUNU ÖZELLEŞTIRIN.!

Blogger Yorum Kutusu Değiştirme
Aşağıda ki resimde görüldüğü gibi bu yazımda blogcular için kendi kullandığım yorum kutusu kodunu paylaşağım. Oldukça kullanışlı olan bu yorum panelinde yapılan yorumu yanıtlama gibi seçenekte bulunmakta.

Dikkat:! Blogunuza kodu eklemeden önce yedek almayı unutmayın !

1. Adım 
Kumanda Paneli  > Şablon > Html'yi Düzenle'ye geliyoruz.

2.Adım
Ctrl+F ile Comments seçeneğini buluyoruz ve aşağıda ki kod ile değiştiriyoruz.

Yorum Kutusu Özelleştirme:

Arka plan: Kullanılan yorum kutusunun arka plan görüntü rengini değiştirmek için kod içinde bulunan #d0cce4 kodunu istediğiniz renk kodu ile değiştirebilirsiniz.

Butonlar: Butonların rengini değiştirmek için ilk başta bulunan #FA6900 kodunu istediğiniz bir renk kodu ile değiştirebilirsiniz.

</* Comments
----------------------------------------------- */
/*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/
.comments .comment .comment-actions a {background:#FA6900;border:1px solid #000;cursor:pointer;color:#ffffff;padding:3px 3px; margin-right:10px;font:10px sans-serif;}
.comments .comment .comment-actions a:hover {text-decoration: none; background:#FF5C59; border:1px solid #000;}
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d0cce4;}
#comments h4,.comments .user a,.comments .continue a{font-size:14px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d0cce4;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#000}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#FA6900;}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7I0SIPkn2z6EWKe0Xn8wX0vWvzS59zY3Of68cAi-YGBOBiT0oenKNx1LKlKefkS7oCULd5PjQmT2HqAN7DZwIxKO3_yrQpyHfRCrCUoSsBCrfSnSUMpNuhLcCwniwT-CPfU84kdi-5_U/s36/yazar.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:0px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:0px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.dicasblogger.org*/
>

BLOGGER RESIMLI SON YORUMLAR EKLENTISI

Blogger son yorumlar eklentisi bir çok blogger kullanıcısı için son derece yararlı bir eklentidir. Son yorumlar eklentisini kullanmak seo'ya oldukça faydalıdır. Blog trafiğinizi ve bounce rate yani hemen çıkma oranını azaltır. Gelelim popüler ve şık son yorumlar eklentisini eklemeye;

Blogger Avatarlı Son Yorumlar Eklentisi


Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz

Açılan pencereye aşağıdaki kodu yapıştırıp, kaydet'e basın işlem tamamdır.

Kod:

<style type="text/css">
ul.btt_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.btt_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 2px solid transparent;
}
.btt_recent_comments li:hover {
    -webkit-transform: scale(1.2) translate(15px);
    -moz-transform: scale(1.2) translate(15px);
    -ms-transform: scale(1.2) translate(15px);
    -o-transform: scale(1.2) translate(15px);
    transform: scale(1.2) translate(15px);
    box-shadow: 0 0 20px 1px #aaa;}
.btt_recent_comments li {
    background: none!important;
    margin: 5px!important;
    padding: 5px!important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.btt_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.btt_recent_comments li img {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.btt_recent_comments li span {
    margin-top: 3px;
    color: #666;
    display: block;
    font-size: 12px;
    line-height: 1.4;
}

#btt_recent_comments .info {
    text-align: right;
    height:1.2em!important;
    overflow:hidden;
    line-height: 1em!important;
}
#btt_recent_comments .info a {
    font-weight: bold;
    font-size: 11px;
    color: #AAA;
    display:none;
}
#btt_recent_comments:hover .info a {
    display:inline!important;
}
</style>



<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 45,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More ?",
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnLug8fdg3M2nTa7hDU6z0hFeqI7Bumf6Q8ftkRoBvqmjMJfh_9RIHcoE-r95Jxnu5BIHWGPpQ-dGha5icbhEG4nKuh3s5Eu7GhvqIZVdxjD6-4QIEUFxkLPhDKc8eaE2yuGBb4-jQqNR/s320/avatar.png",
 hideCredits = true;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{}))
//]]>
</script>
<script src="/feeds/comments/default?alt=json&amp;callback=btt_recent_comments&amp;max-results=5" type="text/javascript"></script>

<div id="btt_recent_comments">
<div class="info">

Eklenti Ayarları

Son yorumlar eklentisinin normal ayarları 5'tir. Daha fazla yorum gözükmesi için aşağıda ki kodları eklenti kodlarından arayıp bulun;

numComments  = 5,   Değerini değiştirin 

amp;max-results= 5   Yorum sayısının değişmesi için değerlerin aynı olması gerekiyor.

Avatarın gözükmemesi için aşağıda ki true değerini false ile değiştirin.

showAvatar  = true,

Avatar boyutu:

avatarSize  = 45,

Yorumlarda toplam kaç karekter gözümesini istiyorsanız aşağıdaki değeri değiştirin.

characters  = 40

Blogger Şablon Yedekleme

Blogumuzun şablonunda değişiklik yapmak istediğimiz zaman eklediğimiz kodlar çalışmazsa ya da mevcut kod düzenimizde istemediğimiz türden bir değişiklik oluşturursa eğer şablonunuzu yedeklemediyseniz maalesef geriye dönmeniz mümkün olmayacaktır! Blogumda şablonunuzu güzelleştirmek adına zaman zaman blogger eklentileri yayınlıyorum. O yazılarda da fark edeceğiniz üzere şablonunuzda yer alan kodlarda bir takım değişiklikler yapmanız gerekiyor. Sağlıklı bir değişiklik yapmak için şablonunuzun önceki halini yedeklemenizileriye dönük size fayda sağlayacaktır.
Şablonunuzu yedeklemeniz sadece kodlarda yapacağınız değişikliklerin olumsuz olmasına karşın değil, bloğunuzun başına gelebilecek herhangi bir durum için de gerekli olacaktır.O yüzden kodlarda değişiklik yapın ya da yapmayın, ayda-2 ayda bir şablonunuzu yedeklemeyi ihmal etmeyin.

Blogger şablon nasıl yedeklenir?

Şablon değiştirmek istediğimizde yaptığımız işlemi bir bakıma tekrar ediyor olacağız.

• Blogger hesabınıza giriş yapın.
• Şablon menüsüne tıklayın.
• Sağ üst köşede yer alan Yedekle / Geri yükle butonuna tıklayın.
• Karşınıza çıkan pencerede tam şablonu indir butonuna tıklayın.

 
Bu adımları doğru yaptığınız takdirde şablonunuzu bilgisayarınıza kaydetmiş olacaksınız.İndirdiğiniz dosya farklı rakamlardan oluşan anlamsız bir isme sahip.Siz şablon adı ve tarih şeklinde bir isim vererek ilerleyen dönemde yaptığınız değişikliği hatırlayabilirsiniz.
Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

Allianz Kurumsal İletişim’de Fark Yaratmış!

Blog Hocam’ın sloganında da belirttiğim gibi 3.5 senedir üzerinde durduğum esas konu “daha iyi bir blog sahibi olmak”. Blogunuzu geliştirmek için bugüne kadar yüzlerce ipucu ve yöntem paylaşmışımdır. Fakat türü ve konusu ne olursa olsun her blog için geçerli bazı temel kavramlar olduğunu düşünmüşümdür her zaman. Neler mi? Fark yaratmak, doğal olmak ve iletişim kurmak. Bana göre bu üç kavram iyi bir blog/blogger olmanın temelidir. Tasarım, SEO, blog araçları gibi detaylar bu 3 temelin üzerine inşa edilmelidir.

 

Fark yaratmak, doğal olmak ve iletişim kurmak… Üzerinde durduğum bu üç kavramın gerekliliği sadece bloglar için değil, iş dünyasında pek çok sektörde başarılı olabilmek için de geçerli değil midir? Gıdadan, tekstile, inşaattan, medyaya kadar şirketlerin ve markaların stratejilerini incelediğinizde fark yaratan, doğal olan, hedef kitlesiyle iyi iletişim kuranların her zaman göz önünde ve başarılı olduğunu görürüz.

 

Blogların ve blog dünyasının, gerçek hayatla pek çok bağlantısı olduğunu iddia etmiş, gerçek hayattan aldığım ilhamları ve karşılaştığım başarı hikayelerini blog yazarlığına da uygulayarak hem öneri, hem olarak sizlerle paylaşmış, hem de bizzat kendi blogumda uygulamaya çalışmışımdır.

 

Yine sizlere ilham olması ve örnek teşkil etmesi açısından son zamanlarda sosyal medyada çok sevilen ve fenomen olma yolunda ilerleyen bir proje ve marka iletişim stratejisinden bahsedeceğim.

 

Söz konusu firma Allianz Türkiye ve sektör hepinizin bildiği gibi sigorta sektörü. Çoğumuz sigorta sektörü ve firmalarıyla genellikle zor zamanımızda yani işimiz düştüğünde tanışırız. Ve genellikle bu firmalarla kafamızda soru işaretleriyle çalışmaya başlarız. Peki bir sigorta şirketi dikkat çekmek, insanların kafalarındaki soru işaretlerini kaldırmak, faaliyetlerini daha iyi anlatmak için neler yapabilir?

 

Sorunun cevabını aslında yukarıda verdim. Üç temel kavram olan fark yaratmak, doğal olmak ve samimi bir diyalog kurmak üzerine iletişim stratejisi belirleyerek bu doğrultuda hareket etmek. İşte Allianz Türkiye de tabiri caizse içine kapanık bir sektör olan sigorta sektöründe tabuları yıkarak “dışavurumcu şirket” anlayışını sektöre kazandırıyor.

 

 

İletişim stratejisi doğrultusunda yaptıkları paylaşımlar fark yaratmak ve doğallık konusunda, tüm bloggerlara adeta ilham kaynağı niteliğinde. Allianz Türkiye, şirketin tüm İcra Kurulu üyelerini en doğal halleriyle dijital dünyada paylaşarak paydaşlarına ve topluma daha yakın, sıcak ve sosyal bir marka olma hedefinde ne kadar samimi olduğunu gösteriyor.

 

 

Nev-i şahsına münhasır insan Ayhan Sicimoğlu’nun sürpriz baskınını konu alan iletişim çalışması kısa zamanda çok sevildi ve Allianz’ın doğallık, şeffaflık ve farklılık üzerine kurduğu iletişim stratejisinin doğruluğunu ispatladı. Şundan eminim ki bu fikir ve proje ilerleyen zamanlarda Allianz’ın başarısını ve insanların sigorta sektörüne bakışını olumlu yönde etkileyecektir.

 

 

Bence tüm bloggerlar Allianz Türkiye’nin bu iletişim stratejisinden bir ders çıkarmalı, kendi bloglarına uygulamalılar. Nasıl ki Allianz Türkiye bugüne kadar yapılmayanı yapıp fark yaratıyorsa siz de blogunuzla fark yaratacak stratejiler geliştirmelisiniz.

Joomla'nın Faydaları

Binlerce  CMS ( İçerik Yönetim Sistemi ) yazılımı arasında joomla’ nın tercih edilmesi bir tesadüf değil. Joomla’ nın bu kadar geniş bir kullanım alanı olmasının ilk sebebi  kullanım kolaylığıdır.



Şöyle açıklamak gerekirse daha önce hiç bir web sitesi yapmamış ve CMS kullanmamış olsanız bile joomla’ yı rahatlıkla kullanabilirsiniz. Sıfırdan kendinize bir web sitesi oluşturabilirsiniz.



 Binlerce de ücretsiz eklentilere ve fonksiyonlara sahiptir. Joomla’ nın estetik yönüne başka hiçbir açık kaynak CMS’ in sahip olmadığını rahatlıkla söyleyebiliriz. İnternet bulunan her yerde her şekilde web sitenizi yönetebilirsiniz. Joomla’ nın özelliklerinin tüm webmaster’ lara çekici geleceğini tahmin ediyoruz. Grafik, dosyalar ve diğer medyaların web tabanlı olarak yönetilebilmesi, basit web arabirimi sayesinde tamamen web tabanlı yönetim, dışarıdan yazarların ve editörlerin yazı yazabilmesi, otomatik menü yönetimi, yazıların otomatik olarak yayınlanması ve silinmesi için içerik yayınlanma zamanlamasıdır. Daha etkileyici özelliklerinden bahsedersek, içeriği ele alma ve site ziyaretçileriyle iletişim kurmada öne çıkmaktadır. Bunlar, görsel yazı editörü, site içeriğinde arama yapabilme, RSS ve Atom formatında haber akışları desteği, anket, banner reklam yönetimi, medya dosyalarını yüklemek ve yönetmek için dosya yöneticisi, silinen içerikler için çöp kutusu, arama motoru dostu adresler, basit ziyaretçi istatistikleri, e-ticaret çözümleri resim galerileri ve forum gibi çözümler için eklentiler, çok dillilik özelliği, özürlüler için erişilebilirlik seçenekleri, açık kaynak lisanslı yazılımın ve kaynak kodunun ücretsiz olarak indirilmesi, tüm önemli işletim sistemlerinde ( Windows, Linux, Mac OS ) çalışabilmesi ve son olarakta yüksek performans için sayfa önbellekleme özellikleri. Ee daha ne olsun değil mi. Bu işe yeni adım atıyorsak neden en kolayından ve en özellikli olanından başlamayalım ki. Ücretsiz paket indirmeniz sonunda  yaklaşık otuz dakikalık bir kurulumdan sonra karıştırıp kısacık bir zaman diliminde joomla’ nın müthiş dünyasını keşfe çıkabilirsiniz. Anlaşılabilir şablonları ve kullanım kolaylığı ile kullanım sayısının günden güne artmaktadır.



Siz de geri de kalmayın. Joomla içerik yönetim sistemi kolaylığı sayesinde müthiş web sitelerine sahip olun. Anlattığımız gibi öyle çok uzun yılların bilgisine ve tecrübesine ihtiyacınız da yok.

Blogger Reklam Kodu Ekleme

Merhaba! Bu gün sizlere eski konumuzu güncelleyerek blogger reklam kodu ekleme adlı makalem ile sizlerleyim değerli dostlar. Dilerseniz makalemize dönelim.
Bloga reklam eklemek için yapmanız gerekenler kısaca şunlar;

Reklam kodu

1. Blogger Yönetici Paneline giriş yapıyoruz
2. Yerleşim Gadget ekleye tıklıyoruz.
3. Açılan pencerede HTML/JavaScript'e tıklayıp, aşağıdaki kodu yapıştırıyoruz.

Blogger reklam kodu

<center><table border="1"><tr><td width="125" height="125" align="center">
<a href="http://yuksel-duman.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_5LfnM3MyHYCZ_dOSrEOtN8hYpl4Udie0XiU8w3pLyVKIRPTHggXqs5-3HSJ9IN_Vz-2IuEF9Y1UB97VKuZEmj81HSwua-TKvFTXKnQKlR2JvyZmV7O19W4K37pSEWgwfYGdXY2Q9LKd/s1600/125x125.gif"/></a>
<td width="125" height="125" align="center"> <a href="http://yuksel-duman.blogspot.com/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_5LfnM3MyHYCZ_dOSrEOtN8hYpl4Udie0XiU8w3pLyVKIRPTHggXqs5-3HSJ9IN_Vz-2IuEF9Y1UB97VKuZEmj81HSwua-TKvFTXKnQKlR2JvyZmV7O19W4K37pSEWgwfYGdXY2Q9LKd/s1600/125x125.gif"/></a>
</td></td></tr><tr>
<td width="125" height="125" align="center">
<a href="http://yuksel-duman.blogspot.com/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_5LfnM3MyHYCZ_dOSrEOtN8hYpl4Udie0XiU8w3pLyVKIRPTHggXqs5-3HSJ9IN_Vz-2IuEF9Y1UB97VKuZEmj81HSwua-TKvFTXKnQKlR2JvyZmV7O19W4K37pSEWgwfYGdXY2Q9LKd/s1600/125x125.gif"/></a> </td>
<td width="125" height="125" align="center">
<a href="http://yuksel-duman.blogspot.com/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4_5LfnM3MyHYCZ_dOSrEOtN8hYpl4Udie0XiU8w3pLyVKIRPTHggXqs5-3HSJ9IN_Vz-2IuEF9Y1UB97VKuZEmj81HSwua-TKvFTXKnQKlR2JvyZmV7O19W4K37pSEWgwfYGdXY2Q9LKd/s1600/125x125.gif"/></a> </td></tr></table></center>

Reklam vermek istediğiniz sitenin linkini http://yuksel-duman.blogspot.com ile resmini ise "img src" kodu arasında bulunan resim linki ile değiştirebilirsiniz.
Resim boylarını değiştirmek için width ve height ayarlarını kullanabilirsiniz.

Yandex SEO

Ünlü Rus arama motoru olan Yandex, Google'a benzemektedir.
Yandex Google'dan farklı özellikleri de bünyesinde barındırıyor. Yani Google gibi bir arama motorudur.

Yandex tıpkı Google gibi kaliteli içeriğe, özgün içeriğe, erişime önem vermektedir.
Sitelerin altyapısının yazılımsal ve tasarım olarak arama motoru Yandex'e uygun hale getirilmesi gerekmektedir.
Yandex çektiği konuların bir çoğunu sosyal medya mecralarından aldığı için
sosyal medya ortamında paylaşılan içerikler Yandex Seo açısından önem ifade etmektedir.
Her ne kadar Yandex meta description'a Gogle kadar önem vermese de yinede yazılarınızda faydası vardır.

Web sitenize eklediğiniz yazıların makalelerin başlıkları (Title) Yandex için önem taşımaktadır. Dolayısıyla Yandex sıralamalarda başlıkları dikkate almaktadır.

Yandex seo çalışmaları için hedef anahtar kelimelerinizin ana sayfada olduğu kadar alt sayfalarda da olması gerekmektedir. Çünkü Yandex anahtar kelime yoğunluğunun ana sayfada olduğu kadar alt sayfalarda da olmasını dikkat çeker.

HTML Kodlar Ve Anlamları

LİNK ÖZELLİKLERİ
a : Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.

————————————————————————

BİÇİMLENDİRME
color: Linkin rengini belirler.
background-color: Linkin zemin rengini belirler.
background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight: Yazının kalınlık veya inceliğini belirler.
border: Linkin etrafına kenarlık ekler.
display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

————————————————————————

LİSTE ÖZELLİKLERİ
disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

————————————————————————

KATMAN ÖZELLİKLERİ
position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

————————————————————————

FONT ÖZELLİKLERİ
font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
font-style: Yazının normal veya sağa eğik olmasını sağlar.
font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight: Yazının kalınlık-inceliğini belirler.
font-size: Yazının büyüklüğünü belirler.

————————————————————————

TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

————————————————————————

İMLEÇ ÖZELLİKLERİ
crosshair: İmlecin artı işareti şeklinde olmasını sağlar.
auto: İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default: İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand: İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move: İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize: İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize: İmlecin sola yatık normal ok olmasını sağlar.
se-resize: İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize: İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize: İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize: İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize: İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize: İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text: İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait: İmlecin meşgul animasyonuna dönüşmesini sağlar.
help: İmlecin yardım-soru işaretine dönüşmesini sağlar.

————————————————————————

ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

————————————————————————

TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

_________________________________________________________________

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

_________________________________________________________________

border : Tablonun kenarlarının şekillendirilmesini sağlar.

_________________________________________________________________

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

_________________________________________________________________

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

_________________________________________________________________

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

_________________________________________________________________

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

_________________________________________________________________

color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.