إضافة مميزة تسمح للزوار بتكبير وتصغير حجم الخط في مدونتك




السلام عليكم ورحمة الله وبركاته في هذا الدرس سوف نتعلم كيفية إضافة أداة مميزة جدا ألا وهي أداة تكبير وتصغير حجم الخط في المدونة فأثناء تصفحي لبعض المدونات وجدت بعض الزوار يطالبون أصحاب المدونات بتكبير حجم الخط ووجدت اخرين يطالبون بالعكس و لذلك اثرت أن أقدم تدوينة بها شرح مفصل عن كيفية إضافة هذه الاداة-لمعاينة هذه الأداة من هنا ستجد علي يسار
التدوينة أيقونات باللون الأخضر والأحمر منها تستطيع التعديل علي حجم الخط -ولاضافتها اتبع تلك الخطوات:

1-الذهاب الي لوحة تحكم مدونتك من هنا
2-ثم نذهب الي قالب ثم تحرير html ثم نضع علامة صح لتوسيع الادوات
3- نبحث عن هذا الوسم </head>
4-نضع هذا الكود فوقه مباشرة  
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script>
$(document).ready(function(){

//ID, class and tag element that font size is adjustable in this array
//Put in html or body if you want the font of the entire page adjustable
var section = new Array(&#39;span&#39;,&#39;.section2&#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>
5- ثم نبحث عن هذا الكود <div class='post-header-line-1'/>
6- ثم نضع بعده مباشرةهذا الكود 
<b:if cond='data:blog.pageType == "item"'>
<table border='0' style='float:left; margin-left:5px;'><tr><td><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm1GmEgClk_dKZ0TXrKYzOuXAZDrl6Jnz8TSmnUDEeQmYJUcpWt9a_AE8e5j5xqls3tQqgGrGISP9fk_iy2H_bMsDOhrLiQpRxOO3ZGzGRT1pp7AnSbe0257IiuhtymMOZ9QRPaieeuw/s1600/font-size-blogger-gadget.png'/> | <a class='increaseFont' style='cursor: pointer; cursor: hand;' title='Larger Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiU_FLJ5x5lvh6oIekFRymxmyZs3ET8Dv8xfCRnp9TXNKw61WorDIXCzP5uqu69rsJFuLewbgczWNFvVy2BedQfCVjNQPcJQ9oStnXyS1XAj4rCxxvM3Ie1RZVy4Sthpp7O_W8MJQLFA/s1600/bigger-font - Copy.png'/></a>
<a class='decreaseFont' style='cursor: pointer; cursor: hand;' title='Smaller Text'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSv2HoXoD7Fh_EOLv5WS76CT_XmsxgFRs1cpgvmz9XXjOYSYv86MWVzpSPMZFelIMikS_Q1jLDjV8XcxrLhyyng_hn_Jq6cLeTUA3nSaDILmkCfMuBqobgQ_D6bo7MMxluJbhfwZWDCQ/s1600/smaller-font.png' style='cursor: hand;'/></a>
<a class='resetFont' style='cursor: pointer; cursor: hand;' title='Reset Text Size'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdv-uk2SgbEn1f82Cn7vaFVEoCfsFVvSeBvrBl5XzFykrXvmvM3fEM31lwGNMdmHosTVj-V55O1b-SIIqBH6KKwbmW2iuO23NHgMAsESsav7S-NIvBjMHtob5MyLqtFkoJ8RdJlae_g/s1600/reset-font.png' style='cursor: hand;'/></a></td></tr></table>
</b:if>
7-نبحث عن هذا الكود <data:post.body/>
8- ثم نقوك بإستبداله بهذا الكود
<span><data:post.body/></span>
وبذلك تكون انتهينا من إضافة الاداة والسلام عليكم ورحمة الله وبركاته.

تعليقات
0 تعليقات

0 التعليقات:

إرسال تعليق