Kreasi sendiri Footer Detik.com

info-gamepc.blogspot.com - Tentunya kita pasti tahu, situs yang paling populer seperti detik.com selain desainnya yang bagus juga tata letaknya sidebar kanan, kiri maupun iklan yang terpasang sangat bagus sekali.

Tentu kita membayangkan bagaimana membuat blog dengan tata etak yang keren seperti detik.com bahka desain footernya juga bagus sekali, enak dipandang mata, mencerminkan pembuatnya benar-benar jago dalam menggunakan bahasa java script. Beberapa hari ini saya banyak menghabiskan waktu sepulang kerja untuk mencoba membuat footer seperti detik.com setidaknya mirip sedikit saja.

Berikut hasil karya saya.

Jika teman-teman ada yang berminat, Ayo kita praktekkan :

1. Buka Blogger => pilih template => Edit HTML.
2. Jangan lupa di backup dulu Template anda, buat jaga-jaga apabila gagal ditengah jalan
3. Cari kode ]]></b:skin>, paling gampang gunakan Ctrl+F
4. Udah ketemu? kalau sudah, letakkan kode dibawah ini diatas kode ]]></b:skin>

.foot_2 {
background: #00477D;
padding: 15px 15px 15px 15px;
float: left;
width: 940px;
}

.container22 {
width: 950px;
margin: auto;
}

.foot_2 .satu {
width: 130px;
float: left;
padding-right: 20px;
}

.link_bot ul {
list-style: none;
margin: 0;
padding: 0;
height: 160px;
overflow: hidden;
}

.link_bot li {
color: #b8b8b8;
font-family: CartoGothic, Arial, Tahoma, Geneva, sans-serif;
font-size: 11px;
margin-right: 10px;
height: 22px;
float: left;
width: 100px;
height: 155px;
}

#more_kanal {
display: block;
border-top: 1px dotted #00477D;
padding-top: 3px;
margin-top: 5px;
font-weight: bold;
color: #999;
cursor: pointer;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

.fl {
float: left;
}

#more_kanal {
font-weight: bold;
color: #999;
cursor: pointer;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

#kanal {
float: left;
width: 800px;
}

.link_bot2 {
color: #666;
font-family: CartoGothic, Tahoma, Geneva, sans-serif;
font-size: 11px;
padding: 5px 0;
}
.link_bot2 a {
display: inline-block;
padding: 0px 5px;
color: #CCC !important;
text-decoration: none;
}

.copyright {
color: #ccc;
border-top: 1px dotted #3b5774;
margin: 0;
padding-left: 5px;
}

.link_bot strong a {
display: block;
font-size: 11px;
padding-bottom: 3px;
color: #ffffff !important;
float: left;
width: 100px;
}

5. Jangan lupa disimpan dulu template Anda.
Masih di blogger, sekarang kita pindah kebagian Layout, pilih gadget footer yang letaknya paling bawah terus pilih gadget => HTML/JAVASCRIPTS, dan paste kode dibawah ini

<div class="foot_2">
<div class="container22">
<div class="satu"><a target="_blank" href="http://info-gamepc.blogspot.com"><img
alt="" src="http://2.bp.blogspot.com/-Paobur4Koug/UyRpj7TgP7I/AAAAAAAABeU/lVL1z3V9PW0/s1600/games.png"
/></a></div>
<div class="link_bot" id="kanal">
<div class="caroufredsel_wrapper" style="position: relative; overflow: hidden;
margin: 0px; width: 770px; height: 155px;"><ul id="slide_kanal"
style="margin: 0px; float: none; position: absolutjavascript:void(0)e; width: 2420px; height: 155px;">
<li><strong> <a href="">Berita</a> </strong> <a href="">·
Archives</a> <br/> <a href="">· Game</a> <br/> <a href="">·
Pendidikan</a> <br/> <a href="">· Linux</a> <br/> <a href="">·
Wisata</a> <br/> <a href="http://info-gamepc.blogspot.com">· Software</a> <br/> <a
href="">· Film</a> <br/> <a href="">· Windows</a> <br/></li>
<li><strong> <a href="">LifeGamer</a> </strong>
<a href="">· Battlefield 2</a> <br/> <a href="">· Warcraft-3</a>
<br/> <a href="">· Bioshock 2</a> <br/> <a href="">· Half-life-2</a>
<br/> <a href="">· Crysis</a> <br/> <a href="">· Arma 3</a>
<br/> <a href="">· Day of Defeat</a> <br/> <a href="">· Enemy
Front</a><br/></li>
<li><strong> <a href="">Info Game</a> </strong> <a href="&
quot;>· Aplikasi</a> <br/> <a href="">· Penginstalan</a> <br/><a href="&
quot;>· Bourning</a> <br/> <a href="">· Tips &amp; Trik</a> <br/> <a href=&
quot;">· Konsultasi</a> <br/><a href="">· Komunitas</a> <br/> <a href=&
quot;">· VGD Card</a> <br/> <a href="">· Sinopsis</a> <br/> </li>
<li><strong> <a href="">Archives</a> </strong> <a href="&
quot;>· Dork</a> <br/> <a href="">· Proof of Consep</a> <br/>
<a href="">· Penetrasi</a> <br/> <a href="">· How to</a> <br/> <a
href="">· Security</a> <br/><a href="">· Profile</a> <br/> <a href=&
quot;">· Diskusi</a> <br/> <a href="">· Hot News</a> <br/> </li>
<li><strong> <a href="">Pendidikan</a> </strong> <a href="&
quot;>· Materi</a> <br/> <a href="">· Preleminary</a> <br/> <a href="&
quot;>· Mid Trial</a> <br/> <a href="">· UTS</a> <br/> <a href=""
;>· Ulum</a> <br/> <a href="">· Olimpiade</a> <br/> <a href="">·
LCC</a> <br/> <a href="">· Passing Grade</a> <br/> </li>
<li><strong> <a href="">Wisata</a> </strong> <a href="">·
Petualang</a> <br/> <a href="">· Museum</a> <br/> <a href="">·
Nature</a> <br/> <a href="">· RoadRace</a> <br/> <a href="">·

Animal</a> <br/> <a href="">· Sejarah</a> <br/> <a href="">·
Pemandu</a> <br/> <a href="">· Dokumentasi</a><br/> </li>
<li><strong> <a href="">Kesehatan</a> </strong> <a href="&
quot;>· Informasi</a> <br/> <a href="">· Pencegahan</a> <br/> <a href="&
quot;>· Pengobatan</a> <br/><a href="">· Resep</a> <br/> <a href="&
quot;>· Konsultasi</a> <br/> <a href="">· Spesialis</a> <br/> <a href="&
quot;>· Rumah sakit</a> <br/><a href="">· Obat alami</a><br/> <!--<a href=&
quot;">&middot; Forum</a> <br/> <a href="">&middot; Indeks</a>--></li>

</ul></div>
<div class="clearfix"></div>
<span id="more_kanal"> <span class="fl"><a href=""></a>&
lt;/span> <span class="more_kanal_2"><a id="k_prev" href="#" class=&
quot;disabled"></a></span>
<div class="clearfix"></div>
</span></div>
<div class="clearfix"></div>
<div class="foot_4">
<div class="link_bot2"><a href="">Download</a>
· <a href="">Advertising</a>
· <a href="">Forum</a>
· <a href="">F.A.Q</a> · <a href="">Complain</a> · <a href="&
quot;>Suara konsumen</a> · <a href="">Garansi</a> · <a href="">Suara Pembaca</a> · <a href="">Kontribusi</a>
· <a href="">Donatur</a> · <a href="">Referensi</a></div>
<div class="link_bot2 copyright">Copyright © <script type="text/javascript">document.write(new
Date().getFullYear());</script>2013 info-gamepc, All Rights Reserved
· <a href="">Redaksi</a> · <a href="">Administrator</a>
· <a href="">Register</a> · <a href="">Login</a> · <a href=&
quot;">Pembayaran</a> · <a href="">Pembelian</a><!-- #*#FOLLOW#*# --></div>
<div class="clearfix"></div>
</div>
</div>
</div>

Setelah itu di simpan dan lihat hasilnya..
Kalau masih belum bisa bisa ditinggalkan Komentarnya ya, kita belajar bareng-bareng