Blogger Tema Düzenleme ve Eklentiler

Arama Kutusunu Özelleştirin

2012-12-12T08:37:00.001-08:00

Blogger blogumuzun arama kutusunu css ile tasarlayarak blogumuzu daha hoş bir görüntüye kavuşturabiliriz. Bloggerin varsayılan arama kutusu tasarımı bana göre oldukça kötü ama bu kaderimiz değil bloggerin bize sunmuş olduğu css ekleme özelliği sayesinde arama kutumuzun tasarımını kolaylıkla değiştirebiliriz.

Blogumuzun arama kutusunu özelleştirmek için ilk önce aşağıdaki adımları izliyoruz.

"Css ekle" sekmesine girdikten sonra sağ tarafta beyaz bir alan açılacak. O beyaz alana aşağıdaki kodları kopyalayıp yapıştırıyoruz.


#CustomSearch1{
background-color:#000;
padding-top:10px;
padding-left:7px;
padding-bottom:7px;
padding-right:7px;
background-color: #0099FF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#9DD8FF), to(#0099FF));
background-image: -webkit-linear-gradient(top, #9DD8FF, #0099FF);
background-image: -moz-linear-gradient(top, #9DD8FF, #0099FF);
background-image: -ms-linear-gradient(top, #9DD8FF, #0099FF);
background-image: -o-linear-gradient(top, #9DD8FF, #0099FF);
background-image: linear-gradient(top, #9DD8FF, #0099FF);
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
#CustomSearch1 h2{
color:#f6f6f6;
font-size:0px;
}

.gsc-input{
width:180px;
height: 30px;
background-color:#DFF2FF;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;}
.gsc-search-button{
float: right;
height: 35px;
width: 70px;
padding:0px;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #DFF2FF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#DFF2FF), to(#0483a0));
background-image: -webkit-linear-gradient(top, #DFF2FF, #0099FF);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius:6px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #DDF1FF;
-webkit-box-shadow: ;
box-shadow:px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #DDF1FF;}

Kodlarımızı beyaz alana kopyaladıktan sonra sayfanın yukarısında yer alan "bloga uygula" butonuna tıklıyoruz ve şirin mi şirin eskisinden daha güzel bir arama kutusuna sahip oluyoruz.

İsteğe göre tasarım yapıyorum, nasıl bir şey istediğinizi yorum yaparak belirtirseniz emailinizden size ulaşabilirim.

Blogger Devamını Oku Özelliği

2012-12-11T11:56:00.002-08:00

Diğer bloglarda devamını oku yazısını gördüğünüzde bunu nasıl yapıyorlar diye mi düşünüyorsunuz artık düşünmenize gerek yok bunu yapmak kolay, bloggerin bize sunmuş olduğu araç çubuğu sayesinde tek tıkla bu özelliği kullanabiliriz.

Yayımlayacağınız makaleyi tamamladıktan sonra makaleyi nereden kesmek istiyorsanız oraya tıklıyorsunuz ve araç çubuğundaki kırmızı çerçeve ile gösterilmiş olan yırtık beyaz kağıt resimli butona tıklıyoruz ve devamını oku özelliğimiz aktif hale geliyor.

Tıklayarak büyültün

Devamını oku özelliğini kullanmak size bir çok yarar sağlar.

Anasayfadaki içerik azaldığından dolayı blogumuz tarayıcılar tarafından daha hızlı okunur ve blogumuzun açılış süresi azalır. Buda ziyaretçilerimizin sayfamızı hemen terk etmemesini sağlar. Google ziyaretçilerin sayfada geçirdikleri süreye önem verir. Örneğin ziyaretçilerimizin çoğu blogumuzu açılır açılmaz kapatıyorsa google bu blogu işe yaramaz olarak kabul eder ve sıralamanızı düşürür.
Temanız daha düzenli ve sade görünür. Buda tasarım açısından artı bir puandır.
Tema tasarımı kolaylaştırır.
Ziyaretçilerinizin yazılarınızı anasayfadan okuyup okuyup kaçmasını önler. Buda 1 kişinin blogunuzda daha fazla sayfayı gezmesini sağlar

Blogger Bloguna Paylaş Butonları Ekle

2012-12-10T12:04:00.002-08:00

Blogger blogumuzun varsayılan özelliklerinde paylaş butonları var fakat bu butonlar küçük ve mat renkli olduğu için pek fazla dikkat çekmiyor. Biz bir kaç adımda daha dikkat çekici, renkli sosyal medya'da paylaş butonlarını blogumuza ekleyebiliriz. Ayrıca bu eklediğimiz butonlar varsayılan butonlara göre daha fazla alternatif sunuyor.

İlk olarak şu siteye giriyoruz. Tıklayın
Karşımıza aşağıdaki gibi bir sayfa çıkıyor. Bu sayfadan kırmızı çerçeve ile gösterilen "Blogger" seçeneğine tıklıyoruz. Ardından sosyal medya butonlarının blogunuzda nasıl görünmesini istiyorsanız "Select style" başlığı altındaki seçeneklerden istediğinizi seçin ben ikinci seçeneği tercih ettim. Seçimimizi yaptıktan sonra yeşil çerçeve ile gösterilen turuncu butona tıklıyoruz.

Resmin üzerine tıklayarak büyültün

Ardından açılan sayfadan google hesabınızda bulunan hangi bloga eklemek istiyorsanız, o blogu seçiyoruz ve "widget ekle" butonuna tıklıyoruz. İşlem tamam artık blogunuzda daha dikkat çekici sosyal medya butonları var

Blogger Site İcon'unu Değiştirme

2012-12-09T05:22:00.004-08:00

Site icon'u tarayıcımızda açık olan sekmelerin sol tarafında bulunan küçük resimlerdir. Blogger alt yapısında bulunan bütün blogların varsayılan iconu yandaki resimle aynıdır. Bir kaç basit adımla bu iconu kendimize göre değiştirebiliriz. Bu iconu değiştirmek sitenize daha profesyonel bir görünüm kazandırır.

İlk adım olarak blogumuzun paneline giriyoruz ardından yerleşim sekmesine tıklıyoruz. Açılan sayfadan "sık kullanılan simge" başlığı altındaki aşağıdaki resimde kırmızı ile gösterilen "düzenle" butonuna tıklıyoruz.

İkinci adım olarak açılan sayfadan "dosya seç" butonuna tıklıyoruz ve iconumuzu seçip "kaydet" butonuna tıklıyoruz. Burada dikkat edilmesi gereken şey seçtiğimiz dosyamız ".ico" uzantılı olmalıdır. Dosyamız ico uzantılı değilse blogger bu dosyayı kabul etmez.

"İco" uzantılı resim oluşturmak

İlk önce "easy icon maker" isimli programı bilgisayarımıza indirip kuruyoruz. Tıkla indir.

Programın arayüzü aşağıdaki gibidir.

Tıklayarak büyültün

Kırmızı çerçeve ile gösterilen alana kendi çiziminizi yapıp kayıt edebilirsiniz. Kayıt ettiğiniz bu resmi yukarıda anlattığım şekilde blogunuzun iconu yapabilirsiniz. Ben çizim yapamam diyorsanız mavi çerçeve ile gösterilen butona tıklayarak dışardan resim aktarabilirsiniz.

Blogumu Kaç Kişi Email ve Rss İle Takip Ediyor

2012-12-08T00:11:00.000-08:00

Bir kaç basit kod ile blogger blogumuzu rss ve email yolu ile kaç kişi takip ediyor öğrenebiliriz. Fakat bunun için feedburner üyeliğiniz olması gerekiyor. Feedburner bir google hizmetidir ve üyelik bedavadır. Üyeliğiniz yoksa bir kaç basit adım ile üyelik alabilirsiniz.

Üyeliğimizi aldıktan sonra panelimize girip mavi çerçeve ile gösterilmiş olan "publicize" sekmesine tıklıyoruz, ardından kırmızı çerçeve ile gösterilmiş "feedcount" sekmesine geçiş yapıyoruz. Son olarak sitemizde gösterilecek olan widgetin arka plan rengini ve text rengini kendi sitenizin renklerine uyumlu hale getirdikten sonra yeşil ile gösterilen "activate" butonuna tıklıyoruz.

Üzerine tıklayarak resmi büyültün

Bir sonraki adımımızda karşımıza aşağıdaki gibi bir sayfa çıkıyor. Aşağıya açılır penceremize tıklayıp "blogger" seçeneğini seçiyoruz. Ardından kırmızı ile gösterilmiş "go" butonuna tıklıyoruz.

Üzerine tıklayıp büyültün

Açılan sayfadan "widgeti ekle" butonuna tıklıyoruz ve widgetimiz blogumuzun sidebarına yerleşiyor. Yerini beğenmesseniz blogger panelinizin yerleşim sekmesinden değiştirebilirsiniz.

Yazı Başlıklarına Gölge Vermek ve Saydamlaştırmak

2012-12-06T10:49:00.002-08:00

Bugünkü dersimizde css ile blogger blogumuzun yazı başlıklarına gölge vermeyi ve saydamlaştırmayı yani transparan yapmayı göreceğiz. Makale başlıklarınıza gölge verirseniz ziyaretçiler tarafından daha fark edilebilir bir hale gelecektir. Ayrıca blogumuz daha profesyonel bir görünüm kazanacaktır.

Makale başlıklarınıza gölge verin

Yazı başlıklarımıza gölge vermek için ilk önce blogumuzun panelinden "şablon" sekmesine giriyoruz, ardından "özelleştir" butonuna tıklıyoruz. Açılan pencereden "gelişmiş" sekmesine tıklıyoruz, yan tarafta açılan sekmelerden "css ekle" seçeneğine tıklıyoruz ve yan tarafta beyaz bir alan açılıyor. Bu beyaz alana aşağıdaki kodlarımızı kopyalayıp yapıştırıyoruz ve üste turuncu renkli dikdörtgen şeklindeki "bloga uygula" butonuna tıklıyoruz ve işlem tamam. Yazdığımız yazıların başlıkları yandaki resimde gördüğünüz hale geliyor.


.entry-title a:link {

color:#ccc;

text-shadow: 1px 1px 1px #333;

}

Makale başlıklarınız mouse ile üzerine gelindiğinde saydamlaşşın

Bunu yapmak için yine "css ekle" sekmesinden yararlanacağız. Css ekle sekmesine nasıl gireceğimizi yukarıda anlattım unuttuysanız hatırlatayım. Aşağıda bulunan kodları "css ekle" sekmesine tıklayınca açılan beyaz alana yapıştırırsanız makale başlıklarının üzerine mouse imleci getirildiği zaman saydamlaşır.


.entry-title a:link:hover {

opacity:0.30;

color:#ccc;

text-shadow: 1px 1px 1px #333;
}

Blogger Blogumda Kaç Kişi Online ?

2012-12-05T02:24:00.001-08:00

Ziyaret ettiğiniz sitelerde resimdekine benzeyen ve kaç kişinin online olduğunu yani sitenizde kaç kişinin şu anda dolaştığını gösteren widgetler görünce bunu nasıl yapıyorlar diye kendinize sorup, bunu nasıl blogger bloguma eklerim diye düşünüyor musunuz. Artık düşünmenize gerek yok bunun nasıl yapıldığını bu yazımızda anlatacağız.

Anlatacaklarımı anlamak için ileri derecede teknik bir bilgiye ihtiyacınız yok her anlayabilir.

İlk önce bu siteye giriyoruz : http://whos.amung.us/showcase
Karşımıza çıkan sayfadan sarı çerçeve ile gösterilmiş "sekmesi widget" seçeneğine tıklıyoruz . Ardından aşağıdaki gibi bir sayfa karşımıza çıkıyor eğer widgetimizin bu sitede olduğu gibi sol yanda görünmesini istiyorsanız yeşil çerçeve ile gösterilmiş "üst" seçeneğini tıklıyoruz.

Üzerine tıklayıp büyültün

Ardından fare imlecimizi üst tarafta bulunan aşağıdaki resimde sarı çerçeve ile gösterilmiş yazıların üstüne getiriyoruz ve bir kez tıklıyoruz böylece yazıları kopyalamış olduk.

Üzerine tıklayıp büyültün

Kopyalama işlemini tamamladıktan sonra bloggere dönüş yapıp hangi blogunuza bu widgeti eklemek istiyorsanız o bloga giriş yapıyoruz. Ardından kırmızı çerçeve ile gösterilmiş "yerleşim" sekmesine tıklıyoruz. Karşımıza aşağıdaki gibi bir sayfa geliyor bu sayfadan mavi çerçeve ile gösterilmiş "gadget ekle" seçeneğine tıklıyoruz ve küçük bir pencere açılıyor bu pencereden yeşil ile gösterilmiş "artı" işaretine tıklıyoruz.

Üzerine tıklayıp büyültün

Daha sonra açılan pencereden beyaz alana kopyaladığımız kodları yapıştırıp aşağıdaki resimde kırmızı ile gösterilmiş kaydet seçeneğine tıklıyoruz ve işlem tamamlanıyor. Artık sitemizde kaç kişinin çevrim içi olduğunu görebiliriz.

Not: Anlamadığınız veya sormak istediğiniz bir şey olursa yorum yaparak bildirin en kısa zamanda dönüş yaparım.

Blog Arşivi Widgetini Düzenleme

2012-12-04T05:17:00.000-08:00

Bir çoğumuz blogger blogumuzdaki, blog arşivi widgetinin tasarımını beğenmeyiz. Bir kaç basit css kodu ile blog arşivi widgetimizi göze hoş görünür bir hale getirebiliriz. Bu anlatacaklarım için css dilini bilmenize gerek yoktur yediden yetmişe herkes bu anlatacaklarımı yapabilir.

İlk önce şablon sekmesine girip oradan özelleştir butonuna tıklıyoruz. Ardından gelişmiş sekmesine tıklıyoruz ordan da css ekle seçeneğine tıklıyoruz ve aşağıda verilen kodları beyaz alana yapıştırıp bloga uygula diyoruz.


.BlogArchive { 
background-image: -webkit-radial-gradient(top, rgb(255, 255, 255), rgb(213, 213, 213));


  background-image: -moz-radial-gradient(top, rgb(255, 255, 255), rgb(213, 213, 213));


    background-image: -o-radial-gradient(top, rgb(255, 255, 255), rgb(213, 213, 213));

    background-image: -ms-radial-gradient(top, rgb(255, 255, 255), rgb(213, 213, 213));

    background-image: linear-gradient(top, rgb(255, 255, 255), rgb(213, 213, 213));
border:3px solid #fff;

-webkit-border-radius: 20px 20px 20px 20px;

-moz-border-radius: 20px 20px 20px 20px;

border-radius: 20px 20px 20px 20px;

text-align:center;

padding:15px;

width:300px;

box-shadow: 2px 2px 10px #ccc;}

.BlogArchive a:link {

text-shadow: 1px 0.5px 3px #999;

color:#666;

padding:2px;

font-size:12px;

-webkit-border-radius: 5px 5px 5px 5px;

-moz-border-radius: 5px 5px 5px 5px;

border-radius: 5px 5px 5px 5px;}

.BlogArchive a:visited {color:#666;}

Bütün bunları tamamladıktan sonra artık blog arşiv widgetimiz yukarıda bulunan resimdeki gibi bir görünüm kazanacak. Aşağıda yazılanları okuyarak widgetinizi kendinize göre özelleştirebilirsiniz.

Çerçevenin kalınlığını değiştirmek isterseniz kırmızı ile işaretlenmiş koddaki sayıyı artırıp azaltabilirsiniz. Aynı yerden renk kodlarını biliyorsanız çerçeve rengini değiştirebilirsiniz.

Mavi ile gösterilmiş yerden yazı boyutunu sayıyı artırıp, azaltarak ayarlayabilirsiniz.

Sarı ile gösterilmiş yerden renk kodlarını biliyorsanız yazının rengini ayarlayabilirsiniz. Renk kodlarını bilmiyorsanız tıklayın.

Anlamadığınız bir şey veya bir isteğiniz olursa yorum yaparak bana bildirebilirsiniz saygılar...