Partner

The Masked Man | Free Download EDHO-XP - Free Download All EDHO-XP - Free Download All
» » » CSS3 Danboard

CSS3 Danboard

Hallo ketemulagi ini,Semoga Gue Harep Gak Ada Plagiat Lagi ==".Kok perginya keplagiat ya ? Emang akhir-akhir ini EDHO-XP ada yang niru Style EDHO-XP.Ya, Udah nggak usah di urus nanti mati juga dia wakakakaka :V .

Kali ini EDHO-XP akan bahas Tentang CSS3 Danboard
Preview :

CSS Danboard - EDHO-XP
▲
▒
▧















Gimana Keren Kan ?
Mau tau cara buat nya ?
Cekidoit !


  • Login Ke Blogger.com buka sebagaimana mengedit Template / HTML
  • kemudian klik template >> jangan lupa "Download Template Lengkap" untuk melakukan proses BACK-UP Template, untuk jaga-jaga.
  • setelah selesai klik Edit HTML >> lanjutkan >> centang Expand Template Widget.
  • Cari kode ]]</b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode, kemudian simpan kode CSS dibawah ini tepat diatas kode ]]</b:skin> tersebut.


.Canvas {
position:relative;
width:172px;
z-index:-111;
margin:0 auto;
}
.Head {
border:1px solid #960;
border-radius:5px;
width:170px;
height:100px;
background:#BC9864;
position:relative;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
z-index:3;
display:block;
}
.eyeL {
border:0;
border-radius:100px;
width:18px;
height:18px;
background:#FC0;
position:absolute;
left:28%;
top:25px;
-webkit-box-shadow: 0px 0px 4px #FFC;
-moz-box-shadow: 0px 0px 4px #FFC;
box-shadow: 0px 0px 4px #FFC;
}
.eyeR {
border:0;
border-radius:100px;
width:18px;
height:18px;
background:#FC0;
position:absolute;
right:28%;
top:25px;
-webkit-box-shadow: 0px 0px 4px #FFC;
-moz-box-shadow: 0px 0px 4px #FFC;
box-shadow: 0px 0px 4px #FFC;
}
.eyeLtop {
border:0;
border-radius:100px;
width:16px;
height:16px;
background:#FFC;
position:absolute;
left:48px;
top:26px;
z-index:2;
}
.eyeRtop {
border:0;
border-radius:100px;
width:16px;
height:16px;
background:#FFC;
position:absolute;
right:48px;
top:26px;
z-index:2;
}
.mouth {
color:#500;
font-size:25px;
font-family:verdana;
text-align:center;
margin-top:50px;
text-shadow: 0px 0px 4px #930;
}
.logo {
color:#222;
font-size:8px;
font-family:arial;
position:absolute;
top:3px;
left:5px;
text-shadow: 0px 0px 4px #CEC292;
}
.barcode {
color:#222;
font-size:18px;
position:absolute;
bottom:3px;
left:5px;
text-shadow: 0px 0px 4px #CEC292;
}
.sign {
color:#222;
font-size:18px;
position:absolute;
bottom:2px;
right:5px;
text-shadow: 0px 0px 4px #CEC292;
}
.ears {
width:8px;
height:5px;
background:#960;
position:absolute;
left:-8px;
bottom:27px;
border-radius:20px 0 0 20px;
-webkit-box-shadow: -1px 0px 2px #630;
-moz-box-shadow: -1px 0px 2px #630;
box-shadow: -1px 0px 2px #630;
}
.neckL1 {
width:16px;
height:8px;
background:#960;
border-radius:4px 0 0 20px;
position:absolute;
left:25px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
z-index:-3;
}
.neckR1 {
width:16px;
height:8px;
background:#960;
border-radius:0 4px 20px 0;
position:absolute;
right:25px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
z-index:-3;
}
.neckL2 {
width:15px;
height:15px;
border-radius:30px;
background:#300;
position:absolute;
z-index:-4;
left:20px;
top:98px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.neckR2 {
width:15px;
height:15px;
border-radius:30px;
background:#300;
position:absolute;
z-index:-4;
right:20px;
top:98px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.bodyMain {
width:90px;
height:100px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-2;
left:40px;
top:101px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.bodyLogo {
color:#222;
font-size:8px;
font-family:arial;
border:0px solid red;
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
bottom:0;
width:20px;
height:20px;
text-indent:5px;
margin-left:33px;
text-shadow: 0px 0px 4px #CEC292;
}
.circle {
width:10px;
height:10px;
border-radius:30px;
background:#ddd;
position:absolute;
right:8px;
top:6px;
border: 1px solid #930;
-webkit-box-shadow: 0px 0px 2px #630;
-moz-box-shadow: 0px 0px 2px #630;
box-shadow: 0px 0px 2px #630;
}
.strikeLine {
width:8px;
height:2px;
background:#333;
margin-top:4px;
margin-left:1px;
position:absolute;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.armLeft {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
width:24px;
height:80px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:2;
top:111px;
left:6px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.armRight {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
width:24px;
height:80px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:2;
top:111px;
right:6px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.skirtLeft {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
width:3px;
height:30px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-2;
top:200px;
left:32px;
border-radius:100px 0 0 0;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.skirtRight {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
width:3px;
height:30px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-2;
top:200px;
right:32px;
border-radius:0 100px 0 0;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.skirtCenter {
width:90px;
height:30px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-2;
top:201px;
left:40px;
-webkit-box-shadow: 0px 3px 5px #630;
-moz-box-shadow: 0px 3px 5px #630;
box-shadow: 0px 3px 5px #630;
}
.legLeft {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
width:24px;
height:50px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-3;
top:231px;
left:50px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.legRight {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
transform: rotate(-3deg);
width:24px;
height:50px;
background:#BC9864;
border:1px solid #960;
position:absolute;
z-index:-3;
top:231px;
right:50px;
-webkit-box-shadow: 0px 2px 3px #630;
-moz-box-shadow: 0px 2px 3px #630;
box-shadow: 0px 2px 3px #630;
}
.title {
font-family:Times;
font-size:28px;
font-style:italic;
color:#630;
margin:20px auto;
text-align:center;
text-shadow: 0px 0px 4px #FFF;
}
.title span {
font-size:18px;
}
Setelah Disimpan Buka Rancangan > Tata Letak > Tambah Gadget > HTML/JavaScript > Masukan Kode Dibawah Ini Kemudian Simpan.

<div class="title">CSS Danboard</div>
<div class="Canvas">
<div class="Head">
    <div class="eyeL"></div>
        <div class="eyeR"></div>
        <div class="eyeLtop"></div>
        <div class="eyeRtop"></div>
        <div class="mouth">▲</div>
        <div class="logo"><strong>amazon</strong>.co.jp</div>
        <div class="barcode">▒</div>
        <div class="sign">▧</div>
        <div class="ears"></div>
    </div>
<div class="neckL1"></div>
    <div class="neckR1"></div>
    <div class="neckL2"></div>
    <div class="neckR2"></div>
    <div class="bodyMain">
    <div class="bodyLogo"><strong>amazon</strong>.co.jp</div>
        <div class="circle"><div class="strikeLine"></div></div>
    </div>
    <div class="armLeft"></div>
    <div class="armRight"></div>
    <div class="skirtLeft"></div>
    <div class="skirtRight"></div>
    <div class="skirtCenter"></div>
    <div class="legLeft"></div>
    <div class="legRight"></div>
</div>
Semoga Bermanfaat !


About EDHO-XP Author

Nama gue Edo Cosma. Nama asli gue Ahmad Dhoifullah . Gue orang nya sedikit pendiam dan pemalu. Apa lagi gue masih menduduki kelas 8 / 2 SMP tepatnya di sekolah SMPN 3 BATANGHARI sekolang yang berada di kotaku. Ini blog hanya percobaan dan iseng aja kok sob. Salam kenal yah sob !


Baca Juga Yang dibawah Ini :

Facebook Comments
4 Blogger Comments


4 Comment For » CSS3 Danboard

Maaf bila Komentar yang belum terbalas /yang request belum bisa terpenuhi karena Admin lagi sibuk banget

- No Spam,No Flood,No Junk,No Iklan,No Sara,No S*x,
- Jangan Ngemis Tempalte Punya EDHO-XP ! karena buatnya susah payah ! baca Disclaimner !
- Dilarang Promosi Agan/Aganwati, Pertamax, Pertamina dsb.
- Gunakan Bahasa yang efektif
- Anda Sopan Kami Segan
- Komentar Alay LANGSUNG admin delete

THANKS!

EDHO-XP Author

Ahmad Dhoifullah
Nama gue Ahmad Dhoifullah, gue salah satu anak kreatif dari komunitas yaitu :DeezClan. Gue benci banget orang yang ngemis tempate hasil karya orang. Entah apa tujuan nya. Plagiat ? Out dari dunia maya. View more about me

Recent Comments

@Dhoooes : Online Peoples