Cara Membuat Widget Sosial Media di Blog - Style #4 - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Widget Sosial Media di Blog - Style #4

Pilihan Editor :

Cara Membuat Widget Sosial Media di Blog - Style #4
Penulis Bagus Surochman
2
Modus malam



KURAZONE ~ Widget Sosial Media sering digunakan untuk merujuk pengunjung menuju ke halaman sosial media seperti Google+, Facebook, IG maupun Twitter. Pada kesempatan kali ini kita akan membuat Widget Sosial Media di Blog - Style #4.

Hasil jadi pada Widget Sosial Media style #4 ini akan nampak seperti dibawah ini :

Cara Membuat Widget Sosial Media di Blog

1. Masuk ke Akun Blogger >> Pilih Menu Tema
2. Cari kode </style> atau ]]></b:skin>
3. Copy kode dibawah ini, lalu letakkan (paste) tepat diatas kode </style> atau ]]></b:skin>
.sosmed4 li a:hover {
background: red;
}
.sosmed4 i {
margin: 0 5px 0 0;
}
.sosmed4 li a {
background: black;
margin: 0 4px;
color: #fff;
font-size: 12px;
display: block;
padding: 10px 20px;
border-radius: 3px;
text-transform: uppercase;
}
.sosmed4 li {
display: inline-block;
margin-bottom: 0;
padding-bottom: 0;
text-align: left;
list-style: none;
}
li:before{
display: none;
}
4. Copy kode HTML dibawah ini
<div class="sosmed4">
<ul style="text-align: center;">
<li><a href="https://www.urlsosmed.com/" rel="nofollow noopener" target="_blank" title="Ikuti Kami di Facebook"><i class="fa fa-facebook"></i> Facebook</a></li>
<li><a href="https://www.urlsosmed.com/" rel="nofollow noopener" target="_blank" title="Ikuti Kami di Twitter"><i class="fa fa-twitter "></i> Twitter</a></li>
<li><a href="https://www.urlsosmed.com/" rel="nofollow noopener" target="_blank" title="Ikuti Kami di Google+"><i class="fa fa-google-plus"></i> Google +</a></li>
<li><a href="https://www.urlsosmed.com/" rel="nofollow noopener" target="_blank" title="Ikuti Kami di Instagram"><i class="fa fa-instagram"></i> Instagram</a></li>
<li><a href="https://www.urlsosmed.com/" rel="nofollow noopener" target="_blank" title="Ikuti Kami di Pinterest"><i class="fa fa-pinterest"></i> Pinterest</a></li>
</ul>
</div>
Widget Sosmed ini sangat cocok apabila diletakkan pada bagian Footer yang full width

5. Simpan Template
Ganti https://www.urlsosmed.com/ pada href menjadi URL Sosmed kalian

Itulah informasi mengenai "Cara Membuat Widget Sosial Media di Blog - Style #4", selamat mencoba dan semoga bermanfaat. Goodluck !

nanio
Cara Membuat Widget Sosial Media di Blog - Style #4
Cara Membuat Widget Sosial Media di Blog - Style #4 Cara Membuat Widget Sosial Media di Blog - Style #4 Reviewed by Bagus Surochman on 7/22/2018

2 komentar:

  1. wah widget social share nya simple, menarik dan keren juga ya mas, jadi pengen ganti deh. etapi tambahin counter nya juga dong mas. Saya bingung mau nambahin counter nya euy.

    BalasHapus
    Balasan
    1. waduh., ini bukan widget sosial share mas.,.,tapi widget sosmed biasa yang mengarahkan pengunjung ke akun sosmed kita., jadi tidak diperlukan counter pada widget nya...Untuk sementara ini yg terdapat fitur counter adalah Fan Page FB dan Twitter, namun hal tersebut terdapat JS saat menggunakannya, sehingga sedikit membebani loading blog..

      Hapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.