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

Welcome Everyone

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

مقدمة

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

شاهد أيضأ > إضافة تقييم الهاتف لمقالات بلوجر

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

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

قبل أي شئ أحتفظ بنسخة إحتياطية من قالبك.

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

]]></b:skin>

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

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
/* Code By Mo Hisham With ♡ */
.conatiner1{
display: block;
font-size: 12px;
text-transform: capitalize;
background: none;
height: 60px auto;
text-align: right;
width: 100%;
font-family: 'Cairo', sans-serif;
}
.box-line {
width: 100% auto;
height: 45px;
background: #0A3A83;
border-radius: 5px;
box-shadow: 1px 1px 1px #000;
margin: 5px;
border: 1px solid #ccc;
}
.img1,.img2,.img3,.img4,.img5,.img6{
width: 25px;
height: 25px;
float: right;
margin-top: 10px;
margin-right: 10px;
}

tt{
color: #fff;
margin-right: 5px;
font-size: 12px;
font-family: 'Cairo', sans-serif;
}
.back{
background: #CE0104;
width: 45px;
height: 100%;
float: right;
border: 1px solid #fff;
border-radius: 0 5px 5px 0;
border-right: none;
border-top: none;
border-bottom: none;
}
.box-line:active{
background: #02A9DD;
transform: scale(0.98);
box-shadow: none;
}
.text{
padding-top: 15px;
}
#A{
text-decoration: none;
}
.art{
margin-top: 5em;
font-family: 'Cairo', sans-serif;
}
.btn-hide ,.btn-show{
background: none;
color: blue;
outline: none;
border: 2px solid red;
margin-right: 5px;
padding: 5px;
border-radius: 5px;
font-size: 9px;
height: 20px auto;
width: 60px;
font-family: 'Cairo', sans-serif;
}
*{scroll-behavior: smooth !important;} 
/* Code By Mo Hisham With ♡ */

ثانياً: في نفس المكان تعديل HTML تبحث عن وسم

<body/>

وهو أخر وسم في أكواد قالبك وتلصق أكواد الجافا سكربت JavaScript التالية أعلاه أي فوقه وهيا تخص عملية إظهار وإخفاء الإضافة:

ثالثاً وأخيراً: عند كتابة مقالك أذهب إلى تعديل HTML وألصق به كود HTML التالي ثم عدل النصوص والعناوين والمعلومات بما يناسبك:

<div align="right">
<button id="forhide" class="btn-hide" onclick="hide();">إخفاء</button>
<button hidden="true" class="btn-show" id="forshow" onclick="show();">إظهار</button>
</div>
<a id="A" href="#link1" >
<div class="conatiner1" id="hidden">
<div class="box-line">
<div class="back"><img class="img1" src="https://d.top4top.io/p_2176082o40.png" /></div>
<div class="text"><tt dir="rtl"><b>المعالج: </b>ثماني النواة snapdragon تكنولوجي</tt></div>
</div>
</a>

<a id="A" href="#link2" >
<div class="box-line">
<div class="back"><img class="img2" src="https://e.top4top.io/p_2176uimzj1.png" /></div>
<div class="text"><tt dir="rtl"><b>التخزين/الرام: </b>128 جيجا مع 8 جيجا رام</tt></div>
</div>
</a>

<a id="A" href="#link3" >
<div class="box-line">
<div class="back"><img class="img3" src="https://k.top4top.io/p_2184c3n6g0.png" /></div>
<div class="text"><tt dir="rtl"><b>الكاميرا: </b>خلفية رباعية 8+2+8</tt></div>
</div>
</a>

<a id="A" href="#link4" >
<div class="box-line">
<div class="back"><img class="img4" src="https://b.top4top.io/p_217667fo80.png" /></div>
<div class="text"><tt dir="rtl"><b>الشاشة: </b>4.6 بوصة بدقة Fhd</tt></div>
</div>
</a>

<a id="A" href="#link5" >
<div class="box-line">
<div class="back"><img class="img5" src="https://h.top4top.io/p_2176estdk4.png" /></div>
<div class="text"><tt dir="rtl"><b>نظام التشغيل: </b>أندرويد 11</tt></div>
</div>
</a>

<a id="A" href="#link6" >
<div class="box-line">
<div class="back"><img class="img6" src="https://i.top4top.io/p_2176i859h5.png" /></div>
<div class="text"><tt dir="rtl"><b>البطارية: </b>4310 مللي أمبير</tt></div>
</div>
</a>
</div>

<div class="art" align="right">
<h2 id="link1" dir="rtl">معالج الهاتف</h2>
<p>فقرة معلومات معالج الهاتف كاملة</p>
<h2 id="link2" dir="rtl">التخزين والرام</h2>
<p>فقرة معلومات تخزين الهاتف والرام كاملة</p>
<h3 id="link3" dir="rtl">كاميرا الهاتف</h3>
<p>فقرة معلومات كاميرا الهاتف كاملة</p>
<h4 id="link4" dir="rtl">شاشة الهاتف</h4>
<p>فقرة معلومات شاشة الهاتف كاملة</p>
<h5 id="link5" dir="rtl">نظام تشغيل الهاتف</h5>
<p>فقرة معلومات نظام تشغيل الهاتف كاملة</p>
<h6 id="link6" dir="rtl">بطارية الهاتف</h6>
<p>فقرة معلومات بطارية الهاتف كاملة</p>
</div>

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

١- الألوان

أستبدل ما يلي بما يناسبك في أكواد Css

اللون الأزرق

#0A3A83

اللون الأحمر

#CE0104

لون النصوص

#fff

لون الحدود

#ccc

لون عند الضغط على العناصر

#02A9DD

لون الزر

background: none;

أستبدل كلمة none بكود اللون الذي يناسبك

لون حدود الزر

border: 2px solid red;

أستبدل كلمة red بكود اللون الذي يناسبك

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

٢- الصور أو الأيقونات

جميع الروابط التي تحمل كلمة top4top يمكن إستبدالها برابط صور مباشر كما يناسبك ويجب أن تكون بصيغة Png يعني بدون خلفية.

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

لأي إستفسارات أو تعديل لنموذج الإضافة أترك تعليقك.

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

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

الصفحات

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

مقدمة

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

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

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

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

تعليقات

إرسال تعليق