Marvio Template Loader Logo
Blogger Eklentileri

Katlama Efektli Not Eklentisi

Katlama Efektli Not Eklentisi

Bu eklenti sayesinde Blogunuzdaki yayınlarınızda önemli yerler ve ya vurgulamak istediğiniz yerleri kutu içine alabilirsiniz hemen aşağıdaki aşamaları takip edin.

Blogger > Tema > HTML Düzenle,Şu kodlardan birini aratın ve bir üst satırına aşağıdaki css kodlarını ekleyin ]]></b:skin> ve ya </style>


/* CSS Note by Arlina Design */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

Şablonu Kaydedin.
Şimdi 4 farklı renk seçeneği ile istediğiniz kodları kullanabilirsiniz.

Renk1
 <div class='note'>...buraya yazı...</div>

Renk2
 <div class='note orange'>...buraya yazı...</div>

Renk3
 <div class='note river'>...buraya yazı...</div>

Renk4
 <div class='note crusta'>...buraya yazı...</div>

Yorumlar 1

  1. Önizleme & Demo koyarsan daha güzel olucağını düşünüyorum :)

    YanıtlaSil

Yorum Gönder