cara membuat footer keren dengan css

cara membuat footer keren dengan css - kali ini ADIBIHAK akan memberikan contoh footer keren melaui CSS. Pasti kalian sudah tidak asing dengan bahasa pemrograman yang satu ini. Bahasa pemrograman yang satu ini memang dasar bagi para designer selain HTML. CSS digunakan untuk memperindah tampilan HTML yang sudah dibuat.

Dalam web - web di internet pasti ada footer didalamnya yang terdapat dibawah. Footer ini berfungsi untuk memberi identitas pembat, informasi penting dan hal yang dijelaskan. Pasti kalian sudah penasaran, Ayo ikuti artikel berikut ini?

Berikut contoh script footer yang dapat anda tiru:

<!doctype html>
<html>
<head> footer</head>
<style>
       #footer{
width: 100%;
font-size:15px;
color: #fff;
text-align: center;
background: #222222;
clear: both;
padding: 2px;
}
       #t{
width: 100%;
background-color: #444444;
clear: both;
}
#tk{
width:98%;
padding: 1%;
}
#k{
float: left;
width: 20%;
padding:1%;
color: #eeeeee;
}
#j{
float: right;
width: 30%;
padding: 1%;
background: #cccccc;
}
.t{
padding: 5px;
}
#aku{
float: left;
width: 49%;
margin: 2% 1% 0 0;
}
</style>
<body>
<div id="t">
<div id="tk">
<div id="k">
<h4>INFO BLOG</h4>
<P> BLOG atau WEB adalah sebuah alat atau tool bagi para intelek untuk
menyalurkan ide, gagasan maupun konsep yang mereka miliki melaluitulisan, gambar,
dan video. Hal ini dapat memberikan sebuah perubahan melalui pemikiran kreatif dan inovatif
untuk mengubah INDONESIA menjadi lebih baik.</P>
<h4>INFO PENDIDIKAN</h4>
<ul>
<li>Info Beasiswa</li>
<li>Info PTN</li>
<li>International journe</li>
</ul>
</div>
<div id="k">
<h4>CONTOH BLOG</h4>
<ul>
<li>Cara Mudah Mendapatkan Uang dari Blog</li>
<li>Cara Test Kecepatan Loading Blog</li>
<li>Cara Mensubmit Blog ke Google Webmaster</li>
<li>Cara Cepat terindeks Googe</li>
<li>Cara Mensubmit Blog ke Search Engine Bing</li>
<li>Cara Mendaftar Google Adsense</li>
<li>Cara Mendaftar POP-CASH</li>
<li>Cara Merubah Domain Blogspot Menjadi Domain yang lain</li>
</ul>
</div>
<div id="k">
<h4>TEMPLATES BLOG GRATIS</h4>
<UL>
<li>Bloggerthemes.net</li>
<li>Blogtemplate4u.com</li>
<li>BTemplates.com</li>
<li>Fabthemes.com</li>
<li>Kaizentemplates.com</li>
<li>Allblogtools.com</li>
<li>Fabthemes.com</li>
<li>Mybloggerthemes.com</li>
</UL><br>
<h4>SEO TOOLS</h4>
<ul>
<li>Chkme</li>
<li>webmaster tools</li>
<li>Test Responsive Blog</li>
<li>Google Adsense</li>
</ul>
</div>
<div id="j">
<h4>komentar</h4>
<textarea cols="40%" rows="10%">
</textarea><br>
<p>beri komentar melalui :</p>
<select name="akun">
<option value="volvo">GMAIL</option>
<option value="volvo">FACEBOOK</option>
<option value="volvo">YAHOO</option>
</select><BR>
<div id="read">
<input class="t" type="button" value="publikasikan">
<input class="t" type="button" value="batal">
</div>
</div>
</div>
<div id="footer">
<p>Copyright@NUGROHO.COM</p>
  </div>
</div>
</body>
</html>

berikut hasil script diatas:


Semoga dapat bermanfaat.

Post a Comment

3 Comments

  1. gan kalau footer nya kayak punya situh gmna?

    ReplyDelete
  2. bikin footer mengambang mirip kaya aplikasi yang menunya ada di bawah dan mengambang

    ReplyDelete