Panduan Memasang Link Download di Blogger plus Gambar

Saat ini, internet dan berbagai platform lainnya telah memungkinkan kita membagikan informasi dan ilmu pengetahuan melalui blog. Salah satu platform yang paling banyak digunakan oleh orang-orang adalah Blogger. Dengan Blogger anda dapat menerbitkan, mengedit, membuat, atau menyesuaikan template blog anda dengan cara yang benar-benar sederhana dan rumit. Itulah sebabnya, ketika kami membuat blog, kami berusaha menarik perhatian, untuk menghasilkan lebih banyak kunjungan ke halaman blog kami.

Karena fungsi blogger yang sangat luas, pernahkah dalam suatu kasus ketika anda sedang menulis artikel, anda mengetikkan script yang panjang atau file audio/video yang ditempatkan di platform diluar Blogger. Kemudian file-file yang anda simpan tersebut, ingin anda bagikan keorang lain agar dapat dibaca dan dirasakan manfaatnya. Nach, pada kondisi seperti ini anda pasti membutuhkan link Download agar pembaca anda dapat mengunduh file-file tersebut.

Blogger memungkinkan pengguna untuk memasang tombol download di halaman postingan. Melalui artikel ini, kami akan mengajari Anda setiap cara untuk meletakkan tombol unduh di dalam halaman Blogger Anda sehingga orang yang mengunjunginya, memiliki akses langsung ke halaman Blogger dengan lebih mudah.

A. Mengapa kita perlu membuat Tombol Unduh di blog?

Tombol unduh atau tautan unduhan adalah fungsi di blog atau situs web dan memungkinkan pengguna untuk menyalin file ke sistem lokal menggunakan internet, dan di sini ketika kami memulai blog di mana kami menyediakan beberapa perangkat lunak, film, lagu, gambar, dan file aplikasi Android kepada pengguna maka kami menggunakan tombol unduh atau opsi tautan unduhan untuk memungkinkan menyalin file di mesin lokal mereka (Telepon, Tab, Laptop, Komputer, dan lain-lain.).

Di sini ketika kita membuat blog menggunakan platform blogger dan di editor postingan halaman blogger kita hanya memiliki opsi tautan unduhan (hyperlink), tetapi kita tidak dapat membuat tombol unduh di platform Blogger. Dengan menggunakan hyperlink/text anchor, anda hanya dapat menyelipkan link URL download kedalam teks. Meskipun hal ini dapat berjalan dengan baik, tapi dari segi tampilan, pembaca akan merasa jenuh, karena disuguhkan oleh banyaknya teks.

Namun, ketika anda mengganti anchor teks terseut dengan sebuah gambar yang telah diselipkan link unduhan, akan terasa menarik dilihatnya dan pembacapun tak cepat bosan untuk terus membaca artikel anda.

B. Dimana menempatkan Tombol Download

Di dalam platform Blogger, kami menemukan berbagai macam opsi untuk menyesuaikan dengan cara terbaik blog dan situs web Anda. Untuk alasan ini, link file yang berisi script koding ataupun file multimedia dapat dibuat dan ditambahkan ke Blogger dengan menyelipkan link URL tersebut ke gambar download.

Tak ada aturan baku untuk meletakkan link download, anda dapat meletakkannya dimana saja, seperti Dashboard Blogger atau halaman postingan. Yang perlu diperhatikan untuk membuat link download adalah tampilan designnya enak dilihat dan tidak membosankan pembaca. Meskipun tak ada aturan pasti dalam penempatan link download, biasanya para Blogger lebih sering menempatkan link download di halaamn postingan Blogger.

Sebelum membuat tombol unduh di blog, pertama-tama kita harus mengunggah data (software, aplikasi, film, lagu, game, pdf, script koding, dan lain-lain) ke server data (Google Drive, Dropbox, MediaFire, Mega, Github atau Site Google) kemudian kita dapat membuat link download dan memasukkannya ke dalam tombol download postingan blog, sekarang mari kita mulai.

C. Buat Link Download Di Blogger

Setelah anda membaca uraian di atas, baiklah sekarang kita langsung saja membuat link download yang akan kita letakkan di halaman postingan Blogger. Ikuti langkah-langkah di bawah ini untuk memulainya.

1. Buat Script CSS

Sebagai langkah awal yang harus anda kerjakan adalah membuat script CSS. Letakkan script ini di atas kode </heas>. Berikut adalah contoh script CSS yang dapat anda lihat dengan mengklik tombol Download.

2. Buat Link Download (button)

Setelah anda selesai membuat script CSS di atas, kita lanjutkan dengan membuat link download dalam tampilan "buuton". Karena kita akan meletakkan link download ini di halaman postingan Blogger, anda harus aktif di menu editor postingan. Pada menu editor postingan klik menu "HTML view", di bagian kiri atas yang ada logo pensilnya.

Panduan Memasang Link Download di Blogger plus Gambar

Contoh Tempat Meletakkan
"Link Download"

Letakkan kode link download
di menu HTML editor halaman
postingan Blogger

Kode untuk membuat link download

<a href="https://sites.google.com/view/contohscriptcssuntukmembuatlin/home" >
<button class="pirate-button blue round">Download CSS</button></a>

Pada contoh script di atas, kami menyimpan kode CSS, di situs "Site Google", dalam prakteknya anda dapat menyimpannya dimana saja. Yang umumnya dilakukan oleh para pengembang, biasanya menyimpan script di Github atau pastebin.

3. Lihat hasilnya

Setelah anda selesai meletakkan semua script diatas sesuai dengan ltak dan posisinya. Sekarang kita lihat hasilnya. Bila anda tak salah dalam menempatkan script, maka kita akan melihat hasilnya seperti gambar di bawah ini.

Hasil Akhir dari Pembuatan
Link Download dengan CSS

D. Contoh Script lainya yang dapat anda coba

Biar pelajaran ini lebih lengkap, kami akan berikan contoh script lainnya yang bisa anda coba. Caranya sama saja dengan di atas, anda hanya mengubah script CSS dan kode link download.

Script CSS yang harus anda tempatkan di atas kode </head>

 <style type='text/css'>.game-button {
 position: relative;
 top: 0;
 cursor: pointer;
 text-decoration: none !important;
 outline: none !important;
 font-family: &#39;Carter One&#39;, sans-serif;
 font-size: 20px;
 line-height: 1.5em;
 letter-spacing: .1em;
 text-shadow: 2px 2px 1px #0066a2, -2px 2px 1px #0066a2, 2px -2px 1px #0066a2, -2px -2px 1px #0066a2, 0px 2px 1px #0066a2, 0px -2px 1px #0066a2, 0px 4px 1px #004a87, 2px 4px 1px #004a87, -2px 4px 1px  #004a87;
 border: none;
 margin: 15px 15px 30px;
 background: repeating-linear-gradient( 45deg, #3ebbf7, #3ebbf7 5px, #45b1f4 5px, #45b1f4 10px);
 border-bottom: 3px solid rgba(16, 91, 146, 0.5);
 border-top: 3px solid rgba(255,255,255,.3);
 color: #fff !important;
 border-radius: 8px;
 padding: 8px 15px 10px;
 box-shadow: 0 6px 0 #266b91, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #12517d, 0 12px 0 5px #1a6b9a, 0 15px 0 5px #0c405e, 0 15px 1px 6px rgba(0,0,0,.3);
}
.game-button:hover {
 top:2px;
 box-shadow: 0 4px 0 #266b91, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #12517d, 0 10px 0 5px #1a6b9a, 0 13px 0 5px #0c405e, 0 13px 1px 6px rgba(0,0,0,.3);
}
.game-button::before {
 content: &#39;&#39;;
 height: 10%;
 position: absolute;
 width: 40%;
 background: #fff;
 right: 13%;
 top: -3%;
 border-radius: 99px;
 }
.game-button::after {
 content: &#39;&#39;;
 height: 10%;
 position: absolute;
 width: 5%;
 background: #fff;
 right: 5%;
 top: -3%;
 border-radius: 99px;
 }
.game-button.orange {
  background: repeating-linear-gradient( 45deg, #ffc800, #ffc800 5px, #ffc200 5px, #ffc200 10px);
 box-shadow: 0 6px 0 #b76113, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #75421f, 0 12px 0 5px #8a542b, 0 15px 0 5px #593116, 0 15px 1px 6px rgba(0,0,0,.3);
 border-bottom: 3px solid rgba(205, 102, 0, 0.5);
 text-shadow: 2px 2px 1px #e78700, -2px 2px 1px #e78700, 2px -2px 1px #e78700, -2px -2px 1px #e78700, 0px 2px 1px #e78700, 0px -2px 1px #e78700, 0px 4px 1px #c96100, 2px 4px 1px #c96100, -2px 4px 1px  #c96100;
}
.game-button.orange:hover {
 top:2px;
 box-shadow: 0 4px 0 #b76113, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #75421f, 0 10px 0 5px #8a542b, 0 13px 0 5px #593116, 0 13px 1px 6px rgba(0,0,0,.3);
}
.game-button.red {
  background: repeating-linear-gradient( 45deg, #ff4f4c, #ff4f4c 5px, #ff4643 5px, #ff4643 10px);
 box-shadow: 0 6px 0 #ae2725, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #831614, 0 12px 0 5px #a33634, 0 15px 0 5px #631716, 0 15px 1px 6px rgba(0,0,0,.3);
 border-bottom: 3px solid rgba(160, 25, 23, 0.5);
 text-shadow: 2px 2px 1px #d72d21, -2px 2px 1px #d72d21, 2px -2px 1px #d72d21, -2px -2px 1px #d72d21, 0px 2px 1px #d72d21, 0px -2px 1px #d72d21, 0px 4px 1px #930704, 2px 4px 1px #930704, -2px 4px 1px  #930704;
}
.game-button.red:hover {
 top:2px;
 box-shadow: 0 4px 0 #ae2725, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #831614, 0 10px 0 5px #a33634, 0 13px 0 5px #631716, 0 13px 1px 6px rgba(0,0,0,.3);
}
.game-button.green {
  background: repeating-linear-gradient( 45deg, #54d440, #54d440 5px, #52cc3f 5px, #52cc3f 10px);
   box-shadow: 0 6px 0 #348628, 0 8px 1px 1px rgba(0,0,0,.3), 0 10px 0 5px #2a6d20, 0 12px 0 5px #39822e, 0 15px 0 5px #1d4c16, 0 15px 1px 6px rgba(0,0,0,.3);
   border-bottom: 3px solid rgba(40, 117, 29, 0.5);
   text-shadow: 2px 2px 1px #348628, -2px 2px 1px #348628, 2px -2px 1px #348628, -2px -2px 1px #348628, 0px 2px 1px #348628, 0px -2px 1px #348628, 0px 4px 1px #1d4c16, 2px 4px 1px #1d4c16, -2px 4px 1px #1d4c16;
}

.game-button.green:hover {
  top:2px;
  box-shadow: 0 4px 0 #348628, 0 6px 1px 1px rgba(0,0,0,.3), 0 8px 0 5px #2a6d20, 0 10px 0 5px #39822e, 0 13px 0 5px #1d4c16, 0 13px 1px 6px rgba(0,0,0,.3);
}
</style>

Kode untuk membuat link download

<a href="https://sites.google.com/view/script-schema-organisasi/home"><button class="game-button">Download</button></a>

Lihat hasilnya:

Contoh lainnya yang dapat
anda coba

E. Buat Link Download dengan Image/Gambar

Materi ini sudah cukup banyak, tapi gak apalah akan saya tambahkan lagi untuk menambah wawasan anda. Pada bagian ini kita akan membuat Link download dengan bantuan sebuah gambar/image. Untuk penggunaan Blogger, saya lebih senang menggunakan Link download dengan image, karena tak terlalu banyak menambahkan script di template.

Baiklah langsung saja kita mulai saja. Pertama anda harus mengupload Logo "Download" kedalam halaman postingan Blogger anda. Klick menu "Insert image", kemudian anda pilih gambar. Ada 4 pilihan di menu "Insert image" anda pilih salah satu yang sesuai dengan tempat anda menyimpan gambar.

Upload gambar "Download" kedalam
halaman postingan Blogger

Setelah anda mengupload gambar "Download", aktifkan gambar tersebut dan klick menu "Insert or Edit Link". Perhatikan contoh agmbar berikut.

Ketikkan alamat URL
yang akan di Download oleh
Pembaca anda

Pada contoh di atas kami alamat URL yang akan di download dengan URL

"https://sites.google.com/view/script-schema-organisasi/home"

Sekarang kita lihat hasilnya.

Membuat Link Download
Dengan Gambar

Memiliki tombol unduh membuat semuanya sangat profesional dan memudahkan pengunjung Anda untuk mengunduh file yang diberikan. Ada banyak cara untuk membuat tombol pertama adalah tombol css asli yang sangat sederhana, cepat dan menempati lebih sedikit penyimpanan.

Metode lain adalah gambar bawaan yang dapat digunakan tetapi para profesional tidak merekomendasikannya mengapa? Karena membutuhkan banyak penyimpanan dan meningkatkan waktu pemuatan Anda. Tombol CSS adalah beberapa KB di mana gambar lebih dari 200KB.

Jadi menurut saya selalu gunakan tombol css di blog karena plus profesionalnya membutuhkan lebih sedikit penyimpanan. Ya, mereka tidak mewah tetapi Anda tahu ini tentang pekerjaan bukan tentang mode dan penampilan tetapi sekali lagi tombol game terlihat menarik kan.

Warnet Dapurnet

Internet Cafe