Practice Makes Right,repetitions Make Perpect.

Tentang Blog Ini ×

B log Ini merupakan media saya untuk berbagi segala hal yang berhubungan tentang blogging meskipun masih sederhana,Mand4rt juga merupakan media saya dalam menuangkan hasil karya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca.

Aura Template

T emplate yang saya gunakan ini merupakan buatan saya sendiri, Banyak yang mengatakan bahwasanya DHE adalah template hasil cloningan secara utuh namun tidak demikian template ini saya susun dari sangat dasar dengan pemahaman yang sedikit awam dan otodidak dalam pembuatannya saya berusaha meniru tampilan beberapa template yang pernah dipakai oleh:

DTE :] web.id

Tentang Saya

S

alam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Provinsi Sulawesi Barat Dan Saya Bersekolah Di SMA Neg 1 Polewali.Nama saya Haekal Fikri akrab dipanggil Haekal. Saya Tidak Mempunyai Guru Saya Belajar Secara Otodidak Beserta Bantuan Dari Teman-teman blogger saya dan saya masih NEWBIE Jadi jika Saya Tidak Dapat Menjawab Pertanyaan Anda Tentang Seputar Blogging Harap Di Maklumi.
iklan
Bagikan kepada teman!

Icon Kaskus dengan HTML dan CSS

Icon Kaskus dengan HTML dan CSS


Akhirnya bisa ngepost lagi setelah beberapa hari absen karna berbagai masalah,oke kali ini saya mau memperlihatkan anda tentang cara membuat Icon Kaskus Dengan Css Dan Html.saya rasa hampir semua blogger indonesia mengetahui apa itu kaskus? yah, kaskus adalah forum terbesar di indonesia, banyak info yang kita bisa dapat disana. berikut adalah icon kaskus yang saya buat dengan css3 dan html, semoga saja persis :) . oia, sebaiknya buka halaman ini dengan firefox, opera dan chrome, karena saya sudah mengujinya di tiga browser tadi “tampilanya hampir sama”. untuk browser IE ternaksud IE9, saya jamin “tampilanya hancur dan berbeda”, ini karena saya menggunakan property rotate ‘dimana setahu saya ‘property ini hanya ada di engine layout gecko, webkit, dan opera. ini hasilnya source code(css html) icon Kaskus.cara menjalankan source code(html css) icon kaskusnya copy source code diatas buka notepad atau code editor lainya(saya pakai notepad ++)lalu paste ke notepad(code editor) tadi save as dengan nama ‘terserah.html’(tanpa tanda kutip)pada save as types pilih All types(*.*)ekstensinya harus [dot]html atau [dot]htm klik kanan pada terserah[dot]html, kemudian open with lalu pilih firefox, opera, chrome, atau safari atau bisa juga klik kanan di area kosong pilih new text document rename menjadi ‘terserah.html’(tanpa tanda kutip)edit lalu masukan source code diatas save klik kanan pada terserah[dot]html, kemudian open width lalu pilih firefox, opera, chrome, atau safari jika memilih cara kedua, hilangkan dulu centang pada ‘hide extensions for know file types, caranya misal, masuk ke my computerklik tools folder options(tab view)klik view lalu hilangkan centang pada ‘hide extensions for know file types’ok semua file akan memiliki extensi sekali lagi. Kaskus Icon Dengan CSS
<style type="text/css">
#kaskus-icon{
margin:50px auto;
width:470px;
height:470px;
background-color:silver;
padding:10px;
box-shadow:2px -6px 26px black, -2px 6px 26px black;
-moz-box-shadow:2px -6px 26px black, -2px 6px 26px black;
-webkit-box-shadow:2px -6px 26px black, -2px 6px 26px black;
-moz-border-radius:60px;
border-radius:60px;
-webkit-border-radius:60px;
overflow:hidden;
}
#kaskus-icon .kotak-dalam{
border:10px solid #F88017;
float:left;
margin:0;
width:450px;
height:450px;
background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.9) 15%, rgba(255, 255, 255, 0) 80%);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.9)), to(rgba(255, 255, 255, 0.1)));
-moz-border-radius:60px;
border-radius:60px;
-webkit-border-radius:60px;
}
#kaskus-icon .satu{
margin:0 0 0 25px;
height:450px;
width:35px;
float:left;
background:transparent;
}
#kaskus-icon .satu .garis{
margin:200px 0 0 0;
width:35px;
height:30px;
background:#1569C7;
-moz-border-radius:5px 0 0 5px ;
border-radius:5px 0 0 5px ;
-webkit-border-radius:5px 0 0 5px ;
}
#kaskus-icon .dua{
height:450px;
width:35px;
float:left;
background:transparent;
}
#kaskus-icon .dua .garis-atas{
float:left;
width:35px;
background:#1569C7;
height:150px;
margin:80px 0 0 0;
-moz-border-radius:13px 0 13px 0 ;
border-radius:13px 0 13px 0 ;
-webkit-border-radius:13px 0 13px 0 ;
}
#kaskus-icon .dua .garis-bawah{
float:left;
width:35px;
margin:35px 0 0 0;
background:#1569C7;
height:110px;
-moz-border-radius:5px 5px 0 13px ;
border-radius:5px 5px 0 13px ;
-webkit-border-radius:5px 5px 0 13px ;
}
#kaskus-icon .tiga{
height:450px;
width:70px;
float:left;
background:transparent;
}
#kaskus-icon .tiga .garis-atas{
float:left;
width:70px;
background:#1569C7;
height:35px;
margin:80px 0 0 0;}
#kaskus-icon .tiga .garis-bawah{
float:left;
width:70px;
height:35px;
margin:35px 0 0 0;
background:#1569C7;
margin:225px 0 0 0;
}
#kaskus-icon .empat{
height:450px;
width:35px;
float:left;
background:transparent;
}
#kaskus-icon .empat .garis-atas{
float:left;
width:35px;
background:#1569C7;
height:120px;
margin:80px 0 0 0;
-moz-border-radius:0 13px 6px 13px ;
border-radius:0 13px 6px 13px ;
-webkit-border-radius:0 13px 6px 13px ;
}
#kaskus-icon .empat .garis-bawah{
float:left;
width:35px;
height:130px;
margin:35px 0 0 0;
background:#1569C7;
margin:45px 0 0 0;
-moz-border-radius:13px 5px 13px 0 ;
border-radius:13px 5px 13px 0 ;
-webkit-border-radius:13px 5px 13px 0 ;
}
#kaskus-icon .lima{
height:450px;
width:60px;
float:left;
background:transparent;
}
#kaskus-icon .lima .garis-atas{
float:left;
width:140px;
background:#1569C7;
height:35px;
margin:121px 0 0 -36px;
-moz-border-radius:0 6px 0 5px ;
border-radius:0 6px 0 5px ;
-webkit-border-radius:0 6px 0 5px ;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
}
#kaskus-icon .lima .garis-bawah{
float:left;
width:145px;
height:35px;
background:#1569C7;
margin:134px 0 0 -36px;
border-radius:6px 0 8px 0 ;
-moz-border-radius:6px 0 8px 0 ;
-webkit-border-radius:6px 0 8px 0 ;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#kaskus-icon .enam{height:450px;
width:80px;
float:left;
background:transparent;
}
#kaskus-icon .enam .garis-atas{
float:left;
width:120px;
background:#1569C7;
height:35px;
margin:79px 0 0 9px;
-moz-border-radius:5px 5px 0 0 ;
border-radius:5px 5px 0 0 ;
-webkit-border-radius:5px 5px 0 0 ;
}
#kaskus-icon .enam .garis-bawah{
float:left;
width:137px;
height:35px;
background:#1569C7;
margin:219px 0 0 16px;
-moz-border-radius:0 50px 50px 12px ;
border-radius:0 50px 50px 12px ;
-webkit-border-radius:0 50px 50px 12px ;
}
#kaskus-icon .tujuh{
height:450px;
width:60px;
float:left;
}
#kaskus-icon .tujuh .garis-atas{
float:left;
width:170px;
background:#1569C7;
height:35px;
margin:133px 0 0 -86px;
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-border-radius:0 12px 60px 0 ;
border-radius:0 12px 60px 0 ;
-webkit-border-radius:0 12px 60px 0 ;
}
#kaskus-icon .tujuh .garis-bawah{
float:left;
width:210px;
height:35px;
background:#1569C7;
margin:98px 0 0 -116px;
-moz-border-radius:0 13px 13px 12px ;
border-radius:0 13px 13px 12px ;
-webkit-border-radius:0 13px 13px 12px ;
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
/* no fluff, no comment this source
thanks, for visit mysite(http:/haekalfiqri2.blogspot.com)
you? my friend! */
</style>

</head>
<body>
<div id='kaskus-icon'>
<div class='kotak-dalam'>
<div class='satu'>
<div class='garis'></div>
</div>
<div class='dua'>
<div class='garis-atas'></div>
<div class='garis-bawah'></div>
</div>
<div class='tiga'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
<div class='empat'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
<div class='lima'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
<div class='enam'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
<div class='tujuh'>
<div class='garis-atas'></div>
<div style='clear:both;'></div>
<div class='garis-bawah'></div>
</div>
</div>
</div><!-- regadrs
http:/haekalfiqri2.blogspot.com -->
</body>
</html>
SUMBER:WWW.INDAAM.COM
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Diposkan Oleh ❖
  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

  • Iklan Teks Murah

    Hanya Rp.5.000/bulan, Pasang Iklan Teks Anda Disini Sekarang Juga!

12 Komentar

Permalink
Pengen bikin juga logo/icon dari css atau HTML tapi harus dimulai dari mana ya? :(
Permalink
Mungkin Mas Harus Lebih Mempelajari Tentang -moz-border-radius :D
Permalink
kalau kita peduli sama validasi CSS3 gimana sob ?? apa ada alternatif lain ???
Permalink
Memang Sih Sob Itu Berpengaruh Sama Kevalidtan Css3,Tp Untuk Saat Ini Saya Belum Nemuin Alternatifnya :(
Permalink
Mantap mas emoticonnya :)
Permalink
Hehe Makasih Sob :D
Permalink
hadir ah... :D
Permalink
hehe Makasih Mas Taufik :D
Permalink
nice gan. izin coba
Permalink
Keren Mas ! MANTAP ! !
Permalink
hehe silahkan gan :-d
Permalink
hehe thanks mas dah berkunjung :D

Catatan
Dilarang menambahkan link aktif ataupun meng-iklankan suatu produk dll.
Kode yang panjang bisa menggunakan tag <i rel="pre"> KODE PANJANG ANDA </i>
Untuk menyisipkan gambar, gunakan tag <i rel="image"> URL GAMBAR </i>
Untuk menyisipkan Judul, gunakan tag <b rel="h3"> JUDUL ANDA DI SINI... </b>
Untuk menciptakan efek tebal gunakan tag <b> TEKS ANDA DI SINI... </b>
Untuk menciptakan efek huruf miring gunakan tag <i> TEKS ANDA DI SINI... </i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang kita bahas saat ini akan sangat bermanfaat bagi pembaca lain.
:):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya::p*Klik Untuk Melihat Kode Emoticon!

Konversi Kode Special Character Comment Editor Virtual Pedoman Berkomentar Daftar Member Aktif

BATAL

gobottom