How to Permanently Fix Desktop Icons Moving to Second Monitor

If you’re looking to customize your Blogger or Blogspot site beyond the usual default gadgets, adding extra widgets is one of the easiest ways to improve both functionality and appearance. Over the years, I’ve collected and tested different widget styles that can help make a blog feel more interactive, modern, and user-friendly.

Some of these widgets are useful for advertising, while others help improve engagement, social media visibility, navigation, or overall blog presentation. I’m sharing these because they may also help you personalize your own Blogger layout without needing complicated modifications.

Important: Some codes contain placeholder texts highlighted in red. Make sure to replace those parts with your own links, images, usernames, or advertisement codes before using them on your website.

Floating Widgets

Floating Footer Advertisement

This floating footer widget works well for leaderboard advertisements such as 970x90 or 728x90 banner ads. Since the advertisement stays visible while scrolling, many bloggers use this placement to improve ad visibility and engagement.

You can also experiment with different ad sizes depending on your website layout.

<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 Side Ads (Left & Right)

These floating side ads are designed mainly for 160x600 wide skyscraper advertisements. They help maximize unused space on the left and right side of larger screen layouts.

Option 1: Fixed Floating Ads

This version keeps the ads permanently visible while visitors scroll through your website.

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

This version includes close buttons so visitors can hide the ads if they prefer a cleaner reading experience.

<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 widgets are useful for announcements, promotions, affiliate offers, newsletter signups, or featured content you want visitors to notice immediately.

Pop-up Style #1

This popup style uses the HTML <dialog> element and automatically opens when the page loads.

<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

This version creates a centered popup overlay with a close button and optional auto-close timer. It works well for promotional banners or featured products.

<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 widgets make it easier for readers to follow your accounts and stay connected outside your blog. A good-looking social section can also help improve your blog’s overall appearance.

Style #1

A vertical social button layout with hover effects and Font Awesome icons.

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

A compact circular icon-style social media widget that works well for sidebars and footer areas.

<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

A colorful social button layout with bold backgrounds and hover animations.

<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

A larger social counter-style widget that displays social media follower numbers alongside each platform.

<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

A custom search bar helps readers quickly find older articles and improves navigation throughout your blog.

Search Style #1

This search widget features a clean modern layout with a styled search button and responsive width.

<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

If your visitors come from regions covered by privacy regulations, adding a cookie consent popup is highly recommended. Instead of creating one from scratch, you can use online generators and customizable cookie consent tools.

Recommended tools:

1. Cookie Consent JavaScript Plugin - Osano
2. Create Cookie Consent Banner - WebsitePolicies

Final Thoughts

Custom widgets can help improve your blog’s appearance, user experience, and engagement when used properly. Whether you are adding floating ads, social buttons, popups, or search features, always test them carefully to make sure they work smoothly on both desktop and mobile devices.

Feel free to experiment with these widgets and customize them further to better match your Blogger template and personal design preferences.

Posted by: Just Van

Life, work, and everything in between.

Visit profile