AH-SHARED

Creative Is Knowledge

  • Home
  • Tutorial
  • Sitemap
  • About
  • Exchange
  • Search
skip to main | skip to sidebar
Home » CSS » Bermain-main Dengan CSS Floating

Bermain-main Dengan CSS Floating

Posted by Unknown
CSS
Saturday, September 21, 2013
16 Comments
Hallo....Kembali lagi nih,,.sorry sobat akhir-akhir ini AHS jarang update lagi,karena saya sudah kuliah dan kemungkinan butuh satu admin lagi, yang benar benar menguasai template dari AHS yang sekarang dan bisa update artikel terus *promosi*

itu serius sobat, anda kepingin jadi admin di blog ini?? Show your skill,buktikan ke aku kalo kamu memang pantas jadi admin di blog ini.
oke,sekarang saya akan membahas mengenai CSS Floating,apa sih itu CSS Floating?? CSS floating adalah kode css yang berfungsi untuk menyamakan tinggi artikel dan sidebar.

contohnya seperti ini :

AHS

Nah,untuk membuat seperti itu,mudah saja..mudah dalam arti cara untuk membuat seperti itu ada banyak,tinggal kita pilih yang mana,..

Bermain-main Dengan CSS Floating


kalo saya, membuat yang seperti itu, saya memakai kode begini :
<html>
<head>
<title>Main-Main Dengan CSS Floating</title>
<style>
*{margin:0;padding:0;font-weight:normal;font-size:100%;}
#wrapper{width:960px;margin:0 auto;}
#header{width:100%;background:red;height:60px;margin:10px 0;color:#fff;font-weight:bold;text-align:center;font-size:22px;}
#content{background:yellow;overflow:hidden;padding:20px;margin-bottom:10px;}
#artikel{width:600px;float:left;background:blue;height:700px;}
.artikel-1{width:90%;height:200px;padding:10px;margin:10px auto;background:yellow;color:#000;}
.artikel-2{width:90%;height:200px;padding:10px;margin:10px auto;background:yellow;color:#000;}
.judul{border-bottom:1px solid #000;font-weight:bold;font-size:18px;color:#000;margin:5px auto;}
#sidebar{width:300px;float:right;height:200px;background:blue;margin:10px auto;color:#fff;}
.judul-side{border-bottom:1px solid #fff;text-align:center;font-weight:bold;font-size:18px;color:#fff;margin:5px auto;}
#sidebar2{width:300px;float:right;height:200px;background:blue;margin:10px auto;color:#fff;}
#footer{width:100%;background:red;height:30px;color:#fff;text-align:center;}
.widget{margin:5px;}
</style>
</head>
<body>
<div id='wrapper'>
<div id='header'>AHS-Site</div>
<div id='content'>
<div id='artikel'>
<div class='artikel-1'><div class='judul'>WOI INI JUDULNYA</div>Yak,Kita saksikanorang jelek membaca tulisan yang tidak jelas ini,apakah yang kita akan lakukan sekarang???..</div>
<div class='artikel-2'>Yak,Kita saksikan orang jelek membaca artikel yang tanpa judul ini,kita lihat saudara" apakah yang akan dilakukannya?? wooo... dia menangisbung..</div>
</div>
<div id='sidebar'><div class='judul-side'>INI WOI JUDULNYA</div><div class='widget'>Nah ini baru ada judulnya xD</div></div>
<div id='sidebar2'><div class='widget'>No judul sidebar LOL xD</div></div>
</div>
<div id='footer'>Copyright &copy; AHS 2013 All Right Reserved.</div>
</div>
</body>
</html>

Dari kode diatas,kita bisa dapatkan kode :
<html>
     <head>
     <!-- Untuk style.css dan meta tag -->
     </head>
  <body>
  <!-- Isi dari body -->
  </body>
</html>

Kita udah mengenal kode itu bukan?? yap,itu adalah kode dasar dari HTML,lalu bedanya apa dengan xHTML?

saya jawab,xHTML adalah bahasa HTML yang di pake oleh blogger(kalo salah yaudah,mau gimana lagi :v )
blogger itu ada 2 bahasa,yaitu XML untuk templatenya sedangkan kode standar adalah xHTML
bedanya apa?? sebetulnya ngga ada,hanya berbeda sedikit.

oke,untuk pengunjung setia AHS yang ingin benar" belajar baik itu xHTML,HTML,CSS,Javascript,dll sebisa mungkin sering-sering mampir ke sini ya :v saya akan mencoba update artikel tentang itu.
oke,pembahasannya tunggu ada yang tanya dulu ya :v

Untuk masalah pencarian admin,hubungi saya di Fb,Twitter,Email. Akan diadakan tes kemampuan anda terlebih dahulu.
Atas Perhatiannya,Thx.

byee..
Tweet

16 Responses to "Bermain-main Dengan CSS Floating"

ahs-avatar
Balas
Info Blog dan SEO Author ahs-delete September 21, 2013 at 3:53 PM

wow, keren nih
saya masih belum mahir kalau main css
jadi, saya ingin belajar disini

ahs-avatar
Balas
Unknown Author ahs-delete September 21, 2013 at 4:58 PM

thx

ahs-avatar
Balas
ViperGoy Blog Author ahs-delete September 21, 2013 at 5:32 PM

CSS Floating memang sangat berguna banget terutama pada mengatur lebar post halaman awal

ahs-avatar
Balas
Unknown Author ahs-delete September 21, 2013 at 5:39 PM

iya betul bero,tujuan CSS float kan buat nyamain tinggi post dan sidebar

ahs-avatar
Balas
Unknown Author ahs-delete September 21, 2013 at 5:44 PM

wih keren bro
http://sch-xp.blogspot.com/

ahs-avatar
Balas
Unknown Author ahs-delete September 22, 2013 at 7:11 AM

Widih mastah nih buat saya nambah ilmu :v
http://vhee-zone.blogspot.com/

ahs-avatar
Balas
Unknown Author ahs-delete September 22, 2013 at 8:05 AM

mastah apaan sih ._. belum saatnya saya jadi mastah kk

ahs-avatar
Balas
Asfar Author ahs-delete September 22, 2013 at 4:07 PM

wiiih, makasih triknya bg setelah lama menunggu artikel baru AHS akhirnya muncul jg

ahs-avatar
Balas
ABK Author ahs-delete September 22, 2013 at 6:00 PM

(y) Tutor yang sangat Pass bagi Pemula seperti saya

bang lain kali post cara membuat Blog Valid HTML5 dan SEO yah.. ??

ahs-avatar
Balas
Unknown Author ahs-delete September 22, 2013 at 6:38 PM

post cara valid HTML5?? nih http://ah-shared.blogspot.com/2013/06/cara-dasar-valid-html5.html mungkin bisa jadi refensi sobat

ahs-avatar
Balas
ABK Author ahs-delete September 23, 2013 at 2:45 PM

terima kasih bang ..

ahs-avatar
Balas
Unknown Author ahs-delete September 23, 2013 at 5:55 PM

oke

ahs-avatar
Balas
chipmunk2moncil Author ahs-delete September 23, 2013 at 9:52 PM

saya gak bisa main css di blogger kalok mau liatin blog saya bukahttp://bit.ly/17WYXo3 yaaah...

ahs-avatar
Balas
Unknown Author ahs-delete September 24, 2013 at 6:44 AM

makanya sob sering" ke sini

ahs-avatar
Balas
jiebagz Author ahs-delete October 1, 2013 at 10:37 PM

Postingan bagus nie...

Mampir ya...
http://aji-apps.blogspot.com/

ahs-avatar
Balas
no data Author ahs-delete October 5, 2013 at 9:57 AM

mantab gan artikelnya bermanfaat
http://www.daengrio.com/

:)
:(
=(
^_^
:D
=D
|o|
@@,
;)
:-bd
:-d
:p
Thanks for comments
← Newer PostOlder Post →Home

AH-SHARED On Facebook

Advertise

banner andabanner anda1banner anda2banner anda3
 
AHS2

Labels

AHS OriginalAwardBeritaBloggerC++CheatCSSDewasa(18+)EmoticonEvent AHSFacebookFull PatchGamesGaya HidupHackingInfoInfo JutsuIT InfoKesehatanNarutoNewsPengetahuanProgrammingRemajaSEOSoftwareTemplateTipsToolsTricksTukar linkTutorialUnik

Little About AHS

AH-SHARED didirikan sekitar bulan Agustus 2012 tetapi baru diluncurkan sekitar bulan Mei 2013. Mau tau kenapa?? silahkan simak di... Readmore »

New Update

  • Kumpulan Dork Untuk Deface Website
  • Cara Membuat Comment Form Keren & Tombol Konvert
  • Cara Membuat Comment Blogger dan G+ Berdampingan
  • Cara Membuat Post Di Bagi Menjadi 2 Bagian
Back to top!
Copyright © 2012-2013 AH-SHARED - All Rights Reserved
Design by Angwyn Benvenuto - Powered by Blogger