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

نعلم كلنا اصحاب المواقع و المدونات و المنتديات ان يتوجب علينا مواكبة تحديثات البلوجر التي تصب في مصلحة المدون و بالتالي يتقن عمله بسهولة و بالتالي يكون عدد زواره مقبول حسب نوعيت المواضيع المبرمجة من طرف المدون او المشرف نفسه و لاستكمال ذلك يتوجب علينا تزيين التدوينة او الشرح او الموضوع بشكل يجعل الزائر ينبهر بالحلة التي اكتسها الموضوع من ناحية الجمالية و لهذا تعد صناديق و ازرار الاقتباس ضرورية للغاية و هذا ما نشرحه اليوم عن طريقة اضافة هذه الصناديق لمدوناتنا .
بعد ما اخذنا نبذة عن الشرح بالمعاينة ناتي للتركيب
    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%, transpa
    rent 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. بعد حفظ القالب و التوجه الى عمل تدوينة جديدة
      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 الغني عن التعريف و ايضا طريقة التركيب سهلة جدا يكفيكم بعد الولوج الى الموقع ياتيكم مكتبة ضخمة من الايقونات لاختيار احدى منهم يتوجب الضغط على الايقونة التي تختارها و بعدها ياتيك الوسم تحت صورة الايقونة المكبرة انسخه و السقه مكان الوسم الافتراضي للكود .
    اضافة اجمل صناديق الاقتباس و ازرارها 4.5 5 Unknown الثلاثاء، 10 مارس 2015 السلام عليكم و رحمة الله و بركاته نعلم كلنا اصحاب المواقع و المدونات و المنتديات ان يتوجب علينا مواكبة تحديثات البلوجر ...


    On : الثلاثاء، 10 مارس 2015,

    If you enjoyed this article, sign up for free updates.

    author picture

    About Author

    I'am Unknown, a part-time blogger and template designer from Indonesia who is the founder And Author of تحميل جميع البرامج. I love create Blogger Themes, write about blog design, And Blogspot tweaks. You can subscribe me on G+ @ Unknown .

    ليست هناك تعليقات

    إرسال تعليق