Menambahkan Downloadable Pada Postingan PDF,WORD,PPT, Dll di Blogger

Pada kesempatan kali ini, agan akan memberikan cara memasang Downloadable pada postingan artikel dalam bentuk PDF, World, PPT, dan lain-lain seperti gambar di atas. Dengan ini orang dengan mudah dapat mengunduh file yang anda posting.

Saya pun kebingungan saat ingin memasang Downloadable pada postingan dalam bentuk file dokumen dikarenakan tidak ada satupun artikel yang matched dengan apa yang saya inginkan yang membahas tentang hal tersebut, kalaupun ada tidak sesuai dengan apa yang saya inginkan.

Oleh karena itu saya mencari alternatif lain supaya keinginan saya terwujud. Saya pun mencari Tombol Unduhan yang sudah responsive yang kemudian nantinya dipasang atau disandingkan dengan postingan dalam bentuk file dokumen PDF WORD, PPT, dan lain-lain. Dan kemudian saya mendapatkan sebuah website yang selama ini saya cari yaitu  https://codepen.io. CodePen adalah komunitas online untuk menguji dan menampilkan cuplikan kode HTML, CSS, dan JavaScript yang dibuat oleh pengguna Codepen di seluruh dunia. Berfungsi sebagai editor kode online dan lingkungan pembelajaran sumber terbuka bagi yang ingin belajar otodidak mengenai HTML, CSS dan JavaScrip. .Didirikan pada 2012 oleh pengembang full-stack Alex Vazquez dan Tim Sabat dan desainer front-end Chris Coyier. Karyawannya bekerja dari jarak jauh, mereka jarang bertemu secara langsung. CodePen adalah salah satu komunitas terbesar bagi perancang dan pengembang web untuk memamerkan keterampilan pengkodean mereka, dengan perkiraan 330.000 pengguna terdaftar dan 16,9 juta pengunjung bulanan.

Pada Kodepen saya menemukan tombol download yang cocok dan sesaui dengan apa yang saya inginkan. Pada Kodepen, anda juga bisa membuat desain anda sendiri yang nantinya anda publikasikan ke semua pengguna. Disini kita akan banyak menemui orang yang mahir dalam pengkodean dan tentunya kita dapat berinteraksi dengan mereka untuk meminta bantuan atau semacamnya.

Pertama-tama kopi kode pada kolom CSS dibawah kemudian pastekan tepat dibawah <style> atau dibawah <b:skin> pada HTML blog anda.

See the Pen Downloadable button by Zet (@zet-the-selector) on CodePen.

Setelah kalian memasang kode CSSnya, kemudian kita tinggal memasang kode HTMLnya pada postingan artikel dalam bentuk PDF, WORD, PPT, dan lain-lain. Jika kalian belum tahu cara memposting file dalam bentuk PDF, WORD, PPT, dan lain-lainnya di blogger, kunjungi link dibawah.

Baca juga : Memposting File World, Pdf, Exel, Ppt, dll di Artikel Blog Khususnya Blogger

Oke lanjut, cari postingan yang ingin anda pasangi Downloadable, klik Edit ⇒ pilih HTML bukan Compose kemudian kopi dan pastekan kode HTML pada Kodepen diatas tepat diatas kode file dari PDF, WORD ataupun PPT.

Jika kalian masih bingung, perhatikan contoh dibawah.


Ganti tulisan  link download disini yang diberi tanda merah pada kode HTML dengan link unduh.

<div class="vn-red" style="text-align: initial;">
<a href="link download disini">DOWNLOAD THIS FILE</a></div>

Berikut cara mengambil link unduh dari Google Drive. Pertama-tama login ke google drive dimana anda menyimpan filenya kemudian klik kanan pada file tersebut kemudian klik Bagikan. Setelah itu klik Dapatkan link yang bisa dibagi => Salin link => Dapat komentar => Selesai. Jika masih belum jelas, ikuti gambar dibawah.



Berikut contohnya, selamat mencoba.

<div class="vn-red" style="text-align: initial;">

<a href="https://drive.google.com/open?id=0B5OUq5hbU8MkeERTbU1NbFNuVWxpS2lVWUNsNGFUbHk2d0M4">DOWNLOAD THIS FILE</a></div>