.jpg)
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>
<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
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
Langsung saya coba nih... Kalau mau lihat hasilnya silakan buka kakaading.blogspot.com ya
BalasHapusthanks ya
BalasHapusiya sama-sama sob ..
Hapus