25‏/09‏/2015

2015-09-25T14:11:00+03:00
25‏/09‏/2015

[ جافا سكربت ] زيادة حجم النص او انقاصه داخل 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 ...

الساعه : 2015-09-25T14:11:00+03:00
تاريخ : 25‏/09‏/2015
التعليقات : 4
    انشرها :
تاق :

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

  1. شكرا لك على استجابك لطلبى وشكرا جزيل لك ممكن درس لعمل سكربت الزيارات زى اللى فى قالبك الجديد

    ردحذف
  2. قالب جميل بس ازاى بتخلى عندما ادخل التدوينة الخلفية تتحول الى صورة التدوينة

    ردحذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ولا ننشر تعليق يخص مدونات تخالف الشريعة الإسلامية , اما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولا بمحول الأكواد , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار صندوق التعليقات.

يمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود :
ت1 ت2 ت3 ت4 ت5 ت6 ت7 ت8 ت9 ج1 ج2 ج3 ج4 ج5 ج6 ج7 ج8 ج9 د1 د2

قالب حلول بلوجر النسخة الثالثه

قالب حلول بلوجر النسخة الثالثه متاح للتحميل , قالب يتميز بالاحترافيه والخفة والسرعه اضافة الى الارشقة الممتازة.

أقرأ الموضوع

الاشتراك في القائمة البريدية

هنا تستطيع الإشتراك في قائمتنا البريدية ضع إيملك بالأسفل وأضغط إشتراك ولا تنسي تأكيد إشتراكك من خلال بريدك الإلكتروني

الاسم

بريد إلكتروني

رسالة