Wednesday, July 31, 2013

Konsep Logo Blog Menggunakan CSS




Pada kesempatan ini share mengenai cara memperindah logo blog sebenarnya ada banyak cara namun jika agan berminat tidak ada salahnya mencoba cara ini,,sebelumnya dalam membuat logo ini saya terinspirsi dari Maz-waone dan Opic-Blog yang keren dan menarik..nah untuk caranya ikuti langkah dibawah ini..

Masuk blog agan
pilih menu template/edit html
kemudian letakan kode dibawah ini pada bagian header blog agan
kalau di template ini saya meletakannya dibawah kode <div id='header-wrapper'>

<a class='emp-logo' href='http://digratisan.blogspot.com/'>
<span class='char char-e'>a</span>
<span class='char-hidden'>rie</span>
<span class='char char-b'>a</span>
<span class='char-hidden'>die</span>
</a>

dan seperti biasanya letakan kode cssnya diatas ]]></b:skin>

.emp-logo {display : block;width : 170px;height : 40px;margin :5px;
position : relative;}
.emp-logo span {display : block;float : left;margin : 0;height : 35px;margin-left :-3px; font-family:Alike,Georgia,&quot;URW Bookman L&quot;,Serif;}
.emp-logo .char-e, .emp-logo .char-b{text-shadow :0 2px 2px #000;
color : #eee;font-size:48px;font-weight:bold !important;
transition : all 1s ease-out;}
.emp-logo .char-b {}
.emp-logo .char-b {left : -2px;border-color :none;}
.emp-logo .char-b + span {margin-left :0px;}
.emp-logo .char-hidden {font-size:28px;font-weight:bold !important;
text-decoration : none;letter-spacing : 0px;color : #58FAF4 ;width : 0;
opacity : 0;margin-top : 12px;overflow : hidden;
transition : width 0.5s 0.5s ease-in-out, opacity 0.5s 0.5s ease-out;
text-shadow :0 2px 2px #000;}
.emp-logo:hover .char-hidden {width : 50px;opacity : 1;
transition : width 0.6s 0.5s ease-in-out, opacity 0.3s 0.3s ease-out;} 
.emp-logo:hover .char-e, .emp-logo:hover .char-b{color:red;transition-duration: 1s;}
  .emp-logo:hover .char-m{margin-left :-12px;}


sampai langkah ini memang sudah selesai...
tetapi judul blog agan yang sebelumnya akan berbenturan dengan logo yang agan pasang

untuk menyembunyikan judul blog agan yang sebelumnya tambahkan kode display:none
pada script header sebelumnya

dan untuk beberapa script yang saya tandai  bisa agan sesuaikan atau dimodifikasi lagi sesuai kemauan dan selera masing - masing....

Selamat mencoba semoga bermanfaat...

0 comments:

Post a Comment