Membuat Logo Google Dengan CSS

logo google D-G Blog

Kali ini D-G Blog akan mengepost cara membuat logo google dengan CSS. Sebenarnya ini hanya css dasar, yaitu dengan membuat spesifikasi dari masing masing huruf dari GOOGLE tersebut. Namun sepertinya masih ada kelemahan karena saya belum terlalu bisa CSS. Hanya saran, logo ini akan bertabrakan kodenya dengan background. Bagi yang belum tau apa itu HTML bertabrakan klik disini
logo google D-G Blog

CSS tersebut akan berfungsi seperti gambar diatas, yang paling atas adalah dalam keadaan normal dan gambar kedua adalah gambar ketika di blok.
Cara membuatnya adalah tinggal mengcopy code ini
<style>
@-moz-font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
@-webkit-font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
@-o-font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
@-ms-font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
@font-face{
    font-family: Catull;
    src: url(font/catull.ttf);
    font-weight:400;
}
 body{
    font-family: Catull,Sans-Serif;
    background: #f1f1f1;
}
#davidkeren{
    margin:200px auto;
    width:600px;
    height:200px;
    text-align:center;
    font-size:100px;
    text-shadow:0px 3px 3px rgba(0,0,0,0.25);
    filter: dropshadow(color=rgba(0,0,0,0.25), offx=0, offy=3);
}

.G{
    color:#0047F1;
}
.G::-moz-selection{
    background-color:#0047F1;
    color:#DD172C;
}
.G::-webkit-selection{
    background-color:#0047F1;
    color:#DD172C;
}
.G::-o-selection{
    background-color:#0047F1;
    color:#DD172C;
}
.G::-ms-selection{
    background-color:#0047F1;
    color:#DD172C;
}
.G::selection{
    background-color:#0047F1;
    color:#DD172C;
}
.o1{
    color:#DD172C;
}
.o1::-moz-selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o1::-webkit-selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o1::-o-selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o1::-ms-selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o1::selection{
    background-color:#DD172C;
    color:#F9A600;
}
.o2{
    color:#F9A600;
}
.o2::-moz-selection{
    background-color:#F9A600;
    color:#0047F1;
}
.o2::-o-selection{
    background-color:#F9A600;
    color:#0047F1;
}
.o2::-ms-selection{
    background-color:#F9A600;
    color:#0047F1;
}
.o2::-webkit-selection{
    background-color:#F9A600;
    color:#0047F1;
}
.o2::selection{
    background-color:#F9A600;
    color:#0047F1;
}
.g{
    color:#0047F1;
}
.g::-moz-selection{
    background-color:#0047F1;
    color:#00930E;
}
.g::-o-selection{
    background-color:#0047F1;
    color:#00930E;
}
.g::-ms-selection{
    background-color:#0047F1;
    color:#00930E;
}
.g::-webkit-selection{
    background-color:#0047F1;
    color:#00930E;
}
.g::selection{
    background-color:#0047F1;
    color:#00930E;
}
.l{
    color:#00930E;
}
.l::-moz-selection{
    background-color:#00930E;
    color:#E61B31;
}
.l::-o-selection{
    background-color:#00930E;
    color:#E61B31;
}
.l::-webkit-selection{
    background-color:#00930E;
    color:#E61B31;
}
.l::-ms-selection{
    background-color:#00930E;
    color:#E61B31;
}
.l::selection{
    background-color:#00930E;
    color:#E61B31;
}
.e{
    color:#E61B31;
}
.e::-moz-selection{
    background-color:#E61B31;
    color:#0047F1;
}
.e::-webkit-selection{
    background-color:#E61B31;
    color:#0047F1;
}
.e::-o-selection{
    background-color:#E61B31;
    color:#0047F1;
}
.e::-ms-selection{
    background-color:#E61B31;
    color:#0047F1;
}
.e::selection{
    background-color:#E61B31;
    color:#0047F1;
}

@font-face{
font-family:Catull;
src: url(font/catull.ttf);
font-weight:400;
}

html body{
font-family:Catull,Sans-Serif;
background: #f1f1f1;
}


#davidkeren{
margin:200px auto;
width:600px; width 600px
height:200px; height 200px
text-align:center;
font-size:100px; text size 100px
text-shadow:0px 3px 3px rgba(0,0,0,0.25);
}

.G{
color:#0047F1;
}

.G::selection{
background-color:#0047F1; background color
color:#DD172C; letter color
}
</style>
Kode tersebut dapat diletakan di posting, dengan cara

1. Meletakannya dibagian HTML bukan compose

2. Cukup Pastekan

3. Jika ingin mengaktifkan kode tersebut langsung saja pastekan kode berikut:

<div id="davidkeren"><a class="G">G</a><a class="o1">o</a><a class="o2">o</a><a class="g">g</a><a class="l">l</a><a class="e">e</a></div>
Tetapi jika anda ingin meletakannya di bagian postingan atau tata letak namun anda ingin menggunakannya terus, maka caranya
1. Buka template

2. Edit HTML

3. Pastekan kode yang didalam scrool keatas ]]></b:skin>

4. Dan jika ingin diletakan tata letak anda tinggal mempastekan kode

<div id="davidkeren"><a class="G">G</a><a class="o1">o</a><a class="o2">o</a><a class="g">g</a><a class="l">l</a><a class="e">e</a></div> 
Dan apabila anda ingin memasang logo tersebut di tempat lain anda tinggal mempastekan kode pada nomor  4 saja tidak perlu yang didalam scrool lagi
Jika kalian ingin mengeditnya menjadi nama anda itu bisa anda tinggal membaca css tersebut dan mengubah hurufnya saja.

Sekian dari D-G Blog
Terima kasih

Related Post:


Facebook Comments
34 Blogger Comments


34 comments

January 31, 2013 at 7:11 AM delete

wiiiss mantabh sob
di tunggu comment back nya
http://greenz-blogger.blogspot.com/

January 31, 2013 at 7:25 AM delete

@randy avolution: ia bro

January 31, 2013 at 7:54 AM delete

Vid, aku mau memevolusi css ini
cara ngerubah warna text juga cara merubah text tu gmn?
mohon penjelasannya, bsa juga gue chat sama elu.. ^^

comment back please >> http://www.amos-xp.com/2013/01/cara-membuat-postingan-ketika-di-click.html

January 31, 2013 at 8:07 AM delete

@ramos: ini adalah css sederhana, jadi kalau km ingin mengubah warna tentu saja kode warna yang diubah, lagipul struktur css diatas juga cukup simple hanya terdiri dari warna dan sebagainya saja bukan?

January 31, 2013 at 8:25 AM delete

Wah mantap tutornya gan, coba ah..

January 31, 2013 at 8:28 AM delete

@belajar bisnis: tnx

January 31, 2013 at 8:47 AM delete

Nice tutpr gan, d tunggu yah comment baliknya : gkp-inside.blogspot.com

January 31, 2013 at 9:16 AM delete

Keren gan :D
template blognya juga TOP

January 31, 2013 at 2:36 PM delete

visit back and beri komentar
http://tutorials1927.blogspot.com/

January 31, 2013 at 2:39 PM delete

wah sob.. bermanfaat sekali boleh di coba gak nih ??

#komenback http://www.iffatblogger.com/

January 31, 2013 at 3:38 PM delete

wah, thx infonya gan
semoga sukses selalu.

January 31, 2013 at 6:28 PM delete

@Giwangkara Perdana III :seep
@dwi: tnx
@tutorials: ia
@iffat: ya jelas boleh lah
@ade putra: tnx

February 1, 2013 at 7:11 AM delete

Wuiiihhh kren ne sob..
Oke dech ntar ane cobain..
Thnx da berbagi.
#salam blogger

February 1, 2013 at 7:31 AM delete

@adi saputra doankzz:seep

February 1, 2013 at 12:43 PM delete

trims gan tutorialnya..sering-sering ajh gan ngasih tutorialnya

February 1, 2013 at 1:35 PM delete

Mantap, brhubung ane blogger hp, ijin bookmark dlu gan, ntar ane ke warnet mo nyontek gan hehehhs blh gk? :v

February 1, 2013 at 3:37 PM delete

oke mas bro artikelnya makasih..

February 1, 2013 at 5:49 PM delete

@goedang aplikasi: pasti dah
@agung west: bolehlah pasti boleh :p
@bocah poris: seep tnx

February 2, 2013 at 7:06 AM delete

Keren gan :D

Coment back gan

February 2, 2013 at 11:21 AM delete

Nice trik bro ...
Jangan lpa blogwalking bro , link blogmu sudah ane psng di blogku di tunggu link banknya yaa :) Thx

February 2, 2013 at 12:53 PM delete

ijin nyoba di blog ^^

follback nya di tunggu http://www.ragenah.me ^^

February 2, 2013 at 3:49 PM delete

@dwi:tnx
@devilz-adrian:ok
@rage bunshin: seep

February 3, 2013 at 7:09 AM delete

Wow, master css nih :)

February 3, 2013 at 7:15 AM delete

Keren artikelnya sob...

www.green404.blogspot.com

February 3, 2013 at 11:32 AM delete

lumayan xD Keren

February 3, 2013 at 5:31 PM delete

@kang ridhwa: nggak lah cuma blogger biasa

February 3, 2013 at 5:32 PM delete

@sandY;tnx
@eka: seep

February 3, 2013 at 7:05 PM delete

Wah Mantep Sob tutornya :D

February 3, 2013 at 7:20 PM delete

@ilham:tnx

February 3, 2013 at 7:26 PM delete

kayaknya keren nih.. :D nice share..

zhmiepallace.blogspot.com

February 3, 2013 at 7:55 PM delete

nyimak bos

February 3, 2013 at 10:05 PM delete

bingung ane sob css logo gugel itu mksudnya apaan mklum neubi :P

February 4, 2013 at 4:22 AM delete

wah mantapp keren juga tuch...
Ijin coba lah sobb :D

http://www.mvahlepi.net

February 4, 2013 at 6:20 AM delete

@Azmi Farhan:tnx
@dieky's blog: seep
@narrucyber: maksudna css css yang membentuk tulisan gogle
@michael vahlepi : silakan

Post a Comment - Back to Content

Poskan Komentar
Blog Ini Doffolow
Tolong Berkomentar Yang sopan
Rank Alexa : 180rb +
[+] D-G RULE[+]
- Jangan Spam
- Berbicara Sopan
- Kalau bisa jangan Out Of Topic
- Promosi Jangan Berlebihan
Silakan Berkomentar


Like Fanspage D-G Blog

 
Selamat Datang Di D-G Blog, Kini Hadir Dengan Tampilan Baru. Silakan Dibaca Dan Sedot Ilmunya Serta Silakan Tinggal Comment Di Blog Ini.Terima Kasih.FOLLOW THIS BLOGVALID HTML5