Sebelumnya kita sudah berhasil memasang social media script dengan kode HTML, CSS dan Bootstrap. Ini adalah satu pilihan dari sekian banyak social media script yang beredar di internet. Selain itu kita juga akan kita praktekan social media script lain dengan metode yang berbeda.
Dan metode kali ini menggunakan social media script yang melibatkan kode JavaScript di dalamnya. Dengan kode sumber awal saya dapatkan pertama kali dari github. Konon script ini dinamakan dengan Ridiculously Responsive Social Sharing Buttons (RRSSB). Adapun bahasa atau tag yang digunakan yaitu: CSS, HTML dan JavaScript.
Setelah itu, baris kode tersebut nanti kita sesuaikan sesuai dengan lingkungan pada platform Blogger. Dengan demikian kita juga belajar secara tidak langsung tentang penempatannya. Seperti apakah praktek penerapan kode RRSSB pada theme Blogger? Berikut ini penjelasannya.
Cara Menambahkan Social Media Script (dengan JavaScript)
Pada praktek kali ini kita menggunakan social media script yang dikembangkan oleh KNI-Labs. Script ini tersedia dalam plugin untuk pengguna WordPress. Dijelaskan juga instuksi pemasangan pada CMS Drupal. Sehingga bisa diambil kesimpulan jika script itu bisa diterapkan pada Drupal dan WP.
Namun ternyata ada kabar baik yang teman-teman harus tahu. Karena kode yang diberi nama dengan RRSSB ini bisa juga kita terapkan pada theme Blogger. Bagaimana caranya? Berikut ini tahapan yang diperlukan untuk memasang social media script dengan JavaScript.
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Klik pada area kode kemudian tekan Ctrl + F untuk memunculkan kotak pencarian pada theme. Setelah itu paste kode berikut <b:includable id='postQuickEdit' var='post'> dan tekan enter.
4. Di bawahnya nanti terlihat kode sebagai berikut:
5. Di bawah kode tersebut silahkan paste kode dibawah ini.
6. Pada tahap ini kita bisa mengadaptasi kode pada nomor 5 dengan kode Bootstrap (bagi yang mau silahkan lihat pembahasan sebelumnya karena prinsipnya sama saja).
7. Letakan baris kode css berikut diantara tag <b:skin><![CDATA[/* dan tag ]]></b:skin>.
8. Terakhir tempatkan baris kode javascript melalui dua cara (silahkan pilih salah satu). Pertama dengan meletakan kode di bawah ini secara langsung sebelum tag </body>
9. Cara kedua dengan menempatkan link CDN yang memanggil kode javascript Ridiculously Responsive Social Sharing Buttons (RRSSB) sebagai berikut:
10. Klik "Save" untuk menyimpan perubahan pada theme
11. Link demo bisa dilihat dengan cara klik tombol di bawah ini.
Kesimpulan
Social media script contoh kedua ini terlihat berbeda. Sebagaimana terlihat pada link demo di atas. Yakni tampilannya juga terlihat di homepage (selain di bawah artikel). Sedangkan script sebelumnya terlihat hanya di ujung bawah artikel saja.
Mungkin ada yang bertanya bagaimana caranya jika tampilan tombol berbagi di atas itu diatur hanya terlihat pada bagian bawah artikel saja? Iya, maksudnya bagaimana caranya agar social media script di atas tidak terlihat pada bagian homepage?
Untuk menjawab pertanyaan di atas sepertinya perlu dibuat sebuah judul khusus. Mudah-mudahan artikel berikutnya membahas tema itu. Dan untuk saat ini kita cukupkan terlebih dahulu karena sudah berhasil memasang social media script with javascript.
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar