اضافة مواضيع مهمة على مدونة بلوجر

مواضيع مهمة

السلام عليكم ورحمة الله تعالى و بركاته
في درسنا اليوم سنتعلم مع بعض كيفية تحميل إضافى هته الاداة الرائعة

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

معاية

او

معاية

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

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

1. توجه إلى قالب >> تحرير

2. ابحث بإستعمال CTRL+F عن :  </head>

3. ضع الكود التالي قبله (فوقه) من الفوق كما في الصورة موضح

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

ثانيا 

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    ثم حفظ  او على كل مشاركة او مشاركات معينة فقط تابع معي 

*4. توجه إلى موضوع قم بتحريره

*5. إنتقل لتبويب HTML 

*6. ضع الكود الذي تريد من بين الأكواد التالية  ثم غير الكتابة على حسب مواضيعك  او اضف رابط .

<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>

معاية

كما يمكنك تغيير الأيقونات  
<i class="fa fa-link"></i>  <i class="fa fa-quote-right"></i>

والان اترك بصمتك هنا ولو بتعليق حتى تحفزنا

تابع أيضًا: مكتبة إضافات بلوجر

الصفحة الئيسية