كيف أضيف مغيِّر قياس الخطوط إلى مدونتي أو موقعي بكل بساطة؟

السلام عليكم

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

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

و كما تمت الإشارة فإن من الضروري إدماج jQuery JavaScript framework سلفا لعمل الطريقة التي سؤوضحها لكم.

إذن إن لم يكن jQuery JavaScript framework مدمج سلفا في تومبلايت، نبحث عن

<head>

و تحته نضيف:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

الان نضيف التالي مع أكواد الجافاسكريبت

<script type='text/javascript'>
$(document).ready(function(){var e=new Array(".post-body *");e=e.join(",");var t=$(e).css("font-size");$(".resetFont").click(function(){$(e).css("font-size",t);return false});$(".increaseFont").click(function(){var t=$(e).css("font-size");var n=parseFloat(t,10);var r=n*1.2;$(e).css("font-size",r);return false});$(".decreaseFont").click(function(){var t=$(e).css("font-size");var n=parseFloat(t,10);var r=n*.8;$(e).css("font-size",r);return false})})
</script>

تنبيه:
ما هو مكتوب بالأحمر هو العنصر element الذي سيخضع لتغير قياس الخط.
كتبت ٭ بعد .post-body
يعني كل العناصر الذي توجد داخل class:

.post-body

سيتم تغيير قياس خطها.
لتحديد المزيد من العناصر، يمكنكم بكل بساطة إضافته بعد فاصلة، مثلا

Array(".post-body *","span",".text")

يجب التغيير لما يناسب مدونتكم أو موقعكم.

ثم نبحث عن (أو أي مكان تريد أن تظهر فيه أزرار التغيير)

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>

و نضيف فوقها (كود HTML الذي سيظهر لنا الأزرار)

<b:if cond='data:blog.pageType == "item"'>
<div id='fontresizer'>قياس الخط <a class='increaseFont' title='تكبير'>∧</a><a class='decreaseFont' title='تصغير'>∨</a><a href="#" class='resetFont' title='الحالة الأصلية'>—</a></div>
</b:if>

ثم نضيف ما يلي مع أكواد CSS (الكود الذي سيقوم بتنسيق الأزرار)

#fontresizer{
text-align: left;
width: 100%;
direction: rtl;
color: #01B1D3;
}

#fontresizer a{
margin-right: 8px;
font-weight: bold;
text-decoration: none;
text-align: center;
height: 14px;
width: 14px;
display: inline-block;
}
#fontresizer a:hover{cursor:pointer; color:orangered;}