القائمة الرئيسية

الصفحات

أخبار الاخبار

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

تركيب اضافة مواصفات الهاتف لبلوجر

اذ كنت مدون علي الانترنت او تمتلك مدونة تقنية فلا شك بأنك تعرف جيداً إضافة مواصفات الموبايلات الشهيرة علي مواقع الووردبريس، Plugin رائعة تضم العديد من الايقونات مع شرح مصغر عن مواصفات الهواتف مثل: البطارية، مساحة التخزين، الرام، نظام الهاتف، الكاميرا، حيث تسهل علي الزائرين معرفة مواصفات الهاتف الذي يرغب بشرائة.


اضافة مواصفات الهاتف، لا يستغنى عنها أصحاب المواقع التقنية وخصوصاً التي تقدم مقالات عن مراجعات الهاتف، او مواصفات واسعار هاتف، فتلك الاضافة مخصصة لمواقع WordPress وهي مدفوعة وليست مجانية، لكن هل تعلم ان بإمكانك الآن تركيب ال Plugin الي مواقع Blogger مجانا ؟، نعم يا صديقي فمن خلال هذا المقال سنتعرف علي طريقة تركيب اضافة مواصفات الهاتف لبلوجر . فتابع معنا.

أهمية اضافة مواصفات الهاتف لبلوجر

بالرغم من ان منصة بلوجر تابعة للشركة العملاقة جوجل، الا أن جوجل نادراً ما تهتم بتحديثات blogger !! وحتي تكون صانع محتوي ناجح علي بلوجر يجب ان تتعلم html فالجميع يعرف ان اي مدونة بلوجر تعتمد بالاساس علي اكواد برمجية.


لذلك فإن الإضافات مهمة جداً وتساعدك في تحسين المحتوي الذي تقوم بكتابتة علي موقعك لجلب الزوار الي مقالاتك . لذا، ان كان لديك مدونة تقنية علي منصة بلوجر فلا تترد نهائياً في تركيب اضافة مواصفات الهاتف لمدونتك مجانا.

شرح استخدام إلاضافة في بلوجر

اولا يجب ان تعرف ان الاضافة عبارة عن اكواد css واكواد html فيستوجب التركيز جيداً حتي تعمل الاضافة داخل مقالاتك بشكل سليم وبدون اخطاء . 


  • كود الإضافة داخل المقال 
ستقوم بالدخول الي "مشاركة جديدة" ثم تغيير مربع النصوص من تأليف الي html، ثم تقوم بنسخ الكود التالي واضافتة داخل مربع النصوص html، كما يظهر لك بالصورة اعلاة .
<div class="aps-main-features"><ul class="aps-features-list"><li><div class="aps-feature-anim"><span class="aps-list-icon"><i class="fas fa-microchip"></i></span><div class="aps-feature-info"><strong>المعالج</strong>:<span>#########</span></div></div></li><li><div class="aps-feature-anim"><span class="aps-list-icon"><i class="fas fa-memory"></i></span><div class="aps-feature-info"><strong>التخزين / الرام</strong>:<span>#########</span></div></div></li><li><div class="aps-feature-anim"><span class="aps-list-icon"><i class="fas fa-camera"></i></span><div class="aps-feature-info"><strong>الكاميرا</strong>:<span>#########</span></div></div></li><li><div class="aps-feature-anim"><span class="aps-list-icon"><i class="fas fa-mobile-alt"></i></span><div class="aps-feature-info"><strong>الشاشة</strong>:<span>#########</span></div></div></li><li><div class="aps-feature-anim"><span class="aps-list-icon"><i class="fab fa-android"></i></span><div class="aps-feature-info"><strong>نظام التشغيل</strong>:<span>#########</span></div></div><li><div class="aps-feature-anim"><span class="aps-list-icon"><i class="fas fa-battery-three-quarters"></i></span><div class="aps-feature-info"><strong>البطارية</strong>:<span>#########</span></div></div></ul></div>

التعديل علي مواصفات الكود

بعد إضافة الكود السابق، ستضغط علي زر تأليف لتلاحظ ظهور الكود بنفس الشكل الذي يظهر بالصورة بالاسفل 


كل ما عليك الان هو حذف علامات ##### وكتابة مواصفات الهاتف، ثم احفظ المقال دون نشر ، بعد ذلك عليك الإنتقال الي تبويب المظهر لإضافة اكواد ال css النهائية .

شرح تركيب كود مواصفات الهاتف

في هذه الخطوة ستنتقل الي المظهر> تعديل html ثم اسفل الهيدر "header" ستقوم بوضع الاكواد التالية . كما موضح لك بالصورة بالاسفل .


  • اكواد اسفل وسم head
<link href='https://rawcdn.githack.com/khalafalla/fontawsome.css/5d59a497e9581e5e265d41c19f41eed9f9ae596f/dsfd.css' rel='stylesheet'/>
<link href='https://rawcdn.githack.com/FortAwesome/Font-Awesome/d8db3d032d22e7a5e21f3b40905b7867be19bb02/css/all.css' rel='stylesheet'/>
  • اكواد فوق وسم الـ <b:skin>
.aps-list-icon {
    height: 50px;
    padding: 12px 5px 5px 5px;
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 82;
    width: 50px;
    text-align: center;
}
.aps-feature-info {
    height: 20px;
    position: relative;
    z-index: 83;
    overflow: hidden;
    font-size: 13px;
    float: right;
    direction: rtl;
    padding-right: 19px;
}
.aps-feature-anim {
    height: 100%;
    width: 100%;
    padding: 5px 40px 15px 10px;
    margin-bottom: 10px;
    color: #fff;
    line-height: 15px;
    position: absolute;
    top: 0;
    right: 0;
}

.aps-main-features, .aps-video-col {
    width: 100%;
}
.post-body ul, .post-body ol {
    padding-right: 10px;
}
بعد ذلك تقوم بحفظ الاكواد والعودة الي مسودة المقال لاستكمال باقي المقال الذي ترغب بكتابتة عن مواصفات الهواتف المحمولة، ولمعاينة الاضافة ادخل هذا الرابط

  • تحميل الاكواد txt
  1. اكواد تحت وسم الهيدر txt 
  2. اكواد فوق وسم <b:skin> ملف تكست
  3. اكواد داخل المقال txt 
وبالاخير إذا لم ينجح معك الامر يمكنك كتابة اي سؤال بالتعليقات بالاسفل وسوف اقوم بالرد الفوري عليك لمساعدتك :) شكراً لكم علي المتابعة. 
هل اعجبك الموضوع :
author-img
فرندي تك موقع تقني يقدم مقالات تكنولوجية مميزة، ونعمل من خلال الموقع علي إثراء المحتوي العربي وإيصال المعلومات التقنية لكافة الزائرين .

تعليقات

7 تعليقات
إرسال تعليق
  1. كيف ننسخ الاكواد وانت مفعل إضافة مانع النسخ... اقل حاجة بترفع الاكواد بملف txt

    ردحذف
    الردود
    1. تم تحديث المقال ، ووضع الاكواد داخل ملف txt ؛ شكراً للتنبية .

      حذف
  2. ازاى اظهر الصوره بجانب المواصفات
    وازاى اقلل حجم الاضافه

    ردحذف
    الردود
    1. مرحباً، تابع الشرح خطوة بخطوة حيث يجب تركيب الاكواد بشكل صحيح لتعمل الاضافة،، بالنسبة للحجم فهو متجاوب مع كل الشاشات

      حذف
  3. لما ركبت الاضافه عندى عملت اخطاء كثيره فى القالب وخصوصا اكواد css

    ردحذف
  4. روابط التحميل مش شغالة اتمني حضرتك تشوف طريقة تاني نعرف نحصل بيها على الاكواد

    ردحذف
  5. شكرا لك أخي الكريم لقد أفادني موضوعك .
    لكن إشتغل معي دون أن أضع الكود الثاني.
    ☺☺👍

    ردحذف

إرسال تعليق

محتوي المقال