Popular Post

Popular Posts

Posted by : Cyberr Pamekasan Jumat, 28 Juni 2013


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)






Cara Memasang ke Blog

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript
<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="URL Feed sobat" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="URL email sobat" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="URL google plus sobat" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="URL Facebookfanpage sobat" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="URL twiter sobat" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="URL youtube sobat" 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

KETERANGAN

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

{ 3 komentar... read them below or Comment }

Syarat Berkomentar !!
1.Berkomentarlah dengan bahasa yang baik dan benar .
2.Komentar tidak mengandung SARA,,PELECEHAN,,dan hal2 yang negatif .
3.Tidak boleh menyisipkan link aktif di komentar ini
4.No Spamming

- Copyright © 2013 Cyberr Pamekasan - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -