Jadi Cendekia Cara Menciptakan 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 banyak sekali modifikasi semoga terlihat lebih bagus.

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

Model pertama

• Letakkan instruksi 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 instruksi HTML ini dimana saja sesuai selera. saran saja di sidebar paling atas, jangan di bawah artikel alasannya yaitu ini bukan tombol share.

<div id="social">
 <a class="rss" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndIweQ0IFz_MHQAwbvtMQJZNeonhanB04qwpg1mq5YG24UvBcztzLRh7jsJJ0VT6jbV2IMtVsEwyMubb0V9oeNj1op9m39xcgxg0k1Vl81tZsfAYe5SgCK3yXZtUmX3tcj8ESdQl36p8/s48-Ic42/RSS.png" alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a>
 <a class="email" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2wU3A6Pu1BeBP-p9vdhlvpEmpvS9h4P5BLjkF4Jh00ZuC5VnSQrQyNEK_aaDKVnSI2pi9t4O8Tlkc7nzm7os3QQ4rUGUc-FFAUMu8H932DLPJnjgbcgjt-Fp7R3auGH80f7nhNZJixk/s48-Ic42/RSS-EMAIL.png" alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a>
 <a class="fb" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_de6qCX5SHCR7p7UiTJ5GKer4V8BouQkr_PrHhIFtWbXihO0wZn2F5emWKRD4SQUCzAQv8g_0klKOuaPF3UkMAi74-DG0vRLyGF8GteFWwm5gcOWWSaY7f_LKcngyuR5EkFTcS6ySyKM/s48-Ic42/FACEBOOK.png" alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a>
 <a class="tw" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7qHVMphHxQlvEfn2Ct-jqybqGWjnZP1_4s_Kes92YxUob0KFFCfmC93P0u0VlIeAD3b1JJBqflIn41ln6amrfH8yO0DikScpuW0IOP00BRjgeJG5wvq2NIgGDQnfPDL0Qjb1nC_et1gY/s48-Ic42/TWITTER.png" alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></a>
 <a class="plus" title="Jadi Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016" href="#" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc5Wk2AEZHikGdhbpOW3ZDqn4DNUx8DoEjgPuVVI-1sF1WF4hEAexecmjT-Qq0zl0Jk99i3Ve8g1U1DGTEZXLDhfMuznV0IJzYfUQZEfI6cHs-OdRuLcB9t-yw3aLNWGTpwl0K0pfF22Y/s48-Ic42/GOOGLE-PLUS.png"alt="Cara Membuat Tombol Sosial Media di Blog Kaprikornus Pintar Cara Membuat Tombol Sosial Media di Blog Terbaru 2016"/></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/AVvXsEgJopzMGw4AEOseBecD1WOrKs9aEdf52cliKCyFOZunz8ItTLOF-Il189ANqoJwN2dPf2v7BtDGxrBNwUOHMZzG6IB2RGt8YyT6Qx26gdn1Iw3zCmxFlSeQ9WfPMP0zr2xrfuUPqUowmYsQ/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/AVvXsEgk5Gy67EYKFMNJ22yXvgwkBUgYqnrpJEy5xUQCLQS5BMT435loMDS2YcNORTwxfYUraa74N7xvk6p3xC64AfP0XD1bObeiePozdMCa-u4905zaD0EIxtcYzL7tpDVTpPbErPFsglgwbx9l/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