حلولي https://www.facebook.com/hlo1y https://twitter.com/hlo1y https://www.youtube.com/user/v518v https://plus.google.com/+v518v

تابعنا على :

f tw +G yt vk

KHALED ALMILBE




مدون ومطور قوالب بلوجر
My E-mail : ###
My Phone No. : #%^$#
My Website : www.k2d.us
مساحة إعلانية متجاوبة

اضافة صناديق للإقتباس والتعريفات بألوان مختلفة

حلولي

مشرف

المزيد

هناك تعليقان (2)

تم النشر فى قسم

تم النشر منذ

تحميل ...

اضافة صناديق للإقتباس والتعريفات بألوان مختلفة

معاينة الاضافة : من هـنـا

 أضف الكود التالي خاص بالأيقونات ضعه فوق </head> إذا كنت تتوفر عليه فلا داعي لإضافته

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

1. توجه إلى قالب >> تحرير
2. ابحث بإستعمال CTRL+F عن  ]]></b:skin>
3. ضع الكود التالي قبلة-فوقة مباشرة

.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;}

الان عندما تريد انشاء موضوع ابدل من تأليف الى 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>
ان افدتك لاتنسى الضغط على انضم معنا وترك تعليق بالأسفل

مشاركة الموضوع

انسخ كود الشكل الذى تريده وضعه فى تعليق
اذا كنت لا تملك حساب على بلوجر قم بإختيار التعليق باسم " مجهول "
تعليقات بلوجر
تعليقات الفيس بوك

هناك تعليقان (2):

  1. شكراً لك صديقي
    موضوع جميل

    ردحذف
    الردود
    1. الجميل ردك اخي منير انرت المدونة اهلاً بك

      حذف

مساحة إعلانية متجاوبة

مواضيع مميزة

إحصائيات المدونة

  • عدد المواضيع :

  • عدد التعليقات :

  • عدد المشاهدات :

المتابعون

اشترك ليصلك كل جديد

  • الإشعارات
  • من نحن

  • اتصل بنا

  • ×

ادخل الاسم (إختيارى)

ادخل البريد الإلكترونى (مطلوب)

ادخل الرسالة (مطلوب)