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

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

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

إذن لننتقل للشرح :

إذهب للوحة تحكم بلوجر > قالب > تحرير HTML : 

ابحث عن </head> :

أضف فوقه أولا كود أيقونات font awesome

<link href='https://dl.dropboxusercontent.com/u/280199022/icons.css' id='fontawesome' rel='stylesheet' type='text/css'/>

ثم أضف فوقه الكود التالي :

<script type='text/javascript'>
$(document).ready(function(){
  var section = new Array(&#39;.body-post&#39;);  
  section = section.join(&#39;,&#39;);
  
  // Reset Font Size
  var originalFontSize = $(section).css(&#39;font-size&#39;);
  $(&quot;.resetFont&quot;).click(function(){
    $(section).css(&#39;font-size&#39;, originalFontSize);  
  });

  // Increase Font Size
  $(&quot;.increaseFont&quot;).click(function(){
    var currentFontSize = $(section).css(&#39;font-size&#39;);
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css(&#39;font-size&#39;, newFontSize);
    return false;
  });

  // Decrease Font Size
  $(&quot;.decreaseFont&quot;).click(function(){
    var currentFontSize = $(section).css(&#39;font-size&#39;);
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css(&#39;font-size&#39;, newFontSize);
    return false;
  });
});
</script>

في حالة عدم عمل الكود غير body-post. بـ post-body.

إبحث عن */]]></b:skin> :

أضف فوقه الكود التالي :

.plus .minus .repeat {
position:relative;
}

.plus:before,.minus:before,.repeat:before {
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
color:#0099CC;
font-size:17px;
margin-left:.5em;
right:5px;
float:left;
}

.plus:before {
content:"\f055"
}


.minus:before {
content:"\f056"
}

.repeat:before {
content:"\f01e"
}

.fontresize p {
margin-right: 6px;
float: right;
}
.fontresize {
width: 154px;
float: left;
border: 1px solid #EDEDED;
margin-left: -21px;}

الأن ابحث عن <data:post.body/> ستجد أكثر من واحد إختر الثالث:

أضف الكود التالي بعده :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fontresize'>
  <p>حجم الخط :</p>
<a class='increaseFont'><span class='plus'/></a><a class='decreaseFont'><span class='minus'/></a><a class='resetFont'><span class='repeat'/></a>
  </div>
  </b:if>

الأن أحفظ القالب.

إلى هنا إنتهى الدرس لا تنسو مشاركة الموضوع ومشاركتنا برأيكم عبر التعليقات.

مواضيع مفيدة :

● [درس] تأكد من أن وظائف هاتف الأندرويد تعمل قبل شراءه

● شرح مفصل للـ hreflang ودوره في الإستهداف الدولي

By glok

Similiar tagsbloggerinternet