مربعات لكتابة ملاحظة او تحذير لمدونات بلوجر

السوم وفى موضوع جديد وحصرى كما تعودتم من مدونة ابداعاتى أقدم لكم شرح بسيط لوضع ملاحظات للزوار بشكل احترافى وبسيط جدا يسهل عليك عرض ملحوظة بشكل أفضل للزائر لتخبره بشئ معين عن مدونتك أو تحذه من شئ معين فى مدونتك ولكى لا أطيل عليكم هيا بنا للمعاينة والشرح 

يمكنك معاينة الاضافة أولا >> من هنا

بعد معاينة الاضافة هيا بنا لشرح التركيب 

شرح التركيب 

(1) اذهب للوحة التحكم >> القالب >> تحرير HTML 

 (2) ابحـــــــــــــــــــــــــــــــــــــــــث عن    ]]></b:skin>

ثم اضف قبله مباشرة هذا الكود

<style type="text/css">
/* ملاحظة */.note {
    padding: 5px;
    color: #666;
    border: 1px solid #e6c555;
    direction: rtl;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #ffffcc url('http://static.tumblr.com/zjltkmo/aHomducon/note.png') no-repeat 99% center;
}
.note p {
    padding-right: 50px;
    padding-top: 8px;
    text-shadow:1px 1px 0px #ffffde;
    color: #cdaf4b;
}
/* تحذير */.warning {
    padding: 5px;
    color: #c31b00;
    border: 1px solid #ff9999;
    direction: rtl;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #ffcccc url('http://static.tumblr.com/zjltkmo/blvmdud1n/warning.png') no-repeat 99% center;
}
.warning p {
    padding-right: 50px;
    padding-top: 10px;
    color: #a26060;
    text-shadow:1px 1px 0px #ffdddd;
}
/* معلومات */.info {
    padding: 5px;
    color: #00aeff;
    border: 1px solid #68a2cf;
    direction: rtl;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #bfe4f9 url('http://static.tumblr.com/zjltkmo/oQamdud2b/info.png') no-repeat 99% center;
}
.info p {
    padding-right: 50px;
    color: #5487a4;
    padding-top: 8px;
    text-shadow:1px 1px 0px #d8f0fe;
}
/* جديد */
.new {
    padding: 5px;
    color: #00aeff;
    border: 1px solid #dadada;
    direction: rtl;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #f7f7f7 url('http://static.tumblr.com/zjltkmo/yrAmdud2z/new.png') no-repeat 99% center;
}
.new p {
    padding-right: 50px;
    color: #5487a4;
    padding-top: 8px;
    text-shadow:1px 1px 0px #d8f0fe;
}
/* تحميل */.download {
    padding: 5px;
    color: #666;
    border: 1px solid #c2d7a1;
    direction: rtl;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #e6f6cc url('http://static.tumblr.com/zjltkmo/7Lpmdud3k/download.png') no-repeat 99% center;
}
.download p {
    padding-right: 50px;
    color: #4a60b7;
    text-shadow:1px 1px 0px white;
    padding-top: 5px;
}
.download p a {
    color: #70983f;
    text-shadow:1px 1px 0px #efffdc;
    text-decoration: none;
}
.download p a:hover {
    color: #486623;
    text-shadow:1px 1px 0px #efffdc;
}
</style>

(3) ثم اذهب للتخطيـــــط >>  اضغط اضافة اداة

 Html/Javascript 

لعمل ملاحظــــــــــــة 

 

اضف الكود التالى 

<div class="info"><p> ضع الكلام هنا </p></div>

لعمل تحذير

اضف الكود التالى

<div class="warning"><p> ضع الكلام هنا </p></div>

لعمل اقتراح لتحميل برنامج أو ما شابه ذلك

اضف الكود التالى

<div class="download"><p> ضع الكلام هنا </p></div>

لعمل تنبيه بشيء جديد 

اضف الكود التالى

<div class="new"><p> ضع الكلام هنا </p></div>

دمتم فى رعاية الله متتبعى مدونة ابداعاتى الكرام