Social icon melayang berputar (spin) 2x360 derajat

ngakak bentar, soalnya saya bingung mau dikasih judul apa tentang social icon yang saya buat dengan efek jika di arahkan kursor mouse maka akan membesar dan berputar 2x 360 derajat. tapi masalah nama nanti aja dah yg penting dibahas dulu soscial iconnya.

Sebelumnya berawal dari share mas @sakaji tentang "Gratis, 10 Daftar Template Blog Responsive untuk Blogger " , pada tampilan demo di tamplate pertama dari maskolis.com ini ada deretan social icon melayang dengan efek easing. Jadi kalau mouse di arahkan ke soscial icon tersebut maka akan ada efek terbuka memanjang, kira2 gambarnya seperti ini:

Spoiler

buat demonya silahkan lihat pada thread mas sakaji ttg tamplate ini

nah dari situ coba saya buat social icon melayang versi sendiri yang jika kursor mouse di arahkan pada social icon tersebut maka social icon tersebut akan sedikit membesar (zooming) dan berputar 2x 360 derajat, biar kelihatan lebih responsive Kira2 tampilannya seperti ini :

Spoiler

social icon versi permen untuk melihat demonya silahkan lihat web/blog saya di www.plengdut.com untuk merasakan efek putarannya

Berikut langkah-langkah pemasangannya pada platform blogger:

1. Buka blogger template tab, kemudian pilih "edit HTML" (jangan lupa di backup dlu templatenya supaya kl terjadi kesalahanbisa di restore kembali.

2. pada kolom edit html tekan "ctrl+F" terus cari kode berikut ini

Code:

: ]]></b:skin>

kalau sudah ketemu kemudian letakkan kode berikut ini tepat diatas

Code:

]]></b:skin>

tadi:

Code:

.flt-wdt{
 position: fixed;
 right: 10px;
 top: 43%;
}
.flt-wdt img{
 float: right;
 clear: right;
 margin: 5px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.flt-wdt img:hover{
 -moz-transform: scale(1.2) rotate(720deg);
 -webkit-transform: scale(1.2) rotate(720deg);
 -o-transform: scale(1.2) rotate(720deg);
 -ms-transform: scale(1.2) rotate(720deg);
 transform: scale(1.2) rotate(720deg);
}

3. nah kalau sudah, sekarang cari code

Code:

</body>

kalau sudah ketemu, letakkan code icon social versi permen ini tepat diatas kode

Code:

</body>

tersebut. berikut code yg diletakkan :

Code:

<div class="flt-wdt">
 
 <a href="http://www.facebook.com/plengdut" title="Join us on Facebook" rel="nofollow" target="_blank"><img alt="Join us on Facebook" src="https://lh4.googleusercontent.com/-TFeoImZrloI/UZEbQJWuXUI/AAAAAAAAO8M/dD6IHoIdkus/s43/facebook.png" /></a>
 
 <a href="http://twitter.com/plengdut" title="Follow me on Twitter" rel="nofollow" target="_blank"><img alt="Follow us on Twitter" src="https://lh5.googleusercontent.com/-JDrD0nObFdc/UZEbRPr_h5I/AAAAAAAAO8k/r4fRAZsxbrM/s43/twitter.png" /></a>
  
 <a href="https://plus.google.com/113750800916808910377" title="Add to Circle" rel="nofollow" target="_blank"><img alt="Add us on G+" src="https://lh4.googleusercontent.com/--ZY6E4VkWl0/UZEbQJcSBtI/AAAAAAAAO8Q/ulXCB9QMz1Y/s43/google.png" /></a>

 <a href="http://www.plengdut.com/feeds/posts/default/" title="Subscribe to RSS" rel="nofollow" target="_blank"><img alt="Subscribe to RSS" src="https://lh5.googleusercontent.com/-eimSB_Bp-a0/UZEbQdJ6Z0I/AAAAAAAAO8Y/eoaxfHBT6Ws/s43/rss.png" /></a>
</div>

4. sebelum di save ganti dulu id socialnya, caranya tetap menggunakan "ctrl+f" terus cari kata "plengdut" ntar ketemunya ada 2 di twitter dan facebook silahkan di ganti dengan user ID teman2. buat google plus; cari tulisan ini "113750800916808910377" kemudian ganti dgn id G+ teman2, sedangkan untuk rss silahkan di ganti rss punya teman2.

Sedikit penjelasan tentang code css pada no.2:

-untuk memindahkan soscial icon melayang ke sisi kiri web/blog kita, silahkan mengganti semua tulisan "right" pada css no.2 dengan kata "left"

-untuk merubah putarannya dari yg sebelumnya 2x360 derajat ata sama dengan 720derajat, silahkan mengganti semua angka 720d pada css no.2 dengan putaran yg anda inginkan, misalnya kl kita cuma ingin berputar 90 derajat berarti semua value 720d pada css no.2 diganti dengan value 90d kl 90 derajat jadi jungkir balik icon socialnya

Selain versi permen, ada juga versi icon social yg lain.

Versi icon bersosial;

Spoiler

special thnks buat mas @fahmi yg dulu pernah share disgn icon versi bersosial
yang diganti cukup code yg no.3 pada tutorial di atas, css code yg no.2 gk perlu diganti, codenya silahkan di comot dari google drive saya disini: https://docs.google.com/file/d/0B3NtHB2D6HJxa0VoellPRnRkNDQ/edit?usp=sharing

versi tutup botol karatan:

Spoiler

kodenya yg ini https://docs.google.com/file/d/0B3NtHB2D6HJxbUVYNnhEU1NOWjA/edit?usp=sharing

versi koin:

Spoiler

codenya yg ini: https://docs.google.com/file/d/0B3NtHB2D6HJxT3NqaGprXzRGSDQ/edit?usp=sharing

versi cinta-cintaan:

Spoiler

codenya yg ini: https://docs.google.com/file/d/0B3NtHB2D6HJxOE81UU9lQXg3MjQ/edit?usp=sharing

versi bunga matahari:

Spoiler

codenya https://docs.google.com/file/d/0B3NtHB2D6HJxVEIzb1lya0tXYjA/edit?usp=sharing

Selamat bereksperimen

 

mau lihat demonya tapi lemot

mau lihat demonya tapi lemot banget ini jaringan modemnya

 

samuel wrote:

iya barusan punyaku abis posting ini thread langsung keputus jaringannya. lagi online pakai smartfren nih mendadak lemot barusan

 

keren nih iconnya, tapi

keren nih iconnya, tapi menurut saya pengunjung sekarang susah untuk ngelike,follow kalau gak dipaksa, jadi saya pake PopUp aja

 

mau saya pakai, tapi nanti

mau saya pakai, tapi nanti saja.

 

keren dan coool

keren dan coool

 

cayun wrote:

iya popup emang lebih ampuh, punayku kl pakai popup sehari bisa dpt 60-80 likes, kemarin coba yg ini sehari cuma dpt 10 likes, dan 15 follower twitter. tapi gk apa2lah buat mempercantik blog biar kelihatan lebih unyu-unyu kyk blognya anak2 ada icon2 permennya

 

@misterius : silahkan2

@misterius : silahkan2
@fahmi : logo icon tema bersosialnya ngambil dari punya situ

 

fahmi wrote:

sory sory tadi google driveku masih digembok kuncinya, sekarang sudah open public jadi bisa di share. baru lihat email barusan ada yg kekunci gemboknya

 

agusantara wrote:

boleh2 silahkan

 

bener bener maknyuz pakde, ke

bener bener maknyuz pakde, ke TKP dulu biar greget

 

Mantap

Mantap mas.. keren pula

 

@hamidi & @royger silahkan-

@hamidi & @royger thanks n selamat mencoba

 

wah @wphoet nggak cuma pintar

wah @wphoet nggak cuma pintar nulis tapi pintar ber-coding ria. like this thread deh!

 

@sakaji : makasih, jadi

@sakaji : makasih, jadi malu

 

wah keren nih

wah keren nih

 

budiw92 wrote:

makasih