Sosial media adalah sebuah media untuk bersosialisasi satu sama lain dan dilakukan secara online yang bisa membuat manusia untuk saling berinteraksi tanpa dibatasi ruang dan waktu, dimanapun mereka berada dan kapanpun.
Disini para penggunanya bisa dengan mudah berpartisipasi, berbagi, dan menciptakan isi meliputi blog, jejaring sosial, wiki, forum dan dunia virtual.
Pendapat lain mengatakan bahwa media sosial adalah media online yang mendukung interaksi sosial dan media sosial menggunakan teknologi berbasis web yang mengubah komunikasi menjadi dialog interaktif.
Fenomena perkembangan dan kemajuan era digital sekarang ini banyak bermunculan Sosial media di internet. Sosial media yang ada banyak jenis, fungsi dan ragamnya. Dari yang mulai hanya sekedar berbagi foto, tempat diskusi, hanya upload foto, forum-forum, sampai dengan yang hanya khusus sosial media mencari jodoh.
Disini para penggunanya bisa dengan mudah berpartisipasi, berbagi, dan menciptakan isi meliputi blog, jejaring sosial, wiki, forum dan dunia virtual.
Pendapat lain mengatakan bahwa media sosial adalah media online yang mendukung interaksi sosial dan media sosial menggunakan teknologi berbasis web yang mengubah komunikasi menjadi dialog interaktif.
Fenomena perkembangan dan kemajuan era digital sekarang ini banyak bermunculan Sosial media di internet. Sosial media yang ada banyak jenis, fungsi dan ragamnya. Dari yang mulai hanya sekedar berbagi foto, tempat diskusi, hanya upload foto, forum-forum, sampai dengan yang hanya khusus sosial media mencari jodoh.
Namun tahukah kita manfaat sosial media bagi peningkatan trafik di blog atau website kita, dan fungsi informasi yang sangat berguna bagi perkembangan dan kemajuan web atau blog di mata Search Engine guna untuk perayapan, search engine sangat menyukai link yang inbond dan outbound yang berasal dari sosial media, tentunya meningkatkan serp rank bagi web atau blog kita.
Kesimpulannya adalah peran sosial media ini mampu meghapus batasan-batasan manusia untuk bersosialisasi dengan sesamanya.
Nah kali ini saya akan memberikan tutorial bagaimana cara memasang widget sosial media responsive di blog, widget ini nantinya akan memudahkan pengunjung untuk menfollow, subscribe, like, atau mengikuti sosial media anda, sehingga mampu meningkatkan jumlah visitor blog, karna pengunjung akan langsung mengetahui artikel terbaru yang Anda posting ketika mereka membuka sosial media, jadi pastikan fanspage Anda tetap up-to-date.
Disini anda bisa memasang banyak sosial media seperti facebook, twitter, whatsapp, instagram, bbm, dan lain-lainnya.
Untuk pemasangannya Anda bisa langsung simak caranya berikut ini.
Nah kali ini saya akan memberikan tutorial bagaimana cara memasang widget sosial media responsive di blog, widget ini nantinya akan memudahkan pengunjung untuk menfollow, subscribe, like, atau mengikuti sosial media anda, sehingga mampu meningkatkan jumlah visitor blog, karna pengunjung akan langsung mengetahui artikel terbaru yang Anda posting ketika mereka membuka sosial media, jadi pastikan fanspage Anda tetap up-to-date.
Disini anda bisa memasang banyak sosial media seperti facebook, twitter, whatsapp, instagram, bbm, dan lain-lainnya.
Untuk pemasangannya Anda bisa langsung simak caranya berikut ini.
 |
| Bentuk Widget Sosial Media Responsive |
Cara Membuat Widget Sosial Media Responsive
1. Login ke Akun Blog anda
2. Klik Menu Template → Edit HTML
3. Tempelkan kode berikut di bawah tag <head>
4. Cari kode ]]></b:skin> atau </style>. Kemudian Copy kode CSS dibawah ini, dan tempelkan diatas atau sebelum kode ]]></b:skin> atau </style>
3. Tempelkan kode berikut di bawah tag <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
4. Cari kode ]]></b:skin> atau </style>. Kemudian Copy kode CSS dibawah ini, dan tempelkan diatas atau sebelum kode ]]></b:skin> atau </style>
.fa {
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
.fa-dribbble {
background: #ea4c89;
color: white;
}
.fa-vimeo {
background: #45bbff;
color: white;
}
.fa-tumblr {
background: #2c4762;
color: white;
}
.fa-vine {
background: #00b489;
color: white;
}
.fa-foursquare {
background: #45bbff;
color: white;
}
.fa-stumbleupon {
background: #eb4924;
color: white;
}
.fa-flickr {
background: #f40083;
color: white;
}
.fa-yahoo {
background: #430297;
color: white;
}
.fa-soundcloud {
background: #ff5500;
color: white;
}
.fa-reddit {
background: #ff5700;
color: white;
}
.fa-rss {
background: #ff6600;
color: white;
}
padding: 10px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-twitter {
background: #55ACEE;
color: white;
}
.fa-google {
background: #dd4b39;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.fa-pinterest {
background: #cb2027;
color: white;
}
.fa-snapchat-ghost {
background: #fffc00;
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
background: #00aff0;
color: white;
}
.fa-android {
background: #a4c639;
color: white;
}
.fa-dribbble {
background: #ea4c89;
color: white;
}
.fa-vimeo {
background: #45bbff;
color: white;
}
.fa-tumblr {
background: #2c4762;
color: white;
}
.fa-vine {
background: #00b489;
color: white;
}
.fa-foursquare {
background: #45bbff;
color: white;
}
.fa-stumbleupon {
background: #eb4924;
color: white;
}
.fa-flickr {
background: #f40083;
color: white;
}
.fa-yahoo {
background: #430297;
color: white;
}
.fa-soundcloud {
background: #ff5500;
color: white;
}
.fa-reddit {
background: #ff5700;
color: white;
}
.fa-rss {
background: #ff6600;
color: white;
}
Keterangan :
- Untuk merubah besaran bentuk, silahkan ubah pada nilai → padding: 10px;
- Untuk merubah besar bentuk huruf, silahkan ubah pada nilai → font-size: 30px;
- Untuk merubah ukuran lebar, silahkan ubah pada nilai → width: 30px;
- Untuk merubah kelengkungan sudut silahkan ubah pada nilai → border-radius: 50%;
5. Setelah itu Simpan atau Save Templatenya
6. Selanjutnya silahkan pergi ke menu "Tata Letak atau Layout" kemudian pilih Add a Gadget/ Tambahkan Gadget, lalu pasang di mana saja yang anda suka.
6. Nanti akan muncul pop-up browser, setelah itu pilih HTML/Javascript
7. Masukan kode dibawah ini dalam kolom HTML/Javascript.
6. Selanjutnya silahkan pergi ke menu "Tata Letak atau Layout" kemudian pilih Add a Gadget/ Tambahkan Gadget, lalu pasang di mana saja yang anda suka.
6. Nanti akan muncul pop-up browser, setelah itu pilih HTML/Javascript
7. Masukan kode dibawah ini dalam kolom HTML/Javascript.
<!-- Add font awesome icons -->
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-pinterest"></a>
<a href="#" class="fa fa-snapchat-ghost"></a>
<a href="#" class="fa fa-skype"></a>
<a href="#" class="fa fa-android"></a>
<a href="#" class="fa fa-dribbble"></a>
<a href="#" class="fa fa-vimeo"></a>
<a href="#" class="fa fa-tumblr"></a>
<a href="#" class="fa fa-vine"></a>
<a href="#" class="fa fa-foursquare"></a>
<a href="#" class="fa fa-stumbleupon"></a>
<a href="#" class="fa fa-flickr"></a>
<a href="#" class="fa fa-yahoo"></a>
<a href="#" class="fa fa-reddit"></a>
<a href="#" class="fa fa-rss"></a>
8. Ganti tanda # dengan alamat media sosial Anda.
9. Selanjutnya Simpan / Save dan lihat pada blog apakah tombol media sosial sudah berfungsi dengan baik.
10. Dan Andapun bisa menghapus media sosial yang tidak perlu atau tidak Anda gunakan pada kolom HTML/Javascript.
Demikian Cara Membuat Widget Sosial Media Responsive. Mudah bukan?
Bila ada kendala dalam pemasangan. Jangan lupa tinggalkan komentar pada kolom di bawah ini yah
10. Dan Andapun bisa menghapus media sosial yang tidak perlu atau tidak Anda gunakan pada kolom HTML/Javascript.
Demikian Cara Membuat Widget Sosial Media Responsive. Mudah bukan?
Bila ada kendala dalam pemasangan. Jangan lupa tinggalkan komentar pada kolom di bawah ini yah