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

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

    

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

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

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

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

اولا:css

اضف كود css فوق وسم </head>

button.tipr-zome{text-align:center;float:right;background:#3560ab;border-radius:50px;color:#FFFFFF;border:1px solid transparent;cursor:pointer;padding:0;width:35px;height:35px;margin:0.2em;text-decoration:none;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-shadow:0 2px 10px rgba(0,0,0,0.28);transition:all 0.4s cubic-bezier(0.4,0,0.2,1) 0.3s}
#postedit-font-btn{position:relative;display:inline-block}

ثانيا:html

أضف كود html أسفل الكود المسؤول عن إظهار العنوان او يمكنك اضافته فوق وسم <data:post.body/>

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

ثالثا:Javascript

أضف كود Javascript فوق وسم </body> هو المسؤول عن تغيير حجم الخط

<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 سوف تجد وسم post-body هو بمتابة معرف منطقة المواضيع الخاصة بقالبك يمكن ان يكون body او post او amp-content في قوالب سيو جرب المرة الاولى ان لم يشتغل غير post-body بأحد الأوسمة التي عرضناها اعلاه و سوف يشتغل.

الى هنا نكون قد انتهينا من شرح اليوم نلتقي في درس قادم انشاءالله قد طلبه مني العديد من المتابعين و هو حصري سوف يعجب الكثيرين الى اللقاء.

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا