السلام عليكم إخواني وأخواتي الكرام متابعين مدونة تقني للمعلومات الأوفياء موضوعنا اليوم سأعرض لكم فيه اضافة صندوق الملاحظات بالغة الماتريال ديزاين.
قبل أن نبدأ في شرح تركيب الاضافه يجب عليك معاينة الاضافه اولا لأنها اضافه اكثر من رائعة واستعملها في موقعي انا أيضاً .
أولاً قم بأخذ نسخه احتياطيه القالب .
ثانياً قم بالضغط على خيار المظهر ثم تحرير html بعد ذلك قم بالبحث عن </head> وقم بوضع هذا الكود فوقها .
أي استفسار قم بوضعه في تعليق.
قبل أن نبدأ في شرح تركيب الاضافه يجب عليك معاينة الاضافه اولا لأنها اضافه اكثر من رائعة واستعملها في موقعي انا أيضاً .
معاينة الإضافة :
معاينةتركيب الإضافة :
أولاً قم بأخذ نسخه احتياطيه القالب .
ثانياً قم بالضغط على خيار المظهر ثم تحرير html بعد ذلك قم بالبحث عن </head> وقم بوضع هذا الكود فوقها .
<style> .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;}بعد ذلك قم بالبحث عن <head> وقم بوضع هذا الكود أسفلها إن كان موجود فلا تضعه .
.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;}
</style>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>والان مع اخر كود والذي سيتم وضعه في المواضيع في كل موضوع تقوم بكتابته تقوم بالضغط على html ثم اضافة هذا الكود .
<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>
أي استفسار قم بوضعه في تعليق.