Cara Membuat Tombol Social Media Keren di Blog

Cara Membuat Tombol Social Media Keren di Blog - kali ini Blog Pintasku masih memberikan Tutorial Widget Tombol Social Media, tapi yang akan saya share kali ini sangatlah keren karena widget sosial media ini menggunakan gaya eye-catching dan di desain untuk mempercantik blog sobat. Perlu diketahui juga dengan menggunakan widget ini sobat bisa menarik pengunjung sobat untuk bisa menjadi penggemar blog sobat di jejaring sosial media.

Widget Sosial Media ini juga tidak membuat blog anda menjadi lambat atau lelet, dan juga sobat bisa memperbanyak pengunjung atau lebih tepatnya Meningkatkan Jumlah Visitor di blog. Oke sekarang langsung saja ke Tutorialnya.

Cara Membuat Tombol Sosial Media Keren di Blog.

1. Pertama, seperti biasa Login dulu ke Blogger.
2. Sekarang masuk ke bagian Tata Letak (Layout) 
3. Tambahkan Gadget (Add Gadget), lalu pilih HTML/Javascript

4. Copy kode berikut ini dan letakan seperti pada gambar di atas.

<div class="socialLinks">
<a href="URL Facebook Sobat" class="fFacebook transition"><span>Facebook</span></a>
<a href="URL Twitter Sobat" class="fTwitter transition"><span>Twitter</span></a>
<a href="URL Instagram Sobat" class="fInstagram transition"><span>Instagram</span></a>
<a href="URL Pinterest sobat" class="fPintrest transition"><span>Pinterest</span></a>
<a href="URL LinkedIn Sobat" class="fLinkedIn transition"><span>LinkedIn</span></a>
<a href="URL Dribble sobat" class="fDribbble transition"><span>Dribbble</span></a>
<a href="URL Google + Sobat" class="fGoogle transition"><span>G+</span></a>
</div>
<style>
.socialLinks{text-align:center;margin:50px 0 0}.socialLinks a{display:inline-block;margin:0 .5em;-webkit-transition-property:all !important;-moz-transition-property:all !important;-o-transition-property:all;transition-property:all !important;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;border:2px solid #8fb73e}.socialLinks a:hover{-webkit-border-radius:40px;-moz-border-radius:40px;-ms-border-radius:40px;-o-border-radius:40px;border-radius:40px}.socialLinks span{display:none}.fTwitter{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -655px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:1px -1083px;background-repeat:no-repeat;height:62px;width:62px}.fFacebook:hover{background-color:#369;border-color:#fff;background-position:1px -1141px}.fTwitter:hover{background-color:#28aae1;border-color:#fff;background-position:0 -718px}.fInstagram:hover{background-color:#517fa4;border-color:#fff;background-position:0 -597px}.fPintrest:hover{background-color:#cc2127;border-color:#fff;background-position:0 -285px}.fLinkedIn:hover{background-color:#007fb1;border-color:#fff;background-position:0 -860px}.fDribbble:hover{background-color:#ea4c89;border-color:#fff;background-position:0 -52px}.fGoogle:hover{background-color:#e46044;border-color:#fff;background-position:0 -395px}.fInstagram{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -527px;background-repeat:no-repeat;height:62px;width:62px}.fPintrest{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -226px;background-repeat:no-repeat;height:62px;width:62px}.fLinkedIn{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 -790px;background-repeat:no-repeat;height:62px;width:62px}.fDribbble{background-image:url(https://googledrive.com/host/0B3m2F2L71gmGRHJYLUVwZ01jbms/);background-position:0 11px;background-repeat:no-repeat;height:62px;width:62px}.fGoogle{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvQTVQZEFKeTYtc3M/);background-position:0 -343px;background-repeat:no-repeat;height:62px;width:62px}
</style>


Keterangan : Ganti Tulisan berwarna dengan URL pada setiap tulisan berwarna merah
5. Save (Simpan) dan lihatlah hasilnya.

Sekian Tutorial dari saya mengenai Cara Memasang Tombol Social Media Keren di Blog semoga tutorial ini bisa bermanfaat untuk semuanya dan terimakasih telah mengunjungi Blog Pintasku