Liburan panjang akan segera datang, pasti bakal bosen nih ga bisa ketemu pacar temen di sekolah. Liburan kali ini akan lebih spesial karna akan banyak waktu buat pacar blogging. Kali ini masih di kategori yang sama yaitu Widget Blogger dan yang pasti ini beda dari postingan yang sebelum nya.
Tau ga saya mau share widget apa? pasti tau lah ya orang udah baca judul nya. Iya bener banget Social Icon yang pasti nya untuk link sosial media nya author blog. Memang ga terlalu penting widget ini sebetulnya, tapi apa salah nya bila kita men-share akun sosial media kita ke blog, atau mungkin sosial media blog sendiri.
Siapa tau, seiring berjalanan nya blog, dan semakin banyak nya pengunjung yang datang ke blog, akun sosial media kita yang di letakan di widget blog akan sering dikunjungi oleh pengunjung blog. Nah dari situ mungkin kita akan mendapatkan banyak pengikut akun sosial media. Oke, ga usah di perlebar lagi pembahasan soal sosial media nya, langsung aja ke penerapan nya :
Step 1 : Masuk ke halaman template kemudian buka edit HTML. Kemudian cari kode </b:skin> , copy kode CSS di bawah ini dan pastekan tepan di atas kode itu.
#social-icon{background:#000;height:400px;width:50%;margin:auto}
#social-icon a{float:left;text-align:center;color:#FFF;font-size:45px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;height:50%}
#social-icon i{position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
#social-icon a:hover{background:#888}
#social-icon .fb{background:#3b5998}
#social-icon .tw{background:#4099FF}
#social-icon .yt{background:#e52d27}
#social-icon .gp{background:#D34836}
#social-icon .fb{width:75%}
#social-icon .gp{width:25%}
#social-icon .tw,#social-icon .yt{width:50%}
.cnir{position:fixed;right:10px;bottom:5px;color:#888;text-decoration:none}
@media screen and (max-width: 1000px) {
#social-icon .fb{width:100%}
#social-icon .tw, #social-icon .yt, #social-icon .gp{width:33.3333333333%}
}
@media screen and (max-width: 650px) {
#social-icon .tw, #social-icon .yt,#social-icon .gp, #social-wrapper .fb{width:50%}
}
@media screen and (max-width: 300px) {
#social-icon .tw, #social-icon .yt, #social-icon .gp, #social-wrapper .fb{width:100%;height:25%}
}
Save template.
Step 2 : Masuk ke Tata Letak kemudian buat widget baru, pilih HTML/Javascript dan copy kode di bawah ini lalu pastekan disana.
Ganti username sosial media diatas dengan sosial media milik kalian. langkah terakhir adalah save widget dan coba lihat hasilnya :)
Step 2 : Masuk ke Tata Letak kemudian buat widget baru, pilih HTML/Javascript dan copy kode di bawah ini lalu pastekan disana.
<div id="social-icon">
<a class="fb" href="https://facebook.com/ukon16" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="gp" href="https://plus.google.com/+UkonArt" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a class="yt" href="https://youtube.com/+UkonArt" target="_blank">
<i class="fa fa-youtube"></i>
</a>
<a class="tw" href="https://twitter.com/soekrondism" target="_blank">
<i class="fa fa-twitter"></i>
</a></div>
Ganti username sosial media diatas dengan sosial media milik kalian. langkah terakhir adalah save widget dan coba lihat hasilnya :)
EmoticonEmoticon