Blogger'den İletişim Formu Eklentisi..

     Blogger, iletişim formu gadgetını kullanıma sundu. Blog yazarlarının uzun zamandır eksikliğini çektiği ve başka sitelerden aldığı kodlarla çözüm bulmaya çalıştığı site için iletişim formu eksikliği artık sorun olmaktan çıktı. 

     Blogger iletişim formunu sitenize eklemek için yapmanız gereken tek şey; yönetim panelinde Yerleşim >> Gadget Ekle >> Diğer seçeneklerini takip ederek bu gadgeti aktif hale getirmek.

Blogger'a Google+ yorumları nasıl eklenir?

     Google, Blogger kullanıcılarına yönelik bir yeniliğe daha imza attı. Artık Google+ yorumlarını blog sitenizde gösterebileceksiniz. Bu sayede Google/Youtube,Gmail gibi sitelerin herhangi birinde oturum açmış bir ziyaretçi sitenize giriş yapmadan yorum bırakabilecek. Böylelikle Facebook yorumlarında olduğu gibi zaman kaybetmeden yorum yapma imkanı sağlanmış oluyor. Bunun yanında ziyaretçilerin Google+ profillerinde paylaştıkları gönderilere yapılan yorumların da sayfada görünmesi başka bir avantaj.

     Bu özelliği blog siteniz için aktifleştirmek için aşağıdaki adımları izlemeniz yeterli.

• İlk olarak Blogger hesabınızla Google+ hesabınızı bağlamanız gerekiyor. (Bunu daha önce yaptıysanız bu adımı atlayabilirsiniz)
• Daha sonra Blogger yönetim panelinde Google+ menüsüne girip, aşağıdaki resimde görebileceğiniz kutucuğa çek koymanız yeterli. Yorum eklentisini aktif yapmak bu kadar kolay.
  

     Blogger'da klasik temalar dışında özel bir tema kullanıyorsanız, üstteki maddelere ek olarak ekstra bir işlem daha yapmanız gerekiyor.

• Blogger yönetim panelinde Şablonlar menüsüne girip "HTML'yi Düzenle" seçeneğine tıklıyoruz.
• Burada <b:includable id='comment-form' var='post'> kodunu aratıyoruz. Bulduktan sonra solda satırın başındaki ▶ ikonuna basarak kod bölümü genişletip hemen yanına şu kodları ekleyin: <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

     Eklenti aktif olduğunda blogda daha önce yayınlanan yorumlarda yeni tasarımla Google+ yorumlarıyla bir arada görünüyor.

Blog Başlığına Gölge Efekti Vermek..

     Blogunuza eklediğiniz yazı başlıklarının gölge efektiyle daha şık görünmesini ister misiniz? Radikal Medya'da da kullandığımız bu efektin, uygulanmış bir başka örneğini buraya tıklayarak görebilirsiniz. Blogunuzun görsel olarak daha şık bir görüntüye sahip olması için bu tür ufak ekleme ve düzenlemeler şart :)

     Şimdi gelelim bu değişikliği nasıl  yapacağınıza; Öncelikle yönetim panelinde Şablon > HTML’yi Düzenle yolunu takip ederek ]]></b:skin> yazan yeri buluyoruz ve aşağıdaki kodu hemen bunun üst kısmına yapıştırıyoruz. Başlığın boyutunu ve rengini, yazı fontunu ve gölgenin rengini/şeklini kendi zevkinize göre değiştirebilirsiniz.

.post-title  { font-size:26px;   line-height:1.2em   margin:0 0 10px 0; text-shadow: 0.02em 0.02em 0.17em #4f5458; margin-bottom:8px; color:#000; font-family:Century Gothic }

Blogger Etiketlerini 2 Sütun Halinde Gösterin..

     Blogger'da etiketleri kategori olarak kullananların önemli sıkıntılarından biri etiket sayısı arttıkça yan sütunun aşağıya doğru gereksiz şekilde uzamasıdır. Yazıları okuyucularınıza  kategoriler halinde sunabilmek önemli bir avantajdır ama bunu 2 sütun halinde daha küçük bir alanda toplu halde gösterebilmek çok daha yararlı olur.

     Aşağıda size etiketleri nasıl 2 sütun halinde göstereceğinizi anlatacağız. Normalde Blogger bunun yönetim panelinden yapmaya izin vermiyor ama 1 satır kod ekleyerek yapabileceğimiz basit bir işlem aslında. Blogger yönetim panelinizde Şablonlar >> HTML'yi Düzenle dedikten sonra yapmanız gereken önce aşağıdaki kodu bulmak ve

]]></b:skin>

daha sonra ise onun hemen üzerine aşağıdaki satırı eklemek. Hepsi bu kadar, hayırlı olsun..

#Label1 ul li{float: left;width: 45%;}

Blogger İsimTescil DNS Ayarları

     Birçok blogger siteadi.com şeklinde orijinal bir alan adıyla yayın yapmak ister ama blogunu yayınlayacağı hosting için masraf yapmak kimseye cazip gelmez. Blog yazarları için en ideal çözüm sahip olduğunuz alan adınızı blogunuza yönlendirmektir. Bunun birçok yolu var tabiki ama en ideali DNS ayarlarıyla tam yönlendirmedir. Bu yönlendirme işlemi alan adını kaydettiğiniz firmalara göre değişkenlik gösterir. Biz bugün ülkemizde en çok tercih edilen alan adı kayıt firması olan isimtescil.net için yapmanız gereken ayarları anlatacağız.

     Aslında yönlendirme için yapılması gerekenler çok basit ama birşeyi eksik yaptığınızda siteniz açılmayacağı için insanlar bu konuda çok fazla sorun yaşıyorlar. Bu konuda çok fazla yol gösterici kaynak olmaması da önemli bir handikap. Biz bu soruna çare bulmak amacıyla yapmanız gerekenleri adım adım ayrıntılı bir şekilde aşağıda paylaşıyoruz.

• Blogger Yönetim Paneli'nde "Ayarlar" sekmesindeki "Yayıncılık" kısmını buluyoruz ve "+Özel alan adı ekle" linkine tıklıyoruz. Açılan alanda "Gelişmiş ayarlara geç" linkine tıklayıp açılan kutucuğa kullanacağımız site adını yazıyoruz ve kaydet butonuna basıyoruz. Burada bir hata mesajı çıkacak ve aşağıda CNAME kaydı olarak girmeniz gereken 2 adet kod çıkacak. Bu kodları aşağıdaki resimde kırmızı ile seçilmiş alanda görebilirsiniz.
  
  

• Daha sonra isimtescil.net yönetim panelinde Domain Yönetimi > Detaylı Yönetim bölümüne giriyoruz. Burada 6. sıradaki "Gelişmiş DNS" sekmesine tıklıyoruz. Bu sayfada yapmanız gereken 2 ayar var. Birincisi en alttaki "İşlem Seçiniz" kutusundan "Gmail Web Alanımı (Blogger) Kullan" seçeneği seçin ve direkt Kaydet butonuna basın. 

• Yapacağınız ikinci işlem ise; yine aynı "İşlem Seçiniz" kutucuğundan bu kez CNAME seçeneğini seçip açılan seçeneklerden 1. kutuya Blogger panelinizde verilen kısa kodu, 2. kutuya ise Blogger'daki uzun kodu yapıştırıp Kaydet demeniz yeterli. Bu işlemi aşağıdaki resimde de görebilirsiniz.
  

     Alan adınızı yönlendirmek için yapmanız gerekenlerin hepsi bu. Bu işlemleri yaptıktan sonra yönlendirme işlemi 1-4 saat içinde mutlaka aktif olacaktır ama genelde o kadar bile uzun sürmüyor. Konuyla ilgili sormak istediğiniz birşey olursa yorum ya da iletişim bölümünden bize ulaşabilirsiniz.

Blogger Numaralı Sayfa Navigasyonu

     Bloggerlar için çok renkli ve orijinal bir eklenti. Blogunuzun ana sayfasında altta klasik "Önceki Kayıtlar/Sonraki Kayıtlar" linklerini sayfa numaraları görünecek şekilde değiştirmek ister misiniz? Örneğini yandaki resimde ve sitemizin altında görebileceğiniz bu eklenti ile hem ziyaretçilerinize istediği sayfaya direkt geçiş yapma şansı verebilir hem de seçeceğiniz tasarımla blogunuzda daha şık bir görüntü yaratabilirsiniz.

     Bu uygulamayı sitenize eklemek için yapmanız gerekenlere gelince; ilk önce buraya tıklayarak gireceğiniz sayfada istediğiniz tasarımı seçebilirsiniz. Biz 5. sıradaki "Stylish Numbered Page Navigation Widget with Colored Styles For Blogger" seçeneğinden bir tasarım seçtik, bu kısım tamamen sizin zevkinize kalmış. Daha sonra o tarzın içinde istediğiniz renk tonlarından birini seçip, sayfa başına kaç kayıt görüneceği, Prev/Next yerine Önceki/Sonraki gibi özelleştirmelerinizi yapabilirsiniz.

     Bu işlemden sonra önce "Generate" butonuna, sonra da "Add to Blogger" butonuna tıklıyoruz. Açılan sayfada ister direkt blogunuza widget olarak ekleyebilir, isterseniz  "İçeriği Düzenle" linkine tıklayarak kodları kopyalayıp blogunuzun yönetim panelinde manuel olarak oluşturacağınız widgeta yapıştırabilirsiniz.

Son Yorumlar Eklentisi

     Bloggerlar için yazılarına aldıkları tepkiler ve geri dönüşler çok önemlidir. Aşağıdaki eklentiyi kullanarak sitenizde son yapılan yorumları şık bir şekilde ziyaretçilerinize sunarak hem yorumları ön plana çıkarabilir hem de interaktif bir ortam yaratabilirsiniz. Bu eklentiyi kullanmak için Yerleşim > Gadget Ekle > HTML/JavaScript Ekle bölümüne giriş yapın ve karşınıza çıkan editöre aşağıdaki JavaScript kodlarını yapıştırın. Son Yorumlar eklentisinin çalışan halini sitemizini sağ sütununda görebilirsiniz.

Yapabileceğiniz Değişiklikler:

• Aşağıdaki kodda "siteadresiniz.blogspot.com" yazan yeri blogunuz adresiyle değiştirin. (Örneğin radikalmedya.blogspot.com) Bu değişikliği yapmazsanız eklenti çalışmayacaktır.
• #333333 olarak seçilen yazı rengini istediğiniz renkle değiştirebilirsiniz. Bu renk yorumlardaki yazar adı rengini değiştirir. Yorum yazı rengi temadan otomatik alınmaktadır.
• "font-size: 9pt" yazan kısımları değiştirerek yazı boyutlarını kendinize göre ayarlayabilirsiniz.
• Görüntülenecek yorum sayısını değiştirmek için "numcomments = 10" kısmındaki sayıyı değiştirebilirsiniz.
• Yazar adının yanında yorumdan gösterilecek parçanın kaç karakter olacağını "numchars = 25" kısmındaki sayıyı değiştirebilirsiniz.

Eklenecek Kod:

<script style="text/javascript"> function showrecentcomments(json) { for (var i = 0; i < numcomments; i++) { var entry = json.feed.entry[i]; var alturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } alturl = alturl.replace("#", "#comment-"); var postlink = alturl.split("#"); postlink = postlink[0]; var linktext = postlink.split("/"); linktext = linktext[5]; linktext = linktext.split(".html"); linktext = linktext[0]; var posttitle = linktext.replace(/-/g," "); posttitle = posttitle.link(postlink); if ("content" in entry) { var comment = entry.content.$t;} else if ("summary" in entry) { var comment = entry.summary.$t;} else var comment = ""; var re = /<S[^>]*>/g; comment = comment.replace(re, ""); if (!standardstyling) document.write('<div>'); document.write('<a href="' + alturl + '"><b><font color="#333333" style="font-size: 9pt">' + entry.author[0].name.$t + '</font></b> ; '); if (!standardstyling) document.write('</div><div>'); if (comment.length < numchars) { if (standardstyling) document.write(''); document.write('<i><font style="font-size: 9pt"> ' + comment + '</font></i><br>'); if (standardstyling) document.write('');} else { if (standardstyling) document.write(''); comment = comment.substring(0, numchars); var quoteEnd = comment.lastIndexOf(" "); comment = comment.substring(0, quoteEnd); document.write('<i><font style="font-size: 9pt">' + comment + ' ...</font></i><br>'); if (standardstyling) document.write('</a>');} if (!standardstyling) document.write('</div>'); if (standardstyling) document.write(''); } if (!standardstyling) document.write('<div>'); if (standardstyling) document.write(''); document.write(); if (!standardstyling) document.write('</div>');} var numcomments = 10; var numchars = 25; var standardstyling = true; </script> <script src="http://siteadresiniz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Blogda Yazıları Çerçeve İçine Almak..

     Bloglarda içerik kadar sitenin görselliği de önemlidir. Yazılarınızı çerçeve içine almak daha görsel ve daha okunabilir yazılar için işe yarayabilecek önemli ayrıntılardan biri.
     Yazılarınızı nasıl çevrçeve içine alabileceğinizi ve bu çerçeveler üzerinde yapabileceğiniz stil, renk, kalınlık gibi değişiklikleri nasıl yapabileceğinizi aşağıda ayrıntılı bir şekilde anlatacağız. Umarım işinize yarar..

1. Klasik Çerçeve
Resimde gördüğünüz gibi yazılarınızı 1 pixel kalınlığında siyah bir çerçeve içine almak için ]]></b:skin> kodundan önce şu kodu ekleyin: 

• .post { border:1px solid #000; padding:8px }

2. Çerçeve Kalınlığı ve Rengi
Çerçeve kalınlığını ve rengini aşağıdaki örnekteki gibi değiştirebilirsiniz. "border" seçeneği kalınlığı, # sonrasındaki kod ise rengi belirler. 

• .post { border:3px solid #ef1010; padding:8px }

3. Çizgili Çerçeve
Çerçevenizde farklı bir tarz kullanmak istiyorsanız çizgili de yapabilirsiniz. 

• .post { border:1px dashed #ef1010; padding:8px }

4. Oval Köşeli Çerçeve
Çerçeve için oval kenarları seçerseniz daha şık bir görüntü oluşturabilirsiniz, -ki benim kişisel tercihim de bu yönde. Bunun için aşağıdaki kodları kullanabilirsiniz. 

• .post { border:1px solid #000; padding:8px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px; }

Şık ve Sade Bir Blogger Teması: İDream

     iDream blogger teması, çok fazla karmaşadan hoşlanmayan basit ve şık bir tema arayan blogger için ideal bir seçim. Üst menü ve arka planla oluşturulan farklı hava, şık arama kutusu, 3 sütunlu footer, seo uyumu ve tüm tarayıcılarda sorusuz çalışması iDream temasını öne çıkarıyor.
     TemplateNext tarafından Wordpress için hazırlanan tema, Anshul Dudeja tarafından Blogger'a uyarlanmış. Tema ile ilgili yapmanız gereken küçük ayarları indireceğiniz tema klasöründe bulabilirsiniz. Temanın ön izlemesini görmek ve indirmek için aşağıdaki linkleri kullanabilirsiniz..

Blogun Sağ Üstüne Sabit Atatürk Resmi (29 Ekim Özel)

     Blogunuza, sitenin sağ üstünde sabit olarak görünecek bir Atatürk resmi eklemek ister misiniz? Ribbon olarak adlandırılan ve daha çok reklam için kullanılan bu kodu biz başka bir amaç için kullanacağız.
     Günün anlam ve önemine ithafen 29 Ekim'e özel olarak eklenebileceği gibi, Atatürk'e olan sevgisini göstermek isteyenlerin sürekli olarak sağ üste sabitleyebileceği şık bir eklenti. Bu vesileyle tüm Türk milletinin Cumhuriyet Bayramı'nı kutluyorum.
    Eklentiyi blogunuza eklemek için aşağıdaki kodu blogger yönetim panelinde Gadget Ekle>>HTML/JavaScript menüsünü kullanarak aşağıdaki kodu buraya yapıştırmanız yeterli.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtd8pzcO0J0rlwLtll0sX3Ku8wWGBNQjTSx-Y9MzF87cpUFLQvmgXLXN3rpX6N5T8bSGvNVXrSew6xnIS7aiibRnqvDJFObl7xuEFDC2mm8uFq8vnHjI7Oz12t7_P63p-2YvOY5r0n8so/s1600/ataturk.png" 

style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/>

Blogunuz için Sabit Açılır Yan Menü

     Blogger siteniz için, sitenin solunda sayfayı kaydırsanız da sabit olarak duracak, üzerine geldiğinizde açılacak şık bir menü eklentisi. Menünün çalışır halini sitemizin solunda görüp deneyebilirsiniz. Bu eklentiyi sitenize eklemek için yapmanız gerekenleri de aşağıda 2 adımda anlatacağız..

 
1. Adım
Öncelikle Şablon menüsünden HTML'yi Düzenle seçeneğiyle sayfamızın kod kısmını açtıktan sonra ]]></b:skin> kodunu aratıp bu kodun üstüne aşağıdaki kodları yapıştırıyoruz.