...

ZD

Copy to clipboard


Paste this code in the BLOG section of your Divi integration SECOND BOX


<!-- JavaScript Code Placeholder -->
<script>
document.addEventListener("DOMContentLoaded", function() {
		document.querySelectorAll(".copy-btn").forEach((button) => {
			button.addEventListener("click", function() {
				// Select the code content inside the sibling element
				const codeContent = this.parentElement.querySelector("code").innerText;

				// Copy text to clipboard
				navigator.clipboard.writeText(codeContent).then(() => {
					// Check if a notification already exists
					let notification = this.parentElement.querySelector(".copy-notification");
					
					// If it doesn't exist, create a new one
					if (!notification) {
						notification = document.createElement("span");
						notification.className = "copy-notification";
						notification.innerText = "COPIED";
						this.parentElement.appendChild(notification);
					}

					// Show the notification
					notification.style.display = "block";
					
					// Hide the notification after 2 seconds
					setTimeout(() => {
						notification.style.display = "none";
					}, 2000);
				}).catch(err => {
					console.error("Error copying code: ", err);
				});
			});
		});
	});
</script>
    


Paste this in the Divi theme options css


/* Style for the code box */
.code-box {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
    position: relative;
    margin: 20px 0;
    max-width: 100%;
    overflow-x: auto;
}

/* Style for the Copy Code button */
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
    background-color: #000000;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.copy-btn:hover {
    background-color: #808080;
}

/* Style for code block text */
pre {
    margin-top: 20px;
    white-space: pre-wrap; /* Wrap code for responsive view */
}

code {
    font-family: 'Courier New', Courier, monospace;
    color: #333;
}

/* Style for the "COPIED" notification */
.copy-notification {
    position: absolute;
    top: 10px;
    right: 120px; /* Adjusts position near the Copy button */
    background-color: #000000;
    color: #ffffff;
    padding: 5px 8px;
    font-size: 12px;
    border-radius: 3px;
    display: none; /* Hidden by default */
}
    


Paste this in your blog post for HTML CODE


<div> put your code in here
</div>
    


Paste this in your blog post for JS CODE


<!-- JavaScript Code Placeholder -->
<script>
// Get the current date and time
let currentDate = new Date();

// Format the time in hours and minutes
let formattedTime = currentDate.getHours() + ":" + currentDate.getMinutes();

// Display the time in the console
console.log("Current Time:", formattedTime);

</script>
    


Paste this in your blog post for CSS CODE


/* Style for the code box */
.code-box {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
    position: relative;
    margin: 20px 0;
    max-width: 100%;
    overflow-x: auto;
}


<!-- FOR PHP Code Placeholder -->
<?php
date_default_timezone_set('UTC'); // Set the timezone
$hour = date("H"); // Get the current hour
if ($hour < 12) {
    echo "Good morning!";
} else {
    echo "Good afternoon!";
}
?>