إضافة أداة تكبير وتصغير الخط في مدونات بلوجر

إضافة أداة تكبير وتصغير الخط في مدونات بلوجر

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

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

هذه الأداة موجودة في الكثير من المواقع العالمية الشهيرة مثل موقع RT عربي 

شرح إضافة أداة تكبير وتصغير الخط في مدونات بلوجر بالفيديو

خطوات إضافة أداة تكبير وتصغير الخط في مدونات بلوجر

الخطوة الأولى من لوحة تحكم المدونة أنتقل إلى المظهر أنقر على الرمز البرتقالي بجانب زر التخصيص ثم انقر على تعديل HTML 

الآن أبحث عن الرمز

 ]]></b:skin>

ثم اضف الكود التالي فوقه مباشرةً

.rfopit{margin-top:10px;text-align:right}
#large{font-size:20px}
#reset{font-size:18px}
#small{font-size:16px}

الخطوة الثانية أبحث عن الرمز 

</head>

وأضف الكود التالي فوقه مباشرةً

<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('.post-body');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.1;
}
else if (this.id == 'small'){
finalNum /=1.1;
}
else if (this.id == 'reset'){
finalNum =16;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

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

<data:post.body/>

لعرض الأداة في اعلى المواضيع أو اسفله لعرضها اسفل المقالات إذا لم يعمل جرب على كود آخر مثل

<data:post.body/>

لأنك ستجد أكثر من واحد مثله ثم ضع هذا الكود

<div class='rfopit'>
<input id='large' title='تكبير الخط' type='button' value='A+'/>
<input id='reset' title='افتراضي' type='button' value='A'/>
<input id='small' title='تصغير الخط' type='button' value='A-'/>
</div>