Do you want to add a scrolling news ticker to your WordPress or Blogger site using google sheet database?
Television networks often use news tickers to highlight important stories. This is a great way to get the visitor’s attention, so you might want to add a news ticker to your website and then highlight special deals, popular posts, and other important content.
In this article, we will show you how to add a scrolling news ticker in WordPress.
Setup Video Guide Video
Please Follow The Steps Here
Click On Make a Copy To Copy the File In your Drive
Now Click on Extension and Choose a Appscript Option
Click on Deploy and Press on New Deployment
Now Here You Need to Select Anyone and Press on Deploy
After Deploy Allow Permission After Permission Given a URL Comes Which
is Used to Access Your Web App and if You change in codes after
deployment You need to apply Changes Need Deploy Again or Manage
Deployments,
Code.js
function doPost(e) {
var sheet = SpreadsheetApp.openById('/// YOUR GOOGLE SHEET ID HERE /////').getSheetByName('// YOUR SHEET NAME ///');
var data = sheet.getRange('YOUR COLUMN FOR FETCH DATA').getValues();
var news = [];
for (var i = 0; i < data.length; i++) {
if (data[i][0] !== '') {
news.push(data[i][0]);
}
}
// Return the news data as JSON
return ContentService.createTextOutput(JSON.stringify(news))
.setMimeType(ContentService.MimeType.JSON);
}
PASTE CODE IN STYLE TAG IN INDEX
#marquee-cont {
background: #f4f4f4;
margin-top:10px;
}
#marquee-cont marquee {
margin-top: 5px;
}
#marquee-news {
background: #1174A8;
padding: 5px;
}
#ticker-title{
border:none;
padding:5px 20px;
background:#1174A8;
color:white;
}
#ticker-title:focus{
outline:none;
}
Index.html
<header>
<div id="marquee-cont">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50px" style="background:#1174A8;">
<button id="ticker-title">LATEST NEWS:</button>
</td>
<td id="marquee">
<marquee onmouseover="this.stop();" onmouseout="this.start();" id="scroll"></marquee>
</td>
</tr>
</table>
</div>
</header>
<style>
#marquee-cont {
background: #f4f4f4;
margin-top:10px;
}
#marquee-cont marquee {
margin-top: 5px;
}
#marquee-news {
background: #1174A8;
padding: 5px;
}
#ticker-title{
border:none;
padding:5px 20px;
background:#1174A8;
color:white;
}
#ticker-title:focus{
outline:none;
}
</style>
<script>
// Function to fetch data from Google Apps Script
function fetchData() {
fetch('// YOUR SCRIPT ID //', {
method: 'POST'
})
.then(response => response.json())
.then(news => {
let tickerText = '';
const logo = "<img src='/// LOGO PNG URL ///' width='25px' style='margin:0 8px'/>";
// Loop through the news data and construct ticker text
news.forEach((item, index) => {
tickerText += item;
if (index !== news.length - 1) {
tickerText += logo;
}
});
document.getElementById("scroll").innerHTML = tickerText;
})
.catch(error => console.error('Error fetching data:', error));
}
// Call fetchData function when the page loads
fetchData();
</script>
Terms of Use
If you want to use this Code in your posts, please don't remove the
attributes from the codes, it will not be visible on your website.
If you want to rewrite an article on this Codebox by using these codes, you
must add a Reference with visible and clickable link redirecting to our
website: https://www.rameezimdad.blogspot.com. If you rewrite without
Reference, Legal Actions will be taken.
Conclusion
This is all about to help uou to Automate Your Business. I hope you enjoy
this article. Please do share this article. And if you are facing problem in
any section or you have any question then ask us in comment box. Thank
you!