Cara Membuat

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!

Cara Pasang Software Pembaca Layar NVDA untuk Tunanetra. Dengan kemajuan teknologi sekarang ini, utamanya teknologi digital baik untuk komputer maupun smartphone, bisa membantu tunanetra dalam mengoperasikan beberapa perangkat modern seperti laptop, komputer dan juga smartphone. Untuk mendukung aktifitas tunanetra dalam mengoperasikan berbagai perangkat modern tersebut, maka digunakan aplikasi khusus, yaitu software pembaca layar khusus untuk tunanetra.

Software pembaca layar yang banyak digunakan tunanetra pengguna laptop dan komputer di Indonesia adalah NVDA (Non Visual Desktop Access). Software pembaca layar NVDA ini bisa didapatkan secara gratis dan bisa menggunakan speech syntesizer ID Damayanti Bahasa Indonesia. Dengan menggunakan speech syntesizer Damayanti Bahasa Indonesia tentunya akan sangat membantu buat tunanetra yang tidak menguasai Bahasa Inggris sama sekali.

Buat yang ingin tahu cara pasang software pembaca layar NVDA di laptop atau komputer supaya tunanetra turut bisa menggunakan laptop/komputer tersebut, caranya adalah sebagai berikut:

Cara Pasang NVDA di Laptop atau Komputer

Untuk cara pasang software pembaca layar NVDA untuk tunanetra ini tidaklah sulit. Silakan buka https://www.nvaccess.org/download/ lalu download NVDA versi terbaru, kemudian instal sampai selesai. Setelah software screen reader NVDA ini terpasang, software pembaca layar NVDA tersebut sudah siap digunakan.

Untuk mengaktifkan program pembaca layar NVDA ini ada 2 cara, yaitu secara manual dan secara otomatis.

Cara Mengaktifkan NVDA Secara Manual

Untuk mengaktifkan screen reader NVDA ini secara manual bisa menggunakan shortcut Control + Alt + N. Sedangkan untuk menonaktifkan pembaca layar NVDA ini bisa menggunakan shortcut NVDA + Q lalu klik OK.

Note: Tombol NVDA yang dimaksud adalah tombol capslock pada laptop dan tombol Insert numpad pada keyboard komputer/PC.

Cara Mengaktifkan NVDA Secara Otomatis Setelah Masuk Windows

Jika ingin screen reader ini bisa langsung aktif saat laptop/komputer dioperasikan, maka perlu merubah setelan dari NVDA tersebut. Silakan ikuti langkah-langkah tentang bagaimana merubah setelan NVDA agar pembaca layar NVDA yang digunakan bisa secara otomatis aktif saat laptop/komputer dihidupkan:

Buka menu NVDA dengan menggunakan shortcut NVDA + N, kemudian klik Pilihan→Settings→General, lalu centang pada “NVDA berjalan otomatis setelah masuk ke Windows”, setelah itu klik OK.

Cara Pasang NVDA ID Damayanti Bahasa Indonesia

Buat yang ingin menggunakan speech syntesizer Bahasa Indonesia ID Damayanti, silakan ikuti cara memasang NVDA ID Damayanti Bahasa Indonesia berikut ini:

1. Kunjungi https://vocalizer-nvda.com/downloads kemudian pilih add-on ID Damayanti Bahasa Indonesia dan silakan download.
2. Aktifkan screen reader NVDA, lalu silakan install add-on ID Damayanti yang sudah di download tadi sampai selesai.

Cara Mengganti Suara NVDA ID Damayanti Bahasa Indonesia

Untuk cara merubah suara default NVDA dengan suara NVDA ID Damayanti, caranya adalah sebagai berikut:

1. Aktifkan screen reader NVDA, jika program pembaca layar NVDA sudah aktif, abaikan baris ini.
2. Lalu masuk ke menu NVDA dengan menggunakan shortcut NVDA + N kemudian klik Pilihan→Settings→Speech dan klik “Change”.
3. Pada “Mesin Suara”, pilih “Nuance Vocalizer Expressive” lalu klik OK.
4. Setelah itu pada “Suara” pilih “ID Damayanti Indonesia”, kemudian klik OK.
5. Selanjutnya masuk ke menu NVDA sekali lagi, lalu “Simpan Konfigurasi”, dan selesai.

Dengan memasang software pembaca layar untuk tunanetra pada laptop atau komputer tentunya akan sangat membantu tunanetra dalam mengenal perangkat modern, khususnya komputer, sehingga diharapkan tunanetra bisa melakukan kegiatan yang lebih bermanfaat di kemudian hari.

Cara Pasang jQuery di Blogger, Cara Memasang jQuery di Blog. jQuery diperkenalkan pertama kali oleh John Resig pada tahun 2006. jQuery atau perpustakaan javascript adalah kumpulan berbagai fungsi javascript yang sudah diringkas dan disederhanakan penulisan fungsi-fungsinya agar lebih efisien dan ringkas sehingga pengembangan suatu website bisa dikerjakan secara efektif dan lebih cepat. Dengan menggunakan jQuery ini memudahkan orang dalam memanipulasi tampilan HTML, membuat animasi, dan mendukung kinerja ajax jadi jauh lebih mudah dan cepat. Apalagi sekarang jQuery didukung oleh banyak sekali browser-browser terkemuka. Tidak mengherankan jika sekarang jQuery menjadi salah satu library JavaScript yang sangat populer sekaligus paling banyak digunakan oleh banyak web developer di seluruh dunia.

Pada dasarnya, jQuery dapat berfungsi untuk menyederhanakan dalam penulisan sebuah script. Contohnya dalam menampilkan tulisan "Hello world". Bila menggunakan Javascript Native script tersebut akan ditulis seperti ini:

JavaScript Native

Sedangkan untuk menampilkan output berupa tulisan yang sama, bila memakai jQuery bisa disingkat menjadi seperti ini:

jQuery

Dari contoh di atas, dapat diketahui bahwa dengan menggunakan jQuery, untuk menghasilkan output yang sama bisa menggunakan baris kode yang jauh lebih sederhana.

Karena fungsinya yang bagus dan mudah dipelajari, Tidak heran bila Saat ini hampir sebagian besar website dan blog yang menggunakan jQuery agar pembuatan animasi, manipulasi DOM HTML dan berbagai efek unik lainnya bisa dilakukan dengan lebih mudah.

ada Banyak kelebihan yang bisa didapat jika menyisipkan jQuery di blog. Berikut beberapa keunggulan dari memasang jQuery:

Kelebihan jQuery

1. Sangat memudahkan dalam mengakses elemen-elemen HTML tertentu.
2. Kompatibel dengan semua browser terkemuka.
3. Dokumentasinya sangat lengkap, jadi gampang dipelajari.
4. Penulisan script jadi lebih pendek dan ringkas.
5. Modifikasi dan manipulasi elemen HTML jadi lebih mudah dan cepat.
6. Bisa juga digunakan untuk memanipulasi CSS.
7. Mempersingkat kerja ajax.
8. Lebih mudah dalam penerapan efek-efek animasi dan JavaScript.

Dewasa ini ada banyak tempat yang menyediakan library jQuery seperti Google, Cloudflare, Microsoft dan juga website resmi jQuery.

Google CDN (terpopuler)

Cloudflare CDN

Microsoft CDN

jQuery Official CDN

Jika mau pasang jQuery, silakan pilih salah satu dari beberapa penyedia library jQuery tersebut.

Cara Pasang jQuery di Blogspot

Cara memasang jQuery di Blogspot ini sangat mudah. Berikut ini cara pasang jQuery di Blogspot:

1. Login ke Blogger.com.
2. Lalu click menu "Tema" => "Edit HTML".
3. Salin salah satu code dari salah satu penyedia jQuery di atas, misalnya saja dari Google CDN, dan letakkan di atas tag </head> sehingga secara garis besar penempatannya akan seperti ini:

<!DOCTYPE html>
<html>
<head>
...
<script src='https://ajax.googleapis.com/ajax/libs/jQuery/3.3.1/jQuery.min.js'></script>
</head>
<body>
...
</body>
</html>

4. Setelah itu simpan tema.

Demikian informasi terbaru tentang Cara Cara Memasang jQuery di Blogspot, selamat mencoba!

Cara Mengganti Tanda Kutip (") dengan “ dan ” di Postingan Blogspot Pakai Javascript Jquery. Terkadang di dalam postingan blog, perlu menampilkan tulisan yang berbentuk dialog dari beberapa subyek. Ini biasanya digunakan pada blog yang mengupas tentang berita, cerita atau wawancara.

Umumnya blog tersebut akan menggunakan tanda kutip (") untuk mengapit setiap kalimat ucapan. Coba perhatikan penggalan dialog cerita berikut ini:

Pada kalimat dialog tersebut di atas, setiap kalimat ucapan diapit dengan tanda kutip ("). Jika ingin mengganti tanda kutip tersebut dengan tanda kutip buka (“) di awal kalimat dan tanda kutip tutup (”) di akhir kalimat, maka untuk mengubahnya menjadi tanda kutip buka (“) dan tanda kutip tutup (”) secara otomatis, perlu dinambahkan script javascript untuk menggantinya.

Berikut ini Cara Mengganti Tanda Kutip (") dengan “ dan ” di Postingan Blogspot:

1. Buka blogger.com
2. Pada menu “Tema”, pilih “Edit HTML”.
3. Karena script ini akan menggunakan jQuery, maka tambahkan Jquery di template Blogspot yang digunakan. Untuk menambahkan jQuery di Blogspot, simak postingan tentang Cara Menambahkan jQuery di Blogspot. Tetapi jika template yang digunakan tersebut sudah menggunakan jQuery, abaikan saja langkah ini.
4. Lalu salin script di bawah ini dan letakkan di atas tag </body>

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() { 
html = $('[data-story="true"]').html();

$('[data-story="true"]').html(
html.replace(/\"[^\"]+\"/g, function(x) {
return "“" + x.replace(/\"/g, "") + "”";
}
)
);

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

5. Setelah itu simpan template.

Untuk menerapkannya ke dalam setiap postingan blog caranya adalah sebagai berikut:

1. Edit setiap postingan yang ingin diganti tanda kutipnya.
2. Apitlah baris kalimat/dialog tersebut dengan tag berikut ini:

<div data-story="true">
<!--letakkan kalimat/dialognya disini-->
</div>

Note: Tidak harus menggunakan tag <div/> bisa juga menggunakan element lainnya. Misalnya menggunakan tag <article/> atau tag <section/>. Kuncinya terletak pada attribute data-story="true". Jadi apa pun element yang digunakan, cukup tambahkan saja attribute data-story="true" itu di element yang digunakan.

3. Setelah itu click “Update” dan lihat hasilnya.

Di bawah ini adalah contoh dialog di atas setelah diganti tanda kutipnya.

Pada contoh dialog di atas tampak semua tanda kutipnya telah berubah menjadi “ dan ”.

Mudah bukan? Selamat mencoba!