Membuat tombol berbagi di blogpot
blog ini menyediakan Kode - kode Script HTML untuk Blog dan website secara gratis bisa langsung copas.
Kode script di ambil dari berbagai sumber, dan ada juga hasil editan sendiri. Semoga Bermanfaat
klik untuk menyalin
👇
<!-- Tombol Bagikan -->
<div id="share-container">
<button id="share-button" onclick="toggleShareOptions()">Bagikan</button>
<div id="share-options">
<p>Bagikan ke:</p>
<button onclick="shareOnFacebook()">Facebook</button>
<button onclick="shareOnTwitter()">Twitter</button>
<button onclick="shareOnWhatsApp()">WhatsApp</button>
<button onclick="shareOnInstagram()">Instagram</button>
<button onclick="shareOnTelegram()">Telegram</button>
</div>
</div>
<style>
/* Kontainer tombol berbagi */
#share-container {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
text-align: center;
}
/* Tombol utama */
#share-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
#share-button:hover {
background-color: #0056b3;
}
/* Opsi berbagi */
#share-options {
display: none;
background-color: white;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
#share-options p {
margin: 0 0 10px 0;
font-weight: bold;
}
#share-options button {
display: block;
width: 100%;
margin: 5px 0;
padding: 8px;
background-color: #f1f1f1;
border: none;
border-radius: 5px;
cursor: pointer;
}
#share-options button:hover {
background-color: #e0e0e0;
}
</style>
<script>
const pageUrl = encodeURIComponent(window.location.href);
const pageTitle = encodeURIComponent(document.title);
function toggleShareOptions() {
const shareOptions = document.getElementById('share-options');
shareOptions.style.display = shareOptions.style.display === 'none' || !shareOptions.style.display ? 'block' : 'none';
}
function shareOnFacebook() {
window.open(`https://www.facebook.com/sharer/sharer.php?u=${pageUrl}`, '_blank');
}
function shareOnTwitter() {
window.open(`https://twitter.com/intent/tweet?url=${pageUrl}&text=${pageTitle}`, '_blank');
}
function shareOnWhatsApp() {
window.open(`https://wa.me/?text=${pageTitle} - ${pageUrl}`, '_blank');
}
function shareOnInstagram() {
alert('Instagram berbagi tidak didukung melalui web. Gunakan aplikasi Instagram.');
}
function shareOnTelegram() {
window.open(`https://t.me/share/url?url=${pageUrl}&text=${pageTitle}`, '_blank');
}
</script>
Komentar untuk Script share sederhana