28 Juni 2013

Cara membuat ikon jejaring sosial mengagumkan dengan efek pop out di blog

Posted at  06.24  |  in  widget


Pada kesempatan kali ini saya ingin share lagi ke anda tentang cara membuat ikon jejaring sosial mengagumkan dengan efek pop out yang di buat murni menggunakan CSS. Ikon-ikon ini di desain sedemikian rupa menyerupai permen (candy) yang akan menarik perhatian para visitor blog anda dan cara menambahkannya pun cukup mudah. Ikon-ikon ini bisa anda tambahkan pada sidebar blog untuk membiarkan para visitor atau pembaca mengikuti di jejaring sosial favorit anda, ikon-ikonnya antara lain Rss Feed, Email, Facebook, Twitter, Google+ dan youtube.


LIVE DEMO (arahkan krusor anda ke ikon di bawah ini)





LANGKAH-LANGKAHNYA:

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript
  • Kemudian kopi dan pastekan kode berikut didalamnya:
<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="http://jalu-pangna.blogspot.com/feeds/posts/default?alt=rss" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=jalu-pangna&amp;loc=en_US" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="http://plus.google.com/u/0/103806695606848957210" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="https://www.facebook.com/pages/Eyang-anom/427305383989192" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="http://www.twitter.com/sijalupangna" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="http://www.youtube.com/sijalupangna" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>
  •  Simpan gadget..selesai

KUSTOMISASI

Silahkan anda ganti Link/URL yang disorot warna kuning dengan Link/URL anda

Happy blogging..!

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 06.24
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

14 komentar:

  1. kalau menurut saya enaknya dimakan om saya lihat manis2 sekali........

    BalasHapus
    Balasan
    1. haha... :d bisa aja mas imron jawabnya, gpp seeh kalau emang bisa mah. Blog mas imron makin hari-makin ok aja, salam sukses selalu. Terima kasih atas kunjungannya.. :)

      Hapus
    2. kalau saya mach ttap berkunjung om ngk bisa saya lupain nie blog...

      ngmong2 yang http://sijalupangna.blogspot.comnya masih aktif ngk om,,?

      Hapus
    3. Terima kasih banyak mas, masih.. cuma belum sempat update postingan.

      Hapus
    4. benar juga tuh, kayak permen =p~ tapi sharingnya bagus tuh, bisa dicoba (h)

      Hapus
    5. hehe..silahkan mas, terima kasih atas kunjungannya.. :)

      Hapus
  2. keren kang,,,, siga permen kojek hehheheee

    tapi beneran kang keren aslina bisa dipraktekeun sanes waktos, haturnuhun kang.

    BalasHapus
    Balasan
    1. Sami-sami kang alex...hatur nuhun parantos mampir, wilujeng leleson and salam sukses selalu.. :)

      Hapus
  3. ada permen lain gak?
    kayak permen tumblr dan instagram? :)

    BalasHapus
  4. masih ada 2 lagi candy nya, cuma candy skype dan linked in. Tapi candy tumbler dan instagram sementara ini stoknya blm ada. hehe.. :d

    BalasHapus
  5. mampir atuh pak ka blog abdi hehe

    BalasHapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top