Widget Sosial Media mirip Theme Newsmag – Setelah kemarin saya membuat widget sosial media flat simpel, kali ini saya akan memberikan widget sosial media yang desainnya mirip dengan theme newsmag wordpress. Widget ini saya buat menggunakan script HTML dan CSS. jadi fungsinya sama seperti widget yang sebelumnya saya buat.

Widget Sosial Media mirip Theme Newsmag

Widget sosial media ini sebenarnya meniru desain widget sosial media newsmag theme, jadi itulah yang membuat kenapa ini saya beri nama mirip newsmag.

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

Fitur Widget Sosial Media mirip Theme Newsmag

  • Responsive
  • 5 Sosial Media : Facebook, Twitter, Instagram, Youtube, dan Google Plus
  • Font Awesome Icon
  • Ringan, karena cuma pake HTML dan CSS

Cara Pasang Widget Sosial Media mirip Theme Newsmag

Tutorial pemasangan sebenarnya tidak jauh berbeda dengan yang sebelumnya, yaitu dengan memasukan CSS kedalam template, kemudian meletakan html ke widget area.

1. Copy Script CSS dibawah ini kemudian masukan ke bagian theme/template blog.

#widget-sosmed{
  width:300px;
}
.widget-box{
  border-radius:3px;
  width:100%;
  height:25px;
  line-height:25px;
}
#widget-sosmed :hover{
  background:#4E4E4E;
}
.widget-fb{
  background:#516eab;
  color:white;
  padding:4px;
  margin:2px;
}
.widget-insta{
  background:#417096;
  color:white;
  padding:4px;
  margin:2px;
}
.widget-twitter{
  background:#29c5f6;
  color:white;
  padding:4px;
  margin:2px;
}
.widget-gp{
  background:#FF5E5E;
  color:white;
  padding:4px;
  margin:2px;
}
.widget-yt{
  background:#e14e42;
  color:white;
  padding:4px;
  margin:2px;
}
.name-sosmed{
  padding-left:20px;
  border-left:solid 1px rgba(230, 230, 230, 0.41);
  font-family: 'Open Sans', arial, sans-serif;
  font-weight: bold;
  font-size: 13px;
}
.widget-action{
  float:right;
  font-family: 'Open Sans', arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  line-height:25px;
  padding-right:10px;
  color:#fff;
}
  • Blogger  Template > Edit HTML , Paste sebelum code ]]></b:skin>, kemudian simpan.
  • WordPress Apperance > Edit CSS lalu paste, kemudian simpan.

2. Masukan script HTML Widget dibawah ini kedalam area widget untuk menampilkan widget ini.

<div id="widget-sosmed">
  <div class="widget-fb widget-box">
    <i class="fa fa-facebook-square fa-lg"></i>
    <span class="name-sosmed">Facebook</span>
    <a href="http://www.facebook.com"><span class="widget-action">Like</span></a>
  </div>
  <div class="widget-insta widget-box">
    <i class="fa fa-instagram fa-lg"></i>
    <span class="name-sosmed">Instagram</span>
    <a href="http://www.instagram.com"><span class="widget-action">Follow</span></a>
  </div>
  <div class="widget-twitter widget-box">
    <i class="fa fa-twitter fa-lg"></i>
    <span class="name-sosmed">Twiter</span>
    <a href="http://www.twitter.com"><span class="widget-action">Follow</span></a>
  </div>
  <div class="widget-gp widget-box">
   <i class="fa fa-google-plus-square fa-lg"></i>
    <span class="name-sosmed">Google Plus</span>
     <a href="https://plus.google.com/"><span class="widget-action">Add +</span></a>
  </div>
   <div class="widget-yt widget-box">
    <i class="fa fa-youtube fa-lg"></i>
    <span class="name-sosmed">Youtube</span>
     <a href="http://www.youtube.com"><span class="widget-action">Subscribe</span></a>
  </div>
  
  </div>
  • Blogger Tata letak > Tambahkan widget > HTML/Text, Paste.
  • WordPress Widgets > Text (Drag ke lokasi widget), Paste.

Ingat, teman-teman harus merubah url sosial media diatas menuju url sosial media milik sobat sendiri, kemudian simpan.

Widget ini menggunakan Font Awesome, jadi pastikan theme atau template sudah support. Jika belum, berikut tutorial memasang font awesome pada blog.

Copy dan Paste script dibawah ini sebelum </head>, kemudian simpan.

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

Itulah Widget Sosial Media mirip Theme Newsmag berserta tutorial pemasangan widgetnya, semoga bisa bermanfaat untuk teman-teman. Terimakasih.

Shares
/