){kind=link}
If you’re looking to make your Blogger or Blogspot site stand out, you know that sometimes a few small tweaks make the biggest difference. Over the years, I’ve collected and tested a variety of widgets that go beyond the standard options. I’ve dug through my personal archives to pull out the ones I’ve actually found useful for adding both style and functionality to a blog.
I’m sharing this collection because I’ve seen how these tools can help boost engagement or just make a site look more professional. Whether you want to add a unique feature or just clean up your layout, there’s likely something here that fits your vision. Feel free to use these to help spice up your own site!
Just a quick tip: Once you add these to your blog, keep an eye out for any placeholder text highlighted in red—you'll need to edit those parts to match your own info. Happy blogging!
Floating Widgets
Floating Footer Advertisement
If you're looking to boost your ad visibility, this widget is perfect for running a Super Leaderboard (970 x 90 or 728 x 90). You can definitely experiment with other sizes to see what fits your specific layout best. I’ve noticed a lot of successful bloggers using this setup for their Google AdSense—it keeps the ads in view without being too intrusive, which is great for performance.
<script type='text/javascript'>
$(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0)'>
<div><a id='close-fixedban' onclick='document.getElementById('fixedban').style.display='none'' style='cursor:pointer'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOevoV0b6_IHs1jyH_-23ByIDN2CfJr-j18_nKp_us_JtmUDp4RtBdGT-Z6ud0moJhWFDhhxqzMJJwQKjtCAg_Zc-x7cqTFIQzV8jla1h5P_yMMGAEUJa12-yti-0B3tR9WvTrNUE-q4S0/s1600/close-btn.gif' style='vertical-align:middle' title='close button'/></a></div>
<div style='text-align:center;display:block;max-width:800px;height:auto;overflow:hidden;margin:auto'>
<a href='https://vandeweybalao.blogspot.com/2019/09/looking-for-a-partner-program-that-is-worth-your-time-and-effort.html' rel='nofollow' target='_blank' title='Earn Passive Income with LiveChat'><img alt='Earn Passive Income with LiveChat' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3RrtqhM91Kq30OuioudASaR_ezFv3uY1roAv-c_YXu5V4j0ilpQdRXxO5duB69GJBIM8CqFv0nfDRa4KEvRiwGAIgZQQvEMD0W-jBdo32Jc8QCkBcWTQOT9j7MYw0qegdDIVU0LI49re/s0/grow-your-business-with-livechat.jpg' style='max-width:100%;height:auto;vertical-align:middle'/></a>
</div>
</div>Floating Side Ads (Left & Right)
These are designed for 160 x 600 Wide Skyscraper ads. They are perfect for filling up that extra space on the sides of your layout to keep your ad revenue visible.
Option 1: Fixed (No Close Buttons)
Choose this if you want the ads to stay locked in place as the user scrolls.
<div style="left: 0px; position: fixed; text-align: center; top: 18%;">
<!--Start Left Ad -->
Insert ad your code here
<!--End of Left Ad -->
<div style="position: fixed; right: 0px; text-align: center; top: 18%;">
<!--Start Right Ad -->
Insert ad your code here
<!--End of Right Ad -->Option 2: Dismissible (With Close Buttons)
This version is a bit more user-friendly, allowing your readers to close the ads if they find them distracting.
<div id="leftads" style="width:160px; height:600px; text-align:center;display:scroll;position:fixed; z-index:1001; bottom:5%;left:1%;">
<div>
<div><a id='close-leftads' onclick='document.getElementById('leftads').style.display='none'' style='cursor:pointer'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOevoV0b6_IHs1jyH_-23ByIDN2CfJr-j18_nKp_us_JtmUDp4RtBdGT-Z6ud0moJhWFDhhxqzMJJwQKjtCAg_Zc-x7cqTFIQzV8jla1h5P_yMMGAEUJa12-yti-0B3tR9WvTrNUE-q4S0/s1600/close-btn.gif' style='vertical-align:middle' title='Close'/></a></div>
</div>
<!--Start Left Ad -->
Insert ad your code here
<!--End of Left Ad -->
</div>
<div id="rightads" style="width:160px; height:600px; text-align:center; display:scroll;position:fixed; z-index:1001; bottom:5%;right:1%;">
<div>
<div><a id='close-rightads' onclick='document.getElementById('rightads').style.display='none'' style='cursor:pointer'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOevoV0b6_IHs1jyH_-23ByIDN2CfJr-j18_nKp_us_JtmUDp4RtBdGT-Z6ud0moJhWFDhhxqzMJJwQKjtCAg_Zc-x7cqTFIQzV8jla1h5P_yMMGAEUJa12-yti-0B3tR9WvTrNUE-q4S0/s1600/close-btn.gif' style='vertical-align:middle' title='Close'/></a></div>
</div>
<!--Start Right Ad-->
Insert your code here
<!--End of Right Ad -->
</div>Pop-up Widgets
If you want to grab your readers' attention for a specific announcement or newsletter signup, these pop-up styles work great.
Pop-up Style #1
<dialog style="z-index: 10000;">
<div><button id="close">X</button>
<div style="color: grey; float: right; font-size: 8px;">
Advertisement.</div></div>
<h1>Website Templates</h1>
<a href="https://bit.ly/2L13L6d" rel="noreferrer" target="_blank"><img alt="SEO optimized and responsive Blogger templates." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJqDVFYBrsv9rAS5jmX4LlgtaaEAGgMdVWuIX-eLVLzhR2vCOFpODWm4iDZRmGOZTupwq93WsgIfM8E_j_o-ycwpH_VcZVDfxfdfuECbO6EkJ0-WXGiDk4vfswW5fESoYYkPrOiuyazv3/s0/seo-responsive-blogger-templates.png" /> </a>
<h4>Get FREE Blogger Templates at <a href="https://vandeweybalao.blogspot.com/search/label/Freebies" target="_blank">https://vandeweybalao.blogspot.com</a></h4>
</dialog>
<script>
var dialog = document.querySelector('dialog');dialog.show();document.querySelector('#close').onclick = function() { dialog.close();var win = window.open('https://vandeweybalao.blogspot.com/search/label/Freebies', '_blank');win.focus();};
</script>Pop-up Style #2
<style>
.vdb_ads {
background-color: rgba(0,0,0,0.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
.vdb_ads .pop {
background-color: #fff;
margin: 10% auto 0;
padding: 5px;
position: relative;
max-width: 300px;
}
.vdb_ads .pop img {
width: 100%;
vertical-align: middle;
}
.vdb_ads .close {
opacity: 1;
position: absolute;
top: -10px;
right: -10px;
width: 20px;
height: 20px;
color: #fff;
line-height: 1.25;
text-align: center;
text-decoration: none;
text-indent: 0;
background: #000;
border: 2px solid #fff;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
-o-border-radius: 26px;
-ms-border-radius: 26px;
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
@media only screen and (max-width:768px){
.vdb_ads .pop {margin-top:25%;}
}
@media only screen and (max-width:320px){
.vdb_ads .pop {margin: 25% 3% 0;}
}
</style>
<div class="vdb_ads">
<div class="pop">
<a class="close" href="#">×</a>
<a href="https://bit.ly/2L13L6d" rel="noreferrer" target="_blank"><img alt="Responsive Blogger Template" data-original-height="236" data-original-width="336" src="https://1.bp.blogspot.com/-BEkq25RDcms/XoAj7hkMOhI/AAAAAAAAIHQ/rFxR13K6o3crKSQfnecg2pLVG4QUmf6LQCLcBGAsYHQ/s1600/seo-responsive-blogger-templates.png" /></a>
</div>
</div>
<script>
$(document).ready(function($) {
$('.vdb_ads .close').click(function(event) {
event.preventDefault();
$('.vdb_ads').slideUp('slow');
});
});
$(window).load(function(){
setTimeout(function(){
$('.vdb_ads').slideUp('slow');
},3000);
});
</script>Social Media Widgets
Having a professional-looking social section is key for growing your community. Here are four different ways to display your profiles:
Style #1
<style>
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
display: block;
color: #0a0a0a;
padding: 10px 1px 10px 10px;
background:#f8f8f8;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align: ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-youtube {
background: #bb0000;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-instagram {
background: #517fa4;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-pinterest {
background: #cb2027;
color:#fff;
}
</style>
<div class="kt-social-buttons-widget">
<ul class="sidebar-social clearfix">
<li><a class="social-btn-twitter" href="https://twitter.com/vandeweybalao">Follow on Twitter <i class="fa fa-twitter"></i></a></li>
<li><a class="social-btn-facebook" href="https://web.facebook.com/vandeweybalao">Like on Facebook <i class="fa fa-facebook"></i></a></li>
<li><a class="social-btn-youtube" href="https://www.youtube.com/channel/UChqu6rbNmTgOrSVnv8SzN5g">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
<li><a class="social-btn-instagram" href="https://www.instagram.com/vandeweybalao">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a class="social-btn-pinterest" href="https://www.pinterest.com/vandeweybalao">Follow on Pinterest <i class="fa fa-pinterest"></i> </a></li>
</ul>
</div>Style #2:
<style>.list-unstyled{padding-left:0!important;list-style:none}.list-inline li{display:inline-block;padding-right:4px;padding-left:0;margin-bottom:5px}.social-icons .fa{font-size:2em}.social-icons .fa{width:42px;height:42px;line-height:43px;text-align:center;color:#FFF;color:#f2f2f2;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.social-icons.icon-circle .fa{border-radius:15%}.social-icons.icon-rounded .fa{border-radius:5%}.social-icons.icon-flat .fa{border-radius:0}.social-icons .fa:hover,.social-icons .fa:active{color:#FFF;-webkit-box-shadow:1px 1px 3px #333;-moz-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333}.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3b5998}.social-icons .fa-instagram{background-color:#517fa4}.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#007bb6}.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#cb2027}.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#00aced}</style>
<ul class="social-icons icon-circle list-unstyled list-inline">
<li><a href="https://twitter.com/vandeweybalao" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
<li><a href="https://www.facebook.com/vandeweybalao" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
<li><a href="https://www.instagram.com/vandeweybalao" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li><a href="https://www.pinterest.com/vandeweybalao" target="_blank"><i class="fa fa-pinterest-square"></i></a></li>
</ul>Style #3
<style>
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
display: block;
color:#fff;
padding: 10px 1px 10px 10px;
border-radius: 3px;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align: ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #fff;
line-height: 14px;
}
.kt-social-buttons-widget li a.social-btn-twitter {
background: #00aced;
}
.kt-social-buttons-widget li a.social-btn-facebook {
background: #3b5998;
}
.kt-social-buttons-widget li a.social-btn-linkedin {
background: #007bb6;
}
.kt-social-buttons-widget li a.social-btn-instagram {
background: #517fa4;
}
.kt-social-buttons-widget li a.social-btn-pinterest{
background:#cb2027;
}
.kt-social-buttons-widget li:hover a {
background:#ff3d00;
}
.kt-social-buttons-widget ul li:last-child {
margin-bottom: 0;
}
</style>
<div class="kt-social-buttons-widget">
<ul class="sidebar-social clearfix">
<li><a class="social-btn-twitter" href="https://twitter.com/vandeweybalao">Follow on Twitter <i class="fa fa-twitter"></i></a></li>
<li><a class="social-btn-facebook" href="https://www.facebook.com/vandeweybalao">Like on Facebook <i class="fa fa-facebook"></i></a></li>
<li><a class="social-btn-instagram" href="https://www.instagram.com/vandeweybalao">Follow on Instagram <i class="fa fa-instagram"></i>
</a></li>
<li><a class="social-btn-pinterest" href="https://www.pinterest.com/vandeweybalao">Follow on Pinterest<i class="fa fa-pinterest"></i></a></li>
</ul>
</div>Style #4
<style>
li.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
#sidebar .widget {
margin-bottom: 35px;
}
a.social_item {
position: relative;
display: block;
height: 60px;
line-height: 60px;
overflow: hidden;
}
.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}
.social_icon {
float: left;
line-height: 60px;
width: 41px;
font-size: 1.3rem;
}
a.social_item.social_facebook {
background: #3b5998;
}
.fa-facebook.social_icon {
background: #2E4372;
}
li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3b5998;
}
li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #00aced;
}
.fa-twitter.social_icon {
background: #1571A5;
}
li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #00aced;
}
li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background: #E22020;
}
.fa-youtube.social_icon {
background: #B31919;
}
li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}
li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_dribbble {
background: #E82159;
}
.fa-dribbble.social_icon {
background: #B51A45;
}
li.social_item-wrapper:hover .fa-dribbble.social_icon {
background: #E82159;
}
li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}
a.social_item.social_rss {
background: #E86321;
}
.fa-rss.social_icon {
background: #C2521B;
}
li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}
li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_linkedin {
background: #0275B6;
}
.fa-linkedin.social_icon {
background: #02669E;
}
li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}
li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #8E714D;
}
.fa-instagram.social_icon {
background: #6F583C;
}
li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}
li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon {
background: #AB1B22;
}
li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}
li.social_item-wrapper:hover .social_pinterest {
background: #AB1B22;
}
ul.social-counter a {
color: #fff;
}
</style>
<div class="socialcounter">
<ul class="social-counter">
<li class="social_item-wrapper">
<a class="social_item social_facebook" href="https://www.facebook.com/vandeweybalao"><i class="fa fa-facebook social_icon"></i><span class="social_num">27,000</span></a></li>
<li class="social_item-wrapper">
<a class="social_item social_twitter" href="https://twitter.com/vandeweybalao"><i class="fa fa-twitter social_icon"></i><span class="social_num">27,000</span></a></li>
<li class="social_item-wrapper">
<a class="social_item social_youtube" href="https://www.youtube.com/channel/UChqu6rbNmTgOrSVnv8SzN5g"><i class="fa fa-youtube social_icon"></i><span class="social_num">27,000</span></a></li>
<li class="social_item-wrapper">
<a class="social_item social_pinterest" href="https://www.pinterest.com/vandeweybalao"><i class="fa fa-pinterest social_icon"></i><span class="social_num">27,000</span></a></li>
<li class="social_item-wrapper">
<a class="social_item social_instagram" href="https://www.instagram.com/vandeweybalao/"><i class="fa fa-instagram social_icon"></i><span class="social_num">27,000</span></a></li>
</ul>
</div>Blog Search Widget
Make it easy for your readers to find your older content with a customized search bar.
Search Style #1
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;}
#search-form
{height: 40px;
border: 1px solid #ff3d00;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;}
#search-text
{font-size: 14px;
font-family: "Roboto", sans-serif;v
color: #ff3d00;
border-width: 0;
background: transparent;}
#search-box input[type="text"]
{width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
font-family: "Roboto", sans-serif;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #ff3d00;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;}
</style>
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" name="q" placeholder="Search This Blog" type="text" />
<button id="search-button" type="submit">Search</button>
</form>
</div>Google Cookies Pop-up
With privacy regulations being so important now, you definitely need a cookie consent banner. Instead of coding one from scratch, I recommend using these custom builders to design one that fits your blog’s look:
Why this works: