Efek Permen Untuk Blogger dan Wordpress

Ikon Jejaring Sosial Efek Permen Untuk Blogger Dan Wordpress

Saya ingin berbagi tombol ikon jejaring sosial untuk link ke profil sosial Sobat, dengan efek mengagumkan yang dibuat dengan ikon CSS. Sangat mirip seperti desain candy lezat sungguhan, tentu hal tersebut akan menarik perhatian pembaca dan tentu trik ini sangat mudah untuk diterapkan ke blog. Dengan ikon ini Kita dapat tambahkan ke sidebar blog untuk memudahkan pembaca dengan cepat bisa langsung mengikuti di jejaring sosial favorit Sobat sekalian dan Saya memiliki seperti ikon untuk feed Rss, Email, Facebook, Twitter, Google+, LinkedIn, YouTube dan Skype.

Berikut ini saya jelaskan tutorial secara terpisah untuk pengguna Blogger dan Wordpress dengan instruksi untuk menambahkan link dan menghapus ikon yang tidak di inginkan. adapun link berikut telah Saya tambahkan tag no-follow ke link yang akan di tuju dan juga menetapkan target link untuk membuka di tab jendela baru.

Berikut ini adalah contoh cara kerjanya, arahkan kursor pada setiap ikon untuk melihat pop out effect:

Demo:

• Untuk cara menambahkan Ikon Sosial Candy pada Blogger

Langkah 1)
Dalam Dashboard Blogger Klik ke Bawah (drop down) pada Blog Sobat> Pilih Tata Letak> Klik Tambah Gadget> Pilih HTML / Javascript> di Dalamnya Paste Kode seperti yang terlihat di bawah ini:

Scroll Box pastikan semua kode di copy

<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="URL-RSS-FEED-DISINI" target="_blank"><img src="https://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="URL-EMAIL-DISINI" target="_blank"><img src="https://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="URL-GOOGLE+DISINI" target="_blank"><img src="https://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="URL-FACEBOOK-DISINI" target="_blank"> <img src="https://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="URL-TWITTER-DISINI" target="_blank"> <img src="https://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="URL-LINKEDIN-DISINI" target="_blank"><img src="https://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="URL-YOUTUBE-DISINI" target="_blank"><img src="https://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<a class="spice-popout" rel="nofollow" href="URL-SKYPE-DISINI" target="_blank"><img src="https://i.imgur.com/8c35IfD.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>

Catatan: Tambahkan Link ke setiap profil sosial Anda yang ditandai dengan warna KUNING. Setiap ikon memiliki judul di atas sehingga Sobat dapat mengganti atau menghapus yang tidak di inginkan.

• Untuk cara menambahkan Ikon Sosial Candy pada Wordpress

1) Dalam Dashboard Wordpress Klik 'Apperance'> 'Widgets'> Tambah Widget teks ke sidebar dan Paste Kode seperti yang terlihat di bawah ini:

Scroll Box pastikan semua kode di copy

<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="URL-RSS-FEED-DISINI" target="_blank"><img src="https://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="URL-EMAIL-DISINI" target="_blank"><img src="https://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="URL-GOOGLE+DISINI" target="_blank"><img src="https://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="URL-FACEBOOK-DISINI" target="_blank"> <img src="https://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="URL-TWITTER-DISINI" target="_blank"> <img src="https://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="URL-LINKEDIN-DISINI" target="_blank"><img src="https://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="URL-YOUTUBE-DISINI" target="_blank"><img src="https://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<a class="spice-popout" rel="nofollow" href="URL-SKYPE-DISINI" target="_blank"><img src="https://i.imgur.com/8c35IfD.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>

Catatan: Tambahkan Link ke setiap profil sosial Anda yang ditandai dengan warna KUNING. Setiap ikon memiliki judul di atas sehingga Sobat dapat mengganti atau menghapus yang tidak di inginkan.

Ikon Jejaring Sosial Efek Prangko Vintage Untuk Blogger Dan Wordpress Klik Disini