Cara Membuat Tombol Sosial Media di Blog Terbaru 2016

Cara Membuat Tombol Sosial Media di Blog Terbaru 2016. Sosial media (sosmed) semakin hari semakin berkembang pesat dikalangan dan banyak diminati oleh semua kalangan. Tak lupa bagi para blogger, seakan ini menjadi kewajiban untuk meningkatkan jumlah pengunjung. Oleh karenanya, para blogger mempublikasikan akun sosmed mereka di blog masing-masing, tentu saja dengan berbagai modifikasi agar terlihat lebih bagus.

Sebenarnya sudah banyak sih dibahas di blog lain, tapi gak ada salahnya saya pun juga ikutan nge-share tutor cara membuat tombol sosial media terbaru dan terkeren tahun 2016 ini. Yuk simak kisah selanjutnya...

Model pertama

Letakkan kode css ini diatas ]]></b:skin> atau </style>

.rss,.email,.fb,.tw,.plus{margin-right:5px;}

#social a:hover {background-color: transparent;opacity:0.7;}

#social img {transition: all 0.8s ease-in-out;}

#social img:hover {transform: rotate(360deg);}

Selanjutnya pastekan kode HTML ini dimana saja sesuai selera. saran saja di sidebar paling atas, jangan di bawah artikel karena ini bukan tombol share.

<div id="social">

<a class="rss" title="Grab Our Rss Feed" href="#" target="_blank"><img src="https://lh3.googleusercontent.com/-IjzgJzUOHf8/VqX_dnRvYzI/AAAAAAAABis/wdVtInHTVzQ/s48-Ic42/RSS.png" alt="Icon-RSS"/></a>

<a class="email" title="Get Free Updates Via Email" href="#" target="_blank"><img src="https://lh3.googleusercontent.com/-uswq5Y_zHBo/VqX_dIJhw3I/AAAAAAAABio/P7xGKlfrcX8/s48-Ic42/RSS-EMAIL.png" alt="Icon-Email"/></a>

<a class="fb" title="Like Our Facebook Page" href="#" target="_blank"><img src="https://lh3.googleusercontent.com/-I4HODpwOf5Q/VqX_cp2iHlI/AAAAAAAABiY/jlKnP64QsAY/s48-Ic42/FACEBOOK.png" alt="Icon-Facebook"/></a>

<a class="tw" title="Follow Our Updates On Twitter" href="#" target="_blank"><img src="https://lh3.googleusercontent.com/-W1U_VbgeJwk/VqX_dgzZnrI/AAAAAAAABiw/ZDmM1_rWa8o/s48-Ic42/TWITTER.png" alt="Icon-Twitter"/></a>

<a class="plus" title="Follow Us On Google+" href="#" target="_blank"><img src="https://lh3.googleusercontent.com/-eH48zBH9L9Y/VqX_cyClhlI/AAAAAAAABic/sRYKsHBRJJI/s48-Ic42/GOOGLE-PLUS.png"alt="Icon-gplus"/></a>

</div>

Silahkan ganti # dengan url akun sosmed anda.
Selesai semoga beruntung... ups kayak ikut undian saja. hehe...

Demo

Model kedua

Kode CSS

.social{clear:right;float:left;list-style:none;margin: 0px;margin-top: 8px;padding:0px;}

.footer .social{float:none;}

.footer .social li a{margin:0 5px 8px 0;}

.social li{display:inline-block;text-indent:-999em;}

.social li a{display:block;width:32px;height:32px;margin-left:5px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PhuCcUjQLgznsRGXK9-sZG_IksdSXxheRW3lD9UvD_NALkuzhGTnhCmd3DZVjfHQh7S2T1pMXY5AFX25bqXEBjmjc8pP3FSQC_D0a7K1GI63Uz3omNXoeNigo0sr3XTocPzGDodvx7oA/s1600/Social.png);background-repeat:no-repeat;border-radius:16px;background-clip:padding;}

.social li:first-child a{margin-left:0;}

.social li a:hover{border-top-left-radius:0px;}

.social li a.facebook:hover{background-color:#3c5fac;}

.social li a.twitter{ background-position:-32px 0;}

.social li a.twitter:hover{background-color:#5ec3df;}

.social li a.rss{background-position:-96px 0;}

.social li a.rss:hover{background-color:#ff9900;}

.social li a.google{background-position:-256px 0;}

.social li a.google:hover{background-color:#c63d2d;}

.social li a.youtube{background-position:-384px 0;}

.social li a.youtube:hover{background-color:#c8312b;}

.social li a.pinterest{background-position:-416px 0;}

.social li a.pinterest:hover{background-color:#cb2027;}

.social li a.tumblr{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM-YV5W6vhV2i9ncxagIvcMmRdj5T5dZ5joJ7Ip2TMwZu4N6OpP4FZv83xevLDSqU28oZq4nK4UiJJJ0Yz3xOazqWR0fWsLp_B_vhPHPEcC8NSwbVabk820B0-vbjUs-lnR77Gfq8SChWp/s1600/tumblr.png);}

.social li a.tumblr:hover{background-color:#2C4762;}

.social li a{background-color:#bbb;transition: all 0.3s ease-out;}

Kode HTML

<ul class='social'>

<li><a class='google' href='#' target='_blank'>Google+</a></li>

<li><a class='facebook' href='#' target='_blank'>Facebook</a></li>

<li><a class='twitter' href='#' target='_blank'>Twitter</a></li>

<li><a class='youtube' href='#' target='_blank'>LinkedIn</a></li>

<li><a class='rss' href='#' target='_blank'>RSS</a></li>

<li><a class='pinterest' href='#' target='_blank'>Pinterest</a></li>

</ul>

Demo

Pemasangannya sama dengan model pertama