Beranda » Widget » Tool font size di posting blogger

Tool font size di posting blogger

Fluid Text widget Resizer adalah tool yang berguna untuk merubah ukuran font di posting dan script ini saya adopsi dari drive dinamis. Ini akan muncul tepat di bawah judul posting Anda dan akan memungkinkan pengunjung Anda untuk mengubah ukuran teks untuk kenyamanan mereka. Ukuran teks pada seluruh blog Anda akan diperbesar Dari sidebar sampai footer, semua teks akan dimaksimalkan. tool ini juga dapat mengubah kembali ukuran font ke ukuran default/semula sebelum di rubah. ikuti saja trik di bawah ini untuk membuat tool ini...

Cara memasang tool resize font di posting

1. Login ke Blogger> Template> Edit HTML
2. Backup template Anda
3. Cari kode tag di bawah ini,

]]></b:skin>

4. Tepat di bawahnya paste kode berikut

<style type='text/css'>

/*----- Text Resizer By DB ------*/
.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;
}
.DB-text-resizer{
font-weight:bold!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important;
}

#DB-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://template-defandaky.googlecode.com/files/resize-font.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>

5. Lalu berikutnya cari kode dibawah ini,

<data:post.body/>

6. Tepat di atasnya paste kode berikut,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='DB-text-resizer-container'>
<div class='controlstyle' id='sizecontroldiv'>
<font style='color:#666; font-weight:bold;'>Sesuaikan ukuran:</font>  <a class='mbt-text-resizer' href='#smaller'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU53sAwsvXFy3iLa_LCDOTNPJSVkxquv0iQp_FGl2z_4wiNtjGtcUsAondZCy5cHX-7U3anac08G5KLGA_drmV8OICxrNIXVe-VYqjYjkx2yWMezlpO8foJkL161W8KUFy4avsZ_WQW8Y/s400/oranged.png'/>&#160;</a>  <a class='DB-text-resizer' href='#bigger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PfJqZPRR2z0M5L_mXXNI1qJFikD6Bihrb42bSyZRanYV7ckMcp3hx-o9v-_afMqUhebnoOtygFZ1pM-nVUHY2kMegcFdHUehtkD-q1pbCk2VlBtFKFRo9qrsBOLpKg34fH4itmiGmsc/s400/orangei.png'/>&#160;&#160;</a><a class='DB-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Batalkan &#8597;</a>
</div>
</div>
</b:if>

Anda dapat mengubah teks yang akan ditampilkan jika Anda inginkan, lihat warna merah.

7. Simpan template Anda dan lihat hasilnya!

Buka setiap posting Anda untuk melihatnya munculnya tepat di bawah judul posting. Saya telah mematikan tampilan widget pada homepage. Jika Anda ingin widget ini ditampilkan pada homepage anda, anda hanya perlu menghapus tag conditinal berwarna orange dari kode pada langkah #6. saya tidak menyertakan demo untuk trik ini silahkan lihat pada hasilkan.

Semoga berguna....

Tool font size di posting blogger

Belum ada tanggapan untuk "Tool font size di posting blogger"

Post a Comment