Web Günlüğü

25.05.2013

Blogger'a iletişim formu nasıl eklenir

Bu yazımda hem widget olarak hem de widget kullanmadan sadece kodlarla sabit sayfalara blogger iletişim formu nasıl eklenir ondan bahsedeceğim. Bilindiği üzere blogger'a iletişim formu widgeti gelmeden önce 3.parti uygulamalar kullanıyorduk. Fakat bunların özelleştirilmesi zor olması, blogger'dan bağımsız görünmesi bir çoğumuz için iyi bir tercih değildi. Blogger'a gelen bir güncellemeyle eklenen iletişim formu widgeti bu tip sorunlarımızı ortadan kaldırdı.

Blogger'a özgün olan bu iletişim formunun benim en çok beğendiğim özelliği mesajların Blogger'la bağlantılı olan e-posta adresimize bir nevi bir e-posta gibi geliyor oluşu. Eksik bulduğum ise Captcha özelliğinin bulunmaması.(Javascript ile eklenebilir)

Blogger iletişim formunu bloğumuza eklemek için iki yöntemimiz var birincisi Blogger > Yerleşim/Düzen sayfasından Sidebar bölümüne Gadget Ekle yöntemi ile.

İkinci yöntem ise herhangi bir sayfaya(iletişim, contact) veya bölüme aşağıdaki kodları ekleyerek kullanabiliriz. CSS özelleştirmesi isteğe bağlı olarak yapılabilir.

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>
<div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <p>İsim ve Soyisim</p><input class="contact-form-name" id="ContactForm_contact-form-name" name="name" size="30" type="text" value="" /> <p>Eposta<span style="font-weight: bolder;">*</span> </p><input class="contact-form-email" id="ContactForm_contact-form-email" name="email" size="30" type="text" value="" /> <p>Mesaj<span style="font-weight: bolder;">*</span> </p><textarea class="contact-form-email-message" cols="25" id="ContactForm_contact-form-email-message" name="email-message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm_contact-form-submit" type="button" value="Gönder" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <p class="contact-form-error-message" id="ContactForm_contact-form-error-message"></p><p class="contact-form-success-message" id="ContactForm_contact-form-success-message"></p></div></form> </div></div><script src="https://www.blogger.com/static/v1/widgets/609130596-widgets.js" type="text/javascript"></script> <script type="text/javascript"> window['__wavt']='AOuZoY4PUAjvdPMazQDQJXJCrDFxkBfenw:1546660985916';_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d3193402366393083298','//blogspot.com','3193402366393083298');_WidgetManager._SetDataContext([{'name':'widgets','data':[{'title':'Contact Form','type':'ContactForm','sectionId':'sidebar2','id':'ContactForm'}]}]);_WidgetManager._RegisterWidget('_ContactFormView',new _WidgetInfo('ContactForm','sidebar2',document.getElementById('ContactForm'),{'contactFormMessageSendingMsg':'Gönderiliyor...','contactFormMessageSentMsg':'Mesajınız gönderildi :) ','contactFormMessageNotSentMsg':'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz.','contactFormInvalidEmailMsg':'Geçerli bir e-posta adresi gerekli .','contactFormEmptyMessageMsg':'Mesaj alanı boş bırakılamaz .','title':'Contact Form','blogId':'3193402366393083298','contactFormNameMsg':'Name','contactFormEmailMsg':'Email','contactFormMessageMsg':'Message','contactFormSendMsg':'Send','submitUrl':'https://www.blogger.com/contact-form.do'},'displayModeFull')); </script>

20.04.2013

Blogger Android Uygulaması

Google'ın yıllar önce çıkarttığı blogger android uygulaması'nı nihayet kullanabilme fırsatı buldum. Nihayet diyorum çünkü ilk sürümünün çıktığı zamandan beri blogger uygulaması Android Market'te veya yeni adıyla Google Play'de Türkiye'den erişime kapalıydı yani indirilemiyordu. Tabi ben uzun zaman önce uygulamanın eski bir sürümünü başka bir kaynaktan apk dosyasını indirip kurmuştum ancak kısa bir süre görme fırsatım olmuştu.


Bugün uygulamanın halen Türkiye'den engelli mi olduğunu öğrenmek için bir bakayım dedim. Bilgisayar üzerinden Google'da blogger android diye arama yapıp Google Play'e eriştiğimde uygulama görselinin yanında yükleme butonun aktif olduğunu gördüm ve hemen bilgisayar üzerinden Yükle butonuna tıklayıp telefonuma kurulumunu yaptım. Ancak şöyle bir durum var ki telefon üzerinden Google Play uygulamasına veya bilgisayar üzerinden direkt olarak Google Play'e erişildiğinde ve blogger diye arama yapıldığında Google 'ın resmi blogger uygulaması sonuçlarda çıkmıyor diğer üçüncü parti blogger uygulamaları listeleniyor. Blogger uygulamasına ulaşmak için tek yapılması gereken google'ı açıp blogger android diye arama yapmak veya buraya tıklamak. Uygulamanın Google Play'de arama yapılarak bulunamaması sorunu acaba Google Play'den kaynaklanan bir sorun mu yoksa uygulama halen erişime kapalı ve ben yanlışlıkla mı indirdim anlayamadım.

Uygulama genel olarak basit ve kullanışlı olsa da halen bir çok eksiği bulunmakta. Blogger'ın ücretsiz bir hizmet olması ve herhangi bir getirisinin olmaması dolayısıyla Google tarafından pekte önemsenmiyor. Öyle ki uygulamanın en son güncellemesinin üzerinden yarım yıl geçmiş. (Son Güncellenme Tarihi 14 Kasım 2012)

Blogger'ın android uygulamasının genel özellikleri yazı gönderme (yazıya fotoğraf ve etiket ekleyebilme), yazı düzenleme ve silme, blog'u ve oluşturulan yazıları canlı olarak ön izleyebilme, yazıları sosyal ağlarda paylaşabilme gibi standart özellikler mevcut. Çok fonksiyonel bir uygulama olmamasına rağmen işi sadece yazı yazmak olanlar için ideal. Uygulamayı rahat kullanabilmek ve pratik bir şekilde yazı hazırlayabilmek için büyük boyutlarda telefona sahip olunması gerekiyor ki 4.0 inçlik ekran boyutuna sahip Motorola Motoluxe modeli telefonumda bile yazı yazarken zorluk çektim ve devamını bilgisayar üzerinden yazmak zorunda kaldım.

Uygulamanın benim gördüğüm en büyük eksikliklerinden bir tanesi yorum yönetiminin olmaması oldu. Ayrıca diğer eksik olarak gördüğüm özellikler ise sayfalar, genel ayarlar, yazılarda kalıcı bağlantıları düzenleyememe yazıları programlayamama (tarih atayıp ileri bir tarihte yayınlayamama), istatistikler ve adsense gibi önemli gördüğüm yerler ilerleyen zamanlarda eklenir mi belirsiz ama en azından yorum yönetimi bir an önce eklenirse iyi olur ki zaten uygulamanın en fazla kolaylık sağlayacağı ve faydalı olacağı özelliği yorum yönetimi olur.

Google Play Uygulama Adresi : Blogger v2.0 Android Uygulaması

Blogger Android Uygulaması'nın Telefonumdan Aldığım Görseller :
Güncelleme 2 Aralık 2013, Pazartesi
Uygulamayı mağazadan indiremeyenler alttaki linkten blogger android uygulamasının son sürümü 2.1.1 apk dosyasını indirip kullanabilirler.
Blogger Android Uygulaması Apk Dosyası İndir

Güncelleme 20 Ekim 2019 Pazar
Blogger'ın Android uygulaması uzun bir aradan sonra 14 Ekim itibariyle 3.0.1 sürümüne güncellenmiş. Güncelleme ile birlikte uygulama tasarımı tamamen değişmiş durumda. Fakat bunun dışında hiçbir geliştirme ve ekleme yok. Uygulamada sadece yayın oluşturup düzenlemenin dışında Yorumlar, İstatistik, Ayarlar vb gibi sayfalar halen bulunmamakta. Uygulama Google Play'den direkt olarak indirilebiliyor.

Yeni uygulamaya ait görseller :

10.04.2013

Blogger arşiv sayfası nasıl yapılır

Arşiv sayfası, bir nevi site haritası veya blogda yer alan bütün içeriklerin listelendiği bir sayfa olarak nitelendirilebilir. Arşiv sayfası oluşturarak ziyaretçilerin sitede yer alan içerikler hakkında bilgi edinmesini ve aradığı içerikleri kolay bulması sağlanabilir veya arama motorları botlarının içerikleri taraması kolaylaştırılabilir.

Birçok blogger arşiv sayfası javascript kodları farklı kaynaklardan çekildiği için içeriklerin gösterilmesi veya yüklenmesi zaman almakta. Altta paylaşmış olduğum arşiv sayfası kodları benim bizzat kendi blogumda kullanmış olduğum kodlardır bu kodlar dış kaynaklardan çekilmediği için daha hızlı yüklenmektedir. Daha hızlı yüklenen bir arşiv sayfası oluşturmak için bu kodları kullanabilirsiniz. Kodları eklemek için yeni bir sayfa oluşturup yazı editörünü HTML görünüme getirip yapıştırınız. Örnek arşiv sayfasını görmek için tıklayın.

Kodlarda kırmızı renkte belirttiğim yerleri birincisi blog adresi olmak üzere ve ikincisi listelenecek yazı adedi alanlarını kendi isteğinize göre değiştirebilirsiniz.

<script type='text/javascript'>
//<![CDATA[
var postTitle = new Array();
var postUrl = new Array();
var postYear = new Array();
var postMonth = new Array();
var postYearMonth = new Array();
var postYearMonth2 = new Array();
var postLabels = new Array();
var postBaru = new Array();
var sortBy = "titleasc";
var tocLoaded = false;
var numChars = 250;
var postFilter = "";
var month2 = ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"];
function loadtoc(a){
function b(){
if ("entry" in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var m = a.feed.entry[h];
var e = m.title.$t;
var l = m.published.$t.substring(0, 10);
var p = m.published.$t.substring(5, 7);
var g = m.published.$t.substring(8, 10);
var n = month2[parseInt(p, 10) - 1] + " " + m.published.$t.substring(0, 4);
var c = "http://www.zaferzent.com/" + m.published.$t.substring(0, 4) + "_" + p + "_01_archive.html";
var j;
for (var f = 0; f < m.link.length; f++) {
if (m.link[f].rel == "alternate") {
j = m.link[f].href;
break
}
}
var o = "";
for (var f = 0; f < m.link.length; f++) {
if (m.link[f].rel == "enclosure") {
o = m.link[f].href;
break
}
}
postTitle.push(e);
postUrl.push(j);
postYearMonth.push(n);
postYearMonth2.push(c);
}
}
}
b();
displayToc2();
document.write('')
}

function displayToc2(){
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postYearMonth[b];
document.write('<div class="toc"><h3>' + temp1 + "</h3><ul>");
firsti = a;
do {
document.write("<li>");
document.write('&nbsp;&nbsp;<a href="' + postUrl[a] + '">' + postTitle[a] + "</a>");
document.write("</li>");
a = a + 1
}
while (postYearMonth[a] == temp1);
b = a;
document.write("</ul></div>");
if (b > postTitle.length) {
break
}
}
};
//]]>
</script>
<script src="http://www.zaferzent.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

10.04.2013

Blogger Şablon-Tema HTML Editörü Yenilendi

Uzun zamandır Blogger'da iyileştirmeler yapmayan Blogger geliştiricileri bugün fark ettiğim kadarıyla blogger şablon-tema editörü'nü sil baştan yenilemişler. Benim de sürekli olarak kullandığım ancak kullanımından hoşnut olmadığım şablon editörü daha anlaşılır ve kullanışlı bir hale getirilmiş. En azından önceki editör'e göre daha iyi bir yapıda olduğunu söyleyebilirim.


Blogger Yeni Şablon-Tema HTML Editörü
Blogger için yapılan yeni editör'ün görünümü.



Editör Blog Önizleme
Temada değişiklik yaptıktan sonra önizlemeyi aynı sayfa içerisinde gerçekleştirme mantığı bana göre güzel olmuş sekmeler arasında kaybolmaktan iyidir.



Kodlarda Arama Yapma
Şablon editörüne has bir de arama özelliği getirilmiş. Tarayıcılarla kod aramak biraz sıkıntı bir durumdu editöre has arama özelliğinin olması da güzel olmuş. Editörün arama özelliğini açmak için editörde (kodlar içerisinde) herhangi bir yere tıkladıktan sonra Ctrl + F tuşlarını kullanarak editörün sağ üst köşesinde açıldığını görebilirsiniz.



Hızlı Kod Değiştirme
Hızlı kod değiştirme özelliği de klavyeden Ctrl + Shift + F tuşları ile yine editör'ün sağ üst kutusunda çıkmakta ve önce değiştirilecek kod yazılıyor daha sonra o kodun yerine gelecek kod yazılıyor ve onaylanması için Yes ve No seçenekler çıkıyor ve Yes butonuna tıklanıldığında belirtilen kod hızlı bir şekilde değiştiriliyor.



Widget'a Atla
Bu özelliğin işlevi ise bloga eklenen widget'lere ait kodlara kısa yoldan ulaşmayı sağlıyor.


Kod Bloklarının Açılıp Kapatılması
Editörün diğer bir güzel özelliği ise aynı gruba ait kodların açılıp kapatılması. Kod bloglarını kapatıp açmak için her hangi bir kod bloguna örneğin <b:skin> kodunun sol tarafında bulunan satır numarasına tıklamak gerekiyor Bu sayede kodlar içerisinde neredeydim ne yapıyordum gibi sıkıntılara girmeyeceğiz.

Son olarak benim Notepad++ ve benzeri kod editörlerinde sıklıkla kullandığım TAB boşluğu olayı da editöre getirilmiş. TAB boşluğundan kastım klavyede bulunan TAB tuşuyla geniş boşluk bırakmak veya kodları seçip kodların solundan geniş boşluk bırakmak. Kısacası blogger şablon editörü gerçek bir kod editörü havasına sokulmuş. Notepad++'ın zencoding özelliği gibi bir şey de eklenseymiş iyi olurmuş aslında.
Daha nice güzel yeniliklerin olması ümidiyle.

Not : Resimleri büyültmek için üzerine tıklayın.

05.04.2013

Bahar Mevsimi Yüksek Kaliteli HD Masaüstü Duvar Kağıtları

Kışın bittiği havaların ısınmaya başladığı ağaçların çiçek açtığı bahar mevsimi yine geldi. Bununla birlikte artık bilgisayarlarımızın masaüstü arka planlarını, duvar kağıtlarını içimizi açacak ruhumuzu ferahlatacak bahar mevsimi duvar kağıtlarıyla değiştirmemizin vakti de geldi. Google vesilesi ile özenerek seçmiş olduğum 8 adet iç açıcı çiçekli ağaçlı masaüstü duvar kağıtlarını gönlünüze göre indirip kullanabilirsiniz. Resimlerin çözünürlükleri  birbirinden farklı olduğu için indirdiğiniz resimleri ekranı kaplayacak şekilde ayarlamanız sizin için faydalı olacaktır. Resimlerin tam boyutlarına ulaşmak için sağ tıklayıp yeni pencerede açabilir ve daha sonra bilgisayarınıza indirebilirsiniz. Güle güle kullanın.













<

Mobil / Akıllı Telefonlar İçin Duvar Kağıtları