Icon Technorati ini adalah icon/Logo ke-tujuh yang saya buat dengan css3 dan html, sebelumnya saya sudah membuat ini
- Icon Feed Dengan CSS dan html
- Icon Gmail dengan CSS dan HTML
- Icon Friendster dengan CSS dan HTML
- Icon kaskus dengan CSS dan HTML
- Icon Myspace dengan CSS dan HTML
- Logo Windows Media Player dengan CSS dan HTML
sebaiknya gunakan firefox, opera, atau chrome untuk membuka halaman ini(saya sudah mengujinya di tiga browser tadi), berikut icon Technorati-nya
source code(css html) logo technorati
<html>
<head>
<title>technorati Icon Dengan CSS</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
#technorati{
margin:50px auto;
width:470px;
height:470px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-border-radius:10px;
background-color:lime;
box-shadow:2px -6px 26px #222, -2px 6px 26px #222;
-moz-box-shadow:2px -6px 26px #222, -2px 6px 26px #222;
-webkit-box-shadow:2px -6px 26px #222, -2px 6px 26px #222;
overflow:hidden;
position:relative;
}
#technorati .kotak{
float:left;
margin:0;
width:100%;
height:100%;
background-image:-moz-linear-gradient(rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 80%);
background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.0)));
-moz-border-radius:10px;
border-radius:10px;
-webkit-border-radius:10px;
}
#technorati .lingkaran{
margin:-60px -60px 0 0;
width:260px;
height:240px;
border:100px solid white;
float:right;
-moz-border-radius:50%;
border-radius:400px;
-webkit-border-radius:400px;
}
#technorati .panah{
margin:-50px 0 0 25px;
float:left;
width:0;
height:0;
border-top:70px solid transparent;
border-left:180px solid #fff;
border-right:70px solid transparent;
border-bottom:70px solid transparent;
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
}
/* no fluff, no comment this source
thanks, for visit mysite(http://www.indaam.com)
you? my friend! */
</style>
</head>
<body>
<div id='technorati'>
<div class='kotak'>
<div class='lingkaran'></div>
<div class='panah'></div>
</div>
</div>
<span style='position:fixed;bottom:3%;right:3%;display:block:margin:0;font:italic bold 120% "comic sans ms";'>Original Source Code by <a style='text-decoration:none;color:red;' href='http://www.indaam.com' target='blank' title='Indam Site'>Indam Site</a></span>
<!-- regadrs
http://www.indaam.com -->
</body>
</html>
cara menjalankan source code(html css) logo technorati-nya
- 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 computer
- klik 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, saya buat ini hanya untuk melatih kemampuan css saja, saya masih newbie di bidang css, semakin lama dipelajari CSS3 ini “semakin asik” 
warna hijaunya kurang pas saya rasa dan seharusnya batas lingkaran putih di sudut kanan tas seharusnya tidak kelihatan.
ia bro, nanti saya bagusin.
Asyik ya para ahli koding, bisa bikin yang unik-unik hanya dengan kode-kode tertentu
hehehe, ini hanya CSS ajak kok. saya masih belajar juga ‘jadi belum ahli’
Hehehe…saya malah enak, kalau ingin logo-logo begini tinggal copas di sini dan di PHP Ninja. Ndak perlu ribet mikirin CSS/HTML segala macam
Hahahaha.. Ayo. Copas abis!! Hahahaha.
Asal ada “fee”-nya. Hahahaha..
Hehehe…”fee”-nya ntar aja bro, sekarang ini menikmati yang gratis-tis dulu
Bro Aldy,
’
hehehe, silakan ‘aku seneng
Bro Ganda,
Matur tengkiu bro, sudah saya jadikan koleksi. Bergabung dengan buatan PHP Ninja dan yang lainnya
keren mas indam, kirain ada post baru ternyata 404. Belum rampung ya?