Using HTML Boxes to Update Templates

Code for the Floating Subscribe Button of the Left of the Page | In an HTML Box

Fixed Sidebar Website Example (fully functional code)

Copy the code and save it in a Notepad file with a .html extenstion to see for yourself

<!DOCTYPE html>
<head>
<style>
body{
margin: auto;
background-color: white;
margin: bottom; 200px;
}
article{
background-image: linear-gradient(violet, purple);
margin: auto;
box-shadow: 4px 4px 12px rgb(64,64,64);
height: 400px;
}
footer{
background-image: linear-gradient(red, firebrick);
margin-top: 50px;
}
button{
background-color: orange;
color: white;
}
h1{
text-align: center;
color: rgb(64,64,64);
text-shadow: 1px 1px 1px black;
font-size: 3em;
}
p{
padding: 20px;
border-radius: 5px;
position: relative;
top: 50%;
padding-top: 0;
margin-top: 0;
font-size: 2em;
margin: auto;
text-align: center;
color: ghostwhite;
text-shadow: .75px .75px .75px black;
width: 60%;
}
footer p{
background-color: rgb(64,64,64);
box-shadow: none;
color: ghostwhite;
padding: 50px;
}
#headerpic{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<button style=" position: fixed; top: 50%; left: 0; opacity: .9; padding: 15px; z-index: 1000;"  onclick="window.location.href='http://gem.godaddy.com/signups/6ca3abee62a34a77aa1f791964b0beac/join'">
	<i class="fa fa-address-card">Hi! I'm fixed on the page!</i>
</button>
<img id="headerpic" src="https://ninjaopinions.com/logo.png">
<h1>Fixed Side Button</h1>
<article>
<p>See how the button is scrolling with the page? That is a "fixed" element!</p>
</article>
<footer>
<p>© Ninja Web Design 2019, All Rights Reserved</p>
</footer>
</body>
</html>

This code works because this snippet of the above code

<button style=" position: fixed; top: 50%; left: 0; opacity: .9; padding: 15px; z-index: 1000;"  onclick="window.location.href='http://gem.godaddy.com/signups/6ca3abee62a34a77aa1f791964b0beac/join'">
	<i class="fa fa-address-card">Hi! I'm fixed on the page!</i>
</button>

Creates a button that is fixed to the left side. The…

style="position: fixed; top: 50%; left: 0;"

Tells the web browser that you want this specific button to be fixed no matter where you are on the page to the left side in the middle of the browser window…

Using HTML Boxes works because I can just add this code

<button style=" position: fixed; top: 50%; left: 0; opacity: .9; padding: 15px; z-index: 1000;"  onclick="window.location.href='http://gem.godaddy.com/signups/6ca3abee62a34a77aa1f791964b0beac/join'">
	<i class="fa fa-address-card">Hi! I'm fixed on the page!</i>
</button>

To the website and the site will do the rest. In WordPress the template you are currently using will do most of the complicated work and assign the styles to the button for you in most cases. Otherwise, the complete code can be copy and pasted individually until the desired side button is created. It can work in any HTML box and in any website. All you have to do is copy the code and paste it!

This method works best in WordPress but can be used anywhere. Experiment to find the best methods!

Cool stuff!

Contact Me! to get a website with a floating sidebar! I can design anything like this. It doesn’t have to be a subscribe button!


Daniel Serrano

I'm a hard working, fun loving and cool guy who's heavily into my job and it's related fields. I love creating great sites and designs and pleasing customers and life is always changing. I find the best way to keep up to the speed of life and its changes is to always have many plans for the future, and if you get knocked down, no worries, hard work can lead to miracles... Never Give Up!

3 Comments

IT Support Frisco · July 19, 2019 at 7:45 pm

Great Blog I wish I had one like this on my site. If you are ever in Frisco, Texas and
need some IT Support in Frisco give us a shout https://www.lgnetworksinc.com/it-support-frisco-texas/

    Daniel Serrano · July 20, 2019 at 3:42 pm

    Cool! I’ll keep you in mind!

Outsourced IT · July 23, 2019 at 3:45 pm

What Are Outsourced IT Services?
Redistributed IT administrations are the point at which
you employ an outside organization to deal with your IT needs.

An outsider oversaw specialist organization (MSP) can cover everything from the security of systems and the usage of working frameworks to the establishment of
programming and the reinforcement of documents.

Note that re-appropriated IT administrations are not simply break/fix administrations.
A break/fix specialist comes to you when something
is broken, charging an hourly expense to analyze and fix the issue.
A break/fix administration may appear to be more affordable since you possibly pay when you have an issue, yet it’s probably going to be all the more
exorbitant over the long haul. They have next to zero motivator
to work rapidly or cause a steady fix since they to get paid more in the event that it
requires them a long investment or different excursions to fix something.

In contrast to break/fix benefits, an oversaw
IT specialist organization constructs an association with
your organization, always checking your system for
a month to month charge. MSPs are there to keep your system running easily, not simply
to fix issues, so they have increasingly motivator to locate a quick, dependable arrangement if something goes off-base.
It’s better for you and the specialist organization on the off chance that they kill dangers and fix
issues as they occur. Taking care of an issue the first run through methods less work
for them and urges you to proceed with your participation. https://www.lgnetworksinc.com/outsourced-it-services-2/

Comments are closed.