الأربعاء، 30 مارس 2016

زيادة حجم النص او انقاصه داخل صفحة التدوينات


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

طريقة التركيب:
تحرير القالب وابحث عن   post-title entry-title
ستجد منه اثنين تقريباَ , الصق الكود اسفل الاول , ان لم ينفع امسحه والصقه اسفل الثاني .
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
  <div class='pz-p'>
  <div class='pfButton' id='ff-0s'>
<a class='increaseFont' href='#'>A+</a>
<a class='decreaseFont' href='#'>A-</a>
    <div id='ff-o9'>
أعدادات النص
</div>
<style>
.pfButton {
    text-shadow: 1px 1px #fff;
    margin: 1px 6px 5px 0;
    display: inline-block;
    background: rgba(238, 238, 238, 0.5);
    border: 1px solid rgba(221, 221, 221, 0.5);
    padding: 5px 5px;
    position: relative;
    font: 11px tahoma,arial;
    height: auto;
}
a.increaseFont {
background: #E4E4E4;
border-radius: 3px;
padding: 2px 2px 4px 4px;
font: 11px tahoma,arial;
}
a.decreaseFont {
background: #E4E4E4;
border-radius: 3px;
padding: 2px 4px 4px 4px;
font: 11px tahoma,arial;
}
div#ff-o9 {
    direction: rtl;
    display: inline-block;
    font: 11px tahoma,arial;
    color: #666;
    position: relative;
    top: -1px;
}
div#ff-0s {
direction: ltr;
}
div#ff-o9:after {
content: &quot;\f013&quot;;
font: 14px fontawesome;
top: 2px;
right: 3px;
color: #666;
position: relative;
margin-left: 5px;
}
  .pfButton a {
    opacity: .9;
    padding: 2px;
    color: #004F66;
    text-shadow: 1px 1px #fff;
    font: 11px tahoma,arial;text-decoration: none;
}
  div#ff-o9 {
    direction: rtl;
    display: inline-block;
    font-size: 70%;
    color: #666;
}
  div#ff-o9:after {
    content: "\f013";
    font: 14px fontawesome;
    top: 2px;
    right: 3px;
    color: #666;
    position: relative;
    margin-left: 5px;
}
</style>
    </div></div>
</b:if>



<script>
//<![CDATA[
$(document).ready(function(){
 // Increase Font Size
 $(".increaseFont").click(function(){
  var currentFontSize = $('.post-body').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*1.2;
 $('.post-body').css('font-size', newFontSize);
 return false;
 });
 // Decrease Font Size
 $(".decreaseFont").click(function(){
  var currentFontSize = $('.post-body').css('font-size');
 var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*0.8;
 $('.post-body').css('font-size', newFontSize);
 return false;
 });
});
var menu = $('#ff-0s'), pos = menu.offset(); $(window).scroll(function(){
     if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('pfButton')){
         menu.fadeOut('fast', function(){
             $(this).removeClass('pfButton').addClass('menufixed').fadeIn('fast');
         });    
}
else if($(this).scrollTop() <= pos.top && menu.hasClass('menufixed')){
         menu.fadeOut('fast', function(){
             $(this).removeClass('menufixed').addClass('pfButton').fadeIn('fast');
         });
     } });


//]]>
</script>

الاصفر : كود مكتبة الجيكوري , اذا كان بالفعل متواجد بمدونتك فقم بحذفه.
الاخضر : وهو الخاص بأيقونات FONTAWESOME , اذا كان بالفعل مواجد بمدونتك فقم بحذفه.
البرتقالي : وهو لجعل القائمة ثابته عند النزول .

ليست هناك تعليقات:

إرسال تعليق

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي.

جميع الحقوق محفوظة ©2015-2016 أكاديمية العرب لتعليم الكمبيوتر

برمجة وتطوير : تامر البرش Privacy-Policy | سياسة الخصوصية |