[ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML

اضافة تكبير وتصغير النص

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته.

[ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML

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

صورة : 

اضافة تكبير وتصغير النص

معاينه

التركيب : 

• اذا كنت تمتلك مدونة بلوجر  :

فقط ابحث عن او جزء من  <h2 class='post-title entry-title'> او <h3 class='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 , اذا كان بالفعل مواجد بمدونتك فقم بحذفه.

البرتقالي : وهو لجعل القائمة ثابته عند النزول .

• اما اذا كنت تمتلك موقع والصفحة التي تريد تركيب الكود بها هي صفحة HTML فتبع التعديلات التاليه  :

  <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>
<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 , اذا كان بالفعل مواجد بمدونتك فقم بحذفه.

الازرق : وهو اسم الكلاس الذي يكون النص داخله مثل : 

<div class='post-body'>نص</div>

البرتقالي : وهو لجعل القائمة ثابته عند النزول .

اضافات بلوجر احترافيه , دروس جافا سكربت , قوالب بلوجر احترافيه , سلايد شو , سيو , زيادة زيارات المدونة , دروس بلوجر

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

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

معلومات عن التدوينة

صورة التدوينة

عنوان التدوينة :[ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML

ملخص التدوينة:

اضافة تكبير وتصغير النص بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته. [ جافا سكربت ] زيادة حجم النص او انقاصه داخل HTML ...

goust

الساعه : 2015-09-25T14:11:00+03:00

تاريخ : 25‏/09‏/2015

من : المملكة العربيه السعوديه

التعليقات : 4

انشرها :

تاق :