Skrip Paling Diminati (Bagian 3)

Pembahasan skrip paling diminati kali ini adalah mengenai cara membuat tombol buka/tutup spoiler (spoiler show/hide button), membuat "Tombol Kembali ke Atas" (Back to Top Button), membuat pesan "Selamat Datang" (Welcome Message Script), Exit Message Button, dan cara mengganti kursor default dengan kursor animasi.

Mayoritas skrip yang akan saya jelaskan menggunakan JavaScript dan JQuery sehingga kode-kode tersebut harus disimpan diantara kode <script type="text /javascript"> dan </script>. Kode-kode tersebut dapat disimpan di dalam skrip utama template blogger atau disimpan di dalam widget Blogger melalui "Add Gadget" di halaman "Layout" dengan memilih elemen "HTML/JavaScript". Cara kedua ini relatif lebih aman karena jika terjadi error, widget tersebut dapat dihapus dengan mudah. Jika skrip disimpan bersama skrip utama template blogger, di sarankan agar terlebih dahulu mem-backup template sebagai antisipasi jika terjadi kesalahan setelah pengeditan.

Membuat Tombol Buka/Tutup Spoiler
Skrip ini berfungsi untuk menampilkan dan menyembunyikan konten di bagian (div) tertentu. Konten tersebut dapat berupa tulisan, gambar, video, dan lain-lain sesuai kebutuhan. Jika tombol buka/tutup ditekan, maka konten akan terlihat. Konten akan disembunyikan kembali jika tombol tadi ditekan lagi. Cara membuat tombol buka/tutup spoiler tersebut sebagai berikut:

Login ke Blogger.
Buat posting baru atau edit posting lama
Salin kode di bawah kemudian simpan di dalam posting mode HTML.

<div> <input type="button" value="Buka/Tutup" style="margin:0px;padding:2px 5px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"></div> <div style="background:#fff; margin: 10px auto;border: 1px solid #ddd;padding: 5px;"> <div style="display: none;"> Tulis kalimat Anda di sini!</div> </div>
Ganti kalimat "Tulis Kalimat Anda di sini" dengan tulisan atau konten masing-masing.
Terbitkan artikel dengan mengklik tombol "Publish"

Menampilkan Pesan Selamat Datang-1
Skrip ini berfungsi untuk menampilkan pesan "Selamat Datang" ketika blog pertama kali dibuka. Pesan "Selamat Datang" akan muncul setiap kali halaman lain dibuka. Langkah-langkahnya sebagai berikut:

Login ke Blogger.
Masuk ke halaman "Edit HTML".
Cari kode </head>, gunakan Ctrl+F untuk mempercepat pencarian.
Salin kode di bawah kemudian simpan di atas kode </head> tadi.

<script language='JavaScript'>alert("Selamat Datang di Link Sukses");</SCRIPT>
Ganti kalimat "Selamat datang di Link Sukses" dengan kalimat sendiri.
Simpan template (Save Template) dan lihat hasilnya.

Menampilkan Pesan Selamat Datang-2
Skrip untuk menampilkan pesan "Selamat Datang" ini berbeda dengan skrip sebelumnya. Jika menggunakan cara ini, pesan "Selamat Datang" hanya akan tampil di halaman depan saja (Home Page). Caranya sebagai berikut:

Login ke Blogger.
Masuk ke halaman "Edit HTML".
Cari kode <body class="...>, atau <body expr:class='...>, atau <body>, gunakan Ctrl+F untuk mempercepat pencarian.
Salin kode di bawah kemudian simpan di bawah kode tadi.

<b:if cond='data:blog.pageType == "index"'><script language='JavaScript'>alert("Selamat Datang di Link Sukses")</script></b:if>
Ganti kalimat "Selamat datang di Link Sukses" dengan kalimat sendiri.
Simpan template (Save Template) dan lihat hasilnya.

Menampilkan Pesan Selamat Datang-3
Skrip yang ini sudah direkayasa dengan beberapa penyempurnaan kode-kode CSS sehingga bukan saja hanya akan tampil di halaman depan saja (Home), juag tampilan pesan "Selamat Datang" lebih bagus dari cara pertama dan kedua. Untuk membuat pesan "Selamat Datang" cara ketiga langkah-langkahnya sebagai berikut:

Login ke Blogger.
Masuk ke halaman Edit HTML
Sebaiknya lakukan backup template terlebih dahulu untuk jaga-jaga jika terjadi kesalahan.
Cari kode di bawah, gunakan Ctrl+F untuk mempercepat pencarian.
<b:section class='main' id='main' showaddelement='no'>
Salin kode berikut dan simpan sebelum kode tadi.

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:section class='main' id='main-top' showaddelement='yes'><b:widget id='HTML99' locked='false' title='' type='HTML'/></b:section></b:if>
Simpan Template lalu tutup jendela Edit HTML.
Buka halaman "Layout" kemudian perhatikan di atas elemen Blog Posts terdapat elemen baru HTML/JavaScript. Lanjutkan dengan mengklik "Edit" pada elemen tersebut.
Di jendela "Configure HTML/JavaScript", pilih "Edit HTML", copy paste kode berikut kemudian simpan (Save) dan lihat hasilnya.

<div style="background: #ffdd00; padding: 10px; text-align:center; color:#000;border:1px solid #444;"> <h3> Selamat Datang di LINK SUKSES!</h3> Tutorial Blog, Desain dan Efek Photoshop, Elektronika Analog, dan Elektronika Digital</div>
Ganti kalimat "Selamat Datang di LINK SUKSES!" dengan kalimat sendiri dan ganti juga kalimat "Tutorial Blog, Desain dan Efek Photoshop, Elektronika Analog, dan Elektronika Digital" dengan deskripsi blog masing-masing.
Kustomisasi tampilan "Pesan Selamat Datang" dapat dilakukan dengan mengubah kode berikut:
- style="background: #ffdd00; : ganti #ffdd00 dengan kode warna heksadesimal untuk mengganti warna latar. Jika belum tahu kode warna heksadesimal dapat dilihat di Spectrum Warna.
- padding: 10px; : mengatur jarak antara tulisan dan batas luar kotak (border).
- text-align:center; : paragraf rata tengah, ganti "center" dengan "right" untuk rata kanan, "left" untuk rata kiri, dan "justify" untuk rata kiri kanan.
- color:#000; : ganti #000 dengan kode warna heksadesimal untuk mengatur warna tulisan.
- border:1px solid #444; : untuk mengatur ketebalan, warna dan style batas pinggir (border).

Menampilkan Pesan Sampai Jumpa
Skrip ini berfungsi untuk menampilkan pesan "Sampai Jumpa" atau sejenisnya ketika pengunjung meninggalkan blog. Pesan ini juga akan tampil setiap kali meninggalkan halaman tertentu meskipun halaman lain yang dibuka masih dalam blog itu juga. Langkah-langkahnya sebagai berikut:

Login ke Blogger.
Masuk ke halaman "Edit HTML".
Cari kode </head>, gunakan Ctrl+F untuk mempercepat pencarian.
Salin kode di bawah kemudian simpan di atas kode </head> tadi.

<script type='text/javascript'> window.onunload=unloadPage; function unloadPage() { alert('Sampai Jumpa Lagi'); } </script>
Ganti kalimat "Sampai Jumpa Lagi" dengan kalimat sendiri.
Simpan template (Save Template) dan lihat hasilnya.

Membuat Animasi Tombol Back To Top
Tombol ini berfungsi sebagai link untuk mengembalikan tampilan yang terlihat di monitor ke bagian paling awal (paling atas) ketika membaca sebuah artikel. Tombol "Kembali ke Atas" dibuat dengan JQuery untuk menambah animasi scrolling ketika tombol "Back to Top" di tekan.

Tombol "Back to Top" akan berguna ketika pengunjung membaca artikel yang cukup panjang ke bawah. Dengan sekali tekan, maka konten paling atas akan terlihat kembali disertai animasi scrolling yang bagus. Cara membuat tombol "Back to Top" langkah-langkahnya sebagai berikut:

Login ke Blogger
Masuk ke halaman "Layout" atau Tata Letak.
Cari kode ]]></b:skin>, gunakan Ctrl+F untuk mempercepat pencarian.
Salin kode berikut dan simpan di atas kode tadi (sebelum kode ]]></b:skin>.

#toTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQ95ozaQsWkZ6dOilGFTBIYumzJ66UOD4EgPlizVjnSpNAFVPRNRDea0mgWhUSR9LgcMDGqpjbpW7Fn7fwTvlHhMgq49zZSa3GwMGuy2yRn9m7cT7JOKPwS_u1n4jDjuNbwXL0bDnLD0/s1600/ui.totop.png) no-repeat left top;}#toTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAQ95ozaQsWkZ6dOilGFTBIYumzJ66UOD4EgPlizVjnSpNAFVPRNRDea0mgWhUSR9LgcMDGqpjbpW7Fn7fwTvlHhMgq49zZSa3GwMGuy2yRn9m7cT7JOKPwS_u1n4jDjuNbwXL0bDnLD0/s1600/ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}#toTop:active, #toTop:focus {outline:none;}
Cari kode </head>
Salin kode berikut dan simpan di atas kode </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> <script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/> <script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { /* var defaults = { containerID: 'moccaUItoTop', // fading element id containerHoverClass: 'moccaUIhover', // fading element hover class scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script>
Simpan Template (Save Template) dan lihat hasilnya. Jika artikel cukup panjang, maka di kanan bawah blog akan terlihat animasi tombol Back To Top. Jika diklik maka pembaca akan dibawa ke baris paling atas posting.

Sumber: Spice Up Your Blog

Monday, January 7, 2013

Skrip Paling Diminati (Bagian 3)

Beritahu teman via

Info Terkait :

Koleksi Video Unik

Aneka Iket & Sorban

Kategori