Blogunuza Not Kağıtları Ekleyin

Çoğumuzun eviminde veya ofisinde mantar pano vardır.Küçük raptiyeler kullanarak aldığımız kısa notları mantar panolara tuttururuz.Buna benzer benzer br uygulamayı bloglarınızda nasıl kullanacağınızı anlatamak istiyorum bu yazıda.

 

Not

 

Blogunuzda resimde gördüğünüz not kağıtlarını 2 şekilde kullanabilirsiniz.Birincisi yazınızın içerisinde yazı ile ilgili önemli bir hatırlatma vs yapmak istediğinizde, ikincisi ise kenar çubuğunda ziyaretilerinize yine bir hatırlatma, duyuru vs yapmak istediğinizde.

 

Bu not kağıtlarını blogunuzda kullanmak için önce şablonunuzdan ]]></b:skin> kodunu bulun ve üstüne aşağıdaki stil kodlarını ekleyin.

 

.not {
padding: 0 20px 20px 20px;
border: 1px solid #DDD;
border-top: none;
border-left: none;
width: 160px;
min-height:150px;
float: right;
margin: 15px 0 15px 15px;
background-color: yellow;
font-size:14px;
font-style:italic;
line-height:1.5em;
color: #000;
}
.not div{
background: url(https://lh4.googleusercontent.com/-AEcWYy7Nx5k/T4VIYLgmChI/AAAAAAAACsk/3QDUFKoz6s8/s47/pin.png) no-repeat;
width: 47px;
height: 41px;
margin: -20px auto 10px auto;
}

 

Şimdi blogunuzda yeni bir kayıt oluşturmak için yazı editörünü açın ve HTML’yi Düzenle kısmına şu aşağıdaki kodları ekleyin.

 

<div class="not">
<div>
</div>
Bu not Serdar Kara tarafından Blog Hocam okuyucuları için yazılmıştır.
</div>

 

Kırmızı renkte olan yer not kağıdında gözükecek kısımdır.Not kağıdında gözükmesini istediğiniz yazıyı oraya yazın.

 

Denediğinizde sizin de farkedeceğiniz şey not kağıdınız sağ tarafa yaslanmış olması.Notları yazının kendisinden ayırmak için böyle bir stil kullanımış.Not kağıdını kenar çubuğuna eklemek isterseniz sağa yaslanması kötü duracağı için ilk verdiğim kodlardaki float: right; satırını silebilirsiniz.

30 yorum:

  1. Süperrrrrrrrrrr buuu. Teşekkürler şimdiki yayınlayacağım postumda hemen yapacağım..

    YanıtlaSil
  2. HOCAM BEN BU İLK KODU İLK DEDİGİNİZ YERE EKLEDIM.AMA 2.KODU NEREYE EKLEYECYMİZİ ANLAYAMADIM.YARDIMCI OLURMUSUNUZ?ŞABLONU KAYDET DEIKTEN SONRA BİR DAHAMI HTMLYI DUZENLE DİYECEGIZ?

    YanıtlaSil
  3. @ayn ozmen
    Blogger kumanda panelinde yeni bir yazı yazmak istediğinizde Oluştur ve HTML bölümleri vardır.İkinci kodu HTML kısmından ekleyeceksiniz.

    YanıtlaSil
  4. ben nıye bunları hıc anlamıyoru nereye yazcaz bunları naısl yapcaz:/

    YanıtlaSil
  5. TAMAM ANLADIM COK TESEKKUR EDERIM :)

    YanıtlaSil
  6. @sevgi
    Blogger kumanda paneline girdiğinizde blogunuz üstüne tıklayınca açılan sayfada soldaki listeden Şablon'a tıklayın.Daha sonra HTML'yi düzenle ve Devam butonlarına tıkladıktan sonra açılan pencerede blogunuzun HTML kodları var.Ctrl+F tuşlarına basarak arama kutusunu açın ve kutuya ]]></b:skin> yazarak kodu bulun.Bu kodu bulduktan sonra hemen üstüne ilk verdiğim kodları ekleyip şablonu kaydedin.

    Daha sonra yeni bir yazı oluşturur gibi Yeni yayın butonuna basın.Sol üst tarafta Oluştur ve HTML seçeneklerini göreceksiniz.HTML seçeneğine bastıktan sonra ikinci verdiğim kodları buraya ekleyin.Daha sonra tekrar oluştur seçeneğine geçip yazınızı tamamlayabilirsiniz.

    YanıtlaSil
  7. teşekkürler işe yarar güzel bir eklenti..

    YanıtlaSil
  8. serdar abi bu kdar insafsız olma biraz daha kısa ve sadeleştir bence kullanıcılar anlamakta zorluk çekiyorlar.Arkadaşlarımıza yardımcı olabiliriz isterlerse :):)

    YanıtlaSil
  9. Peki Serdar Bey, sayfanın tam ortasına eklemek istersek ne yapacağız acaba?

    YanıtlaSil
  10. @Ömer Faruk
    ilk bölümdeki kodlardan float: right; satırını silin ve ikinci bölümdeki kodları <center></center> etiketleri arasına alın.

    YanıtlaSil
  11. "ikinci bölümdeki kodları center></center etiketleri arasına alın."
    Bu kısmı tam olarak anlayamadım Serdar Bey.

    YanıtlaSil
  12. Yazının HTML kodlarına ikinci bölümdeki kodları eklerken o kodların başına <center> , sonuna ise </center> ekleyin.

    YanıtlaSil
  13. shadow eklenirse daha hoş olabilir görünüm olarak.

    YanıtlaSil
  14. merhaba ustadim öncelikle tesekkur ederim ilgin ve emegin icin ...peki bu not kagitlarini 3 tane yan yana eklemek isin napabiliriz...detayli bir sekilde anlatirsan acemiyim ... 3 tane yanyan ve 3 ayri renk olarak nasil yapariz

    YanıtlaSil
  15. @maxbet-tips
    Merhaba.Detaylı anlatmak bu yazıdan ço daha uzun olacağı için size yol göstereyim, siz kendiniz uygulamaya çalışın.
    .not sınıfıyla tanımladığımız kodları, isimleri .not2 ve not3 olacak şekilde çoğaltın.Ancak .not sınıfında float:right kısmını float:left olarak, not2 de float:center olarak, not3 te ise float:right olarak değiştirin.

    HTML kodlarında ise <div class="not">
    <div>
    </div>
    notunuz
    </div> kısmının yanına aynısını 2 kez daha ekleyin ancak burada da div class="not" kısmını div class="not2" ve div class="not3" olarak değiştirin.

    Kolay gelsin.

    YanıtlaSil
  16. Teşekkürler çok işime yaradı.
    http://yoncademirel.blogspot.com

    YanıtlaSil
  17. Ben denedim ama beceremedim :( blogumun üst kısmında not kağıdı değil de yazılar çıkıyor.bir şeyi eksik yaptım sanırım ama neyi? ]]> bu kodun üzerine mi yapıştırıyoruz sonrasına mı?

    www.kitapsohbetcisi.com

    YanıtlaSil
  18. nasıl yapacağımızı anladım ancak bu kodlar not eklemek için hep elimizde bulunmalı değil mi daha kestirme yolu olaymış iyiymiş:))

    YanıtlaSil
  19. Hocam mrh. Çok acemiyim sayenizde çok yol aldım. Allah razı olsun sizden.
    Bu not kağıdını yapacağım. Anlamadığım şey, yeni yazımıza geçtiğimizde bu sefer eklediğimiz kodları silecekmiyiz... Silersek önceki yazımızda bu bloknot silinmez mi :) Help

    YanıtlaSil
  20. @beyaz
    Not kağıda göstermek istediğiniz her yazı için ayrıca kod ekleyeceksiniz.

    YanıtlaSil
  21. Merhaba,
    2 gündür bu son derece faydalı siteden çıkamıyorum bir türlü :) Emeğinize sağlık. Bu not kağıdını eklediğimde şablonum (dışardan yükledim) değişir veya bozulur mu?

    YanıtlaSil
  22. @Düşle Gelsin
    Merhaba,
    Şablonunuz değişmez ve bozulmaz.

    YanıtlaSil
  23. Dikkat mesaj kutusu ve Yasak mesaj kutusu için de aynı sorum geçerli !!

    YanıtlaSil
  24. Cevabım onlar için de geçerli :)

    YanıtlaSil
  25. Merhaba, yazdığınız makalenin ardından gösterdiğiniz kolaylık blogunuzda nasıl duruyor, onu da yazının en sonuna ekran alıntısı şeklinde eklerseniz sizin için daha faydalı olacaktır. Selamlar.

    YanıtlaSil
  26. Merhabalar,
    Bu harika bir şey...Bunu Gadget olarak yan tarafta gösterebilirmiyiz?Ana sayfadan bağımsız olarak.

    YanıtlaSil
  27. @Semra Mollaoglu
    Elbette. İkinci kodları yerleşim > gadget ekle > html/javascript gadget olarak da ekleyebilirsiniz.

    YanıtlaSil
  28. şablonumdaki html de ]]> bu kod yok görünüyor sorun nerde yardım lütfen. @Serdar

    YanıtlaSil

Blogger tarafından desteklenmektedir.