تركيب اضافة مواصفات الهاتف لبلوجر
اذ كنت مدون علي الانترنت او تمتلك مدونة تقنية فلا شك بأنك تعرف جيداً إضافة مواصفات الموبايلات الشهيرة علي مواقع الووردبريس، 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
ردحذفتم تحديث المقال ، ووضع الاكواد داخل ملف txt ؛ شكراً للتنبية .
حذفازاى اظهر الصوره بجانب المواصفات
ردحذفوازاى اقلل حجم الاضافه
مرحباً، تابع الشرح خطوة بخطوة حيث يجب تركيب الاكواد بشكل صحيح لتعمل الاضافة،، بالنسبة للحجم فهو متجاوب مع كل الشاشات
حذفلما ركبت الاضافه عندى عملت اخطاء كثيره فى القالب وخصوصا اكواد css
ردحذف