طريقة عرض إشعارات ملاحظات و تنبيهات على بلوجر

السلام عليكم ورحمة الله تعالى وبركاته

عند كتابة بعض التدوينات و التي قد تتضمن عرض إشعارات و ملاحظات أو تنبيه معين ضمن الموضوع و لكيفية وضع ملاحظة أو تنبيه في مدونات البلوجر اليك أكواد الإقتباسات و التنبيهات و طريقة وضعها بأشكال مختلفة لتظهر التدوينة بشكل أنيق إحترافي.

الصورة التالية توضح شكل الإضافات.

شرح تركيب الإضافة:

1- أذهب إلى لوحة التحكم >> القالب >> تحرير HTML

2- ابحث عن  </head> ثم اضف فوقه الكود التالي الخاص بالإيقونات و إذا كان موجود لديك فلا داعي لإضافته مرة أخرى.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>

3- إبحث عن ]]></b:skin> أضف قبله مباشرة هذه الأكواد:

.alert-message{position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:20px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#39484d;text-align: center;} .alert-message p{margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d} .alert-message span{font-size:14px!important} .alert-message i{font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;} .alert-message.success{background-color:#00acd6;color:#fff} .alert-message.success a,.alert-message.success span{color:#fff} .alert-message.alert{background-color:#0073b7;color:#fff} .alert-message.alert a,.alert-message.alert span{color:#fff} .alert-message.warning{background-color:#efa666;color:#fff} .alert-message.warning a,.alert-message.warning span{color:#fff} .alert-message.error{background-color:#f56c7e;color:#fff} .alert-message.error a,.alert-message.error span{color:#fff} .alert-message.happy{background-color:#FA8734;color:#fff} .alert-message.happy a,.alert-message.happy span{color:#fff} .alert-message.link a,.alert-message.link span{color:#fff} .alert-message.link{background-color:#F44242;color:#fff} .alert-message.hi a,.alert-message.hi span{color:#fff} .alert-message.hi{background-color:#57DF69;color:#fff} .alert-message:hover {background-image: linear-gradient(110deg, #766D6C 0%, #606364 50%, transparent 50%, transparent 100%);background-size: 200%;background-position: 150% 0;background-repeat: no-repeat;transition: background-position .9s ease, color .15s ease;color: #eee;}

4- احفظ القالب

5- لإستخدام الإشعار المراد عرضه إختار أحد الأكواد لإدراجه في التدوينة.

<div class="alert-message success"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-check-circle"></i> </div> <div class="alert-message alert"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-info-circle"></i> </div> <div class="alert-message warning"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-triangle"></i> </div> <div class="alert-message error"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-circle"></i> </div> <div class="alert-message happy"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-bell-o"></i> </div> <div class="alert-message link"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-link"></i> </div> <div class="alert-message hi"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-quote-right"></i> </div>

تنبيه:- المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا