موقع يوضح لك صورة لوحة السيارة || Knowing the car dashboard

اضفة صندوق مواصفات Phone specifications الهاتف لمدونات بلوجر Blogger

متابعي مدونة مايند ايجي - mindegy1 مرحبا بكم في مقالة جديدة حول ضافات بلوجر واليوم سوف نتعرف على اضافة صندوق المواصافات لمدونات بلوجر بشكل احترافي هذا الصندوق يحتاجة بكثرة مدونات المراجعات المتخصصه في مراجعة الهواتف لانها تحتاج الى ان تضع مواصفات الجهاز بشكل جميل اذا لم يكن لديك مدونة يمكنك انشاء مدونة على جوجل بشكل مجاني والبدء من الربح منها وكتابة المقالات .

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

شاهد ايضا :

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

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

معاينة الاضافة

كيفية انشاء مدونة مجانية

يمكنك ان تقوم بـ انشاء مدونة جوجل او blogger انشاء مدونة وهذة المدونة يمكنك انشائها بشكل مجاني من خلال التوجة الى منصة بلوجر وبعدها تقوم بعملية تسجيل الدخول الى موقع blogger وبعدها تقوم بإختيار قالب مناسب والبدء في كتابة المقالات مع احترام seo لكي تتصدر مقالاتك نتائج البحث .

طريقة تركيب الاضافة

• ابحث عن
• </b:skin>

.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.aps-shortcode ul {list-style: none;}
.aps-features-list li{ background: linear-gradient(45deg,#480048,#c04848); height: 46px;
margin-bottom: 10px;
position: relative;}
.aps-shortcode *{
line-height: 1.5;
padding: 0;
margin: 0;
list-style: none!important;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.aps-feature-anim:hover{background: #055cef}
.aps-feature-anim{
height: 100%;
width: 100%;
font-size: 13px;
padding: 0px 10px 1px 19px;
margin-bottom: 10px;
color: #fff;
line-height: 15px;
position: absolute;
top: 0;
left: 0;
}
.aps-list-icon{
background: #FFC107;
}
.aps-list-icon {
height: 46px;
padding: 11px;
color: #fff;
font-size: 24px;
line-height: 24px;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.aps-icon-cpu:before {
content: '\e893';
}
.aps-feature-info {
height: 20px;
position: relative;
z-index: 5;
overflow: hidden;
}
.aps-feature-info strong {
display: inline-block;
}
.aps-main-features, .aps-video-col {
float:left;
width: 50%;
margin-left: 10px;
}
.aps-product-pic {
max-width: 45%;width: 45%;float:right; border: 1px solid #52525217;margin-top: 20px;
}
@media screen and (max-width: 768px){.aps-product-pic {width: 100%;max-width: 100%}
.aps-main-features, .aps-video-col {
width: 100%;
margin: 0px;
}
}

ثم قم بحفظ القالب وتوجه الي انشاء مقالة جديدة وقم بفتح HTML المقالة

ضع هذا الكود داخل المقاله

<div class="aps-shortcode clearfix">
<ul class="aps-features-list">
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon"> 
<img hight="20px" src="https://image.flaticon.com/icons/svg/1383/1383655.svg" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>المعالج</strong>:&nbsp;Qualcomm Snapdragon 665</div>
</div>
</li>
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon ">
<img hight="20px" src="https://image.flaticon.com/icons/svg/100/100323.svg" width="20px" />
</span><br />
<div class="aps-feature-info">
<strong>الرام/الذاكرة</strong>: 3/4 - 32/64/128 غيغابايت</div>
</div>
</li>
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon ">
<img hight="20px" src="https://image.flaticon.com/icons/svg/149/149388.svg" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>الشاشة</strong>: حجم 6.5 إنش&nbsp;IPS LCD</div>
</div>
</li>
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon ">
<img hight="20px" src="https://image.flaticon.com/icons/svg/689/689399.svg" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>الكاميرا</strong>: 12 + 8 + 2 + 2 ميغابكسل</div>
</div>
</li>
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon ">
<img hight="20px" src="https://image.flaticon.com/icons/svg/263/263073.svg" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>السلفي</strong>: 13 ميغابكسل</div>
</div>
</li>
<li>
<div class="aps-feature-anim">
<span class="aps-list-icon">
<img hight="20px" src="https://image.flaticon.com/icons/svg/689/689399.svg" width="20px" />
</span>
<br />
<div class="aps-feature-info">
<strong>النظام</strong>: Android 10.0</div>
</div>
</li>
</ul>
</div>

لابد ان يكون عندك مكتبة FONTAWESOME

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

ملحوظة : الكود منقول

إقرا ايضا :
* طريقة تحويل نطاق مدونتك القديم الى النطاق الجديد
* اضافة تاثير التحريك على الصور