معاينة الاضافة
طريقة التركيب
توجه إلى لوحة التحكم الخاصة بمدونتك
من تحرير القالب HTML
ضع الكود التالي فوق ]]></b:skin>
تستطيع وضع الكود فوق </head> لكن بين الوسمين <style> ... </style>
/* CSS Note by Al7otweb */
.note {
position: relative;
width: 30%;
padding: 1.2em 1.5em;
margin: 2em auto;
color: #fff;
background: #343436;
overflow: hidden;
text-align: right;
font-size: 14px;
}
.note.black { background: #343436; }
.note.blue { background: #3498DB; }
.note.red { background: #ea6153; }
.note.purple { background: #9B59B6; }
.note.yellow { background: #F1C40F; }
.note.turquoise { background: #1ABC9C; }
.note.red:before {
border-color: #fff #fff #ea6153 #ea6153;
background: #ea6153;
}
.note.blue:before {
border-color: #fff #fff #3498DB #3498DB;
background: #3498DB;
}
.note.purple:before {
border-color: #fff #fff #9B59B6 #9B59B6;
background: #9B59B6;
}
.note.yellow:before {
border-color: #fff #fff #F1C40F #F1C40F;
background: #F1C40F;
}
.note.turquoise:before {
border-color: #fff #fff #1ABC9C #1ABC9C;
background: #1ABC9C;
}
.note:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #343436 #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
}
قم بحفظ التغييرات
الآن كل ما عليك هو اضافة أحد الاكواد التالية حسب اللون الذي تريد ، كلما أردت اضافة ملاحظة
<div class='note black'>الملاحظة هنا</div>
<div class='note blue'>الملاحظة هنا</div>
<div class='note red'>الملاحظة هنا</div>
<div class='note purple'>الملاحظة هنا</div>
<div class='note yellow'>الملاحظة هنا</div>
<div class='note turquoise'>الملاحظة هنا</div>
ليست هناك تعليقات:
إرسال تعليق