Code Script Keren Otomatis Widget Media Sosial (Medsos) Buat Blog Atau Website

Code Script Keren Otomatis Widget Media Sosial (Medsos) Buat Blog Atau Website

Cara Menbuat atau Memasang Widget Media Sosial Di Blog atau Website

Hai, Sahabat. . Hari ini, saya akan membahas tentang Apa itu, Fungsi, Manfaat, dan Cara Menbuat atau Memasang Widget Media Sosial Di Blog atau Website.

Apa itu Media Sosial?

Media sosial adalah wadah atau media virtual yang digunakan oleh seseorang untuk saling berkomunikasi / berinteraksi dengan orang lain, baik dikenal maupun tidak dikenal.

Fungsi dan Manfaat Membuat atau Memasang Widget Media Sosial Di Blog atau Website

Widget media sosial yang dibuat atau dipasang di blog atau website memiki fungsi untuk menghubungkan amtara blog dengan akun media sosial yang kamu miliki. Manfaat membuat atau memasang Widget media sosial di blog atau website kamu adalah dapat memudahkan pengunjung untuk berinteraksi dengan kamu lewat akun media sosial yang mereka miliki.

Cara Menbuat atau Memasang Widget Media Sosial Di Blog atau Website

Sekarang, kamu simak Cara Menbuat atau Memasang Widget Media Sosial Di Blog atau Website.

Ikon media sosial yang akan ditampilkan melalui kode script di bawah adalah: Facebook, Twitter, Linkedin, dan Instagram. Dengan ikon media sosial ini, kamu akan menghubungkan website kamu dengan akun media sosial kamu. Widget media sosial ini akan memudahkan para pembaca atau pengunjung blog kamu untuk menjadi "teman" atau "follower" di profil media sosial kamu. Berikut Cara Menbuat atau Memasang Widget Media Sosial Di Blog atau Website:

Login ke Blogger
Pertama, Cara Menbuat atau Memasang Widget Media Sosial Di Blog atau Website, adalah Masuk ke Akun Blogger kamu.

Tentukan Posisi Widget Media Sosial
Kedua, Cara Menbuat atau Memasang Widget Media Sosial Di Blog atau Website, adalah Pilih tempat atau posisi yang kamu inginkan untuk menampilkan Widget Media Sosial, misalnya: di "Sidebar". Hal tersebut dilakukan dengan cara: Pilih menu "Tata Letak", kemudian Klik "Tambahkan Gadget". Lalu Pilih gadget "HTML/JavaScript".

Masukkan Kode Script Widget Media Sosial
Ketiga, Cara Menbuat atau Memasang Widget Media Sosial Di Blog atau Website, adalah Isi kolom Judul. misalnya: "Follow Me On Social Media". Kemudian Isi kolom Konten dengan kode di bawah ini:

<a href="YOUR-FACEBOOK-URL">
<div class="fb-icon-bg"></div>
<div class="fb-bg"></div></a>
<a href="YOUR-TWITTER-URL">
<div class="twi-icon-bg"></div>
<div class="twi-bg"></div></a>
<a href="YOUR-LINKEDIN-URL">
<div class="lin-icon-bg"></div>
<div class="lin-bg"></div>
</a>
<a href="YOUR-INSTAGRAM-URL">
<div class="ins-icon-bg"></div>
<div class="ins-bg"></div>
</a>
<style>
.fb-bg:hover, .twi-bg:hover, .g-bg:hover, .ins-bg:hover, .lin-bg:hover {background:#303030;}
.fb-icon-bg {
background: #354f88;
height: 37px;
margin: 0 0 -37px 0;
width: 41px;
}

.fb-icon-bg:after {
content: "\f09a"; font-family: FontAwesome;
display: block;
padding: 9px 10px 5px 15px;
color:#fff;
}

.fb-bg {
background: #3b5998;
display: block;
height: 37px;
margin: 0 0 10px 41px;
}

.fb-bg:after {
color: #fff;
content: "Facebook";
height: 37px;
left: 8%;
position: relative;

top: 22%;
width: 41px;
}

.fb-bg:hover{
cursor: pointer;
}

.fb-bg:active{
background: #354f88;
}

/* Twitter */
.twi-icon-bg:after {
content: "\f099"; font-family: FontAwesome;
display: block;
padding: 11px 10px 6px 11px;
color:#fff;
}

.twi-icon-bg {
background: #40a2d1;
height: 37px;
margin: 0 0 -37px 0;
width: 41px;
}

.twi-bg {
background: #45b0e3;
height: 37px;
margin: 0 0 10px 41px;
}

.twi-bg:after {
color: #fff;
content: "Twitter";
height: 37px;
left: 11%;
position: relative;

top: 22%;
width: 41px;
}

.twi-bg:hover {
cursor: pointer;
}

.twi-bg:active {
background: #40a2d1;
}

.lin-icon-bg {
background: #075e8c;
height: 37px;
margin: 0 0 -37px 0;
width: 41px;
}
.lin-icon-bg:after {
content: "\f0e1";
font-family: FontAwesome;
display: block;
padding: 11px 10px 6px 13px;
color: #fff;
}
.lin-bg {
background: #0077B5;
height: 37px;
margin: 0 0 10px 41px;
}
.lin-bg:after {
color: #fff;
content: "Follow up on Linkedin";
height: 37px;
left: 10%;
position: relative;
top: 22%;
width: 41px;

}
.ins-icon-bg {
background: #ffc238;
height: 37px;
margin: 0 0 -37px 0;
width: 41px;
}
.ins-icon-bg:after {
content: "\f16d";
font-family: FontAwesome;
display: block;
padding: 11px 10px 6px 13px;
color: #fff;
}
.ins-bg {
background: #ffd438;
height: 37px;
margin-left: 41px;
}
.ins-bg:after {
color: #fff;
content: "Follow us on Instagram";
height: 37px;
left: 10%;
position: relative;
top: 22%;
width: 41px;
}
</style>

Klik "Simpan"
Klik tombol "Simpan Setelan".

Catatan:
Ganti "YOUR-FACEBOOK-URL" dengan url profil facebook kamu.
Ganti "YOUR-TWITTER-URL"dengan url profll twitter kamu.
Ganti "YOUR-LINKEDIN-URL"dengan url profll linkedin kamu.
Ganti "YOUR-INSTAGRAM-URL"dengan url profll instagramkamu.

Apabila kode script Widget Media Sosial telah dipasang dengan benar, maka Ikon Media Sosial yang keren akan tampil di blog atau website kamu.