Seperti yang anda lihat di sebelah kanan atas ada tombol untuk zoom in dan zoom out text pada article, nah faro akan berbagi cara untuk membuat tombol seperti itu.
Hasilnya nanti akan seperti ini :
coba anda cek klik salah satu tombol zoom tersebut.
ok yang harus dilakukan adalah
Pertama, copy kode berikut
Kedua, Memasukkan kode Javascript pada template, nah copy kode berikut.
Setelah selesai, simpan template anda, lalu buka salah satu artikel dan akan ada tombol zoom-in dan zoom-out text disana.
jika kode diatas tidak berjalan, mungkin dikarenakan di template anda telah ada jQuery lain, oleh karenanya, anda cukup memasukkan kode ini saja :
Semoga bermanfaat. :)
Hasilnya nanti akan seperti ini :
coba anda cek klik salah satu tombol zoom tersebut.
ok yang harus dilakukan adalah
Pertama, copy kode berikut
<b:if cond='data:blog.pageType != "index"'><b:if cond='data:blog.pageType != "static"'><style type='text/css'>.zoomareanya{overflow:hidden;padding:5px 0;}.zoomareanya .pull-right{float:right;}.zoomareanya .pull-right > *{float:left;display:block;height:32px;}</style>lalu pastekan kode di atas pada template anda.. untuk letaknya paste sebelum kode berikut :
<div class='zoomareanya'><div class='pull-right inner'><a class='zoom-text zoom-in-text' href='#A+'><img alt='zoom in' title='zoom in text' width='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_TyDKQ8O2pT1sPsvdD4OTijzAR8suTufgNpljHoC3iCGlklyoHC4GiTnugtKZuL5zhyphenhyphenSMeRGU5PPtfB4FwqAZYiE0N4EgBYx4nZvAb5LHwW_nj_wQaaCdTUjB6dkm6yTAJMK5xFAEkQ/s1600/zoom-in.png' style='border:none !important;background:transparent !important'/></a><a class='zoom-text zoom-out-text' href='#A-'><img alt='zoom out' title='zoom out text' width='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_IOoFA6H0VTjKKQoYVWiroJzs9BjG_F92ZEQKw7JdSYJWTPNiSF80Dn6fg2xZPolVYGVnm5gt2ygsrHcwQolfxtCSUiUO6hPSfRoBVTiP1oa6oWdQoJRhDr_2ZmW32DsTg2hFOOKG2w/s1600/zoomout.png' style='border:none !important;background:transparent !important'/></a></div></div></b:if></b:if>
<div class='post-body entry-content'untuk mempermudah gunakan pencarian kode (pakai CTRF + F di dalam editor template).
Kedua, Memasukkan kode Javascript pada template, nah copy kode berikut.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>Paste kode javascript diatas sebelum tag </body>.
<script type='text/javascript'>
//<![CDATA[
(function(a){a(document).ready(function(){var b=readCookie("font_size");if(b!=""&&b!=null){a(".post-body").css("font-size",b+"px")}a(".zoom-text").click(function(){var j=a(".post-body").css("font-size");j=j.replace("px","");var h=a(this).attr("class");var i=Number(j);if(h.indexOf("zoom-in-text")!=-1){i++}else{i-=1}createCookie("font_size",i);a(".post-body").css("font-size",i+"px");return false})})})(jQuery);
//]]>
</script>
Setelah selesai, simpan template anda, lalu buka salah satu artikel dan akan ada tombol zoom-in dan zoom-out text disana.
jika kode diatas tidak berjalan, mungkin dikarenakan di template anda telah ada jQuery lain, oleh karenanya, anda cukup memasukkan kode ini saja :
<script type='text/javascript'>
//<![CDATA[
(function(a){a(document).ready(function(){var b=readCookie("font_size");if(b!=""&&b!=null){a(".post-body").css("font-size",b+"px")}a(".zoom-text").click(function(){var j=a(".post-body").css("font-size");j=j.replace("px","");var h=a(this).attr("class");var i=Number(j);if(h.indexOf("zoom-in-text")!=-1){i++}else{i-=1}createCookie("font_size",i);a(".post-body").css("font-size",i+"px");return false})})})(jQuery);
//]]>
</script>
Semoga bermanfaat. :)
Post link : http://www.blognafaro.com/2013/12/cara-membuat-tombol-zoom-teks-pada-blogger.html
Cara Membuat Tombol Zoom Teks pada Blogger

Ringkasan :
Seperti yang anda lihat di sebelah kanan atas ada tombol untuk zoom in dan zoom out text pada article, nah faro akan berbagi cara untuk membuat tombol seperti itu.
.
Jumlah Kata : | Dipublikasikan pada Sunday, December 8, 2013
Jumlah Kata : | Dipublikasikan pada Sunday, December 8, 2013