الغرض من هذه الأزرار هو توفير طريقة أسهل للزائرين ذوي الرؤية الضعيفة لضبط حجم الخط دون تغييره من تخطيط موقعك الويب.
ببساطة باستخدام 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
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS