إضافة تقييم الهاتف لمقالات بلوجر

Phone rating for blogger articles

بسم الله الرحمن الرحيم

مقدمة

السلام عليكم ورحمة الله وبركاته أهلاً ومرحباً بكم في مقال وإضافة جديدة وحصرية من قسم بلوجر تحية طيبة مباركة أما بعد:

في مقال اليوم نقدم لكم إضافة تقييم الهواتف لمدونات الهواتف الذكية ( المحمول / الجوال / الموبايل / الهاتف ) ، أو إذا أنت أحببت كتابة مقال عن نوع هاتف معين وأحتجت إلى إتاحة تقييم إليه بشكل جميل ومتناسق ، كما أننا نشرنا من قبل عن إضافة معلومات ومواصفات الهاتف لمقالات بلوجر.

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

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

وفيما يلي سنقوم بشرح تركيب الإضافة كما أنه يمكنك معاينة الإضافة مباشراً في أخر المقال.

تركيب الإضافة

قبل أي شئ نوصي بأخذ نسخة أحتياطية من قالبك.

أولا: أذهب إلى المظهر > تعديل HTML > أبحث عن وسم

]]></b:skin>

ألصق أكواد ال Css التالية أعلاه أي فوقه.

/* Code By | Mo Hisham With ♡ */
/*https://sketchwareegy.blogspot.com*/
.form-back{
	box-sizing: border-box;
	text-align: center;
	background: #fff;
	padding: 10px;
	border: 2px solid #ccc;
	border-radius: 15px 15px 15px 15px;
	box-shadow: 0 5px 5px #ccc;
}
.rate-addresses{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10px;
}
.title1{
	display: flex;
	justify-content: center;
	align-items: center;
	background: #3560AB;
	width: 30%;
	height: 35px;
	padding: 5px;
	color: #fff;
	border-radius: 15px 0 0 15px;
	border: 2px solid #3560AB;
	margin-right: -5px;
	position: relative;
	text-align: center;
	font-size: 20px;
}
.circle{
	background: #fff;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	border: 2px solid #3560AB;
	text-align: center;
	position: relative;
}
.line-btwn{
    width: 15px;
}
.rate{
	display: block;
	background: #fff;
	padding: 5px;
	margin-top: 5px;
	box-shadow:  0 2px 2px #ccc;
	border-radius: 5px 5px 5px 5px;
	border: 1px solid #ccc;
}
.tt1{
	font-size: 30px;
	color: #3560AB;
}
.tt2{
	font-size: 30px;
	color: #3560AB;
	margin-top: 45px;
	border: none;
	background:none;
}
.num{
	float: left;
 }
 .info{
 	float: right;
	margin-right: 5px;
 }
 progress{
	width: 100%;
 }
 .bold{
 	color: #3560AB;
 }

 @media (max-width: 400px){
 .title1>tt{
	font-size: 10px;
 }
 .title1{
 	height: 25px;
	margin-right: -8px; 	
 }
 .circle{
	width: 60px;
	height: 60px;
 }
 .tt1{
	font-size: 12px;
 }
 .tt2{
	font-size: 17px;
	color: #3560AB;
	margin-top: 22px;
	border: none;
	background:none;
 }
 }
 /* تفضل بزيارة مدونة سكيتشوير بالمصري وتفقد المزيد */
 /*https://sketchwareegy.blogspot.com*/

ثانياً: أذهب إلى ( المشاركات > مشاركة جديدة > عرض HTML > ألصق أكواد HTML التالية في المكان الذي تراه مناسباً داخل مقالك ).

<div class="form-back">
<br>
<b class="tt1" dir="rtl">تقييم هاتف Iphone Max Pro</b>
<div dir="ltr" class="rate-addresses">
<div class="title1"><tt dir="rtl">التقييم %</tt></div>
<div class="circle">
<button class="tt2">79%</button>
</div>

<div class="line-btwn"></div>

<div class="title1"><tt dir="rtl">ضمان الجودة</tt></div>
<div class="circle">
<button class="tt2">80%</button>
</div>
</div>

<br>
<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 9.5</label>
<label class="info">التصميم</label>
<br>
<progress dir="rtl" value="9.5" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 8.4</label>
<label class="info">الشاشة</label>
<br>
<progress dir="rtl" value="8.4" max="10"><div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 4.5</label>
<label class="info">البطارية</label>
<br>
<progress dir="rtl" value="4.5" max="10"></progress>
</div></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 7.5</label>
<label class="info">الكاميرا</label>
<br>
<progress dir="rtl" value="7.5" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 6.5</label>
<label class="info">المعالج</label>
<br>
<progress dir="rtl" value="6.5" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 5.6</label>
<label class="info">نظام التشغيل</label>
<br>
<progress dir="rtl" value="5.6" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 4.5</label>
<label class="info">البطارية</label>
<br>
<progress dir="rtl" value="4.5" max="10"></progress>
</div>

<div class="rate">
<label dir="ltr" class="num"><b class="bold">10</b> / 4.0</label>
<label class="info">التخزين / الرام</label>
<br>
<progress dir="rtl" value="4.0" max="10"></progress>
</div>
<br>
</div>

تعديل الإضافة

١- الألوان

لا يتوفر تعديل لألوان هذه الأضافة اللون الأزرق أفتراضياً قد نعمل على تطوير الإضافة قريباً بإذن الله لإتاحة إمكانية تعديل الألوان بما يتناسب مع مدونتك.

٢- الخطوط

تأخذ نصوص الإضافة الخط الإفتراضي لمدونتك.

عدل ما يلي في أكواد HTML بمايناسبك.

٣- النصوص

يمكنك تعديل النصوص كيفما تشاء ولكن كن حذر عند تغيير كلمة ( جودة الضمان ، التقييم ) ومن الأفضل أن لا تعدلهما أو لا يزيد عدد الكلمات عن أثنين لكل خانه.

٤- النسبة العشرية ١٠ / ١٠

يمكنك تعديل القيمة للبروجرس أو شريط التقدم بالنسبة العشرية مثال ( 8.6 أو 5.8 ) من ( 10 ).

٥- العدادات أو الدائرتين

العداد الأول الخاص بالجودة ضع له نسبة مئوية حسب ماتراه من جودة وأمان الهاتف الذي تكتب عنه.

العداد الثاني قم بحساب القيمة العشرية للست خانات ثم ضع النتيجة بالنسبة المئوية كتقييم كلي للهاتف.

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

والسلام عليكم ورحمة الله وبركاته

سكيتشوير بالمصري

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

الصفحات

إضافة تقييم الهاتف لمقالات بلوجر

مقدمة

تركيب الإضافة

تعديل الإضافة

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

أخر المواضيع من قسم : بلوجر

تعليقات

إرسال تعليق