To add a feedback button to your Blogger blog, you can use HTML, CSS, and JavaScript to create a button that directs users to a feedback form or another platform where they can provide feedback. Here's how you can implement it.
How to implement code follow steps after
below code
<style>
/* Add styles for the overlay */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 80%;
height: 80%;
background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
display: none; /* Initially hidden */
}
/* Add styles for the blinking text */
.blinking-text {
position: fixed;
bottom: 5px;
left: 15%;
transform: translateX(-50%);
color: red; /* Initial color */
font-size: 0.90em;
background-color: #4CAF50; /* Background color similar to the button */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
animation: blinkColor 1s infinite alternate;
}
/* Define the blink animation */
@keyframes blinkColor {
0% {
color: red;
}
100% {
color: white;
}
}
</style>
<!-- Add an overlay div -->
<div id="overlay"></div>
<!-- Add a blinking text with an onclick event to show the overlay and redirect to Google.com -->
<p class="blinking-text" onclick="showOverlayAndRedirect()">Support us!</p>
<script>
function showOverlayAndRedirect() {
// Show the overlay
document.getElementById('overlay').style.display = 'block';
// Redirect to Google.com after a short delay (you can adjust the delay)
setTimeout(function () {
window.location.href = 'https://www.k2atech.in/p/candidate-feedback.html';
}, 1000); // 1000 milliseconds = 1 second (adjust as needed)
}
</script>
To implement the functionality on your Blogger blog, follow these steps:
1. Open Blogger:
- Log in to your Blogger account.
2. Go to 'Layout' and click on 'Add a Gadget':
- Navigate to the 'Layout' section of your Blogger dashboard.
- Click on 'Add a Gadget' .
3. Select 'HTML/Javascript Gadget':
- From the list of available gadgets, select the 'HTML/Javascript' gadget.
4. Paste the provided code directly into the gadget:
- Copy the provided code snippet.
- Paste the code directly into the 'HTML/Javascript' gadget.
5. Save the gadget and visit your blog to see live changes:
- Save the changes made to the gadget.
