Blogger Bilgi Kutusu Eklentisi

theCrawLe

Site Yöneticisi
Yönetici
Katılım
26 Şub 2019
Mesajlar
69
Beğeniler
11
Puanları
8
Web sitesi
mobilkanyon.com
#1
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.

Kod:
.info, .tips, .warning {
line-height: 22px;
min-height: 38px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info {
background: #e0e5eb url('https://2.bp.blogspot.com/-3rcGQ-VAKb8/UlA4L72c6wI/AAAAAAAAFtY/f__fkV_xBsQ/s1600/info.png') no-repeat 12px 8px;
color: #222
}
.tips {
background: #7CADDE url('https://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png') no-repeat 12px 8px;
color: #fff;
}
.warning {
background: #db6161 url('https://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/AAAAAAAAFtc/suIf3IwnpgE/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:
Kod:
<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:
Kod:
<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:
Kod:
<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.
 

Bu çeriği görüntüleyen kullanıcılar (Kullanıcı: 1, Ziyaretçi: 0)