كيفية إدراج ملاحظات على شكل فقاعات لمدونات بلوجر

اهلاً بكم زوار ومتابعي المدونة الكرام 

اليوم في درسنا هذا سوف نتعرف كيفية إضافة ملاحظة أو تنويه على شكل بيضوي من ثم فقاعات صغيرة  إلى مشاركتك  وهذه الإضافة جذابة وتضيف إلى مدونتك لمسة إحترافية .

أنقر للمعاينة
إضافة ملاحظات

- طريقة التركيب :

1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم اختر قالب >>> ثم تحرير قالب .

3- ابحث عن الوسم : ]]></b:skin>

4- اضف الكود التالي فوقه .

 p.bestavdhoot {
position:relative; 
width:400px; 
padding:20px 40px;
margin:10px 10px 80px 40px;
background:#f7a944; 
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fac868), to(#f3961c));
background:-moz-linear-gradient(#fac868, #f3961c);
background:-o-linear-gradient(#fac868, #f3961c);
background:linear-gradient(#fac868, #f3961c);
-webkit-border-radius:180px;
-moz-border-radius:180px;
border-radius:180px;
-webkit-box-shadow: -3px 4px 8px #989898;
-moz-box-shadow: -3px 4px 8px #989898;
box-shadow: -3px 4px 8px #989898;
color:#575544;
font-size:1em;
letter-spacing:.06em;
}
p.bestavdhoot:before {
content:"";
position:absolute; 
bottom:-40px; 
left:20px; 
background:#f3961c;
width:30px; 
height:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
/*add a drop shadow*/
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}
p.bestavdhoot:after {
content:"";
position:absolute;
bottom:-55px;
left:0;
width:15px;
height:15px;
background:#f3961c;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
} 

- كيفية إضافة الملاحظة إلى مشاركتك :

1- استخدم هذا الكود في وضعية HTML

 <p class="bestavdhoot">
هنا ضع ملاحظتك
</p> 

وأخيراً نترككم برعاية المولى وتوفيقه