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.
- Ganti kalimat "Tulis Kalimat Anda di sini" dengan tulisan atau konten masing-masing.
- Terbitkan artikel dengan mengklik tombol "Publish"
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.
- Ganti kalimat "Selamat datang di Link Sukses" dengan kalimat sendiri.
- Simpan template (Save Template) dan lihat hasilnya.
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.
- Ganti kalimat "Selamat datang di Link Sukses" dengan kalimat sendiri.
- Simpan template (Save Template) dan lihat hasilnya.
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.
- 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.
- 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).
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.
- Ganti kalimat "Sampai Jumpa Lagi" dengan kalimat sendiri.
- Simpan template (Save Template) dan lihat hasilnya.
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>.
- Cari kode
</head> - Salin kode berikut dan simpan di atas kode
</head>
- 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.
