Hamdi Çetin - Kişisel Blog: 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.

Öncelikle blogger panelimize girerek ŞABLON-HTML DÜZENLE diyoruz ve CTRL+F yapıp ]]></b:skin> yazıp aratıyoruz.
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;
}