Cara Menampilkan Ikon Media Sosial Yang Keren Di Website Kamu
Hai, Sahabat. .
Di kesempatan yang baik ini, saya akan membagikan tutnrial atau cara menampilkan ikon media sosial yang keren di sebuah website atau blog. Ikon media sosial yang akan ditampilkan melalui kode script di bawah adalah: Facebook, Twitter, Google Plus, Linkedin, dan Instagram. Dengan ikon media sosial ini, kamu akan menghubungkan website kamu dengan profil media sosial kamu. Ikon media sosial ini akan memudahkan para pembaca atau pengunjung blog kamu untuk menjadi "teman" atau "follower" di profil media sosial kamu.
Baca juga:
Cara memasang ikon Media Sosial
Di bawah ini adalah cara memasang ikon media sosial yang keren di website kamu:
- Masuk ke Akun Blogger kamu
- Klik menu "Tata Letak"
- Pilih tempat atau posisi yang kamu inginkan untuk menampilkan ikon Media Sosial, misalnya: di "Sidebar"
- Klik "Tambahkan Gadget"
- Pilih gadget "HTML/JavaScript"
- Isi kolom Judul. misalnya: Follow Me On Social Media
- 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-G+-URL">
<div class="g-icon-bg"></div>
<div class="g-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;
}
/* Google+ */
.g-icon-bg:after {
content: "\f0d5"; font-family: FontAwesome;
display: block;
padding: 11px 10px 6px 13px;
color:#fff;
}
.g-icon-bg {
background: #ce3e26;
height: 37px;
margin: 0 0 -37px 0;
width: 41px;
}
.g-bg {
background: #de4c34;
height: 37px;
margin: 0 0 10px 41px;
}
.g-bg:after {
color: #fff;
content: "Google+";
height: 37px;
left: 10%;
position: relative;
top: 22%;
width: 41px;
}
.g-bg:hover {
cursor: pointer;
}
.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"
- Selesai
Catatan:
- Ganti "YOUR-FACEBOOK-URL" dengan url profil facebook kamu
- Ganti "YOUR-TWITTER-URL"dengan url profll twitter kamu.
- Ganti "YOUR-G+-URL"dengan url profll google plus kamu
- Ganti "YOUR-LINKEDIN-URL"dengan url profll linkedin kamu
- Ganti "YOUR-INSTAGRAM-URL"dengan url profll instagramkamu
Apabila kode script telah dipasang dengan benar, maka Ikon Media Sosial yang tampil akan sesuai dengan gambar di atas.
Semoga Bermanfaat. .
0 Response to "Cara Menampilkan Ikon Media Sosial Yang Keren Di Website Kamu"
Post a Comment