Cara Menambahkan jQuery Pada Template Blogger

Cara Menambahkan jQuery Pada Template Blogger - Mungkin sahabat sudah tidak asing lagi dengan istilah jQuery. Apa itu jQuery?  jQuery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan AJAX interactions untuk pengembangan web secara cepat.

Secara sederhana, jQuery sangat diperlukan untuk membuat web dinamis. JQuery akan menampilkan efek, animasi, dan fungsi-fungsi yang sangat menarik lainnya. Banyak plugin / trik yang menggunakan jQuery dan tidak akan berjalan tanpa jQuery. Ukurang jQuery ini sangat kecil dan tidak membuat loading blog jadi berat cuman 100kb.

Untuk Menambahkan jQuery Pada Template Blogger ikuti langkah-langkah berikut ini:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan kode di bawah ini sebelum/di atas </head> 

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

Pemasangan jQuery, hanya 1 dalam template. Tidak boleh ada 2 script atau lebih, karena akan mengakibatkan beberapa script tidak akan bekerja. Apabola ingin mengganti dengan yang terbaru, cukup ganti link-nya saja. Apabila ada tips, atau tutorial yang menggunakan jQuery, sobat tidak perlu menambahkan lagi.

4. Simpan template.
5. Selesai

Read More

Cara Membuat Smooth Back to Top dengan jQuery di Blog

Smooth Back to Top dengan Jquery. itulah yang akan saya share pada kesempatan kali ini, fungsi dari tombol back to top ini adalah sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Sebetulnya tutorial kali ini banyak yang sudah memposkan, saya juga dapat kode-kode aneh ini dari teman saya dan saya hanya memodifikasinya sedikit tadinya berbentuk seperempat bulat, dan saya modifikasi sedikit dan bentuknya menjadi atas kanan dan kiri menjadi agak bulat sedikit, dan kebawahnya lurus, demonya bisa dilihat diblog ini dipojok kanan bawah.

Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut:
1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* Smooth Back to Top dengan jQuery */
#backtop { cursor:pointer; position:fixed !important; position:absolute; left:96%; bottom:-70px; z-index:999; background-color:#ff0000; border:1px solid #333; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; width:30px; height:45px; overflow:hidden; text-indent:-999px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px }
#backtop::after { content:" " ; position:absolute; top:3px; left:8px; width:0; height:0; border-width:12px 7px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent }

4. Kemudian letakkan kode berikut ini diatas kode </body>

<!-- Smooth Back to Top dengan jQuery -->
<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-54",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>

5. Simpan Template

Catatan :

- Untuk mengganti warna kotak penulis atau author box silahkan pilih warnanya disini Kode Warna.
- #ff0000 adalah warna Smooth Back to Top.

Sekian artikel mengenai Cara Membuat Smooth Back to Top dengan jQuery di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Read More

Cara Membuat Smooth Back to Top dengan jQuery di Blog

Smooth Back to Top dengan Jquery. itulah yang akan saya share pada kesempatan kali ini, fungsi dari tombol back to top ini adalah sebagai pintasan dari bawah naik keatas, apabila halaman terlalu tinggi saat discroll kebawah dan kita ingin kembali keatas, kita hanya tinggal mengklik tombol back to top tersebut maka dengan otomatis halaman akan kembali keatas. Sebetulnya tutorial kali ini banyak yang sudah memposkan, saya juga dapat kode-kode aneh ini dari teman saya dan saya hanya memodifikasinya sedikit tadinya berbentuk seperempat bulat, dan saya modifikasi sedikit dan bentuknya menjadi atas kanan dan kiri menjadi agak bulat sedikit, dan kebawahnya lurus, demonya bisa dilihat diblog ini dipojok kanan bawah.

Untuk memasang tombol Back to Top Smooth dengan Jquery ikuti langkah-langkah berikut:
1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* Smooth Back to Top dengan jQuery */
#backtop { cursor:pointer; position:fixed !important; position:absolute; left:96%; bottom:-70px; z-index:999; background-color:#ff0000; border:1px solid #333; -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333; width:30px; height:45px; overflow:hidden; text-indent:-999px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border-top-left-radius:5px; border-top-right-radius:5px }
#backtop::after { content:" " ; position:absolute; top:3px; left:8px; width:0; height:0; border-width:12px 7px; border-style:solid; border-color:transparent transparent #f7f7f7 transparent }

4. Kemudian letakkan kode berikut ini diatas kode </body>

<!-- Smooth Back to Top dengan jQuery -->
<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-54",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>

5. Simpan Template

Catatan :

- Untuk mengganti warna kotak penulis atau author box silahkan pilih warnanya disini Kode Warna.
- #ff0000 adalah warna Smooth Back to Top.

Sekian artikel mengenai Cara Membuat Smooth Back to Top dengan jQuery di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Read More