Thursday, February 20, 2014

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

Pada posting kali ini taukahbahwa.blogspot.com akan menyajikan artikel tentang Cara membuat ikon jejaring sosial mengagumkan dengan efek pop out di blog. Semoga dengan artikel Cara membuat ikon jejaring sosial mengagumkan dengan efek pop out di blog akan menambah wacana bagi anda pembaca setia taukahbahwa.blogspot.com



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.


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..!

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com

No comments:

Post a Comment

jangan lupa tinggalkan komentar .... trimakasih atas kunjungannya