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

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

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

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

المعاينة هي التي ترونها الآن أسفل صورة الموضوع

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

<style>
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}
</style>

أضف كود 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 فوق وسم </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 بأحد الأوسمة التي عرضناها اعلاه و سوف يشتغل.

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