Cara Membuat Efek Resize Untuk Posting Blog

Efek Resize berguna untuk memudahkan pengunjung dalam merubah ukuran tulisan dalam artikel, terkadang banyak sekali pengunjung yang sulit membaca tulisan karena ukuran yang sangat kecil, ataupun ukuran yang sangat besar membuat pengunjung menjadi pusing membacanya. 

Efek Resize Untuk Artikel Blog


Langkah Pertama Anda Letakkan kode dibawah ini tepat di atas kode ]]></b:skin> .

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

Langkah Kedua Letakkan kode di bawah ini tepat di atas kode </head>.

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
 <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>=14)
        $('.post-body').css('font-size', curSize);
        });
 });
</script>

Harap di perhatikan: Jika kode berwarna merah di atas sudah ada dalam blog anda, maka anda tidak perlu mengambil kode tersebut, untuk kode berwarna biru, anda bisa merubah ukuran font sesuai keinginan anda. dan untuk kode yang berwarna hijau, anda bisa sesuaikan di bagian mana yang anda inginkan untuk me-resize ukuran font, sebagai contoh: jika anda hanya ingin me-resize ukuran pada bagian sidebar, maka ganti tulisan .post-body menjadi main atau.sidebar atau bisa juga #post-body tergantung anda ingin memperbesar ukuran font yang mana.

Langkah Ketiga Letakkan kode di bawah ini dimana saja yang anda inginkan tombol resize muncul, kalau pada blog saya, saya menempatkannya tepat di samping label di bawah judul artikel.

 <button class="text-resizer" id="incfont"><b>A+</b></button>
  <button class="text-resizer" id="decfont"><b>A-</b></button>

Atau anda bisa menempatkannya di dalam widget html/javascript. kemudian save. dan lihat hasilnya, semoga bermanfaat.


Sumur: masterr-seo
Scroll to top