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.

 

 

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.