Cara Membuat Tombol Install Widget Blogger dengan Animasi Bubble

---

Tombol Install Widget Blogger adalah tombol yang membantu pembaca memasang widget yang kita bagikan dengan proses yang lebih praktis. Pada versi lama tutorial ini, CodeFlare menggunakan fitur Add to Blogger yang dapat mengirim kode widget langsung ke halaman pemasangan gadget Blogger.

Namun mekanisme lama tersebut sudah tidak tersedia lagi pada Blogger modern. Karena itu artikel ini diperbarui menggunakan pendekatan yang masih dapat digunakan: tombol akan menyalin source code widget secara otomatis kemudian menampilkan petunjuk pemasangan melalui Tata Letak → Tambahkan Gadget → HTML/JavaScript.

Konsep tombol bubble tetap dipertahankan karena tampilannya menarik untuk artikel tutorial widget. Perbedaannya, seluruh engine sekarang menggunakan native JavaScript tanpa jQuery.

Pendekatan ini juga lebih transparan. Pembaca dapat melihat source code terlebih dahulu, menyalinnya, kemudian menentukan sendiri di bagian mana widget akan dipasang.

Informasi Singkat

---

Fitur lama Add to Blogger yang menggunakan endpoint blogger.com/add-widget tidak lagi menjadi metode pemasangan widget Blogger.

Blogger saat ini menyediakan pemasangan gadget melalui Tata Letak → Tambahkan Gadget. Untuk widget custom, pilih gadget HTML/JavaScript.

Tutorial versi baru menggunakan tombol Copy & Install yang menyalin kode widget kemudian memberikan petunjuk pemasangan.

DAFTAR ISI

1. Kenapa Add to Blogger Lama Tidak Digunakan?
2. Live Preview Tombol Bubble
3. Cara Kerja Tombol Install Widget
4. Source Code Tombol Bubble
5. Source Code JavaScript Installer
6. Cara Menghubungkan Tombol dengan Code Box
7. Penggunaan Banyak Tombol dalam Satu Artikel
8. Cara Memasang Widget di Blogger
9. Menyalin Kode HTML Aktif
10. Generator Tombol Install Widget
11. Troubleshooting

Kenapa Add to Blogger Lama Tidak Digunakan?

Pada versi lama tutorial ini digunakan form seperti:

<form action="https://www.blogger.com/add-widget" method="post" target="_blank"> ... </form>

Form tersebut dahulu dapat membawa pengguna langsung menuju halaman penambahan widget.

Sekarang pendekatan tersebut tidak lagi dapat dijadikan fondasi widget installer Blogger.

Metode yang masih didukung adalah:

01 WIDGET CODE Source tersedia

02 COPY Tombol menyalin

03 LAYOUT Buka Tata Letak

04 INSTALL Paste & simpan

Perubahan Penting

Jika menemukan tutorial lama yang masih menggunakan blogger.com/add-widget, jangan mengandalkan metode tersebut untuk tutorial baru. Gunakan metode copy code dan pemasangan melalui Tata Letak Blogger.

Live Preview Tombol Bubble

Tombol berikut menggunakan efek bubble pada hover. Tekan tombol untuk menyalin contoh widget kemudian ikuti petunjuk yang muncul.

WIDGET INSTALLER BLOGGER HELPER

READY

Demo Widget CodeFlare Contoh source HTML sederhana untuk mencoba installer.

Tekan tombol untuk menyalin source code widget.

NATIVE JS NO JQUERY

Cara Kerja Tombol Install Widget

Tombol tidak lagi mengirim form ke server Blogger.

Setiap tombol mempunyai attribute:

data-copy-target="#kodeWidget1"

Attribute tersebut menunjuk ke elemen tempat source code disimpan.

Ketika tombol ditekan:

01

Cari Source

JavaScript membaca selector pada data-copy-target.

02

Ambil Teks

Source dibaca dari textarea atau elemen code.

03

Copy Clipboard

Kode dikirim ke Clipboard API.

04

Tampilkan Petunjuk

Pengguna mendapat informasi langkah pemasangan.

Source Code Tombol Bubble

Berikut markup tombol:

<button class="cfInstallButton cfBubble" type="button" data-copy-target="#kodeWidget1"> <span class="cfInstallIcon"> <i class="fa fa-code"></i> </span> <span class="cfInstallText"> <b>Copy &amp; Install</b> <small>Blogger Widget</small> </span> </button>

CSS:

.cfInstallButton{ position:relative; display:inline-flex; align-items:stretch; min-height:46px; padding:0; overflow:hidden; border:1px solid #0083da; border-radius:3px; background:#0083da; color:#fff; cursor:pointer; font:inherit; text-decoration:none; isolation:isolate; } .cfInstallIcon{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:46px; background:rgba(0,0,0,.16); font-size:19px; } .cfInstallText{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; min-width:145px; padding:6px 12px; text-align:left; } .cfInstallText b, .cfInstallText small{ display:block; } .cfInstallText b{ font-size:13px; } .cfInstallText small{ margin-top:1px; font-size:9px; opacity:.8; } .cfBubble:before, .cfBubble:after{ content:""; position:absolute; z-index:1; border-radius:50%; background:rgba(255,255,255,.25); pointer-events:none; } .cfBubble:before{ width:16px; height:16px; left:20%; bottom:-20px; } .cfBubble:after{ width:10px; height:10px; right:18%; bottom:-15px; } .cfBubble:hover:before{ animation:cfBubbleA .75s ease-out forwards; } .cfBubble:hover:after{ animation:cfBubbleB .9s ease-out forwards; } .cfInstallButton:hover{ box-shadow:0 0 15px rgba(0,131,218,.3); } .cfInstallButton:hover .cfInstallIcon i{ animation:cfInstallRotate .55s ease; } @keyframes cfBubbleA{ 0%{ opacity:0; transform:translateY(0) scale(.5); } 30%{ opacity:1; } 100%{ opacity:0; transform:translateY(-70px) scale(1.5); } } @keyframes cfBubbleB{ 0%{ opacity:0; transform:translateY(0) scale(.6); } 25%{ opacity:1; } 100%{ opacity:0; transform:translateY(-60px) scale(1.8); } } @keyframes cfInstallRotate{ to{ transform:rotateY(360deg); } } @media(prefers-reduced-motion:reduce){ .cfBubble:hover:before, .cfBubble:hover:after, .cfInstallButton:hover .cfInstallIcon i{ animation:none; } }

Versi baru tidak menggunakan sebelas radial-gradient seperti CSS lama sehingga lebih mudah dimodifikasi.

Source Code JavaScript Installer

Engine berikut dapat melayani banyak tombol sekaligus.

<script> //<![CDATA[ (function(){ "use strict"; function copyText(text){ if( navigator.clipboard && window.isSecureContext ){ return navigator.clipboard .writeText(text); } return new Promise( function(resolve,reject){ var area= document.createElement( "textarea" ); area.value=text; area.style.position="fixed"; area.style.opacity="0"; document.body .appendChild(area); area.focus(); area.select(); try{ document.execCommand( "copy" ); area.remove(); resolve(); }catch(error){ area.remove(); reject(error); } } ); } function getSource(selector){ var source= document.querySelector( selector ); if(!source){ return ""; } if( source.tagName==="TEXTAREA" || source.tagName==="INPUT" ){ return source.value; } return source.textContent; } document.addEventListener( "click", function(event){ var button= event.target.closest( ".cfInstallButton[data-copy-target]" ); if(!button)return; var selector= button.dataset.copyTarget; var code= getSource(selector); if(!code.trim()){ alert( "Source code tidak ditemukan." ); return; } copyText(code.trim()) .then(function(){ button.classList.add( "is-copied" ); var original= button.querySelector( ".cfInstallText b" ); if(original){ var old= original.textContent; original.textContent= "Code Copied"; setTimeout( function(){ original.textContent= old; button.classList.remove( "is-copied" ); }, 1600 ); } window.dispatchEvent( new CustomEvent( "cfWidgetCopied", { detail:{ selector:selector, code:code } } ) ); }) .catch(function(){ alert( "Copy otomatis gagal. Silakan copy source code secara manual." ); }); } ); })(); //]]> </script>

Cara Menghubungkan Tombol dengan Code Box

Cara paling aman adalah menyimpan source widget pada textarea tersembunyi.

<textarea id="kodeWidget1" hidden> <div class="widget-demo"> Widget Saya </div> <script> console.log("Widget aktif"); </script> </textarea> <button class="cfInstallButton cfBubble" type="button" data-copy-target="#kodeWidget1"> <span class="cfInstallIcon"> <i class="fa fa-code"></i> </span> <span class="cfInstallText"> <b>Copy &amp; Install</b> <small>Blogger Widget</small> </span> </button>

Karena source berada di textarea, kode HTML di dalamnya tidak dirender sebagai widget pada artikel.

Script cukup membaca:

source.value

sehingga kita tidak perlu melakukan banyak operasi:

.replace("<", "<") .replace(">", ">") .replace("&", "&")

Gunakan Textarea untuk Source Aktif

Jika widget yang dibagikan mempunyai HTML, CSS dan JavaScript lengkap, menyimpannya dalam textarea biasanya lebih sederhana dibanding mengambil source dari code viewer kemudian melakukan decode entity satu per satu.

Penggunaan Banyak Tombol dalam Satu Artikel

Engine baru mendukung banyak installer pada artikel yang sama.

<textarea id="widgetA" hidden> Widget A... </textarea> <button class="cfInstallButton cfBubble" data-copy-target="#widgetA" type="button"> Copy Widget A </button> <textarea id="widgetB" hidden> Widget B... </textarea> <button class="cfInstallButton cfBubble" data-copy-target="#widgetB" type="button"> Copy Widget B </button>

Anda tidak perlu membuat JavaScript baru untuk setiap tombol.

Cukup pastikan setiap textarea mempunyai ID unik dan tombol menunjuk ke ID yang benar.

Cara Memasang Widget di Blogger

Setelah kode berhasil disalin, pemasangan widget dilakukan melalui Tata Letak Blogger.

01

Login Blogger

Buka dashboard blog yang ingin dipasang widget.

02

Buka Tata Letak

Pilih menu Tata Letak.

03

Tambahkan Gadget

Pilih area tempat widget akan ditampilkan.

04

Pilih HTML/JavaScript

Gunakan gadget custom HTML/JavaScript.

05

Paste Kode

Tempel source yang tadi sudah dicopy.

06

Simpan

Simpan gadget dan periksa hasilnya pada blog.

Periksa Source Code

Jangan memasang widget pihak ketiga tanpa membaca source code terlebih dahulu. Script yang ditempel melalui HTML/JavaScript gadget berjalan pada halaman blog dan dapat memengaruhi tampilan maupun fungsi template.

Menyalin Kode HTML Aktif

Pada artikel lama terdapat pembahasan panjang mengenai mengubah kode pasif seperti:

&lt;div&gt;

menjadi:

<div>

Pada versi baru, cara terbaik adalah menyimpan kode mentah di textarea sehingga proses decode tidak diperlukan.

Namun jika source memang berasal dari HTML entity, gunakan browser DOM untuk melakukan decode:

function decodeHtml(html){ var textarea = document.createElement( "textarea" ); textarea.innerHTML = html; return textarea.value; }

Cara tersebut lebih aman daripada membuat puluhan operasi replace manual.

Generator Tombol Install Widget

Generator berikut membuat markup tombol installer berdasarkan ID source code.

BUTTON GENERATOR INSTALLER MARKUP

Source ID Judul Tombol Subjudul Icon Font Awesome

Troubleshooting

Tombol tidak menyalin kode

Pastikan nilai data-copy-target sama dengan ID textarea source.

Copy otomatis gagal

Clipboard API dapat dibatasi pada halaman tertentu. Engine menyediakan fallback menggunakan textarea sementara.

Kode widget malah tampil di artikel

Pastikan source disimpan di textarea dengan attribute hidden.

Bubble tidak bergerak

Perangkat mungkin menggunakan Reduced Motion sehingga animasi sengaja dinonaktifkan.

Widget tidak berjalan setelah dipasang

Periksa apakah source membutuhkan library tambahan atau bentrok dengan JavaScript template.

Add to Blogger lama tidak terbuka

Gunakan sistem installer baru. Endpoint Add to Blogger lama tidak lagi menjadi metode pemasangan widget yang dapat diandalkan.

INSTALLER NOTE

Tombol installer tidak mempunyai akses untuk memasang gadget secara otomatis ke akun Blogger pengguna. Pengguna tetap harus menentukan sendiri blog, posisi gadget dan kode yang akan dipasang.

Konsep tombol Add to Blogger tetap menarik untuk artikel tutorial widget, tetapi implementasinya harus mengikuti kondisi Blogger sekarang.

Daripada mempertahankan form lama yang sudah tidak didukung, tombol kini berfungsi sebagai installer helper: menyalin source code secara otomatis kemudian mengarahkan pembaca mengikuti proses pemasangan resmi melalui Tata Letak Blogger.

Native JavaScript juga membuat engine jauh lebih sederhana karena tidak perlu memuat jQuery hanya untuk mencari elemen, membaca teks dan mengubah isi tombol.

Jika artikel mempunyai banyak widget, cukup buat satu engine installer lalu gunakan beberapa textarea dan tombol dengan data-copy-target berbeda.

Dengan cara ini tutorial widget tetap praktis digunakan dan source code yang dibagikan juga lebih transparan bagi pembaca.

Referensi Blogger Pemasangan gadget dan pengeditan template.

Mengubah Desain Blog Data Widget Blogger