Social icon melayang berputar (spin) 2x360 derajat

Discussion in 'Blogger' started by wphoet, May 14, 2013.

  1. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    *ketawa4* 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. *ketawa3* 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:

    [​IMG]
    buat demonya silahkan lihat pada thread mas sakaji ttg tamplate ini *peace*

    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 *jail* Kira2 tampilannya seperti ini :

    [​IMG] social icon versi permen *ketawa3* untuk melihat demonya silahkan lihat web/blog saya di www.plengdut.com untuk merasakan efek putarannya *ketawa3*

    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 *ketawa4* kl 90 derajat jadi jungkir balik icon socialnya *peace*

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

    Versi icon bersosial;
    [​IMG]
    special thnks buat mas @fahmi yg dulu pernah share disgn icon versi bersosial *ketawa3*
    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:
    [​IMG]
    kodenya yg ini https://docs.google.com/file/d/0B3NtHB2D6HJxbUVYNnhEU1NOWjA/edit?usp=sharing

    versi koin:
    [​IMG]
    codenya yg ini: https://docs.google.com/file/d/0B3NtHB2D6HJxT3NqaGprXzRGSDQ/edit?usp=sharing

    versi cinta-cintaan:
    [​IMG]
    codenya yg ini: https://docs.google.com/file/d/0B3NtHB2D6HJxOE81UU9lQXg3MjQ/edit?usp=sharing

    versi bunga matahari:
    [​IMG]
    codenya https://docs.google.com/file/d/0B3NtHB2D6HJxVEIzb1lya0tXYjA/edit?usp=sharing

    Selamat bereksperimen *berkeringat*
     
  2. samuel

    samuel Member

    Joined:
    Feb 5, 2013
    Messages:
    479
    Likes Received:
    14
    Trophy Points:
    18
    Google+:
    mau lihat demonya tapi lemot

    mau lihat demonya tapi lemot banget ini jaringan modemnya *berkeringat*
     
  3. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    samuel wrote:

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

    cayun Member

    Joined:
    Feb 5, 2013
    Messages:
    651
    Likes Received:
    27
    Trophy Points:
    28
    Google+:
    keren nih iconnya, tapi

    *bagus* keren nih iconnya, tapi menurut saya pengunjung sekarang susah untuk ngelike,follow kalau gak dipaksa, jadi saya pake PopUp aja *ketawa4*
     
  5. misterius

    misterius Member

    Joined:
    Feb 5, 2013
    Messages:
    267
    Likes Received:
    22
    Trophy Points:
    18
    Google+:
    mau saya pakai, tapi nanti

    mau saya pakai, tapi nanti saja.
     
  6. Fahmi

    Fahmi Newbie

    Joined:
    Dec 5, 2012
    Messages:
    1,719
    Likes Received:
    159
    Trophy Points:
    63
    Google+:
    keren dan coool

    keren dan coool *bagus*
     
  7. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    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 *ketawa4*
     
  8. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    @misterius : silahkan2

    @misterius : silahkan2 *ketawa3*
    @fahmi : logo icon tema bersosialnya ngambil dari punya situ *ketawa3*
     
  9. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    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 *ketawa3*
     
  10. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    agusantara wrote:

    boleh2 silahkan *ketawa3*
     
  11. hamidi

    hamidi Member

    Joined:
    Mar 20, 2013
    Messages:
    106
    Likes Received:
    7
    Trophy Points:
    18
    bener bener maknyuz pakde, ke

    bener bener maknyuz pakde, ke TKP dulu biar greget *senang*
     
  12. royger

    royger Member

    Joined:
    Feb 15, 2013
    Messages:
    388
    Likes Received:
    11
    Trophy Points:
    18
    Google+:
    Mantap

    Mantap mas.. keren pula *bagus*
     
  13. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    @hamidi & @royger silahkan-

    @hamidi & @royger thanks n selamat mencoba *ketawa3*
     
  14. sakaji

    sakaji Member

    Joined:
    Mar 13, 2013
    Messages:
    165
    Likes Received:
    2
    Trophy Points:
    18
    wah @wphoet nggak cuma pintar

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

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    @sakaji : makasih, jadi

    @sakaji : *ketawa3* makasih, jadi malu *malu1* *mati*
     
  16. budiw92

    budiw92 Member

    Joined:
    Feb 11, 2013
    Messages:
    720
    Likes Received:
    35
    Trophy Points:
    28
    Google+:
    wah keren nih

    wah keren nih *bagus*
     
  17. wphoet

    wphoet You'll Never Walk Alone

    Joined:
    Feb 19, 2013
    Messages:
    1,149
    Likes Received:
    142
    Trophy Points:
    63
    Google+:
    budiw92 wrote:

    makasih *ketawa3*
     
Loading...

Share This Page