Blogger İletişim Formu Eklentisi (Kapsamlı Düzenleme)

Bildiğiniz gibi Blogger'da "İletişim Formu" adlı bir gadget mevcut. Ancak standart görünümü çok sıradan gelebilir sizlere. Bana da öyle geldi ve kolları sıvadım. Sadece CSS kullanarak Blogger'ın iletişim formunu kapsamlı bir şekilde yeniden biçimlendirdim. Sizin yapmanız gereken tek şey ise, aşağıdaki kodları temanızın CSS bölümüne eklemek. Varsayılan eklenti kullanıldığı için, ilgili widget ile entegre bir şekilde kodlar da çalışacaktır. Beğenmenizi temenni ediyorum arkadaşlar.

AYRICA: Blogger Yorumlardaki Fazla Boşlukları Otomatik Kaldırmak

Blogger İletişim Formu Eklentisi (Kapsamlı Düzenleme)

#ContactForm1{padding-right:0!important;padding-left:0!important;margin-left:0!important;margin-right:0!important}
.contact-form-button{transition: none!important;}
.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{background-color:#666;border-radius:0!important;border:none!important;background-image:url(http://2.bp.blogspot.com/-KddzYsT9ons/XHVnns-wnjI/AAAAAAAATKk/d6-Aat49P4s7-MbFZc67bJ2y5kIBZwR3ACK4BGAYYCw/s1600/iletiliyor.png)!important;background-position: center center;background-repeat:no-repeat!important;color:#fff;opacity:1!important}
.contact-form-button{border:none!important;box-shadow:none!important}
input:focus {outline:none !important;}
textarea {resize: none;line-height:1.8em}
.contact-form-email,.contact-form-name{border:1px solid #ddd!important}
.contact-form-email-message{border:1px solid #ddd!important}
.contact-form-email:hover,.contact-form-name:hover,.contact-form-email-message:hover{box-shadow:none!important;}
.contact-form-email:focus,.contact-form-name:focus,.contact-form-email-message:focus{border:1px solid #374760!important;box-shadow:none!important;outline:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{margin:15px auto;padding:15px!important}
#ContactForm1_contact-form-email-message{margin:15px auto;padding:15px!important}
#ContactForm1_contact-form-submit{max-width:100%;font-size:18px;font-weight:normal;width:450px;height:40px;line-height:0px;padding: 25px;margin:10px 0 0px 0px;cursor:pointer;color: transparent;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{font-weight:normal;box-sizing:border-box;width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f0f0f0;border:none;box-shadow:none;color:#444;padding:10px 10px;}
.contact-form-success-message-with-border{background:#f0f0f0!important;border:none!important;box-shadow:none!important;color:#444!important;padding:10px 10px!important;}
img.contact-form-cross {cursor:pointer;margin-left:10px;margin-right:0!important}
.contact-form-button-submit:focus,.contact-form-button-submit.focus{box-shadow:none!important}.contact-form-button-submit:focus,.contact-form-button-submit.focus{border:none!important}
.contact-form-button-submit:focus,.contact-form-button-submit.focus{border:none!important}.contact-form-button-submit:focus:hover,.contact-form-button-submit.focus:hover{border:none!important;box-shadow:none!important;}
.contact-form-button-submit{background-color:#374760;border-radius:0!important;border:none!important;background-image:url(http://3.bp.blogspot.com/-x54vELArjWg/XHVnlCKjfwI/AAAAAAAATKc/-PQx4yi7-E08eT0RRAv0G-_woVVYdLsYgCK4BGAYYCw/s1600/gonder.png)!important;background-position: center center;background-repeat:no-repeat!important}
.contact-form-button-submit:hover{background-color:#374760}

Örnek Görünüm

Not: İlgili eklenti, tam anlamı ile sıfırdan düzenlendi. Dolayısı ile iletişim formu ile ileti gönderilirken karşınıza çıkan efektler v.b. tümü yenilendi. Böylelikle daha güzel bir görünüm elde etmiş olduk. Dilerseniz hemen bugün kodları deneyebilirsiniz.

CSS Kullanarak HR Etiketinin Biçimini Değiştirmek (Tüm Tarayıcılar ile Uyumlu)

Gerek geliştirdiğim temalarda, gerek Blogger için hazırladığım eklentilerde küçük ipuçlarını da sizlerle paylaşmadan edemiyorum. Çünkü sizlerin yorulmasına gerek yok, ben o problemi giderdi isem... Gelelim, konumuza. Bildiğiniz gibi HTML'de "hr" etiketi düz bir çizgi çeker ekrana. Bu standart bir görünüme sahip olup, tüm tarayıcılarda da aynıdır. Ben de soruyorum, neden farklı bir görünüme sahip olmasın hr etiketi? İşte bunun için, biz background kullanacağız ve tüm tarayıcılar ile uyumlu bir şekilde hr etiketini biçimlendireceğiz. Aşağıdaki kodu, temanızın CSS bölümüne eklemeniz yeterli olacaktır. Dilerseniz height değerini değiştirerek, çizginin kalınlığını veya diğer kodlar vasıtası ile renk konusunda da güncellemeler yapabilirsiniz.

AYRICA: Sadece JavaScript Kullanarak Yukarı Çık Butonu Yapımı

hr {height: 5px;border: none;background: #ddd;margin-top: 15px}

Örnek Görünüm

Sadece JavaScript Kullanarak Yukarı Çık Butonu Yapımı

Aslında jQuery kullanarak bir yukarı çık butonu hazırlamak daha kolay gelebilir. Ancak ben nedense her konuda jQuery kullanmak yerine, salt JavaScript kullanarak da eklentiler geliştirilmesi gerektiğine inanıyorum. Bilirsiniz, birçok web sitesinde de "yukarı çık," butonu vardır. Siz de sitenize, sadece JavaScript kullanarak bir yukarı çık butonu ekleyebilirsiniz. Bunun için gerekli olabilecek tüm adımlar ve kodlar aşağıda yer almaktadır.

AYRICA: CSS ile İçinden Çizgi Geçen Yazı Yapımı (Responsive)

Sadece JavaScript Kullanarak Yukarı Çık Butonu Yapımı

1) JavaScript kodlarımız aşağıdaki gibidir.

<script type="text/javascript">
var timeOut;
function scrollToTop() {
if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
window.scrollBy(0,-300);
timeOut=setTimeout('scrollToTop()',10);
}
else clearTimeout(timeOut);
}
</script>

2) CSS kodlarımız aşağıdaki gibi olacaktır.

<style>
.yukariabiwrap{border:1px solid #374760}
.yukariabi a{line-height:48px;font-size:150%;color:#fff!important}
.yukariabi{height:48px;padding:0px;margin:2px;text-align:center;background:#374760}
</style>

3) HTML kodlarımız ise aşağıdaki gibidir.

<div class="yukariabiwrap">
<a href="#" onclick="scrollToTop();return false"><div class="yukariabi"><img src="http://2.bp.blogspot.com/-sBMxZy8k8eg/W-nYi2TnpXI/AAAAAAAASRU/x725Jh_eN7sIsQ6wm4X_RaSDBmCp91h-ACK4BGAYYCw/s1600/yukari.png"/></div></a>
</div>

Örnek Görünüm

Blogger Yorumlardaki Fazla Boşlukları Otomatik Kaldırmak

Son 2 gündür Blogger'daki bir hatalı durumu düzeltmek için türlü yollar arıyorum. Hataya gelelim öncelikle... Sitenize yorum yapan ziyaretçileriniz, yorum formuna istemeden de olsa birden fazla kez boşluk ekleyebilir. Bu maalesef ki iyi bir görüntü oluşturmuyor. Bunun için de birçok yöntem olabilir. Ancak maalesef ki Blogger gibi bir altyapıda her şeyi çalıştırmak mümkün olmamakta. Sonuç olarak, jQuery ile bir çözüm yolu yaratabildim.

Mantık ise şu, ilgili kod mevcut yorum alanındaki tüm "br" etiketlerini alıyor ve "p" etiketine çeviriyor. Akabinde, p etiketine verdiğimiz boşluk değeri ile bir nevi yapay "br" etiketi elde etmiş oluyoruz. Böylelikle, fazla kullanılan boşluklar artık sorun olmaktan çıkıyor. Bu benim için çok önemli bir konu idi ve çözüme kavuşturdum. Benzeri durumu araştıranlara yönelik olarak ilgili kodları paylaşmak istiyorum.

Blogger Yorumlardaki Fazla Boşlukları Otomatik Kaldırmak

1) Öncelikle temanızda jQuery kütüphanesi olduğundan emin olun.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

2) jQuery kodlarımız aşağıdaki gibidir. Değiştirmeden ekleyiniz.

<script>
$('.comment-body br').replaceWith(function() {
return $(this).html() + '<p></p>';
});
</script>

3) CSS kodumuz ise aşağıdaki gibi olacaktır.

<style>
.comment-body p{margin-top:1.4em!important}
</style>

Önceki Görünüm

Sonraki Görünüm

NOT: jQuery kodlarını "</body>" etiketi üzerine eklemenizi öneririm.

CSS ile İçinden Çizgi Geçen Yazı Yapımı (Responsive)

Bir süredir sadece CSS ve HTML kullanarak içerisinden çizgi geçen yazı yapımı ile ilgili birçok kaynak araştırıyorum. JavaScript versiyonu da var, jQuery versiyonu da. Ancak ben tam Responsive olan ve küçük ekranlarda da sorunsuz çalışan bir kodlama yapmak istiyordum. Bu yüzden sizler için bir kod dizisi derledim ve hemen paylaşıyorum. Aşağıdaki kodları kullanarak siz de farklı bir başlık kullanımı elde edebilirsiniz. Tamamen Responsive.

CSS ile İçinden Çizgi Geçen Yazı Yapımı (Responsive)

1) CSS kodlarımız aşağıdaki gibidir.

.sidebar h2{
margin-right:0!important;
padding-left:0!important;
position:relative;
text-align:left;
overflow:hidden;
margin-left:0!important;
}
.sidebar h2:after{
content: "";
display: block;
border-top: 2px solid #374760;
width: 100%;
height: 2px;
position: absolute;
top: 50%;
z-index: 0;
}
.sidebar h2 span {
padding-right:10px!important;
background: #fff!important;
display: inline-block;
position: relative!important;
z-index: 1!important;
}

2) HTML kodumuz ise aşağıdaki gibidir.

<h2 class='title'><span>Arama</span></h2>

Örnek Görünüm

Blogger'da Gadget Başlığı Eklememe Yöntemi (İpucu)

Bildiğiniz gibi Blogger'da Resim ekleme ve İletişim formu gadget'larını eklerken, bir başlık eklenmesi zorunlu kılınmıştır. Ancak tasarımınıza göre bu gadget'lara bir title belirtmek istemeyebilirsiniz. Ben de öyle düşünüyorum çünkü. Bunun için aşağıdaki kodu, muhtemelen dünyadaki en kolay ancak faydalı ipucu olacak ama, başlık kısmına eklemeniz yeterli olacaktır. Ardından gadget kayıt ederek, başlık eklenmeden, boş bir şekilde ekleme yapabilirsiniz.

AYRICA: Blogger için 125x125 Banner Alanları Oluşturmak

Blogger'da Gadget Başlığı Eklememe Yöntemi (İpucu)

<!– –>

Blogger Tema Sıkıştırma Nasıl Yapılır? Öğrenelim!

Blogger'ın tema yapısı bildiğiniz gibi XML. Dolayısı ile arzu ederseniz teker teker CSS veya JavaScript kodlarını minimize edebilirsiniz. Ancak bunlarla uğraşmak yerine, direkt Blogger temanızdaki tüm XML yapısındaki kodları sıkıştırabilmeniz de mümkündür. Bunun için ise HTML Compressor adlı sitesine giriş yapın. Code type adlı açılır menüden Blogger seçeneğini aktive edin. Ardından tema kodlarını ekleyerek, sıkıştırmayı tamamlayabilirsiniz.

AYRICA: Blogger için Yönetici Kontrol Paneli Yapalım

Blogger Tema Sıkıştırma Nasıl Yapılır? Öğrenelim!

Yandex Browser'daki "Dosya Daha Önce İndirildiyse Uyar" Nedir? Ne İşe Yarar?

Sanırım Yandex Browser'ı her geçen gün daha da çok seviyorum. Çünkü birçok tarayıcıda olmayan özellikleri ile oldukça ilgi çekici bir tarayıcı hâline geldiği bir gerçek. Yandex Browser, daha önce indirdiğiniz aynı dosyaları tekrar indirmemeniz için sizleri uyaran bir özelliğe sahip. Bu özelliği aktif etmenizi öneriyorum. Bu şekilde aynı dosyaları birden fazla indirmenize gerek kalmayacak, daha doğrusu yanlışlıkla aynı dosyayı birden fazla kez indirmemiş olacaksınız. Görsel hemen aşağıda.

AYRICA: Yandex Browser Uygunsuz Reklam Engelleme Nasıl Yapılır?

Yandex Browser'daki Dosya Daha Önce İndirildiyse Uyar Nedir?

Opera Yeni Tasarım Güncellemesi ile Adeta Yeniden Doğdu

Chrome, Vivaldi, Safari ve Firefox... Birçok alternatif tarayıcı mevcut. Ancak son yıllarda kendisini sürekli geliştiren ve Chromium altyapısına sahip olan Opera, Reborn 3 (R3) adlı geliştirme sürümü ile adeta yeniden doğmuş oldu. Yeni tasarım ile daha sade ve minimal bir dizayna sahip olan Opera, birçok özelliği de beraberinde getiriyor. Örnek bir görünüme aşağıdan göz atabileceğiniz gibi, buraya tıklayarak ilgili geliştirici sürümünü indirebilir, detaylı olarak bilgi alabilirsiniz.

Opera Yeni Tasarım Güncellemesi ile Adeta Yeniden Doğdu

Online Favicon Oluşturma Uygulaması (Ücretsiz)

Favicon, tarayıcıda görüntülenen küçük (16x16) site ikonu olarak tanımlanabilir. Photoshop veya benzeri uygulamalar ile favicon yapmak çok kolay. Ancak çok yoğunsanız, bunun için vaktiniz olmayabilir. Bu yüzden sizlerle tamamen online ve ücretsiz olarak favicon olarak hazırlayabileceğiniz bir uygulama sitesini paylaşmak istiyorum. Favicon.io adlı bu web sitesi ile birkaç tıklama ile .ico veya .png uzantılı favicon dosyanızı indirebilirsiniz. Yer imlerinizde bulunmasını tavsiye ederim.

Online Favicon Oluşturma Uygulaması (Ücretsiz)