Width/Height Attributes or Style?

The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%.

The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:

Open Blogger Edit HTML
Press Ctrl+f
Enter this Code      ]]</b:skin>       and hit Enter
Enter This Code & Save Theme
 

CSS
.footer { position: fixed; left: 0; bottom: 0; width: 100%; overflow: visible; overflow-x: visible; overflow-y: visible; z-index: 99; text-align: center; }

This script will help you to keep your trailer for some time

Open Your Website Or Blogger
And Create Page
So if everyone wants to download the Blogger download timer script, below you will find the, But you can easily use this script in WordPress website too. How To Use Download Timer. So below I have explained all those steps in detail, So friends Before knowing Add Download Timer in Blogger we have to know about of , If you see any tools or Widget related to online web development
And Your Content, Your Download Button Remove, And  places This Script


Main feature your free countdown timer in website or Blogger to as a countdown clock. places our countdown timer: Calculation is correct - the clock displays current time, even if the user's computer clock is wrong. There are alternatives to your DST - There are several options about how to deal with the daylight saving time (DST) with your countdown timer. Read more about calculation timers and DST. Counterdown takes into account any time zone - all major time zones are supported. It is highly configurable - select different backgrounds, text options, colors and fonts. You can choose the unit to display - up to milliseconds from day to day. No registration is required - HTML code is available immediately. Use the Script to customize your own countdown timer. A small preview window should also appear beside the form at the bottom right of your web page. You can place six clock and countdown timer on a page. If two watches / timers are used, then a separate link to pageanddate.com should be provided on the page. To use the service you must add HTML to your web page and must have tags approved in IFRM. You use the service at your own risk.


Script
<center><span id="countdown"></span></center><br /><div style="text-align: center;"><b>Download Timer</b><br /><a href="#" id="download_link" style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_CoDHPzSnjIJzQEW-IlJryvZiC40XqIILs1OFn7FYajeEasNBaucBLcfNtqW2N_HfGxkt2aqu4eaDcE7wzzlOGAwybzGgizFxzX-PhQaCmLFx0zb0gJIpoJATZvM-fC48nKi91gS2rlw/s1600/but.jpg" /></a><noscript>JavaScript needs to be enabled in order to be able to download.</noscript><script type="application/javascript">(function(){ var message = "%d seconds before download link appears"; // seconds before download link becomes visible var count = 5; var countdown_element = document.getElementById("countdown"); var download_link = document.getElementById("download_link"); var timer = setInterval(function(){ // if countdown equals 0, the next condition will evaluate to false and the else-construct will be executed if (count) { // display text countdown_element.innerHTML = "You have to wait %d seconds.".replace("%d", count); // decrease counter count--; } else { // stop timer clearInterval(timer); // hide countdown countdown_element.style.display = "none"; // show download link download_link.style.display = ""; } }, 1000); })(); </script>

And
Made with
HTML / CSS

CSS
*,*:before,*:after { box-sizing: border-box; } :after { content: ""; } section { position: relative; left: 100px; } h1 { margin:80px 0 10px 0; font-size: 52px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; text-shadow: 1px 1px 0px #DC143C, 2px 2px 0px #DC143C, 3px 3px 0px #DC143C, 4px 4px 0px #DC143C; } h2 { font-size: 24px; } body { padding: 100px 0; background: lightblue; color: white; max-width:640px; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height:1.4; font-smoothing: anti-aliased; } nav { float: left; position: relative; top: 0; left: 0; background: transparent; } nav ul { text-align: center; } nav ul li { position: relative; width: 70px; cursor: pointer; background: crimson; text-transform: uppercase; transition:all .4s ease-out; } nav ul li:after { position: absolute; background: white; color: crimson; top:0; left: 70px; width: 70px; height: 100%; opacity:.5; transform: perspective(400px) rotateY(90deg); transform-origin: 0 100%; transition:all .4s ease-out; } nav ul li:nth-child(1):after { content: "Home"; line-height: 88px; } nav ul li:nth-child(2):after { content: "About"; line-height: 88px; } nav ul li:nth-child(3):after { content: "Work"; line-height: 85px; } nav ul li:nth-child(4):after { content: "Say hi"; line-height: 70px; } nav ul li:hover { transform: translateX(-70px); } nav ul li:hover:after { opacity: 1; transform: perspective(400px) rotateY(0deg) scale(1) ; } nav ul li > div { display: inline-block; padding: 25px 0; background: transparent; } nav ul li div { position: relative; } .roof { width: 0; height: 0; top:2px; border-style: solid; border-width: 0 21px 15px 21px; border-color: transparent transparent #ffffff transparent; } .roof-edge { position: absolute; z-index: 20; left: -17px; top: 3px; width: 0; height: 0; border-style: solid; border-width: 0 17px 12px 17px; border-color: transparent transparent crimson transparent; } /*white triangle over red triangle*/ .roof-edge:after { position: absolute; left: -14.5px; top: 3px; width: 0; height: 0; border-style: solid; border-width: 0 14.5px 10px 14.5px; border-color: transparent transparent white transparent; } .front { position: relative; top: 3px; width: 28.5px; height: 20px; margin: 0 auto; background: white; } /*door*/ .front:after { position: absolute; background: crimson; width: 11px; height: 13px; bottom: 0; left:9px; } /*/// About me ////*/ .head { width: 32px; height: 35px; background: white; border-radius:8px; } /*mouth*/ .head:after { width: 4px; height: 10px; background: white; position: absolute; border-radius:4px 0 0 4px; top:21px; left: 14px; transform:rotate(270deg); } .eyes { width: 8px; height: 5px; border-radius: 50%; position: absolute; top: 10px; left: 5px; background: crimson; } /*right eye*/ .eyes:after { width: 8px; height: 5px; border-radius: 50%; position: absolute; top: 0; left: 14px; background: crimson; } .beard { width: 32px; height: 17px; background: crimson; border:2px solid white; position: absolute; bottom: 0; left: 0; border-radius:0 0 8px 8px; } /*nose*/ .beard:after { position: absolute; top:-2px; left: 11px; background: white; width:6px; height: 4px; border-left:1px solid crimson; border-right:1px solid crimson; } /*//work//*/ .paper { position: relative; height:32px; width: 29px; background: white; border:2px solid white; } /*window*/ .paper:after { position: absolute; top:1px; left: 0; width: 25px; height: 29px; background: white; border-top:4px solid crimson; } .lines { position: absolute; top: 36px; left: 5px; width: 11px; box-shadow: 0 0 0 1px crimson; } .lines:after { position: absolute; top: 4px; left: 3px; width: 14px; box-shadow: 0 0 0 1px crimson; } .lines:nth-child(2) { position: absolute; top: 44px; left: 8px; width: 11px; } .lines:nth-child(2):after { position: absolute; top: 4px; left: -3px; width: 11px; } .lines:nth-child(3) { position: absolute; top: 52px; left: 8px; width: 14px; } .lines:nth-child(3):after { display: none; } /*//mail //*/ .mail-base { position: relative; width: 32px; height: 18px; background: white; } .mail-top { position: absolute; z-index: 20; left: 0; top: 0; width: 0; height: 0; transform: rotate(180deg); border-style: solid; border-width: 0 16px 11px 16px; border-color: transparent transparent crimson transparent; } .mail-top:after { position: absolute; z-index: 20; left: -16px; top: 3px; width: 0; height: 0; border-style: solid; border-width: 0 16px 9px 16px; border-color: transparent transparent white transparent; }

Tha CSS Image Box Model
<!DOCTYPE html><html><head><style>div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; } </style></head><body> <h2>Calculate tha total width:</h2><img src="klematis4_big.jpg" width="350" height="263" alt="Klematis"><div>Tha image above is 350px width. The total width of this element is also 350px.</div></body></html>

---

Background color

The background-color property specifies the background color of an item.
background-position. CSS background-color. The background-color property specifies the background color, CSS background - Shorthand property. To shorten the code, it is also possible to specify all the background properties in one single property. The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method, The background-image CSS property sets one or more background images on an element
The background color of a page is defined like this:

background color
<!DOCTYPE html><html><head><style>body { background-color: lightblue; } </style></head><body> <h1>Hello World!</h1><p>This page has a light blue background color!</p></body></html>

---

With CSS, a color is often referred to as:

A valid color name - such as "red"
A HEX value - such as "#ff0000"
An RGB value - "RGB (255,0,0)"

See the CSS color values for the complete list of possible color values.

In the example below, <h1>, <p>, and <div> elements have different background color:CSS background-color example
<!DOCTYPE html><html><head><style>h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } </style></head><body> <h1>CSS background-color example!</h1><div>This is a text inside a div element. <p>This paragraph has its own background color.</p>We are still in the div element. </div></body></html>

---

Background image 
Background-image property specifies an image to be used as a component background. 
By default, the image is repeated so that it covers the whole element. 
Background images for a page can be set:image as the background
<!DOCTYPE html><html><head><style>body { background-image: url("paper.gif"); } </style></head><body> <h1>Hello World!</h1><p>This page has an image as the background!</p></body></html>

---

Background image - Set position and no repetition

Background image is only shown by background-repeat property once shown:
<!DOCTYPE html><html><head><style>body { background-image: url("img_tree.png"); background-repeat: no-repeat; } </style></head><body> <h1>Hello World!</h1><p>W3Schools background image example.</p><p>The background image is only showing once, but it is disturbing the reader!</p></body></html>

---

In the above example, the background image is shown at the same place as the text. We want to change the location of the image, so that it does not make much trouble to the text.

Background location of image position is specified by property:
<!DOCTYPE html><html><head><style>body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; } </style></head><body> <h1>Hello World!</h1><p>W3Schools background no-repeat, set position example.</p><p>Now the background image is only shown once, and positioned away from the text.</p><p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p></body></html>

---

Background image - Fixed position

To specify the background image should be specified (do not scroll with the rest of the page), use the background-attachment property:
<!DOCTYPE html><!DOCTYPE html><html><head><style>body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; } </style></head><body> <h1>Hello World!</h1><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p><p>The chenge background-image</p></body></html>

---