Blogger Bayram Şekeri Teması

Arkadaşlar, herkesin merakla beklediği temayı paylaşıyorum 🙂 2011’in Ramazan Bayramının 1.Günü paylaştığımdan temanın adını Bayram Şekeri Teması koydum. Ek olarak: Bayramın 1.Günü 30 Ağustos Zafer Bayramı’na da denk geliyordu 🙂 Daha sonra temayı, yavaş olması yönünde gelen yorumlardan dolayı internetten kaldırdım. Şimdi ise temada resimlerin çoğunu atarak yerine css borderları koydum. Şimdi gelelim temanın özelliklerine;

Bayram Şekeri Teması

Blogger Bayram Şekeri Teması
Rar şifresi:www.furkanozden.net
Blogger Bayram Şekeri Teması Önizleme
bayramsekeri-demo.blogspot.com

Özellikler

  • 3 Sütun
  • Alt ve üst kısımda 4lü gadget grubu
  • Bulunduğu sayfaya göre görünür/görünmez gadgetlar
  • İçerik hırsızlarına karşı metin seçme engeli
  • Twitter için son twit’i gösterme alanı
  • Resimleri görüntülemek için lightbox eklentisi
  • Kod görüntülemelerinde syntax highlighter eklentisi

Navigasyon

Tema Düzenleme


Seo Ayarları


Temanın seo ayarlarını yapmak için Tasarım » HTML’yi Düzenle kısmından Widget Şablonlarını Genişlet işaretledikten sonra <head> kodunun altındaki içerikleri kendinize göre düzenleyin.

Favicon


Seo ayarlarının hemen altında olan kodu düzenlemek için Tasarım » HTML’yi Düzenle kısmından Widget Şablonlarını Genişlet işaretledikten sonra;

<link href='http://1.bp.blogspot.com/-UU8vSwg9VBQ/TWold57OrLI/AAAAAAAAAI0/RfjseBvVhIQ/s1600/parasol_48%255B1%255D.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

kodundaki resim linkini kendinize göre düzenleyin.

Logo


Tasarım » Sayfa Öğeleri kısmına geldiğinizde en sol üst köşedeki gadget’taki resim yolunu değiştirin ve resme kendi anasayfanızın linkini verin.

Reklam


Tasarım » Sayfa Öğeleri kısmından logonun hemen sağındaki gadgetı tıklayarak 468*60 boyutlarında bir reklam görseli ekleyebilirsiniz.

Menü1


Menü1 dediğim şey, temanın en sağ üst kısmında bulunan menüdür. Bunun için Tasarım » HTML’yi Düzenle kısmından Widget Şablonlarını Genişlet işaretledikten sonra aşağıdaki kodları bulun ve kendinize göre düzenleyin.

<div id='pages'>
<ul>
<li class='page_item'><a href='/' title='Ana Sayfa'>Ana Sayfa</a></li>
<li class='page_item'><a href='http://furkanozden.blogspot.com/p/contact.html' title='%u0130leti%u015Fim'>Ileti%u015Fim</a></li>
<li class='page_item'><span style='color: #ffffff;'>|</span></li>
<li class='page_item'><a href='http://furkanozden.blogspot.com/' title='Türkçe diline çevir'>TR</a></li>
<li class='page_item'><a href='http://goo.gl/RTRD8' title='Translate to English'>EN</a></li>
</ul>
</div>

Arama kutusu


Arama kutusunu düzenlemek için Tasarım » HTML’yi Düzenle kısmından Widget Şablonlarını Genişlet işaretledikten sonra <div id='searchbox'> kodunu bulun ve kendinize göre düzenleyin, furkanozden.blogspot.com‘u da kendi adresinizle değiştirin.

Twitter son twit gösterme alanı

Tasarım » Sayfa Öğeleri kısmından bulunduğu gadget’ı tıklayın. Daha sonra frknzdn kelimesini aratın ve kendi twitter kullanıcı adınızla değiştirin.

Menü2


Bu bahsettiğim menü ise, twitter durum güncellemesi gadget’ının hemen sağındaki gadgettır. Bu alanı düzenlemek için Tasarım » Sayfa Öğeleri sayfasına girip twitter durum güncellemesi gadget’ının hemen sağındaki gadgetı tıklayın ve menü ve linkleri kendinize göre düzenleyin.

Metin Seçme Engeli


Metin seçme engeli kodu E-Bülten gadget’ı içinde bulunmaktadır. Bu kodu silmek isterseniz. Tasarım » Sayfa Öğeleri kısmından E-Bülten gadget’ına girin ve </center> kodunu bulun ve altındaki kodu silin.

Standart yazı görseli


Yazınızın başında bir resim olmadığı zaman çıkan standart görseli değiştirmek için Tasarım » HTML’yi Düzenle kısmından Widget Şablonlarını Genişlet işaretledikten sonra http://4.bp.blogspot.com/-0DW_3p4qALk/TpRj7T7-HqI/AAAAAAAAB34/tHqF9S8v304/s1600/%25C3%25B6nizleme.png linkini bulun ve kendi resminizle değiştirin. Resmin boyutları 150*150’dir.

Yazdığım Tüm Yazılar


Her yazının üst kısmında bulunan yazar adınıza tıkladığınızda istediğiniz bir etikete gitmesini sağlayabilirsiniz. Bunun için Tasarım » HTML’yi Düzenle kısmından Widget Şablonlarını Genişlet işaretledikten sonra Yazdığım tüm kişisel yazılar için tıklayın kelimesini aratın ve oradaki linki ve yazıyı kendinize göre değiştirin.

Diğer Gadgetlar


Diğer gadgetlar için de şunu söylemeliyim. Kendi blogumdaki aynı gadgetlerı temaya koydum. İsterseniz hepsini değiştirebilirsiniz. Kendinize göre düzenlemek isterseniz aşağıdaki yönergeleri takip edin.

Kayan Sosyal Paylaş Butonları


Bahsettiğim alanı düzenlemek için Tasarım » HTML’yi Düzenle kısmından Widget Şablonlarını Genişlet işaretledikten sonra sidenav kelimesini aratın ve en sonda bulduğunuz kısmı kendinize göre düzenleyin. Facebook, Google+1, Tweet ve Addthis butonu.

E-Bülten


Tasarım » Sayfa Öğeleri sayfasından E-Bülten başlıklı gadget’a girip tüm furkanozden kelimelerini kendi feedburner id’nize göre düzenleyin.

Beğen & Takip Et


Tasarım » Sayfa Öğeleri kısmında Beğen & Takip Et adlı gadget’a gelip twitter için frknzdn, Facebook için FurkanOzdenTR kelimelerini kendinize göre değiştirin. Google +1 butonu içinse kendi kodunuzla benimkini yer değiştirin.

İstatistikler


Blogun istatistiklerinin gösterildiği gadget’ta ise Tasarım » Sayfa Öğeleri kısmına gidip İstatistikler adlı gadget’a girin. Daha sonra furkanozden.blogspot.com adresini kendinize göre düzenleyin.

Footer


En alttaki ince gadgetta ise birkaç toplist gadget’ı ve yüksekliği 18’i geçmeyen bazı butonlar kullandım. Dilerseniz bunları kaldırabilirsiniz yada kendinize göre düzenleyebilirsiniz.

Yukarı Çık Butonu


Bundan önceki anlattığım Footer gadgetı için yönergeleritakip edin ve furkanozden.blogspot.com kelimesini bulun ve en sondakini kendi adresinizle değiştirin.

Tema Dosyaları


Temada bulunan .css ve .js dosyalarını kendi hostunuza atmanızda fayda var. Çünkü silme ve değiştirme yetkileri benim elimde olan birşey olduğu için sıkıntı çıkmasın.

Yayımcılık


Lightbox


Resimlerin lightbox olarak görünmesini istiyorsanız. Hiçbirşey yapmadan sadece resim yükleyin. Eğer resmin altında açıklama çıkmasını istiyorsanız. Resmin linkine title tagı verin. Eğer grup resim paylaşmak isterseni resme rel=”lightbox[albümadi]” tagını ekleyin. Resmi lightbox olarak görüntülemek için ayrıca bir rel=”lightbox” eklemenize gerek yok. Bunu temaya entegre ettim.

Syntax Highlighter


Bu eklenti hem kodlarınıza şık bir görünüm verir. Hem de ziyaretçileriniz, sitede metin seçme engeli olduğu halde kodları seçip alabilirler. Yayımlarınızda kod paylaşırken kodu aşağıdaki gibi yazmalısınız.

<pre class="brush: js">Buraya birkaç kod ekleyebilirsiniz.</pre>

Resimler


Genişliği 544px‘i geçen resimleri iki yana yaslı ve tam ortalamak için resmi yüklerken sola dayalı yükleyin ve genişliği 544 yapın yüksekliğini boş bırakın. 544’e göre orantılı olarak ayarlanacaktır. Bunu yaptıktan sonra resmin soluk görünmemsi için resim yolundaki s200,s320 veya s400 kısmını s1600 olarak değiştirin. Bu resmin orjinal boyutudur.

Sayfalar


Bir sayfaya girdiğinizde sağ ve soldaki sidebarlar kaybolmaktadır. Bunu yapmak için sayfa yayınlarken, sayfa içeriğinin üst kısmına şu kodları eklemelesiniz.

<style type="text/css">
#Poll1{display:none;}
#entry-meta {
display:none;
}
#sidebarleft-wrapper {
display:none;
}
.post img {max-width:974px;
}
.zaa{width:974px;height:14px;background: url(http://4.bp.blogspot.com/-PtDtkAq0fEk/Tuug8pu8RxI/AAAAAAAACz4/17ufgZKPHRk/s1600/seperator.png) no-repeat;}
#sidebar-wrapper {
display:none;
}
#main-wrapper {
width: 974px;
}
#main2-wrapper {
width: 974px;
}</style>

Eğer sidebarların görünmesini istiyorsanız aşağıdaki kodu kullanabilirsiniz.

<style type="text/css">#entry-meta {display:none;}</style>

Bu kodlar sadece bulunduğu sayfadaki css kodlarına yeni bir düzenleme getirir.

Örnek resimler

Paylaş

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

63 Cevaplar

  1. Yaşar Güner dedi ki:

    Vatana Millete Hayırlı olsun :)==

  2. müjdat sayar dedi ki:

    sen var ya furkan cennetliksin ya süper oldu bu eline saglık

  3. Müjdata kesinlikle katılıyorum 🙂

  4. müjdat sayar dedi ki:

    � çogu kodlarda bu hata var olsun düzeltirim tekrar çok tşk ederim furkan

  5. Furkan ÖZDEN dedi ki:

    Hata olabilir. O yüzden paketin içine temayı .txt olarak da yükledim. Hepsini seçip HTML’yi Düzenle kısmına yapıştırmayı deneyin.

  6. müjdat sayar dedi ki:

    olsun furkan sorun deil sen o kadar emek harcamıssın ben bi bunumu düzeltemicem ..

  7. Furkan ÖZDEN dedi ki:

    Anlayışın için teşekkür ederim 🙂

  8. müjdat sayar dedi ki:

    ASIL BEN TŞK EDERİM SANA SENİN SAYFAN SAYESİNDE HEVES EDİP BENDE AZ BİRAZ CSS KODLAMA DÜZENLEME FELAN ÖGRENDİM ŞU ANDA BLOGUM BU HALDEYSE SENİN SAYENDE– ARADA Bİ SENİN BLOGUN KODLAMALARINA BAKIYODUM ONLARIN GİBİ ÖRNEKLERLE BİŞİLER ÖGRENDİM İŞTE :=)

  9. Furkan ÖZDEN dedi ki:

    Hadi hayırlısı 🙂

  10. müjdat sayar dedi ki:

    tşk ederim şeyyy bişiy sorcamtım furkan hocam sana şimdi benim bi tane blogum var ve örnegin blogumdaki bi konuyo facebbook share ile paylas diyorum sadece konunun adı çıkıyorr ve içerige dair hiç bişiy çıkmıyor sence sorun nedir bi yardımcı olabilir misin

  11. müjdat sayar dedi ki:

    Bu yorum yazar tarafından silindi.

  12. Furkan ÖZDEN dedi ki:

    Bende de dikkat ettiysen yazının içeriği değil alt kısmındaki bilgiler çıkıyor 🙁 Önemli olan içerik kısmının çıkması.Daha bulamadım işte orasının nasıl yapılacağını ama birkaç arkadaş araştırıyoruz bakalım.

  13. müjdat sayar dedi ki:

    Bu yorum yazar tarafından silindi.

  14. müjdat sayar dedi ki:

    Bu yorum yazar tarafından silindi.

  15. Furkan ÖZDEN dedi ki:

    Hocam burayı işgal etmeyelim 🙂 Özelden iletişim kuruyorum.

  16. müjdat sayar dedi ki:

    tmm ustam face sayfana gelem o zaman ben dur yorumlarımıda siliyim

  17. Film Arşivi dedi ki:

    Teşekürler. güzel tema 🙂

  18. Uğur Dalkıran dedi ki:

    “Benzer Yazılar” bölümü çok güzel olmuş! (:

  19. Furkan ÖZDEN dedi ki:

    Oradan buradan alıp güzelce kombine ettim 🙂

  20. müjdat sayar dedi ki:

    furkan ustam tşkrar tşk etmek istedim sana TEKRAR ALLAH RAZI OLSUN DİYORUM BLOGUMA KURDUM YUKARIDAKİ DEDİGİN AYARLARI YAPTIM süper oldu sadece temanda resimlerde degişiklik yaptım emegine saglık ama tema senin tasarımın oldugu için aşagıdaki bayram şekeri teması furkan özden*…. vb resmini kaldırmadım emege saygı duymak lazım tekrar tşk ediyorum

  21. müjdat sayar dedi ki:

    yalnız son bi soru daha sorucaktım şu sol taraftaki begen yani kayan cubugu nasıl pasif edebilirim yani nasıl kaldırabilirim rica etsem onuda söyler misin

  22. Furkan ÖZDEN dedi ki:

    Kodlardan #sidenav‘a display:none; özelliği ver yeter 🙂

  23. müjdat sayar dedi ki:

    anemmmmm 🙂 🙂 çok tşk ederim tekrar eline emegine saglık

  24. müjdat sayar dedi ki:

    çok tşk ederim oldu valla ama bişiy daha sorcaktım biliyorum çok oluyorum ama mesela bi konunun altında begen tweet plus tusları çıkıyor ya işte begen butonunabasınca bende onayla tusuda çıkıyor onu nasıl hallederiz acaba yani onayla tusu çıkmasın
    örnek resim:http://dl.dropbox.com/u/53406672/ffffff.png bunada bi yardım etsen sana zahmet 🙁 🙂

  25. Furkan ÖZDEN dedi ki:

    Valla o konu hakkında hiç bi’ bilgim yok 🙁 İlk defa sende gördüm.

  26. RizeliHaylaz dedi ki:

    abi o şey varya popüler yayınlar benimkinde linkleride çıkıo sadece resim nasıl yapıcam sade resim olucak …

  27. Furkan ÖZDEN dedi ki:

    Temada css elementlerinde #PopularPosts1 ile başlayan yerleri sil yeter.

  28. RizeliHaylaz dedi ki:

    Teşekkür ederim

  29. Arif dedi ki:

    önce bloger kullanıcılarıyla bu temayı paylaşma inceliğini gösterdiğiniz için teşekkür ederim genç kardeşim bloger kullanmak bir tutku gibi diyebilirim blogerede yazı içine adsense reklamı eklemek için( ) bu kodun altına veyaa üstüne koymak gerekiyor bu temanızda yok bu koda alternatif başka kod varmı acaba teşekkürler

  30. Furkan ÖZDEN dedi ki:

    Yorumunuz için teşekkürler. Adsense ile aram pek iyi olmadığından fazla uğraşmadım. Doğal olarak temada yeri yok 🙂

  31. Gokmen dedi ki:

    Bu yorum yazar tarafından silindi.

  32. kemal kartal dedi ki:

    öncelikle çoook teşekkürler izninizle size bi kaç sorum var 🙂
    1-menü yü nasıl çıkartabiliriz yukarda hani sayfaları nasıl ekleyebiliriz.
    2- yayınların aarasında çok boşluk kalıyor acaba bu boşluğu nasıl azaltabiliriz bide sizin blogunuzdaki gibi nasıl sağ tarafa kaydırabilirim lütfen ama lütfen açıklayın 🙁

    bekliyorum emeğinize sağlık diyorum 🙂

    • Furkan Özden dedi ki:

      Yorum formuna gelen yenilik dolayısıyla yorum sayılarının olduğu kısımda biraz boşluk kalıyor. Bunu temadaki <span class=’comments’> kısmını bulup oradaki style kodlarını düzenlemeniz gerekiyor.

    • kemal kartal dedi ki:

      tekrar merhaba dediğiniz gibi denedim ama kodları nasıl düzelteceğimi pek anlamadım biraz daha açarmısınız acaba
      bide dediğim gibi menüyü bide üstte twitter twitleride hallebilirsem sizin yardımınızla 10 numara bi tema olucak 🙂

    • Furkan Özden dedi ki:

      Menü ve twitter’ı silmek için #cats css elementine display:none; etiketini eklemeniz yeterli olacaktır.

  33. kemal kartal dedi ki:

    tekrar ben 🙂 ya benim blog başlığı bu temayı yükledikten sonra üstte olmuyor onu nasıl halledebilirim ?

    • Furkan Özden dedi ki:

      Gadgetlar yeni bir tema yüklendiğinde rastgele dağılırlar. Gereğine göre dizmeniz gerekebilir.

    • kemal kartal dedi ki:

      evet hepsi dağılmış ama başlığı hareket etmiyor etiremiyorum ?

    • kemal kartal dedi ki:

      lütfen bilgilendirmenizi bekliyorum 🙁

    • Furkan Özden dedi ki:

      Hareket etmeyen gadget’ın adına bir isim verin. Daha sonra verdiğin ismi Şablon Tasarımcısındaki kodlarda aratın. Daha sonra o kodun yanında locked=”true” diye bir ibare bulunacaktır. Onu false yapın tamamdır.

    • kemal kartal dedi ki:

      çok saol furkan kardeş o problemi halleddim saolsın artık 1-2 tane kaldı en önemlisi de şu yayınlar arasındaki boşluğun kalkmasını istiyorum ama yapamıyorum bu problemi nasıl halledebilirm yardımcı olurmusun biliorum çok oldum ama çok acil 🙁

  34. dogus oldac dedi ki:

    furkan hocam SİZE Bİ ŞEY SORACAM: BEN BLOGUMU NASIL .COM ADINA ÇEVİREBİLİRİM BLOGDAN BAKTIM ÜCRETLİ DİYOR BU İŞİN ÜCRETSİZİ YOKMU ACABA YARDIMCI OLURSANIZ SEVİNRİZ.

  35. Anonymous dedi ki:

    peki siz furkanözden.net’i paraylamı yaptınız?

  36. Anonymous dedi ki:

    hiç bedava hosting/domain sitesi yokmu .com olarak?

  37. ismail genç dedi ki:

    hocam tasarım Sayfa öğeleri kısmını bulamadım yardım edermisniz

  38. Veysel dedi ki:

    Link kırık hocam yenilerseniz kullanacağım 🙂

  39. Yalçın Güler dedi ki:

    furkan hocam #axzz2KKxn0K2T link sonunda böyle birşey geliyor ?

    • Furkan Özden dedi ki:

      Temayı kurduğunuz site içinden bir paragraf kopyalayıp başka bir yere yapıştırdığınızda altında otomatik olarak kaynak oluşuyor. Dediğiniz ifade o yüzden çıkıyor.

  40. Anonymous dedi ki:

    hocam bunun sizinki gibi 2 sütun haline getirmek için hangi css den değişcez

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bunlar da hoşunuza gidebilir...