Membuat Menu unik dengan CSS3
Pagi sahabat Blogger.!!
Lagi bosen ga ada kerjaan dari pada diem mening saya coba posting aja cara Membuat " MENU DENGAN CSS3 " Kemarin saya coba posting membuat menu Dengan sentuhan Jquery, dan hari ini saya akan coba share Membuat menu dengan Efek CSS3.
kalian bisa lihat gambar di bawah ini :
 |
 |
Gimana unik kan apalagi udah di sertai Demonya.
yaudah deh langsung aja ikut langkah-langkahnya di bawah ini :
1. Login / Masuk Blogger
2. Pilih Rancangan Masuk ke Edit HTML
3. Jangan lupa centang ( Expand Template Widget )
4. Cari kode ]]></b:skin> bila sudah ketemu letakan code dibawah ini tepat diatas code ]]></b:skin>
/* LOEFA-SPIN */
p#loefa-spin img{
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
p#loefa-spin img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
/* LOEFA-SPIN 2*/
p#loefa-spin2 img{
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#loefa-spin2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
/* LOEFA-SPIN 3*/
p#loefa-spin3 img{
}
p#loefa-spin3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
Info : Di atas kalian bisa melihat code di bawah ini,
pilih salah satu code yang udah di kasih warna dan sesuaikan dengan selera kalian
/* LOEFA-SPIN */
/* LOEFA-SPIN 2*/
/* LOEFA-SPIN 3*/
Langkah ke ( Dua )
1. Masuk Blogger
2. Klik Rancangan / Tambah Gadget
3. Lalu pilih HTML/Javascript
4. Masuk code yang sudah di pilih di dalam elemen HTML/Javascript
Pilih salah satu code di bawah ini dan simpan di HTML/Javascrip/* LOEFA-SPIN */
<p id='loefa-spin'>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDIBp9PHI-QUZuylnrjfUavXdv0MPGEWDNiU9YnOMmGvc9IiRhnQtiGnWSbjoFXCDWt_MPsjdhSAjul_UmLHWwSQP5n9Q4u5X0jEOecOWhKCugfjSxYEKA3fmi5ux2z0jYsW8MQ555A/s1600/a.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbCEX9WwYgOp26OMGINYyD3jxp7ZGmtjel4_Q7yJnVZEexrUa2hDB89i9Q9o4wINTgZxal0wrwGFLtwl1Rc19qgfMZJlGn6PLWCPSt1ZeNFlHOND0PpoTtpIp06yigEURAIDxAhflGw/s1600/b.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgPRcZVqPVKn5cYVJ6ojGT0FOgGfH6o7eYRQCQKDqQgK2blT9_qm5HcFVyS34-j6hpOjZ8GieoIYIrEr2tv8kSwIr86CcGIqbPDXCjICmnQnyAgOl0XxNPfSno4d9i4RC0-JNEGLCxVw/s1600/c.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9B01C9JZkWzUm0Ko_JaAGsLUE6J6lJnzaFs6dSum8Let41z_jOMDwUWv7f1AOSwof38EBAlAv0dXAhfPROu6-xiUWSC46zn-ZbsTQCwBV5N1o7pEHPtfQxDxZ3cAVhYxGmksIcrJLfA/s1600/d.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmXsw-8ojrxYnvmK3xnKjl83tsIexzTU-1f4Z35V_8IIl196x5j2_iWFVVqigehkdNPgQDAPRDCAQBaSJcT8Vb-jlhsWHFAjUro66l1Sg9ujrrweJAoOQjYc5ynikuplqVt52TYKeBw/s1600/e.png'/></a>
</p>
/* LOEFA-SPIN 2 */
<p id='loefa-spin2'>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDIBp9PHI-QUZuylnrjfUavXdv0MPGEWDNiU9YnOMmGvc9IiRhnQtiGnWSbjoFXCDWt_MPsjdhSAjul_UmLHWwSQP5n9Q4u5X0jEOecOWhKCugfjSxYEKA3fmi5ux2z0jYsW8MQ555A/s1600/a.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbCEX9WwYgOp26OMGINYyD3jxp7ZGmtjel4_Q7yJnVZEexrUa2hDB89i9Q9o4wINTgZxal0wrwGFLtwl1Rc19qgfMZJlGn6PLWCPSt1ZeNFlHOND0PpoTtpIp06yigEURAIDxAhflGw/s1600/b.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgPRcZVqPVKn5cYVJ6ojGT0FOgGfH6o7eYRQCQKDqQgK2blT9_qm5HcFVyS34-j6hpOjZ8GieoIYIrEr2tv8kSwIr86CcGIqbPDXCjICmnQnyAgOl0XxNPfSno4d9i4RC0-JNEGLCxVw/s1600/c.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9B01C9JZkWzUm0Ko_JaAGsLUE6J6lJnzaFs6dSum8Let41z_jOMDwUWv7f1AOSwof38EBAlAv0dXAhfPROu6-xiUWSC46zn-ZbsTQCwBV5N1o7pEHPtfQxDxZ3cAVhYxGmksIcrJLfA/s1600/d.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmXsw-8ojrxYnvmK3xnKjl83tsIexzTU-1f4Z35V_8IIl196x5j2_iWFVVqigehkdNPgQDAPRDCAQBaSJcT8Vb-jlhsWHFAjUro66l1Sg9ujrrweJAoOQjYc5ynikuplqVt52TYKeBw/s1600/e.png'/></a>
</p>
/* LOEFA-SPIN 3*/
<p id='loefa-spin3'>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvDIBp9PHI-QUZuylnrjfUavXdv0MPGEWDNiU9YnOMmGvc9IiRhnQtiGnWSbjoFXCDWt_MPsjdhSAjul_UmLHWwSQP5n9Q4u5X0jEOecOWhKCugfjSxYEKA3fmi5ux2z0jYsW8MQ555A/s1600/a.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbCEX9WwYgOp26OMGINYyD3jxp7ZGmtjel4_Q7yJnVZEexrUa2hDB89i9Q9o4wINTgZxal0wrwGFLtwl1Rc19qgfMZJlGn6PLWCPSt1ZeNFlHOND0PpoTtpIp06yigEURAIDxAhflGw/s1600/b.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgPRcZVqPVKn5cYVJ6ojGT0FOgGfH6o7eYRQCQKDqQgK2blT9_qm5HcFVyS34-j6hpOjZ8GieoIYIrEr2tv8kSwIr86CcGIqbPDXCjICmnQnyAgOl0XxNPfSno4d9i4RC0-JNEGLCxVw/s1600/c.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9B01C9JZkWzUm0Ko_JaAGsLUE6J6lJnzaFs6dSum8Let41z_jOMDwUWv7f1AOSwof38EBAlAv0dXAhfPROu6-xiUWSC46zn-ZbsTQCwBV5N1o7pEHPtfQxDxZ3cAVhYxGmksIcrJLfA/s1600/d.png'/></a>
<a href='#'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmXsw-8ojrxYnvmK3xnKjl83tsIexzTU-1f4Z35V_8IIl196x5j2_iWFVVqigehkdNPgQDAPRDCAQBaSJcT8Vb-jlhsWHFAjUro66l1Sg9ujrrweJAoOQjYc5ynikuplqVt52TYKeBw/s1600/e.png'/></a>
</p>
5. Save Template dan lihat hasilnya..
Keterangan : Ganti code yang sudah saya kasih warna Merah Seperti ini ( # ) dengan Alamat-Url kalian.
>
Show
0 Comments
prev
next
