Ziyaretçileriniz Blogger Temanızı Değiştirsin

Blogger arka plan değişiklikleri ile ilgili, arka plan rengini değiştirme, resim ekleme, resim döşeme, resim sabitleme veya kaydırma, resim konumlandırma, aynı anda resim ve renk kullanımı gibi konular hakkında örnekler eşliğinde temel bilgiler 'Blogger Arka Plan Rengi Değiştir, Düzenle, Resim Ekle' yazısında sıralanmıştı. Yazıyı henüz okumadıysanız, bir göz atmanızda fayda var; Blogger Arka Plan Değişiklikleri

Temanızın arka planını değiştirme hakkında ön bilgiye sahip olduktan sonra bu yazı ile birlikte ziyaretçilerinize çok daha hareketli, görsel ve etkin bir tema sunabileceksiniz. Çünkü bu yazı ile birlikte ziyaretçilerinize blogger temanızı değiştirme imkanı vereceksiniz.

Temanızdan memnun olmayan ziyaretçileriniz olabilir. Artık, memnuniyetsizliğe karşı elinizde çok güçlü bir silahınız olacak. Sizin belirleyeceğiniz standartlar içerisinde ziyaretçileriniz temanızda belli başlı noktaları değiştirebilecekler. İlginç bir konu öyle değil mi?


Ziyaretçileriniz temanızı değiştirmek istediğinde başlık (Header), arka plan (Background), link renkleri, yazı tipi, yazı boyutu, bir çok değişkeni eğer siz izin verirseniz değiştirebilirler. jQuery styleswitch özelliği Kelvin Luck sitesi tarafından oluşturuldu. Bu yazının gereğinden uzun olmaması için, sadece belli başlı değişikliklerden bahsedilecektir. Yoksa siz isterseniz tüm CSS kod kısmındaki değişkenleri kullanabilirsiniz. Fakat şu unutulmamalıdır ki; çok uzun CSS kodları tercih edilmez.

Ziyaretçileriniz Blogger Temanızı Değiştirsin Uygulama
Temada arka plan değişiklikleri için body kısmını kullanılır. Bu kısım minima temasında alttaki gibidir. Kullanılan temaya göre değişiklik gösterebilir.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Bu kodu ele aldım ve beş farklı arka plan oluşturdum. Ayrıca birinci ve dördüncü tema stillerinde yazı boyutu ve yazı tipi gibi özellikleri de değiştirdim. Bu daha çok işin detay kısmıdır. Temel kısım ise diğer tema stillerinde görüntülenebilir;

body {
background: url(http://i620.photobucket.com/albums/tt289/bobokous/takipteyiz/tahta.jpg) repeat;
color: #333;
}

Sizler için oluşturmuş olduğum beş farklı CSS kodunu indirebilirsiniz.

5 farklı CSS kodunu İNDİR

Bu indirmiş olduğunuz dosyalarda yer alan tüm arka plan özelliklerini ve resimleri değiştirebilirsiniz. Değiştirdikten sonra, Bloggerda JavaScript Kullanımı için çözüm önerileri yazısından faydalanarak tüm dosyaları tek tek yükleyin.

Yüklediğiniz dosyaların adreslerini not edin. Adreslerin uzantılarının Stil-1.css şeklinde olmasına dikkat edin.

Blogger hesabınıza giriş yapın ve Yerleşim > HTML'yi düzenle yolunu izleyin. Temanızda </head> kodunu aratın. Hemen bir üst satırına, alttaki kodda kırmızı ile renklendirilmiş olan kısımlara not ettiğiniz CSS kodlarının internet adreslerini yazarak yapıştırın.

<link href='http://www.weebly.com/uploads/.../stil-1.css' media='screen' rel='alternate stylesheet' title='stil-1' type='text/css'/>
<link href='http://www.weebly.com/uploads/.../stil-2.css' media='screen' rel='alternate stylesheet' title='stil-2' type='text/css'/>
<link href='http://www.weebly.com/uploads/.../stil-3.css' media='screen' rel='alternate stylesheet' title='stil-3' type='text/css'/>
<link href='http://www.weebly.com/uploads/.../stil-4.css' media='screen' rel='alternate stylesheet' title='stil-4' type='text/css'/>
<link href='http://www.weebly.com/uploads/.../stil-5.css' media='screen' rel='alternate stylesheet' title='stil-5' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://www.kelvinluck.com/assets/jquery/styleswitch/stylesheetToggle.js' type='text/javascript'/>
<script type='text/javascript'>
$(function()
{
// Call stylesheet init so that all stylesheet changing functions
// will work.
$.stylesheetInit();

// This code loops through the stylesheets when you click the link with
// an ID of &quot;toggler&quot; below.
$(&#39;#toggler&#39;).bind(
&#39;click&#39;,
function(e)
{
$.stylesheetToggle();
return false;
}
);

// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
$(&#39;.styleswitch&#39;).bind(
&#39;click&#39;,
function(e)
{
$.stylesheetSwitch(this.getAttribute(&#39;rel&#39;));
return false;
}
);
}
);
</script>

Yukarıdaki gibi illaki beş tane farklı arka plan kullanmak zorunda değilsiniz, ekleme ya da çıkarma yapabilirsiniz. Temanıza kodu ekledikten sonra kaydedin.

Son adım olarak, Yerleşim > Sayfa Ögeleri yolunu izleyin ve Gadget Ekleye tıklayın. Açılan sayfadan HTML/JavaScript Ekle seçeneğini seçin ve alttaki kodu yapıştırın.

<a href="http://www.weebly.com/uploads/.../stil-1.css?style=stil-1" class="styleswitch" rel="stil-1"><img width="30" src="http://i620.photobucket.com/albums/tt289/bobokous/takipteyiz/sar-cizgili.gif" /></a>
<br />
<a href="http://www.weebly.com/uploads/.../stil-2.css?style=stil-2" class="styleswitch" rel="stil-2"><img width="30" src="http://i620.photobucket.com/albums/tt289/bobokous/takipteyiz/mavi-balon.gif" /></a>
<br />
<a href="http://www.weebly.com/uploads/.../stil-3.css?style=stil-3" class="styleswitch" rel="stil-3"><img width="30" src="http://i620.photobucket.com/albums/tt289/bobokous/takipteyiz/tahta.jpg" /></a>
<br />
<a href="http://www.weebly.com/uploads/.../stil-4.css?style=stil-4" class="styleswitch" rel="stil-4"><img width="30" src="http://i620.photobucket.com/albums/tt289/bobokous/takipteyiz/hayalet.gif" /></a>
<br />
<a href="http://www.weebly.com/uploads/.../stil-5.css?style=stil-5" class="styleswitch" rel="stil-5"><img width="30" src="http://i620.photobucket.com/albums/tt289/bobokous/new_moon.jpg" /></a>

Yukarıdaki kodda kırmızı ile renklendirilmiş olan kısımları yukarıda not ettiğiniz CSS kodlarına ait internet adreslerini yazın. Resimleri kendi resimlerinizle değiştirin.

Mavi ile renklendirilmiş olan kısımlar (stil-1), temanıza eklediğiniz kodda da yine mavi ile renklendrilmiş olan kodlarla (stil-1) aynı olmalıdır.

Bu işlemlerin ardından Ziyaretçileriniz Blogger Temanızı Değiştirebilecek işte sizlerin incelemesi için oluşturduğum örnek blog;

Umarım uygulamayı beğenirsiniz. Özellikle, tema değiştirmekten hoşlananların beğeneceğini düşünüyorum. Konu hakkındaki görüşlerinizi paylaşırsanız sevinirim.

Kolay Gelsin...