تكبير و تصغير الخط لمدونات بلوجر

02‏/09‏/2010





اليوم لدينا موضوع بسيط سوف يعطي ميزة لنصوص مواضيعك

بحيت سوف يتيح للزائر تكبير أو تصغير الخط..

مثال (Demo)




أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم ثم تصميم   " تحرير HTML "
 
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. 

ثالثا : ضع علامة في خانة توسيع القوالب .
ابحث عن  هذا الوسم


</head>

و نضع قبله تماما هدا الكود 






<script type='text/javascript'>

//<![CDATA[

function Increasefontsize(){

var obj = document.getElementById("textFonte");

if (obj.style.fontSize==""){obj.style.fontSize="12px"};

if (obj.style.fontSize=="10px"){obj.style.fontSize = "12px";}

else if (obj.style.fontSize=="12px"){obj.style.fontSize = "15px";}

else if (obj.style.fontSize=="15px"){obj.style.fontSize = "17px";}

else if (obj.style.fontSize=="17px"){obj.style.fontSize = "19px";}

else if (obj.style.fontSize=="19px"){obj.style.fontSize = "21px";}

}

function Reducethefontsize(){

var obj = document.getElementById("textFonte");

if (obj.style.fontSize==""){obj.style.fontSize="12px"};

if (obj.style.fontSize=="21px"){obj.style.fontSize = "19px";}

else if (obj.style.fontSize=="19px"){obj.style.fontSize = "17px";}

else if (obj.style.fontSize=="17px"){obj.style.fontSize = "15px";}

else if (obj.style.fontSize=="15px"){obj.style.fontSize = "12px";}

else if (obj.style.fontSize=="12px"){obj.style.fontSize = "10px";}

}

//]]>

</script>


 الآن نأتي للجزء الأهم 

 

و هو البحث عن هدا الكود 






<div class='post-header-line-1'/>


</div>


و نعوضه بالكود التالي






   <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == "item"'>

<a alt='تكبير الخط' href='javascript:Increasefontsize()'><img src='http://a.imageshack.us/img696/5952/zoominicon.jpg'/></a>

<a alt='تصغير الخط' href='javascript:Reducethefontsize()'><img src='http://a.imageshack.us/img827/7117/zoomouticon.jpg'/></a></b:if>

</div>


ثم البحث عن هدا الكود




  <div class='post-body entry-content'>

      <data:post.body/>

      <div style='clear: both;'/> <!-- clear for photos floats -->

</div>




و تعويضه بالكود التالي




<div class='post-body entry-content'>

<div id='textFonte'>

<data:post.body/>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

</div>

هدا كل شيء اتمنى لك الاستفادة