Free Blogger Widgets You Should Use Today On Your Website

byVDB Zone -
Website design. Developing Programming and coding technologies.

The following are Blogger widgets I gathered from different sources a long time ago and I want to share them with you. Use any of them to spice up your Blogger or Blogspot website/blog.

Don't forget to edit the texts in the color red.

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/AVvXsEgNF8Y4WrdbDbzd9MS2pDBMnxHk2AZ5X6Mj5bSVwGP-FSaLlZ5ZgGfLbj0jM-JpN2vtC7_THxbzFbb-UvbFJ-eQVoZoaj6bju40WYC-eHg6d-IuYI2SWjs4bSJ1ujQmCCmpF3i8XrkmfaXN/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://vdbzone.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/AVvXsEjI-UtwSiaxCpI6iG5oJ-GYCWZ3sLVDfJ_KFmf6OduSMnoTVjALpzHw55UDIU2km-iETgXh_qZ4fHO8cD5D-zHwxL8BlpOQE7GV3dHQ2qxeTkmlnU8gavioCjAlZmQAGAZ_0ypXNc_ppEv9/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/AVvXsEgNF8Y4WrdbDbzd9MS2pDBMnxHk2AZ5X6Mj5bSVwGP-FSaLlZ5ZgGfLbj0jM-JpN2vtC7_THxbzFbb-UvbFJ-eQVoZoaj6bju40WYC-eHg6d-IuYI2SWjs4bSJ1ujQmCCmpF3i8XrkmfaXN/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/AVvXsEgNF8Y4WrdbDbzd9MS2pDBMnxHk2AZ5X6Mj5bSVwGP-FSaLlZ5ZgGfLbj0jM-JpN2vtC7_THxbzFbb-UvbFJ-eQVoZoaj6bju40WYC-eHg6d-IuYI2SWjs4bSJ1ujQmCCmpF3i8XrkmfaXN/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/AVvXsEgVzBGvO0qzX_vv0IbogQUue0teW3HJlFomPrNv_aLbR4EuSHJOWojqytalNtnT5oCA1lHclePUpRuI4kziTFcJBwGwnSLGQ-yENhT26cZCzpqptD_wW1f63YrnfzIx1OYCF_ErH-4o5ITD/s0/seo-responsive-blogger-templates.png" /> </a>
<h4>Get FREE Blogger Templates at <a href="https://www.vdbzone.com/search/label/Freebies" target="_blank">https://www.vdbzone.com</a></h4>
</dialog>
<script>
var dialog = document.querySelector('dialog');dialog.show();document.querySelector('#close').onclick = function() { dialog.close();var win = window.open('https://www.vdbzone.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/vdbzone">Follow on Twitter <i class="fa fa-twitter"></i></a></li>
<li><a class="social-btn-facebook" href="https://web.facebook.com/vdbzone">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/vdbzone">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a class="social-btn-pinterest" href="https://www.pinterest.com/vdbzone">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/vdbzone" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
<li><a href="https://www.facebook.com/vdbzone" target="_blank"><i class="fa fa-facebook-square"></i></a></li>
<li><a href="https://www.instagram.com/vdbzone" target="_blank"><i class="fa fa-instagram"></i></a></li>
<li><a href="https://www.pinterest.com/vdbzone" 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/vdbzone">Follow on Twitter <i class="fa fa-twitter"></i></a></li>
<li><a class="social-btn-facebook" href="https://www.facebook.com/vdbzone">Like on Facebook <i class="fa fa-facebook"></i></a></li>
<li><a class="social-btn-instagram" href="https://www.instagram.com/vdbzone">Follow on Instagram <i class="fa fa-instagram"></i>
</a></li>
<li><a class="social-btn-pinterest" href="https://www.pinterest.com/vdbzone">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/vdbzone"><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/vdbzone"><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/vdbzone"><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/vdbzone/"><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.

Tags:

More From VDB Zone Blog

View all

Your voice matters. Discussions are moderated for civility before being published on the blog. Read my comment policy here.

Previous Post Next Post
Share to other apps
Copy Post Link