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 wphoet, May 14, 2013 #1 samuel Member Joined: Feb 5, 2013 Messages: 478 Likes Received: 15 Trophy Points: 18 Google+: Author mau lihat demonya tapi lemot mau lihat demonya tapi lemot banget ini jaringan modemnya samuel, May 14, 2013 #2 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author samuel wrote: iya barusan punyaku abis posting ini thread langsung keputus jaringannya. lagi online pakai smartfren nih mendadak lemot barusan wphoet, May 14, 2013 #3 cayun Member Joined: Feb 5, 2013 Messages: 661 Likes Received: 27 Trophy Points: 28 keren nih iconnya, tapi keren nih iconnya, tapi menurut saya pengunjung sekarang susah untuk ngelike,follow kalau gak dipaksa, jadi saya pake PopUp aja cayun, May 14, 2013 #4 misterius Member Joined: Feb 5, 2013 Messages: 267 Likes Received: 22 Trophy Points: 18 Google+: Author mau saya pakai, tapi nanti mau saya pakai, tapi nanti saja. misterius, May 14, 2013 #5 Fahmi Newbie Joined: Dec 5, 2012 Messages: 1,719 Likes Received: 159 Trophy Points: 63 Google+: Author keren dan coool keren dan coool Fahmi, May 14, 2013 #6 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author 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 wphoet, May 14, 2013 #7 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author @misterius : silahkan2 @misterius : silahkan2 @fahmi : logo icon tema bersosialnya ngambil dari punya situ wphoet, May 14, 2013 #8 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author 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 wphoet, May 14, 2013 #9 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author agusantara wrote: boleh2 silahkan wphoet, May 14, 2013 #10 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 hamidi, May 14, 2013 #11 royger Member Joined: Feb 15, 2013 Messages: 392 Likes Received: 12 Trophy Points: 18 Google+: Author Mantap Mantap mas.. keren pula royger, May 15, 2013 #12 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author @hamidi & @royger silahkan- @hamidi & @royger thanks n selamat mencoba wphoet, May 15, 2013 #13 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! sakaji, May 15, 2013 #14 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author @sakaji : makasih, jadi @sakaji : makasih, jadi malu wphoet, May 15, 2013 #15 budiw92 Member Joined: Feb 11, 2013 Messages: 725 Likes Received: 35 Trophy Points: 28 Google+: Author wah keren nih wah keren nih budiw92, May 16, 2013 #16 wphoet You'll Never Walk Alone Joined: Feb 19, 2013 Messages: 1,149 Likes Received: 142 Trophy Points: 63 Google+: Author budiw92 wrote: makasih wphoet, May 16, 2013 #17 (You must log in or sign up to reply here.) Show Ignored Content Loading... Similar Threads - Social icon melayang Daftar List Social Bookmarking Indonesia sentanawalian, Feb 4, 2015, in forum: Blogger Replies: 3 Views: 2,559 rajautan Sep 16, 2015 Sliding social media share Rivaiblog, Feb 25, 2014, in forum: Blogger Replies: 20 Views: 2,257 KBlogger Mar 9, 2014 floating social media Blogspot Rivaiblog, Feb 7, 2014, in forum: Blogger Replies: 10 Views: 1,239 Rivaiblog Feb 8, 2014 Social share blogspot style Rivaiblog, Dec 26, 2013, in forum: Blogger Replies: 4 Views: 793 Rivaiblog Dec 30, 2013 Share This Page Tweet Log in with Facebook Log in with Twitter Your name or email address: Do you already have an account? No, create an account now. Yes, my password is: Forgot your password? Stay logged in
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
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
wah @wphoet nggak cuma pintar wah @wphoet nggak cuma pintar nulis tapi pintar ber-coding ria. like this thread deh!