Blogger Kod Çerçevesi Yapımı

Blogger İpuçları Serisi ile devam ediyoruz arkadaşlar.Bugün Bilgicelli arkadaşımın isteği üzerine Kod Çerçevesinin nasıl yapıldığını anlatacağım.Bu eklenti sayesinde kodları daha düzgün bir şekilde okuyucularımıza göstermiş olacağız.Hazırsak hemen anlatıma geçelim:
Her zamanki gibi Blogger hesabımıza girip “Yerleşim/HTML’yi Düzenle” sekmesine gelip “Widget Şablonlarını Genişlet” tikini aktif hale getirdikten sonra ]]></b:skin> kodundan önce şu kodları yapıştıralım:

/***************** Çerçeve Kodu Bölümü *******************/
.post-body pre {
background: transparent url(http://i49.tinypic.com/29w4d8g.png) no-repeat scroll 2px 0px;
padding-left: 2px;
padding-top: 26px;}
.post-body pre code {
background-color: #fff8af;
display: block;
width: 540px;
overflow: auto;
padding: 0 1em;
color: #555555;
border-left: 4px solid #EB1885;}

kodları yapıştırdıktan sonra şablonu kaydedelim.İşin basit tarafı bitti.Bu bölümde biz sadece “css” tanımlamasını yaptık.Şimdi de bu tanımlamaları özelleştirelim:

Kodda yeşil ile gösterdiğim resim linkini kendinize ait olarak değiştirebilirsiniz.Yalnız bunun için o linkteki resim boyutlarıyla aynı olacak şekilde yeni bir resim yapabilirsiniz.Diyelim resmi o boyutlarda yaptınız ve o resimdeki gibi pembe renk değilde siz reminizi mavi olarak ayarladınız.Bu şekilde yaptığınızda “EB1885” renk kodunuda yaptığınız resmin arkaplan kodu ile aynı olacak şekilde ayarlamalısınız.Biraz karışık gibi oldu ama inanın çok basit.

Bu aşamadan sonra sıra geldi yazılarınızda bu kodu kullanmaya.Bu kodu göstermek için siz yazınızın içinde şu kodu kullanacaksınız:

<pre><code>Yazılarınızı Bu Alana Yazacaksınız.</pre></code>

Bu gösterdiğim kısım çok önemli.Genel itibari ile yapması basit bir eklenti eğer yine de yapamadığınız yer olursa sormaktan çekinmeyin 😉

Bu eklentilerin devamı gelecek inşallah.Hergün bir eklenti yazmam şu anda imkansız gibi görünüyor.Hergün yazamadığım için haliyle ne zaman yazacağım belli olmuyor.Bu yüzden Feedburner aboneliğini kullanarak takip ederseniz yazım size an itibariyle olmasada ulaşacaktır 🙂

Bu yazıdan önce yazmış olduğum "Blogger Oylama Eklentisi ve Estetik Yukarı Çıkma Butonu" başlıklı yazımı da okumanızı tavsiye ederim.

Bu Yazıya Emoji İle Tepki Ver?

  • Beğen
  • Muhteşem
  • Hahaha
  • İnanılmaz
  • Üzgün
  • Kızgın

Herkese Merhabalar, ben Enes İLHAN. Gaziantep'te doğdum, Adana'da Büro Yönetimi ve Yönetici Asistanlığı bölümünü okudum ve 2012'de mezun oldum. Askerliğimi uzun dönem olarak, { acemiliği Ankara/Mamak'ta , usta birliğini ise Hatay/İskenderun'da } yapıp bitirmiş bulunmaktayım. Şimdi ise hayata atılmanın çabası içerisine girmiş bulunmakta olup iş bulma derdindeyim.

23 yorum

  1. MaFiAMaX   •  

    Ben bunu bir yerden hatırlıyorum ama…

  2. Enes İLHAN   •  

    @MaFiAMaX
    Hocam kusura bakma lütfen.Sen bu konuyu 2007 yılının Ekim ayında çok daha ayrıntılı bir şekilde anlatmışsın fakat bende nereden aldığımı bilmiyorum arşivimin içinde kayıtlıydı. Bilgicelli arkadaşım isteyince arşivimin içinde böyle bir eklentinin mevcut bulunduğu aklıma gelerek açtım bu konuyu.Aldığım yeride hatırlamıyorum açıkçası muhtemelen o kişide senin blogdan almıştır.

  3. Rıfat Oruç   •  

    Enes benim senden ricam blogunda olduğun gibi Twitter güncelemeleri için bir eklenti.Çok aranan,isten bir konu.

  4. MaFiAMaX   •  

    @Enes İLHAN,
    Hem kod kutusu görüntü itibari ile benimkisi ile birebir aynı hem de CSS kodları satırı satırına aynı. Yoksa ben bu konuyu daha önce anlattım diye kızmıyorum, birebir aynı olduğu için kızıyorum.

  5. Doğuhan FİDAN   •  

    Sayın Rıfat Oruç. Dilersen Aşağıdan (Link 1 yazan yerdeki Linkten) kendine böyle Son Güncellemeler diye bir kutu yapabilirsin veya dilersen aşağıdan (Link 2 yazan yerdeki Linkten) kendine Son güncellemelerinin yazdığı, kendini güncelleyen bir Twitter ''Grafiği'' yaptırabilirsin.

    Link 1: http://twitter.com/goodies/widget_profile
    Link 2: http://twitstamp.com/

  6. Enes İLHAN   •  

    @Rıfat Oruç
    Twitter ile ilgili bir yazı yazmayı düşünüyorum takipte kalın.
    @Doğuhan FİDAN
    Yardımcı olduğun için teşekkürler.İkisi de iyi bir alternatif ama ben biraz daha farklı olarak anlatacağım belki de blogumdakinin nasıl yapıldığınıda anlatabilirim.
    @MaFiAMaX
    Bende zaten bunu söylemeye çalışmıştım.Benim bu anlattığım konunun içindeki kodlar tamamen size ait.Bana bu kodları kim vermişse sizinki ile birebir kopyalanmış.Kızmakta haklısın hocam keşke bu konuyu açmasaydım tekrar özür diliyorum ve lütfen hakkınızı helal edin.

  7. CraLBilogcu   •  

    mafiamax doğuhanca adlı sitede görmüştüm sanırım ben bunu dün yada ondan önceki gün ikinizde aynı kişiyseniz bilemicem.Ancak şu anda o sitede Türkçe'ye çevrilmiş yazılar gitmiş.Ordada kaynak gösterilmemişti 🙂

  8. Enes İLHAN   •  

    @CralBilogcu
    "ikinizde aynı kişiyseniz bilemicem" burada ne demek istediğini açıkça söyler misin ?

  9. Doğuhan FİDAN   •  

    @CraLBilogcu
    Dediğinden ''birşey'' anladıysam Arap olayım. Ben MaFiAmAx değilim, kendisini takdir ederim, aynı Enes abim gibi. Fakat dediğinden cidden birşey anlamadım, Sitemde iletişim bilgilerim var, ekle konuşalım bakalım neymiş istediğin.

  10. MaFiAMaX   •  

    Arkadaşlar sakin olun. Sanırım CralBilogcu doguhanca'nın da sahibinin ben olabaileceğini düşünmüş.

    Enes boş ver kalsın yazın. Pişman oldum valla :)) Amacım üzmek değildi seni.

    Ben yokken buralar size emanet 😉

  11. Enes İLHAN   •  

    @MaFiAMaX
    Valla bayramdan beri düşünmekten alamadım kendimi. Hatalı bir iş yaptığımın farkındayım. Hele 2. yorumu gördükten sonra ciddi ciddi üzülmeye başladım, nihayetinde son yorumun beni oldukça rahatlattı hocam.
    Gerçekten senin gibi blogcuları gördükçe iştahım daha da kabarıyor. Doğuhanca gibi bir yeteneği sende farketmişsindir sanırım 😉

  12. King_Wolf Security Pages   •  

    Teşekür ederim,kullanacağım.

  13. CraLBilogcu   •  

    Mafiamax çok iyi anlamış 😉 Ben bir istemedim sadece söyledim 😉

  14. Enes İLHAN   •  

    @CralBilogcu,
    Hadi bakalım öyle olsun.Neyse ki iş tatlıya bağlandı yoksa daha farklı olabilir ve kalpler kırılabilirdi…

  15. ccd güvenlik kamerası   •  

    sagol fatih

  16. T0fan   •  

    kodları verdiğin gibi yaptım ama değişen birşey olmadı temadan mı kaynaklanıyor?

  17. güvenlik kamerası   •  

    Bu yararlı bilgiler için teşekkürler

  18. güvenlik kamerası   •  

    Bu güzel paylaşım için Teşekkürler güzel kullanışlı bir bilgi

  19. sağlık   •  

    bende teşekkür ederim …

  20. Anonymous   •  

    The world is his who enjoys it.

    ———————————–
    Northwestern

  21. Anonymous   •  

    I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

  22. Anonymous   •  

    What goes up must come down

Bir Cevap Yazın

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

Güvenlik Sorusu ? * Time limit is exhausted. Please reload the CAPTCHA.