Furkan Özden Blog

Arkdaşlar şimdiki yazımda yazılarınızdaki karakterlerin boyutlarını isteğe göre nasıl değiştireceğimizi anlatacağım. Bu eklenti sayesinde okuma zorluğu çeken ziyaretçileriniz için kolaylık sağlamış olacak. A+‘ya basıldığında yazı içerisindeki karakterlerin puntosu 1 punto artacak A-‘ye nasıldığında ise 1 punto azalacaktır.

Kurulum

Blogger hesabımıza giriş yapıp Tasarım » HTML’yi Düzenle kısmından Widget Şablonlarını Genişlet işaretledikten sonra

]]></b:skin>

kodunu buluyoruz ve üstüne aşağıdaki kodları olduğu gibi yapıştırıyoruz.

<style type='text/css'>

/*----- Text Resizer By MBT ------*/
.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&#39;s image*/ 
border-bottom:4px solid darkred; 
}
.mbt-text-resizer{ 
font-weight:bold; color:#F07727; text-decoration:none; font-family:arial,tahoma ; font-size:16px; 
}
 
#mbt-text-resizer-container { 
margin:4px 0px; 
padding:4px; 
border-top:1px solid #ddd; 
border-bottom:1px solid #ddd; width:100%; 
} 
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/29281608/JS%20Dosyalar%C4%B1/fluidtextresizer.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var mytextsizer=new fluidtextresizer({ 
    controlsdiv: &quot;sizecontroldiv&quot;, //id of special div containing your resize controls. Enter &quot;&quot; if not defined 
    targets: [&quot;body&quot;], //target elements to resize text within: [&quot;selector1&quot;, &quot;selector2&quot;, etc] 
    levels: 10, //number of levels users can magnify (or shrink) text 
    persist: &quot;session&quot;, //enter &quot;session&quot; or &quot;none&quot; 
    animate: 200 //animation duration of text resize. Enter 0 to disable 
})
</script>

Kod içnde bulunan fluidtextresizer.js adlı dosya şurada barındırılmaktadır. Dilerseniz güvendiğiniz yada sahip olduğunuz bir hosta yükleyebilirsiniz.

Bu işlemlerin ardından aşağıdaki kodu buluyoruz.

<data:post.body/>

ve hemen üstüne veya öncesine aşağıdaki kodları ekliyoruz.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mbt-text-resizer-container'> 
<div class='controlstyle' id='sizecontroldiv'> 
<font style='color:#666; font-weight:bold;'>Yaz%u0131 boyutu:</font>  <a class='mbt-text-resizer' href='#smaller'><img src='http://2.bp.blogspot.com/-hcriotbuHqQ/TprlX1VeBII/AAAAAAAAFRA/h331qxRqqxo/s400/oranged.png'/>&#160;</a>  <a class='mbt-text-resizer' href='#bigger'><img src='http://3.bp.blogspot.com/-ZCdAqxALWFQ/TprlYKwK4QI/AAAAAAAAFRI/YBkNpOf3AHo/s400/orangei.png'/>&#160;&#160;</a><a class='mbt-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Reset &#8597;</a> 
</div> 
</div>
</b:if>

Kod içinde Yazı boyutu: yazan kısmı kendinize göre düzenleyebilirsiniz. Ardından temamızdaki Değişikleri Kaydedip çıkabiliriz. İşlemimizbitmiştir. Hayırlı uğurlu olsuni kolay gelsin, kalın sağlıcakla 🙂