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

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

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

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

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

إرسال تعليق

ملاحظة للجميع
  • يمكنك وضع تعليق بصورة أو فيديو YouTube أو Vimeo.
  • المرجو ترك تعليق يتعلق بنفس هذا الموضوع.
  • لا يجوز الترويج للسلع أو البيع.
  • لا تقم بتضمين روابط مشبوهة في التعليقات.
  • سيتم حذف التعليقات ذات الروابط السبام تلقائيًا
  • *علق بشكل جيد ، شخصيتك تنعكس عند التعليق.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel