Bagaimana mana caranya? menambahkan widget follow, like, dan komentar melayang di Blogger
Disini saya share untuk mu yang lagi mencari cara menambahkan widget follow, like, dan komentar melayang di Blogger
Untuk menambahkan widget follow, like, dan komentar melayang di Blogger, Anda dapat mengikuti langkah-langkah berikut:
Buka menu Layout di Blogger dan klik "Tambah Gadget" pada salah satu bagian blog Anda.
Pilih gadget "HTML/JavaScript" dari daftar yang tersedia.
Salin dan tempel kode HTML/JavaScript berikut ke dalam kotak gadget:
Untuk widget follow:
<div style="position: fixed; top: 40%; left: 0; z-index: 99;">
<a href="https://www.facebook.com/NamaAkunFacebookAnda" target="_blank"><img src="https://i.imgur.com/QrLRM7V.png" alt="Follow on Facebook" width="40" height="40"></a>
<a href="https://www.twitter.com/NamaAkunTwitterAnda" target="_blank"><img src="https://i.imgur.com/ybRZiRm.png" alt="Follow on Twitter" width="40" height="40"></a>
<a href="https://www.instagram.com/NamaAkunInstagramAnda" target="_blank"><img src="https://i.imgur.com/8n1HR2f.png" alt="Follow on Instagram" width="40" height="40"></a>
</div>
Pastikan untuk mengganti "NamaAkunFacebookAnda", "NamaAkunTwitterAnda", dan "NamaAkunInstagramAnda" dengan nama akun media sosial Anda.
Untuk widget like:
css
<div style="position: fixed; top: 50%; left: 0; z-index: 99;">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FHalamanFacebookAnda&width=450&layout=standard&action=like&size=large&share=true&height=80&appId=xxxxxxxxxxxxxxxx" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
Pastikan untuk mengganti "HalamanFacebookAnda" dengan URL halaman Facebook Anda dan "xxxxxxxxxxxxxxxx" dengan ID aplikasi Facebook Anda.
Untuk widget komentar:
<div style="position: fixed; top: 60%; left: 0; z-index: 99;">
<a href="https://www.facebook.com/NamaAkunFacebookAnda" target="_blank"><img src="https://i.imgur.com/AgbKz4L.png" alt="Comment on Facebook" width="40" height="40"></a>
<a href="https://www.twitter.com/NamaAkunTwitterAnda" target="_blank"><img src="https://i.imgur.com/uqNJhLT.png" alt="Comment on Twitter" width="40" height="40"></a>
<a href="https://www.instagram.com/NamaAkunInstagramAnda" target="_blank"><img src="https://i.imgur.com/9XUIeEl.png" alt="Comment on Instagram" width="40" height="40"></a>
</div>
Pastikan untuk mengganti "NamaAkunFacebookAnda", "NamaAkunTwitterAnda", dan "NamaAkunInstagramAnda" dengan nama akun media sosial Anda.
Klik "Simpan" untuk menyimpan perubahan dan lihat bagaimana widget melayang tersebut muncul pada blog Anda.
Anda dapat menggunakan kode HTML berikut ini untuk menggabungkan semua widget (follow, like, dan komentar) menjadi satu dalam satu kotak melayang:
<div style="position: fixed; top: 50%; right: 0; z-index: 99;">
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="margin-bottom: 10px;">
<a href="https://www.facebook.com/NamaAkunFacebookAnda" target="_blank"><img src="https://i.imgur.com/QrLRM7V.png" alt="Follow on Facebook" width="40" height="40"></a>
<a href="https://www.twitter.com/NamaAkunTwitterAnda" target="_blank"><img src="https://i.imgur.com/ybRZiRm.png" alt="Follow on Twitter" width="40" height="40"></a>
<a href="https://www.instagram.com/NamaAkunInstagramAnda" target="_blank"><img src="https://i.imgur.com/8n1HR2f.png" alt="Follow on Instagram" width="40" height="40"></a>
</div>
<div style="margin-bottom: 10px;">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FHalamanFacebookAnda&width=450&layout=standard&action=like&size=large&share=true&height=80&appId=xxxxxxxxxxxxxxxx" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div>
<a href="https://www.facebook.com/NamaAkunFacebookAnda" target="_blank"><img src="https://i.imgur.com/AgbKz4L.png" alt="Comment on Facebook" width="40" height="40"></a>
<a href="https://www.twitter.com/NamaAkunTwitterAnda" target="_blank"><img src="https://i.imgur.com/uqNJhLT.png" alt="Comment on Twitter" width="40" height="40"></a>
<a href="https://www.instagram.com/NamaAkunInstagramAnda" target="_blank"><img src="https://i.imgur.com/9XUIeEl.png" alt="Comment on Instagram" width="40" height="40"></a>
</div>
</div>
</div>
Pastikan untuk mengganti "NamaAkunFacebookAnda", "NamaAkunTwitterAnda", "NamaAkunInstagramAnda", "HalamanFacebookAnda", dan "xxxxxxxxxxxxxxxx" dengan informasi akun dan URL media sosial Anda yang sesuai.
Simpan kode HTML tersebut dalam widget HTML/JavaScript pada menu Layout di Blogger dan perbarui blog Anda untuk melihat widget melayang tersebut.
Widget follow, like, komen, melayang dalam satu html atau javascript
Anda dapat menggunakan kode HTML/JavaScript berikut untuk menggabungkan semua widget (follow, like, dan komentar) menjadi satu dalam satu kotak melayang:
<style>
.floating-widgets {
position: fixed;
top: 50%;
right: 0;
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
}
.floating-widgets img {
margin: 5px;
}
.floating-widgets iframe {
margin: 10px 0;
border: none;
overflow: hidden;
}
</style>
<div class="floating-widgets">
<a href="https://www.facebook.com/NamaAkunFacebookAnda" target="_blank"><img src="https://i.imgur.com/QrLRM7V.png" alt="Follow on Facebook" width="40" height="40"></a>
<a href="https://www.twitter.com/NamaAkunTwitterAnda" target="_blank"><img src="https://i.imgur.com/ybRZiRm.png" alt="Follow on Twitter" width="40" height="40"></a>
<a href="https://www.instagram.com/NamaAkunInstagramAnda" target="_blank"><img src="https://i.imgur.com/8n1HR2f.png" alt="Follow on Instagram" width="40" height="40"></a>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FHalamanFacebookAnda&width=450&layout=standard&action=like&size=large&share=true&height=80&appId=xxxxxxxxxxxxxxxx" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
<a href="https://www.facebook.com/NamaAkunFacebookAnda" target="_blank"><img src="https://i.imgur.com/AgbKz4L.png" alt="Comment on Facebook" width="40" height="40"></a>
<a href="https://www.twitter.com/NamaAkunTwitterAnda" target="_blank"><img src="https://i.imgur.com/uqNJhLT.png" alt="Comment on Twitter" width="40" height="40"></a>
<a href="https://www.instagram.com/NamaAkunInstagramAnda" target="_blank"><img src="https://i.imgur.com/9XUIeEl.png" alt="Comment on Instagram" width="40" height="40"></a>
</div>
<script>
// Ubah "NamaAkunFacebookAnda", "NamaAkunTwitterAnda", "NamaAkunInstagramAnda", "HalamanFacebookAnda", dan "xxxxxxxxxxxxxxxx" dengan informasi akun dan URL media sosial Anda yang sesuai
const facebookUrl = "https://www.facebook.com/NamaAkunFacebookAnda";
const twitterUrl = "https://www.twitter.com/NamaAkunTwitterAnda";
const instagramUrl = "https://www.instagram.com/NamaAkunInstagramAnda";
const facebookPageUrl = "https://www.facebook.com/HalamanFacebookAnda";
const facebookAppId = "xxxxxxxxxxxxxxxx";
// Atur tautan untuk mengikuti
document.querySelector(".floating-widgets a[href='" + facebookUrl + "']").setAttribute("href", facebookUrl);
document.querySelector(".floating-widgets a[href='" + twitterUrl + "']").setAttribute("href",
Oke, mungkin segitu dulu, semoga bermanfaat.
Komentar
Posting Komentar