Discover the Best Free Widgets for Your Blogger Site

by:Van Dewey Balao Published:
Website design. Developing Programming and coding technologies.

Hey there, fellow bloggers! Have you been looking for ways to make your Blogger or Blogspot site truly stand out? Well, you're in luck! I've been digging through my archives and found a treasure trove of fantastic Blogger widgets that I gathered over time. These aren't just any widgets; they're the ones I've personally found to be incredibly useful for adding that extra sparkle and functionality to a blog.

I'm excited to share this collection with you, as I know how much of a difference a few well-chosen widgets can make. Whether you're aiming to boost engagement, improve your site's aesthetics, or add some unique features, there's likely something in this list that will help you achieve your vision. Get ready to spice up your Blogger or Blogspot website with these handy tools!

I hope you find these widgets as useful as I have! Just a friendly tip: make sure to edit any placeholder text that appears in red once you add them to your blog. Happy blogging!

Floating Widgets

Floating (Footer) Advertisement

Ideal for Super Leaderboard - 970 x 90 or 728 x 90 advertisement. But you can try any size if it will look good. I saw that other bloggers are using this for their Google AdSense advertisements.

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).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(&apos;fixedban&apos;).style.display=&apos;none&apos;' 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 (Left and Right) Advertisement

This is for Wide Skyscraper – 160 x 600 advertisements.

No close buttons

<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 -->

With close buttons

<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(&apos;leftads&apos;).style.display=&apos;none&apos;' 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(&apos;rightads&apos;).style.display=&apos;none&apos;' 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

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

Social media 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/thegritld">Follow on Twitter <i class="fa fa-twitter"></i></a></li>
<li><a class="social-btn-facebook" href="https://web.facebook.com/gritld">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/gritld">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a class="social-btn-pinterest" href="https://www.pinterest.com/gritld">Follow on Pinterest <i class="fa fa-pinterest"></i> </a></li>
</ul>
</div>

Social media 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/thegritld" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
<li><a href="https://www.facebook.com/thegritld" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
<li><a href="https://www.instagram.com/thegritld" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li><a href="https://www.pinterest.com/thegritld" target="_blank"><i class="fa fa-pinterest-square"></i></a></li>
</ul>

Social media 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/thegritld">Follow on Twitter <i class="fa fa-twitter"></i></a></li>
<li><a class="social-btn-facebook" href="https://www.facebook.com/thegritld">Like on Facebook <i class="fa fa-facebook"></i></a></li>
<li><a class="social-btn-instagram" href="https://www.instagram.com/thegritld">Follow on Instagram <i class="fa fa-instagram"></i>
</a></li>
<li><a class="social-btn-pinterest" href="https://www.pinterest.com/thegritld">Follow on Pinterest<i class="fa fa-pinterest"></i></a></li>
</ul>
</div>

Social media 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/thegritld"><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/thegritld"><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/thegritld"><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/thegritld/"><i class="fa fa-instagram social_icon"></i><span class="social_num">27,000</span></a></li>
</ul>
</div>

Blog Search Widget

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;
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

Visit the following sites to design your custom cookie pop up.

  1. Cookie Consent JavaScript plugin - Osano
  2. Create Cookie Consent Banner - WebsitePolicies
Tags:

Van Dewey Balao

It's ok if you disagree with me. I can't force you to be right!

You might like

View all

I love hearing from you! To keep our conversations positive and respectful for everyone, comments are checked for decency before they're published. Please read my Comments Policy here.

Previous Post Next Post
Share to other apps
Copy Post Link