Populer Post

Loading...

Cara Mudah Membuat Text Resizer Di Blog | Mampirnesia

Cara Mudah Membuat Text Resizer Di Blog | Mampirnesia
Posted by Yudha Wahyu Pratama



Cara Mudah Membuat Text Resizer Di Blog apasih Resize?  Resize diblog berguna untuk memperbesar atau memperkecil otomatis tulisan yang berada di artikel jadi orang yang memiliki ganguan mata seperti minta ataupun plus jadi pembaca sangat dipermudah dengan text Resize ini.

Bagi kalian yang tertarik memasang resize di blog kalian silakan simak penjelasan saya mengenai Cara Mudah Membuat Text Resizer Di Blog ini.

Style 1 


Pertama silakan kalian login di akun blog kalian dan masuk ke dashboard blog kalian pilih edit tema dan pilih yang mode html

Silakan kalian cari kode </style> atau ]]></b:skin>

Dan copy  code css dibawah ini dan pastekan tepat diatas salah satu dari kode diatas


button { padding: 3px 15px; float: right; cursor:pointer; margin:0 5px; } .text-resizer { }

Jika sudah kalian cari lagi kode </head>Dan pastekan kode dibawah ini tepat diatas kode </head>

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

Note : jika template kalian sudah dipasang kode diatas kalian bisa melewati nya

Selanjutnya nya masih dibagian </head> sekarang kalian copy kode dibawah ini dan pastekan kodenya tepat  diatas kode </head>

<script type="text/javascript"> $('').ready(function() { $('#incfont').click(function(){ curSize= parseInt($('.post-body').css('font-size')) + 2; if(curSize<=22) $('.post-body').css('font-size', curSize); }); $('#decfont').click(function(){ curSize= parseInt($('.post-body').css('font-size')) - 2; if(curSize>=12) $('.post-body').css('font-size', curSize); }); }); </script>

Terakhir silakan kalian copy kode html ini dimana saja sesuai kelingan anda

<b:if cond='data:blog.pageType == "item"'> <button class="text-resizer" id="incfont"><b>A+</b></button> <button class="text-resizer" id="decfont"><b>A-</b></button> </b:if>

 Demo : bisa di cek di header Mampirnesia

Style 2

Jika tidak cocok dengan model style pertama kalian bisa coba style kedua.

Yuk simak tutorialnya copy kode css dibawah ini dan pastekan tepat diatas ]]></b:skin> atau </style>

.rfopit{margin-top:10px;text-align:right}
#large{font-size:20px}
#reset{font-size:18px}
#small{font-size:16px}


Kemudian pastekan code dibawah ini tepat diatas  </head>

<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;.post-body&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =16;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>


Kemudian silakan kalian tempelkan kode html ini sesuai keinginan anda

<div class='rfopit'>
<input id='large' title='Perbesar' type='button' value='A+'/>
<input id='reset' title='Normal' type='button' value='A'/>
<input id='small' title='Perkecil' type='button' value='A-'/>
</div>

Done silakan pilih style Resize nya yang sesuai template anda.



0 Response to "Cara Mudah Membuat Text Resizer Di Blog | Mampirnesia"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel