[altaledi]

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

وبعد .

فبناء على طلب من الأخ / محمد سالم بشرح عمل زر لتكبير وتصغير الخط . وقد أعطاني هذا الرابط لتسهيل العملية .

طبعاً قمت بتركيب الأكواد وتجهيزيها وماعليكم سوى الاستبدال ورفع الملفات المطلوبة .


التصغير والتكبير كما في الصورة .





مثال مباشر .



طريقة التركيب ؟


أولاً : نقوم برفع ملف fluidtextresizer.js إلى مجلد scripts


للتحميل

كلك يمين ثم حفظ بأسم .

ثانياً : نقوم برفع الصورتين إلى مجلد iimages في الأستايل الذي سيتم عليه التعديل .

ثالثاً : قم بإستبدال القالب التالي بقالب shownews

<!-- INCLUDE BLOCK : header -->
<!-- سكربت تكبير وتصغير الخط -->
<style type="text/css">

.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}

.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}

.controlstyle a.selectedcontrol img{ /*selected control's image*/
border-bottom:4px solid darkred;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="scripts/fluidtextresizer.js">

/***********************************************
* Fluid Text Resizer- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type="text/javascript">

var mytextsizer=new fluidtextresizer({
	controlsdiv: "sizecontroldiv", //id of special div containing your resize controls. Enter "" if not defined
	targets: ["div#altaledi"], //target elements to resize text within: ["selector1", "selector2", etc]
	levels: 3, //number of levels users can magnify (or shrink) text
	persist: "session", //enter "session" or "none"
	animate: 200 //animation duration of text resize. Enter 0 to disable
})

</script>
<!-- سكربت تصغير وتكبير الخط -->
<script type="text/javascript" language="javascript" src="{script_url}/scripts/show.js"></script>
<!-- start main table -->
<table width="100%">
<tr>
<td valign="top" width="{style_menuwidth}">
<!-- INCLUDE BLOCK : menucontent -->
</td>
<td valign="top">
<div id="contents" style='height: 100%;'>	
<table align="{lang_left}">
<tr>
<td align="{lang_left}" height="16"><img alt="" src="images/subs/se.gif" width="12" height="12" />
<!-- START BLOCK : rewriteon -->
<a href="news-action-listnews.htm">{phrase_news}</a>
<!-- END BLOCK : rewriteon -->
<!-- START BLOCK : rewriteoff -->
<a href="news.php?action=listnews">{phrase_news}</a>
<!-- END BLOCK : rewriteoff -->
<br /></td>
</tr><tr><td align="{lang_left}" height="16">
 <!-- START BLOCK : rewriteonnav -->
{output} <a href="news-action-listnewsm-id-{catid}.htm"> {catname}</a></td></tr><tr><td align="{lang_left}" height="16">
 <!-- END BLOCK : rewriteonnav -->
 <!-- START BLOCK : rewriteoffnav -->
{output} <a href="news.php?action=listnewsm&id={catid}"> {catname}</a></td></tr><tr><td align="{lang_left}" height="16">
 <!-- END BLOCK : rewriteoffnav -->
<!-- START BLOCK : rewriteoncurrcat -->
{output} <a href="news-action-listnewsm-id-{catid}.htm"> {catname}</a><br />
{outputcaption}   {caption}
 <!-- END BLOCK : rewriteoncurrcat -->
<!-- START BLOCK : rewriteoffcurrcat -->
{output} <a href="news.php?action=listnewsm&id={catid}"> {catname}</a><br />
{outputcaption}   {caption}
 <!-- END BLOCK : rewriteoffcurrcat -->
 <br /></td>
</tr>
</table>

</div>
<table width="100%">
<tr>
<td valign="top" width="{style_contwidth}">
<!-- START BLOCK : greet -->
<div class="module-title">{phrase_greeting_word}</div>
<div id="contents">{greeting}<p align="{lang_right}">{sender_name}</p>
</div>
<!-- END BLOCK : greet -->
<!-- START BLOCK : news -->
<div class="module-title">{caption}</div>
<div id="contents" class="justify">
<span style='float:{lang_left};margin-{lang_right}:3px;'>{picture}{picdesc}</span>
<div class="largfont"><b>{secondcaption}</b></div>
<!-- تكبير وتصغيرالخط -->
<div id="sizecontroldiv" class="controlstyle" align="left">
حجم الخط: <a href="#smaller"><img src="{img_dir}/fontminus.png" /></a>  <a href="#bigger"><img src="{img_dir}/fontplus.png" /></a><br /><br />
</div>
<!-- تكبير وتصغير الخط -->

<div class="time">{date}</div>
<span class="alert">{source}</span>

<span class="largfont"><div id="altaledi">{text}</div></span>

<p>
<div class="smallfont"><img src="{img_dir}/buttons/comments.gif" alt="{phrase_comments}" title="{phrase_comments}" />  {comnum}   |   <img src="{img_dir}/buttons/emailed.gif" alt="{phrase_emailed}" title="{phrase_emailed}" />  {greet}   |   <img src="{img_dir}/buttons/views.gif" alt="{phrase_views}" title="{phrase_views}" />  {views}</div>
</p>
</div>
<br />
<div class="module-title">{phrase_content_services}</div>
<div id="contents">
<ul class="postbar clearfix">
<li style="padding: 0pt 3px;float:{lang_left};">{phrase_tools} : </li>
<li style="padding: 0pt 3px;float:{lang_left};cursor:{cursor};">{allowcomnt}</li>
<li style="padding: 0pt 3px;float:{lang_left};cursor:{cursor};">[<a rel="nofollow" onclick="DIM_addinline('0','greet.php?action=pregreet&id={id}&division=news'); return false;">{phrase_send_to_friend}</a>]</li>
<li style="padding: 0pt 3px;float:{lang_left};cursor:{cursor};">[<a rel="nofollow" onclick="DIM_action('news','print','','{id}');">{phrase_print}</a>]</li>
<li style="padding: 0pt 3px;float:{lang_left};cursor:{cursor};">[<a rel="nofollow" onclick="DIM_action('news','save','','{id}');">{phrase_saveas}</a>]</li>
<li style="padding: 0pt 3px;float:{lang_left};cursor:{cursor};">[<a rel="nofollow" onclick="DIM_action('pdf','save','newsm','{id}');">{phrase_pdf}</a>]</li>
</ul>
<!-- END BLOCK : news -->
<!-- START BLOCK : bookmarksites -->
<div>
<ul class="postbar clearfix">
<li style="padding: 0pt 3px;float:{lang_left};">{phrase_bookmarks} : </li>
<!-- START BLOCK : bookmarksite -->
<li style="padding: 0pt 3px;float:{lang_left};">
<a href="{bmurl}" target="_blank" title="{submit_content_to}" rel="nofollow"><img class="bockmark-hovers" src="{script_url}/images/bookmark/{iconpath}" alt="{submit_content_to}" /></a>
</li>
<!-- END BLOCK : bookmarksite -->
</ul>
</div>
<!-- END BLOCK : bookmarksites -->
</div>
<br />
<div id="replaceme0" style="align:center;position:relative; display:none"></div>
<script type="text/javascript" language="javascript">
var h,replacemearr = [{replacemearr}];
{commentonload}
</script>
<br />
<!-- START BLOCK : belowbanners -->
<table align="center" cellpadding="1">
<tr>
<!-- START BLOCK : belowbanner -->
<td align="center"{colspan}>{banner}</td>
{tr}
<!-- END BLOCK : belowbanner -->
</tr>
</table>
<br />
<!-- END BLOCK : belowbanners -->
<!-- START BLOCK : commentrecords -->
{prev_next}
<div class="module-title">{phrase_comment} </div>
<!-- START BLOCK : commentrecord -->
<div class="module-title"><a name="{commentid}">#{commentid}</a> {iptoc} <span dir="rtl">[{name}]</span> <span style="float:{lang_right}">
<!-- START BLOCK : comrating -->
<div id="comunit_long{id}" dir="ltr">
<ul id="unit_ul{id}" class="unit-rating" style="width:75px;">
<li class="current-rating" style="width:{ratewidth}px;"> </li>
<!-- START BLOCK : comrate -->
<li><a href="rate.php?action=comment&star={star}&amp;id={id}&amp;m={m}&amp;c=5&amp;v={votes}&amp;av={rate}&amp;r=1&amp;div=comunit_long" title="{star}" class="r{star}-unit rater" rel="nofollow"></a></li>
<!-- END BLOCK : comrate -->
</ul>
<span class="xsmallfont"> {rate}</strong>/5 ({votes} {phrase_votes})</span>
</div>
<!-- END BLOCK : comrating -->
</span>
<br /><span class="time">{date}</span>

</div>
<div id="contents">
<!-- START BLOCK : commentreport -->
 <span style="float:{lang_right}">
 <div id="comreportdiv{commentid}" style="position:relative;">
<div id="comreportdiv{commentid}status" style="position:relative; display:none"><div align="center" id="comreportdiv{commentid}procces"></div></div>
<span id="comreportcont{commentid}"> <input title="{phrase_report_abuse}" type="image" src="images/report.gif" onclick="javascript:makeRequest('report.php?action=comment&id={commentid}','GET','','comreportdiv{commentid}','comreportcont{commentid}','');" /></span></div>
</span>
<!-- END BLOCK : commentreport -->
 {comment}
<div>{allowcomnt}<br /><div id="replaceme{commentid}" style="position:relative; display:none"></div></div>
<!-- START BLOCK : commentrepliesnote -->
<br />
<div style="width:98%;margin:auto">
<div class="module-title">{replies_on_x}</div>
<div id="blocktable">
<!-- START BLOCK : commentreplies -->

<div class="lightcontent">{repliptoc} <span dir="rtl">[{replname}]</span> <span class="time">{crdate}</span></div>
<div class="whitecontent">
<!-- START BLOCK : commentreplyreport -->
<span style="float:{lang_right}">
 <div id="comrepreportdiv{replid}" style="position:relative;">
<div id="comrepreportdiv{replid}status" style="position:relative; display:none"><div align="center" id="comrepreportdiv{replid}procces"></div></div>
<span id="comrepreportcont{replid}"> <input title="{phrase_report_abuse}" type="image" src="images/report.gif" onclick="javascript:makeRequest('report.php?action=commentreply&id={replid}','GET','','comrepreportdiv{replid}','comrepreportcont{replid}','');" /></span></div>
</span>
<!-- END BLOCK : commentreplyreport -->
{commentrepl}
</div>

<br />
<!-- END BLOCK : commentreplies -->
</div>
</div>
<!-- END BLOCK : commentrepliesnote -->

</div>
<br />
<!-- END BLOCK : commentrecord -->
<!-- END BLOCK : commentrecords -->
<div>{prev_next}</div>
</td>
<td valign="top" width="{style_bservwidth}">
<!-- START BLOCK : rating -->
<div class="module-title">{phrase_rate}</div>
<div id="contents" style='height: 100%;'>
<div class="ratingblock" style="float:{lang_left};">
<div id="unit_long{id}" dir="ltr">
<ul id="unit_ul{id}" class="unit-rating" style="width:150px;">
<li class="current-rating" style="width:{ratewidth}px;"> </li>
<!-- START BLOCK : rate -->
<li><a href="rate.php?action=content&amp;star={star}&amp;id={id}&amp;m={m}&amp;c=10&amp;v={votes}&amp;av={rate}&amp;r=1&amp;div=unit_long" title="{star}" class="r{star}-unit rater" rel="nofollow"></a></li>
<!-- END BLOCK : rate -->
</ul>
<strong> {rate}</strong>/10 ({votes} {phrase_votes})
</div>

</div>
</div>
<br />
<!-- END BLOCK : rating -->

<div id="accordion">
<!-- START BLOCK : extrablocks -->
<h2>{extrablockname}</h2>
<div class="pane"{firstblockstyle}>
<div id="contents">
{extracont}
<div id="extradiv{blockid}" style="position:relative;">
<div id="extradiv{blockid}status" style="position:relative; display:none">
<div id="extradiv{blockid}procces" style="margin:5px 5px 5px 5px"></div>
</div>
<span id="extracont{blockid}">{moreless}</span>
</div>
</div>
</div>
<!-- END BLOCK : extrablocks -->
</div>
<script type="text/javascript" language="javascript">
$(function() {
$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'fade', initialIndex: null, event:'click'});
});
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>

<!-- INCLUDE BLOCK : footer -->

أو قم يتحميل القالب من هنا

للتحميل .

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