Cara Membuat Tombol Bantuan (Help) di Blogspot dengan jQuery

Cara Membuat Tombol Bantuan dengan jQuery. Dalam merancang sebuah halaman dengan banyak feature yang kompleks, terkadang perancangnya perlu menambahkan tombol bantuan. Tombol bantuan ini biasanya digunakan untuk memberi panduan tambahan kepada pengunjung atau cuma sekedar untuk menerangkan suatu fungsi tertentu. Lazimnya tombol bantuan ini menggunakan tulisan “Help”, “What This?” atau hanya menggunakan tanda tanya (?) saja.

Buat Anda yang ingin menambahkan tombol bantuan ini di halaman Blogspot, Anda bisa membuatnya sendiri dengan bantuan jQuery. Cara membuat tombol bantuan di Blogspot ini tidaklah sulit. Silakan ikuti langkah demi langkahnya:

1. Buka blogger.com
2. Pada menu “Tema”, klik “Edit HTML”
3. Sisipkan jQuery di template yang digunakan. Untuk menambahkannya di template Blogspot, silakan ikuti caranya di postingan tentang Cara Menambahkan jQuery di Template Blogspot. Tetapi jika template yang digunakan sudah menggunakan jQuery, lewati saja bagian ini.
4. Kemudian salin script di bawah ini dan letakkan di atas tag </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {

$('[data-haspopup="true"]').attr("aria-haspopup", true);

$('[data-haspopup="true"]').on('click', function() {
$(this).attr('aria-haspopup', function (i, attr) {
    return attr == 'true' ? 'false' : 'true';
});

$($(this).data("target")).toggle();
});

$('[data-haspopup]').click(function(event) {
event.preventDefault();
return $(this).text() == "X" ? $(this).text("?") : $(this).text("X");
});

});
//]]></script>

5. Setelah itu simpan template.

Untuk menambahkan tombol bantuan (misalnya saja di dalam postingan), caranya adalah sebagai berikut:

1. Pilih postingan yang ingin diberi tombol bantuan, lalu edit postingan tersebut.
2. Salin tag HTML di bawah ini, letakkan di tempat dimana tombol bantuan tersebut ingin ditampilkan (umumnya di sebelah kanannya). Kemudian edit sesuai kebutuhan.

<a data-haspopup="true" data-target=".help-1" href="#">
?
</a>
<span class="collapse help-1"><!--letakkan keterangannya disini--></span>

Catatan: Selector class “help-1” bisa diganti dengan selector yang lainnya, misalnya dengan ID. Nama selector juga bisa diganti sesuai dengan kebutuhan.

3. Tambahkan pula CSS berikut ini:

<style type="text/css">
.collapse{
display:none;
}
</style>

4. Setelah itu, klik “Update” dan silakan lihat hasilnya.

Demo:

? Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi quis hendrerit dolor magna eget est Lorem. Blandit turpis cursus in hac habitasse platea dictumst quisque. Pharetra convallis posuere morbi leo urna molestie at. Ultrices in iaculis nunc sed augue. Etiam tempor orci eu lobortis elementum nibh tellus. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Tempus egestas sed sed risus pretium. Est velit egestas dui id ornare. Natoque penatibus et magnis dis. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Porttitor eget dolor morbi non. Eget egestas purus viverra accumsan in nisl nisi. Felis donec et odio pellentesque diam volutpat commodo sed.

Inilah cara menambahkan tombol bantuan di halaman Blogspot. Semoga tutorial ini bisa bermanfaat, selamat mencoba!

Posted by Andi Setiawan

Published on September 14, 2019

Edit This

Categorized in Blogger, Blogging, Blogspot, JQuery, Tips & Trick