Home Blogging Cara Membuat Tombol Sosial Media Dengan Efek Berputar di Blog

Cara Membuat Tombol Sosial Media Dengan Efek Berputar di Blog

✔ Unknown

Saat ini ada banyak sosial media yang bisa digunakan guna meningkatkan trafik ke situs Anda. Untuk memiliki akunnya, kita hanya perlu mendaftar sesuai dengan ketentuan yang berlaku.

Dengan adanya tombol sosial media, maka akan memudahkan pengunjung situs untuk mengikuti situs Anda melalui sosial media, misalnya Facebook, Google Plus, Twitter, LinkedIn, YouTube dan sebagainya.

Cara Membuat Tombol Sosial Media Berputar

Sesuai dengan judul diatas yaitu cara membuat tombol sosial media berputar, maksudnya ialah icon akan berputar apabila tersentuh oleh mouse. Apabila Anda tertaik untuk mencobanya, ikuti saja caranya berikut ini:

1. Masuk Dasbor Blogger.

2. Pilih Tata Letak.

3. Tambahkan Gadget > Cari HTML/Javascript.

4. Copy-paste kode berikut pada kolom konten yang tersedia:
<style>
p#deloiz_whereverweare img {
 /* Tombol Sosial Share By http://deloiz.com */
    -moz-transition: all 0.9s ease-in-out;
    -webkit-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
p#deloiz_whereverweare img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Tombol Sosial Share By http://deloiz.com */
</style>
<center><p id="deloiz_whereverweare">
<a href="URL AKUN FACEBOOK" target='_blank'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj58E2B4o0qVPrkC3UAxFiCWNj8AUXwzifof7Iiq7hO5UJ53Lw0PnqH5NnN3SXHo_F8BV1kO-rsiuvoNHmsSG6H_k3UMuvrO3A30F_mlIPYpH_YyLr_2ZZassJJ9Lj4aI8UWsF6HcoXFQI/s1600/1367482865_facebook.png' title='Facebook" /></a>
<a href="
URL AKUN TWITTER" target='_blank'>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gopTd-Th3WlkONBfoIAh_AkI3O7N8sMZol72g3ecNjhAhXaCNIOHdAlQqM3mjpYsIQKZ7mdZHivETqyqIK9SgYP9PyrlEK1luSKZIB_S-A5joOCNdYIFyRtvPuFfPkUvJ1UoFBx9sPc/s1600/1367482877_twitter.png' title='Twitter" /></a>
<a href="
URL AKUN GOOGLE+" target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq1fW7ucAFlJosiy7WPFfNl54h_FDtnQcKAlEhG2Q5GgP1F535XRtIMDivYdJUWO3VFjtOk3XVDxLR55bk5phv3AgAzCfqFWUSqvyfnOz7OjL7jRNVU5pBm6PEpaPrgnprOcU8GPlJCtI/s1600/1367482887_google.png' title='Google Plus" /></a>
<a href="
URL AKUN LINKEDIN"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaaj9kmjifO4EnVqSJGPsyv8JeeIuh-7Fui8WagZchuKzZAN1mg0ZZR88SPWT9zWS6g_FAMAtJUQbPU4hTwvzAA8b3Yq2_mqMQ-c4jZiSkhNEViPnLjSrvKUDeThpqZzulpGvlLM7-yaQ/s1600/1367482890_linkedin.png' title='LinkedIn" /></a>
<a href="
URL AKUN RSS FEED" target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyepufAq7bTnbwhBVI-uqh1YJbE-UchaEPIGfGs856UEHX-FUW-sdzldVBpHRR8DzIAIpGsHnyn0C0ttu0BEuwdy_LpLwsTbjIcTvhxOLl-Pht4Fzbg__EqtB96HA74b5omPzLYifcCYc/s1600/1367482894_rss.png" /></a>
<a href="
URL AKUN YOUTUBE" target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUgDtp-bcnyTxmuJOx47oHhB9BVF6ZMQqQ9ols74_cGa0yvYnSCM_qiOyluUFsdS8PlyMPqcyVbDmyB5ICXmi4yxWUVSKwaf2tUlutnftCM3kaJvLxJ8OiGyr4MjLGYZbs9MbklrP2x7A/s1600/1367482884_youtube.png' title='Youtube" /></a>
</p></center>
5. Simpan kemudian lihat hasilnya.

Keterangan:
Silahkan ganti alamat URL yang berwarna merah diatas dengan akun-akun sosial media yang Anda miliki. 

Sekian tutorial blog tentang membuat tombol sosial media dengan efek berputar. Apabila ada pertanyaan silahkan tinggalkan komentar dan jangan lupa ikuti kami untuk mendapatkan tips lainnya.

Related