اضافة اجمل صناديق الاقتباس و ازرارها

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

نعلم كلنا اصحاب المواقع و المدونات و المنتديات ان يتوجب علينا مواكبة تحديثات البلوجر التي تصب في مصلحة المدون و بالتالي يتقن عمله بسهولة و بالتالي يكون عدد زواره مقبول حسب نوعيت المواضيع المبرمجة من طرف المدون او المشرف نفسه و لاستكمال ذلك يتوجب علينا تزيين التدوينة او الشرح او الموضوع بشكل يجعل الزائر ينبهر بالحلة التي اكتسها الموضوع من ناحية الجمالية و لهذا تعد صناديق و ازرار الاقتباس ضرورية للغاية و هذا ما نشرحه اليوم عن طريقة اضافة هذه الصناديق لمدوناتنا .

معاينة إضغط هنا

بعد ما اخذنا نبذة عن الشرح بالمعاينة ناتي للتركيب

ابحث في قالبك ان كنت تتوفر على هذا الكود و المخصص للايقونات و ان لم تجده ضعه فوق ( قبل ) الوسم
الوسم  :   </head>

الكود  : 

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

1. 1. اول شيء اعمل نسخة احتياطية للقالب
   2. اذهب الى قالب ← ← تحرير
   3. استعمل CTRL+F و ابحث عن وسم 
                                 ***   ]]></b:skin>  ***
   
   1. ضع الكود التالي فوقه ( قبله ) 
   
   

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

لتغيير لون الصناديق الى اهوائكم background-color:#F44242 و هم مترتبين في الكود و لتغيير الالوان من هنا

ناتي الان لطريقة تركيبه في التدوينة او الموضوع

1. 1. بعد حفظ القالب و التوجه الى عمل تدوينة جديدة
   2. اذهب الى تحرير html في التدوينة الجديدة
   3. ضع الصندوق الذي تريده من بين الصناديق التالية 
   4. ضع ما تريده من محتوى في مكان جملة المثال 

   <div class="alert-message hi">
   مثال : مرحباً انا  مدونة  حمزة  للمعلوميات  ارحب  بكم <i class="fa fa-thumbs-o-up"></i>
     </div>

   <div class="alert-message success">
   مثال : مرحباً انا  مدونة  حمزة  للمعلوميات  ارحب  بكم   <i class="fa fa-smile-o"></i>
     </div> 

     <div class="alert-message alert">
   مثال : مرحباً انا  مدونة  حمزة  للمعلوميات  ارحب  بكم <i class="fa fa-cogs"></i>
     </div> 

     <div class="alert-message warning">
   مثال : مرحباً انا  مدونة  حمزة  للمعلوميات  ارحب  بكم <i class="fa fa-check"></i>
     </div>  

     <div class="alert-message error">
   مثال : مرحباً انا  مدونة  حمزة  للمعلوميات  ارحب  بكم <i class="fa fa-eye"></i>
     </div> 

   <div class="alert-message happy">
   مثال : مرحباً انا  مدونة  حمزة  للمعلوميات  ارحب  بكم <i class="fa fa-video-camera"></i>
     </div>

   <div class="alert-message link">
   مثال : مرحباً انا  مدونة  حمزة  للمعلوميات  ارحب  بكم <i class="fa fa-info"></i>
     </div>

   لتغيير الايقونات او الرموز الجانبية يجب تغيير هذا الوسم على سبيل المثال الى اي وسم او ايقونة تختارها و لتغيير الايقونات من موقع FnAw الغني عن التعريف و ايضا طريقة التركيب سهلة جدا يكفيكم بعد الولوج الى الموقع ياتيكم مكتبة ضخمة من الايقونات لاختيار احدى منهم يتوجب الضغط على الايقونة التي تختارها و بعدها ياتيك الوسم تحت صورة الايقونة المكبرة انسخه و السقه مكان الوسم الافتراضي للكود .

الى هنا ناتي الى نهاية شرح اليوم و للتنويه فقط الشرح منقول من عرب ويب