TeknoMobi | Profesyonel ve Ücretsiz Blogger Tema

Uzun zamandır Blogger ile ilgili yazılar yazmaktayım. Genelde Ajax, Jqery, Javascript ile hazırlanmış eklentileri Blogger alt yapısında kullanılabilir hale getiriyorum. Bunlar gibi yazılarımın yanına artık Blogger için kendi kodladığım veya çevirisini yaptığım temalarıda yayınlayacağım. FreeCssTemplates'te yayınlanan Nimbuslike adlı Css temasını Blogger için düzenledim.

Nimbuslike Blogger Temasının Özellikleri ise ; 2 sütunlu yapıya sahip, mavi ve yeşil ton ağırlıklı bir şablon, Header altında yatay menü, menü altında banner,

nimbuslike, freecsstemplates,nimbuslike blogger,blogger templates

Resimleri büyütmek için üzerlerine tıklayın!..

Nimbuslike Blogger Temasının Kurulum Klavuzu

Temayı blogunuza kurduktan sonra yapmanız gerekenler kısaca aşağıdaki gibidir.

1. Blog başlığı bölünde düzenleme yapmak için html kodları arasında <div id='logo'> kodunu aratın ve hemen altında bulunan bölümde gerekli düzenlemeyi yapın.

2. Menüde düzenleme yapmak için HTML kodları arasında

<li class='first'><a alt='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>

kodlarını aratın ve gerekli düzenlemeyi kendi isteğinize göre yapın.

3. Menü altındaki banneri değiştirmek için yine html kodları arasında <div id='banner'><a href='#'><img alt='' src='http://i28.tinypic.com/2i1z621.jpg'/></a></div> şeklinde arama yapın ve burada bulunan resmin linkini kendi istediğiniz banner linki ile değiştirin.

Nimbuslike Blogger Tema : Demo/Önizleme , indir

Benden BlogcuForum'da en fazla istek alan uygulamayı Blogger'de kullanılabilir hale getirmemi isteyen birçok kişi oldu. Elimde bir kaç proje olduğundan bu uygulamayı hazırlamam biraz gecikti. Bu gecikmeden dolayı istekte bulunan bütün arkadaşlardan özür dilerim.

Blogger'de afilli bir feedback butonu için yapmanız gereken adımları kolayca anlayabileceğiniz şekilde anlatacağım. Anlatacağım aşamaları düzgün bir şekilde yaparsanız benim blogumda sağ tarafta bulunan Feedback butonuna tıkladığınızda karşınıza çıkan iletişim ekranı gibi bir özelliğe kendi blogunuzda da sahip olabilirsiniz.

1. İlk olarak yapmanız gereken daha önce anlatımını yaptığım Colorbox uygulamasını kurmalısınız. Colorbox uygulamasının blogger entegrasyonunu iki bölüm halinde yayınlamıştım. Colorbox Bölüm 1 , Colorbox Bölüm 2

2. Colorbox uygulamasını blogunuza sorunsuz entegre ettiğinizi düşünerek anlatıma devam ediyorum. Şimdi yapmamız gereken. Blogumuzun yanına yerleştireceğimiz feedback butonunun Css kodlarını blogumuzda ki Css kodlarınına eklemeye.. Aşağıdaki kodları blogunuzun Css kodlarının en altına kopyalayın.

/* FeedBack Butonu */

#feedbackright img {
border:0px;
float:right;
position:fixed;
right:-10px;
top:160px;
}

#feedbackright img:hover {
right:-5px;
}

/* -------------------------------- */

3. Feedback butonunun css kodlarınıda ekledikten sonra sıra blogumuzun Html kod bölümünde yapacağımız düzenlemeye... Blogunuzun Html kodları arasında

<div id='wrapper'> veya <div id='outer-wrapper'>

kodlarını aratın. Eğer bu kodlar temanızda bulunmuyorsa Header div kodunun hemen üstüne aşağıdaki kodu kopyalayın.

<div id='feedbackright'>
<a href='açılmasını istediğiniz sayfanın bağlantısı' id='websayfa' target='blank'>
<img src='http://tinyurl.com/dldzh5'/>
</a>
</div>

4. Yukarıdaki kodda feedback butonunu değiştirmek için http://tinyurl.com/dldzh5 bağlanısının yerine kendi istediğiniz resmin bağlantısını verebilirsiniz.

Bu anlatımı yaparken şurada bulunan "Blogger'de Sağ Tarafa Feedback Butonu Yapalım" makalesinden yararlanılmıştır.

Soru/Öneri/Görüşlerinizi bu yazıya yorum yaparak veya iletişim formundan iletebilirsiniz!..