المرجوا الإنتقال إلى المدونة الجديدة 'مطورون' عبر الرابط التالي :mtawroon.com

728x90 AdSpace

السبت، 28 فبراير، 2015

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


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

السلام عليكم ورحمة الله وبركاته أهلا بكم من جديد على مدونة برو أيوب درس اليوم الذي هو عبارة عن إضافة لقوالب البلوجر وبالضبط إضافة أداة التحكم في حجم خط المواضيع داخل بلوجر هذه الإضافة المميزة ظهرت أولا في مدونات ووردبريس لتنتقل إلى بلوجر حيث ستمكن الزائر من التحكم في الخط حسب الحجم الذي يريد كما ستزيد من جمالية الموقع.
إذن لننتقل للشرح :
إذهب للوحة تحكم بلوجر > قالب > تحرير 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>
الأن أحفظ القالب.
إلى هنا إنتهى الدرس لا تنسو مشاركة الموضوع ومشاركتنا برأيكم عبر التعليقات.
مواضيع مفيدة :
تم النشر في :

أيوب بولعيش مدون ومصمم وخبير في السيو مغربي من مواليد 1996 أعشق كل ما يتعلق بالويب والحاسوب

هل أعجبك الموضوع؟ شاركه من فضلك

شاركه

التالي
هذا هو أخر موضوع.
رسالة أقدم

4 التعليقات:

  1. الاضافة لا تعمل انظر اخي http://th3geekweb3.blogspot.com/

    ردحذف
  2. شكرا لك
    موقع تحميل ألعاب الكمبيوتر
    http://recepcetiner.blogspot.com/

    ردحذف
  3. شكرا بالله ادخل لمدونتي www.th3gladiator.blogspot.com

    ردحذف

يسرنا أن تعلق وتشاركنا برأيك وأفكارك لكننا لا نقبل بأي تعليق يمس الشريعة الإسلامية أو يشخصية ما , بالنسبة لمن يرغب في وضع كود في التعليق فلا بدة من تحويله عبر أداة تحويل الأكواد , وإذا كنت تريد إضافة ابتسامة في تعليقك فما عليك سوى تمرير الماوس عليها لكي يظهر الكود الخاص بها وشكرا
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

Item Reviewed: إضافة أداة التحكم في حجم خط المواضيع لبلوجر Rating: 5 Reviewed By: Ayoub Boulaich
عنوان نصي

هذا القالب عبارة عن قالب عربي بمميزات القوالب الأجنبية الإحترافية فهو مصمم ليتوافق مع كل الأجهزة

عنوان نصي

هذا القالب عبارة عن قالب عربي بمميزات القوالب الأجنبية الإحترافية فهو مصمم ليتوافق مع كل الأجهزة

عنوان نصي

هذا القالب عبارة عن قالب عربي بمميزات القوالب الأجنبية الإحترافية فهو مصمم ليتوافق مع كل الأجهزة

عنوان نصي

هذا القالب عبارة عن قالب عربي بمميزات القوالب الأجنبية الإحترافية فهو مصمم ليتوافق مع كل الأجهزة