-->
44
عذرا,الصفحة التي تبحث عنها غير متوفرة.

الثلاثاء، 29 مارس 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 , اذا كان بالفعل مواجد بمدونتك فقم بحذفه.
البرتقالي : وهو لجعل القائمة ثابته عند النزول .

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

إرسال تعليق