إضافة أزرار جانبية للتحكم في حجم خط مواضيع على المدونة

اقرأ أولا

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

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

ببساطة باستخدام jQuery و HTML يمكنك إضافة خيار لزيادة / تقليل حجم الخط على بلوجر. يجب عليك تغليف المحتوى في div باستخدام postedit-font-btn للفئة واستهداف ذلك div لتغيير حجم الخط باستخدام jQuery استخدم هذه الطريقة ادناه.

معاينة

طريقة تركيب الاضافة

ملاحظة : لا تنسى أخذ نسخة احتياطية للقالب

1. قم بتسجيل حسابك ثم إذهب إلى منصة البلوجرblogger
2. إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML 
3. إضغط في وسط محرر الأكواد  ثم   F  + Ctrl لإضهار مربع البحث
4. بإستعمال  الزر  C  + Ctrl  للنسخ و  V  + Ctrl  للصق قم بوضع الأكواد في المكان المناسب

قم بالبحث عن هذا الوسم

]]></b:skin> اضغط للتحديد

فوقه أي قبله قم بوضعcss.كود

postedit {width: 130px;z-index: 10;left: 453px;float: left;}
postedit.fixed {position: fixed;}

قم بالبحث عن هذا الوسم

</head> اضغط للتحديد

فوقه أي قبله قم بوضعcss.كود

<style>
a.button{text-align:center;float:right;background:#0045a6;border-radius:5px;color:#FFFFFF;border:1px solid transparent;cursor:pointer;width:35px;margin:0.2em;text-decoration:none;display:-webkit-flex;display:-ms-flexbox;display:flex;justify-content:center;transition:all 0.4s cubic-bezier(0.4,0,0.2,1) 0.3s}
#postedit-font-btn {position: absolute;display:grid;padding: 4px;border-radius: 4px;float: left;left: 52em;max-width: min-content;line-height: normal;z-index: 2;padding-right: 6px;border: 1px solid #9c9a9a;margin: -7px;}
@media only screen and (max-width: 1024px) {    
#postedit-font-btn {display:none}}
</style>

الخطوة الثانية

قم بالبحث عن هذا الوسم

</body> اضغط للتحديد

فوقه أي قبله قم بوضع js.كود

<script type='text/javascript'>
//<![CDATA[
function changeFontSize(c) {
$affectedElements.each(function() {
var e = $(this);
e.css("font-size", parseInt(e.css("font-size")) + c)})}
var $affectedElements = $(".post-body");
$affectedElements.each(function() {
var e = $(this);
e.data("orig-size", e.css("font-size"))}),
$("#btn-increase").click(function() {
changeFontSize(1)}),
$("#btn-decrease").click(function() {
changeFontSize(-1)}),
$("#btn-orig").click(function() {
$affectedElements.each(function() {
var e = $(this);
e.css("font-size", e.data("orig-size"))})}),
$("#btn-increase,#btn-decrease").click(function() {
$("#btn-orig").removeClass("active")}),
$("#btn-orig").click(function() {
$("#btn-increase,#btn-decrease").removeClass("active"), $(this).addClass("active")}),
$("#btn-increase").click(function() {
$(this).addClass("active"), $("#btn-decrease").removeClass("active")}),
$("#btn-decrease").click(function() {
$(this).addClass("active"), $("#btn-increase").removeClass("active")});
//]]>
</script>

 ملاحظة : لتكبير الخط عند الضغط على الزر عليك يتغيير عدد الكود من Javascript 1

changeFontSize(1)}), تغيير سرعة تكبير الخط 1

changeFontSize(-1)}), تغيير سرعة تصغيير الخط -1

الكود الثاني خاص يتنزيل الأزرار الى آخر نص بالموضوع ثم تختفي

اضف كود Javascript 2

اضغط للتحديد

تحت كود Javascript 1 مباشرة

<script type='text/javascript'>
//<![CDATA[
$stick = $('postedit');
$foot = $('footer');
margin = 66;
offtop = $stick.offset().top - margin;
offbtm = $foot.offset().top - ( margin*2 + $stick.height() );

$(window).scroll(function () {
	scrtop = $(window).scrollTop();
  if (scrtop > offtop && $stick.hasClass('#postedit-font-btn')) {
    $stick.removeClass('#postedit-font-btn').addClass('fixed').css('top', margin);
  }
  if (offtop > scrtop && $stick.hasClass('fixed')) {
    $stick.removeClass('fixed').addClass('#postedit-font-btn').css('top', 'auto');
  }
  if (scrtop > offbtm && $stick.hasClass('fixed')) {
    $stick.removeClass('fixed').addClass('bottom').css('top', offbtm+margin);
  }
  if (offbtm > scrtop && $stick.hasClass('bottom')) {
    $stick.removeClass('bottom').addClass('fixed').css('top', margin);
  }
});
//]]>
</script>

الخطوة الثالثة

قم بالبحث عن هذا الوسم

<div class='post-meta'> اضغط للتحديد

في نهاية كود post-meta قم بوضع CODE.كود

<postedit class='#postedit-font-btn'>
<div id='postedit-font-btn'>
<div class='tooltip'>تكبير الخط</div>
<a class='button' id='btn-decrease' title='تصغير الخط'>A<span>-</span></a>
<a class='button' id='btn-orig' title='خط إفتراضي'>A</a>
<a class='button' id='btn-increase' title='تكبير الخط'>A<span>+</span></a>
</div>
</postedit>

 ملاحظة : وضعت كود الأزرار تحت مشاركة الموضوع post-share

ربما تجد صعوبة في اضافة الكود الأخير صف لي المشكلة في تعليق

بهذا ينتهي الدرس، أي إستفسار أترك تعليق في الأسفل أو إتصل بنا وإنشاء الله سنكون في عونكم.