Blogger Bilgi Kutusu Eklentisi

Merhaba istek üzerine artık blogger eklentilerini paylaşmaya başladım. Daha önce  paylaştığım makalede yorumlara blog sitelerimizi zengin gösterecek ve işimizi kolaylaştıracak eklentiler paylaşırsan seviniriz tarzında yazmıştı bir kaç kişi. Bende ne paylaşacağımı düşünüyordum zaten. Bir kategori daha eklemiş oldum paylaşımlarıma, 

Lafı fazla uzatmadan bu gün sizlerle hangi eklentiyi paylaşacağım Blogger Bilgi Kutusu Eklentisi 'ni paylaşacağım. Bu eklenti yazdığınız yazılarda özellikle belirtmek istediğiniz uyarı,dipnot ve etiketlerinizi daha ön planda sunmanızı sağlar. Okuyucularınızın dikkatini çekersiniz ve yazdığınız yazılar daha okunası hale gelir.

Bunu nasıl yapabilirsiniz, çok basit aşağıdaki adımları takip edin. Yine yapamazsanız eğer yorumlarda belirtirseniz yardımcı olmaya çalışırım.

1. Öncelikle blogger panelimize girerek ŞABLON-HTML DÜZENLE diyoruz ve   CTRL+F yapıp ]]></b:skin> yazıp aratıyoruz.
2. Daha sonra bulduğumuz kodunun hemen üst satırına aşağıda verdiğim CSS kodlarını ekliyoruz.

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxmJAXWEE8VFVXxjPHDGV8pdrjBfmQ2UNNwqEjCYoZnKiy7FTXVl3EAVkDWtVmExMQIjO4NlQw2bRoWUzdoxmRCHa9ReYiZr7tvQ_BSNgbvCGK0Mby4ZAvIyxqzSrxYuHkpRAYQRm-RFw/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTk7g1mmeQWBSp09GcsJD57y2ITwfVtfOLPfkDpIdQxDn_vYHxT7QJmFpjV9Df1ExdVE_9eKbZchkWny3aR0PMQSnjhF93PsRSvhWSlu9KUw3tnuf6F6CNOR_gFGmGAOtOM_lHmu8xr1U/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsxshx8jKlLsXaowdsBmUOULwhiRpVgj5BKqTuxaVLJzdbqYr2eWl_2UvSFWz9-ZLvBsAr2K252Vj60eZIDzddvtYKanAa-U1hLtDcx-ZNBmyPKK-wWPnof6MF7oCY1FR1JMRxtOby_Y/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Daha sonra yazılarımızı yazarken yazının istediğimiz yerinde HTML kısmına geçerek aşağıdaki kodları kullanıyoruz.

Bilgi Kutusu İçin:

<div class='info'>
Bilgi kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.
</div>

Not Kutusu İçin:

<div class='tips'>
Not kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.
</div>

Uyarı Kutusu İçin:

<div class='warning'>
Uyarı kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.
</div>

Not: Yazımızı yazarken sol üstte OLUŞTUR/HTML kısmı var biz HTML kısmına geçerek kodları uygulamalıyız.

DEMOLAR

Bilgi kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.

Not kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.

Uyarı kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.

Google'dan Gelen Aramalar

blogger,bloggerlar,blogger para kazanma,blogger dersleri,blogger makyaj,blogger adsense reklamı nasıl eklenir,blogger tema yükleme,blogger türkiye,blogger türk,blogger nasıl olunur