Widget Sosial Media Youtube Facebook GPlus Simpel Flat – Kali ini saya akan membagikan widget sosial media yang bisa teman-teman pasang di blog, widget ini saya buat menggunakan code html dan css. Sangat simpel dan memiliki desain yang flat(Desain masa kini). Sebenarnya ini kerjaan iseng saja, tapi semoga bisa berguna.

[su_button url=”http://codepen.io/Kasurnetdotcom/pen/wMpdYb” target=”blank” style=”flat” background=”#2d98ef” color=”#ffffff” rel=”nofollow”]DEMO[/su_button]

Widget ini terdiri dari 3 Sosial Media, yaitu Youtube Channel, Facebook, dan Google Plus.

Fitur widget ini hanya sebagai penunjuk link menuju sosial media yang teman-teman miliki, kelebihan menggunakan widget seperti ini adalah tidak memberatkan blog.

Tutorial Menggunakan Widget Sosial Media Youtube Facebook GPlus Simpel Flat

#widget-sosmed{width:300px;background:#eee;    font: message-box;}
.widget-yt{width:50%;height:100px;background:#FF4343;float:left}
.widget-yt:hover{background:#000;}
.text-yt{text-align:center;margin:15px 0;font-size:16px;color:#fff;}

.widget-fb{width:50%;height:50px;background:#383886;float:right;color:#fff;}
.widget-fb:hover{background:#eee;color:#000;}
.text-fb{text-align:center;margin:15px 0;font-size:16px}

.widget-gp{width:50%;height:50px;background:#E41F1F;float:right;color:#fff;}
.widget-gp:hover{background:#eee;color:#000;}
.text-gp{text-align:center;margin:15px 0;font-size:16px}
<div id="widget-sosmed">
  <a href="https://www.youtube.com/channel/UCMEHR1lY4zz-I7vGyEpOoSw"><div class="widget-yt">
    <div class="text-yt">
      <i class="fa fa-youtube-play fa-3x"></i><br>Youtube Channel</div>
  </div>
  </a>
  <a href="https://www.facebook.com/kasurnet/">
  <div class="widget-fb">
   <div class="text-fb"><i class="fa fa-facebook-official"></i> Facebook
    </div>
  </div>
  </a>
  <a href="https://plus.google.com/+Kasurnetcom">
  <div class="widget-gp">
    <div class="text-gp"><i class="fa fa-google-plus-square"></i> Google Plus
    </div>
  </div>
</div>
  </a>

1. Copy Script CSS diatas, lalu terapkan ke situs/blog milik teman-teman.

Untuk pengguna

  • Blogger  Template > Edit HTML , Paste sebelum code ]]></b:skin>, kemudian simpan.
  • WordPress Apperance > Edit CSS lalu paste.

2. Copy Script HTML diatas, lalu paste pada kolom widget yang nantinya menjadi widget sosial media.

Untuk pengguna

  • Blogger Tata letak > Tambahkan widget > HTML/Text, Paste.
  • WordPress Widgets > Text (Drag ke lokasi widget), Paste.

Jangan dulu disimpan, ubah url sosial media tersebut agar menuju url sosial media milik kamu, setelah dirubah silakan simpan, dan lihat hasilnya.

Berikut ini 3 url yang harus dirubah menuju url sosial media milik kamu sendiri, ada pada Script HTML/Widget, yang pada langkah 2.

  1. https://www.youtube.com/channel/UCMEHR1lY4zz-I7vGyEpOoSw
  2. https://www.facebook.com/kasurnet/
  3. https://plus.google.com/+Kasurnetcom

Pastikan juga theme/template kamu sudah mendukung Font Awesome, jika belum masukan script dibawah ini sebelum </head>, langkahnya seperti pada langkah 2 diatas.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Kalo ada pertanyaan silakan ditanyakan di kolom komentar, untuk berikutnya saya juga akan mencoba membuat widget sosial media yang mirip pada theme newsmag, semoga terlaksana.

Terimakasih, semoga bermanfaat.

Shares
/