 |
| Gambar 1 |
Pada gambar 1 mohon diperhatikan pojok atas sebelah kiri (kotak garis kuning). Artikel kali ini akan menunjukkan cara memasang gadget "ABOUT US" yang dipadukan dengan "ICON SOSIAL MEDIA" seperti facebook, twitter, google+ dan yang lainnya.
1. Buka akun blogger
2. Tambah GADGET pilih "HTML/Javascripts"
 |
| Gambar 2 |
 |
| Gambar 3 |
3. Isi Judul dengan ABOUT US
4. Isi Konten dengan script dibawah ini :
<style>.avatar {
float: left;
}
.avatar-85 {
border: 3px solid #fff;
border-radius: 85px;
margin-right: 10px;
}
.icons-social {
margin: 0 auto;
clear: both;
float: none;
}
.icons-social li {
display: inline;
padding: 0;
float: left;
}
.icons-social #social a {
display: block;
height: 42px;
width: 42px;
margin-right: 5.5px;
color: #fff;
text-align: center;
font-size: 20px;
}
.icons-social #social a:before {
display: inline-block;
font: normal normal normal 22px/1 FontAwesome;
font-size: inherit;
font-style: normal;
font-weight: 400;
line-height: 42px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icons-social .facebook:before {
content: "\f09a";
}
.icons-social .twitter:before {
content: "\f099";
}
.icons-social .gplus:before {
content: "\f0d5";
}
.icons-social .linkedin:before {
content: "\f0e1";
}
.icons-social .instagram:before {
content: "\f16d";
}
.icons-social .pinterest:before {
content: "\f0d2";
}
</style><p><img alt="author"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkFRy1x6NXjypRRMYWI5xyz3db6F04TzW2xSZcVvRMUBPoNTWwEylhIbnNFz-uGCCvlFSXQLL21F8t0HyQ_Ofiq758GkubjvkcOawULNrM7363JgDSzx5Ddh0__2o_jpOouU2lX6MXCM/s1600/ini.jpg"
srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikkFRy1x6NXjypRRMYWI5xyz3db6F04TzW2xSZcVvRMUBPoNTWwEylhIbnNFz-uGCCvlFSXQLL21F8t0HyQ_Ofiq758GkubjvkcOawULNrM7363JgDSzx5Ddh0__2o_jpOouU2lX6MXCM/s1600/ini.jpg"
class="avatar avatar-85 photo" height="85"
width="85" />Hi, nama saya .......... Umur saya 39 tahun dari Jakarta. <br /><a href="#"
style="
color: #0288d1;
">Learn More →</a></p>
<div class="icons-social">
<ul id="social">
<li><a class="facebook" href="#"
title="facebook"></a></li>
<li><a class="twitter" href="#"
title="twitter"></a></li>
<li><a class="gplus" href="#"
title="gplus"></a></li>
<li><a class="linkedin" href="#"
title="linkedin"></a></li>
<li><a class="instagram" href="#"
title="instagram"></a></li>
<li><a class="pinterest" href="#"
title="pinterest"></a></li>
</ul></div>
catatan : huruf biru untuk alamat gambar
huruf merah untuk tulisan yang tampil saat blog aktif
5. Selesai dan Selamat Mencoba Semoga Berhasil
Posting Komentar
Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.