Please Add Preloader

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

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

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

هذه الأداة موجودة في الكثير من المواقع العالمية الشهيرة مثل موقع 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(){

$(&#39;input&#39;).click(function(){

var ourText = $(&#39;.post-body&#39;);

var currFontSize = ourText.css(&#39;fontSize&#39;);

var finalNum = parseFloat(currFontSize, 10);

var stringEnding = currFontSize.slice(-2);

if(this.id == &#39;large&#39;) {

finalNum *= 1.1;

}

else if (this.id == &#39;small&#39;){

finalNum /=1.1;

}

else if (this.id == &#39;reset&#39;){

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=’أ+’/>

<input id=’reset’ title=’افتراضي’ type=’button’ value=’أ’/>

<input id=’small’ title=’تصغير الخط’ type=’button’ value=’أ-‘/>

</div>

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *