Pontren

Pondok Pesantren, Dayah, Surau, Meunasah, atau sebutan lain yang selanjutnya disebut Pesantren adalah lembaga yang berbasis masyarakat dan didirikan oleh perseorangan, yayasan, organisasi masyarakat Islam, dan/atau masyarakat ang menanamkan keimanan dan ketakwaan kepada Allah Swt., menyemaikan akhlak mulia serta memegang teguh ajaran Islam rahmatan lil’alamin yang tercermin dari sikap rendah hati, toleran, keseimbangan, moderat, dan nilai luhur bangsa Indonesia lainnya melalui pendidikan, dakwah Īslam, keteladanan, dan pemberdayaan masyarakat dalam kerangka Negara Kesatuan Republik Indonesia.. (UU No 18 Thn 2019
Recent Comments
Tidak ada komentar untuk ditampilkan.
Archives
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo Floating Button</title>
<style>
/* Floating Button CSS */
#floating-button {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 9999;
transition: transform 0.3s ease; /* Add transition for smooth effect */
}
#floating-button button {
background: linear-gradient(135deg, #00b4db, #0083b0);
border: none;
border-radius: 50%;
padding: 15px;
color: #fff;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#floating-button button:hover {
transform: scale(1.1);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
#dropdown-menu {
display: none;
position: fixed; /* Change to fixed for better positioning */
left: 0;
bottom: 60px;
background: rgba(255, 255, 255, 0.9); /* Transparent background */
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 9998;
}
#dropdown-menu a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
transition: background-color 0.3s ease;
}
#dropdown-menu a:hover {
background-color: #f1f1f1;
}
/* Mobile Specific CSS */
@media (max-width: 600px) {
#floating-button button {
padding: 10px;
font-size: 18px;
}
#dropdown-menu {
bottom: 70px; /* Adjust position to ensure it is visible above the floating button */
}
}
</style>
</head>
<body>
<!-- Floating Button HTML -->
<div id="floating-button">
<button onclick="toggleDropdown()">☰</button>
<div id="dropdown-menu">
<a href="https://kemenagsimeulue.online" target="_blank">Home</a>
<a href="https://ptsp.kemenagsimeulue.online" target="_blank">PTSP</a>
<a href="https://subbagtu.kemenagsimeulue.online" target="_blank">Subbag TU</a>
<a href="https://penmad.kemenagsimeulue.online" target="_blank">Penmad</a>
<a href="https://bimas.kemenagsimeulue.online" target="_blank">Bimas</a>
<a href="https://zawa.kemenagsimeulue.online" target="_blank">Zawa</a>
<a href="https://#" target="_blank">Madrasah</a>
<a href="https://#" target="_blank">KUA</a>
<a href="https://phu.kemenagsimeulue.online" target="_blank">PHU</a>
<a href="https://pakis.kemenagsimeulue.online" target="_blank">Pakis</a>
</div>
</div>
<script>
var lastScrollTop = 0;
var floatingButton = document.getElementById('floating-button');
function toggleDropdown() {
var menu = document.getElementById('dropdown-menu');
menu.style.display = (menu.style.display === 'block' || menu.style.display === '') ? 'none' : 'block';
}
// Close dropdown if clicking outside
document.addEventListener('click', function(event) {
var button = document.getElementById('floating-button');
var menu = document.getElementById('dropdown-menu');
if (!button.contains(event.target) && !menu.contains(event.target)) {
menu.style.display = 'none';
}
});
// Show/Hide floating button on scroll
window.addEventListener('scroll', function() {
var currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (currentScroll > lastScrollTop) {
// Scrolling down
floatingButton.style.transform = 'translateY(100px)'; // Hide off screen
} else {
// Scrolling up
floatingButton.style.transform = 'translateY(0)'; // Show on screen
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll; // For Mobile Safari
});
</script>
</body>
</html>