Blogger’a metin boyutlandırma nasıl eklenir ?

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!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important;
}

#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 🙂

Rate this post

Paylaş

3 Cevaplar

  1. ibrahim karalar dedi ki:

    Dostum sitene daha önce göz atmıştım Birde google reklamlarında görünce ayrıca bu kodları arayınca ve sende bulunca yorumda yapasım geldi hadi hayırlı işler kodlara bakim olur inşallah 🙂

  2. ibrahim karalar dedi ki:

    Dostum çalışmadı kodlar bi göz at güncellesene bakayım yine 🙂

  3. Furkan ÖZDEN dedi ki:

    Hocam bir iki kere daha deneyin. Ben 3 kere denemiştim bu yazıyı yazmadan önce üçünde de çalıştı.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bunlar da hoşunuza gidebilir...