#shorts #short #blogger #googlenews #shortsviral
In this tutorial, you'll learn how to add a Google News Follow Us button to your Blogger website. This button can help increase your visibility on Google News and connect with your audience. Follow the simple steps in this video to add the button to your website today!
CSS
.gn-button {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border: none;
border-radius: 20px;
background-color: #f44336;
color: #fff;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
position: relative;
animation: pulse 2s infinite;
transition: all 0.2s ease-in-out;
}
.gn-button:hover {
background-color: #d32f2f;
}
.gn-button:focus {
outline: none;
}
.gn-icon {
display: block;
width: 24px;
height: 24px;
background-image: url('https://www.gstatic.com/images/icons/material/product/2x/news_48dp.png');
background-size: cover;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.gn-text {
display: inline-block;
margin-left: 10px;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
Get HTML code at www.techrwanda.com since Youtube restricts angled brackets in the description.
hello and welcome to this quick tutorial on how to add a Google News follow us button to your blogger website to get started open the HTML code of your blogger website and paste the code for the button in the location where you want it to appear you can find the code in the video description below customize The Code by replacing the view publisher URL with the URL for your Google News publication and updating the icon inside the image tag to fit your branding save your changes and check out your
new Google News follow us button on your blogger website if that simple leave any questions in the comments below and don't forget to subscribe to our channel for more tutorials like this copy and paste the code from the video description to make the process even easier thanks for watching
Comments