طريقة اضافة مواصفات الهاتف متجاوب و احترافي في بلوجر

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

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

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

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

يجب ان تعرف ان الاضافة عبارة عن اكواد css واكواد html فيستوجب التركيز جيداً حتى تعمل الاضافة داخل مقالاتك بشكل سليم وبدون اخطاء فقط تابع الشرح بدقة.
أولا انتقل الى المظهر من القائمة الجانبية ثم اضغط على تعديل Html

قم بالبحث عن الوسم 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; }

الان قم بحفظ التعديلات و قم بإنشاء موضوع جديد و لإستخدام الإضافة اضغط على 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>

انتقل الى تأليف ستظهر لك بهذا الشكل:

كل ما عليك فعله هو حذف علامات الهاشتاغ ### واضافة ما تريده.
وهكذا نكون قد إنتهينا، اذا واجهتك أي مشكلة فلا تتردد في طرحها في التعليقات.