Hampir kelupaan, udah janji
mau buat tutorial cara membuat social network di header kayak di blog saya ini.
Saya dapat tutorialnya dari
hasil googling ke blog para senior. Jadi kalau mau lihat sumbernya disini, saya ambil
dari blognya
Ya udin lah ya lihat disono
aja wahahahaha, digeplak.
Kenapa...kenapah harus
diletakin di header blog, emang ngga bisa
di tempat lain apah ?.
Ya ga kenapa-kenapa juga sih,
silahkan aja kalau mau letakin di tempat lain. Tapi kalau di header kan jadi
kece, gampang dilihat dan biar headernya unik gitu lho.
Caranya gampang banget, cuma
masukin sedikit kode-kode di dalam template blog.
Pertama login ke blog-
template-edit html
Yang warna Merah itu untuk
link alamat sosial network kita, jadi ganti aja dengan link punya sendiri -https://www.facebook.com/windi, misalnya
Yang warna Biru itu untuk
link gambar icon sosmed yang kita inginkan. Kalau kalian mau gambarnya kayak
yang di header blog saya ini, pakai link di bawah ini untuk kode URL Gambarnya
:
Facebook
'http://imageshack.com/a/img540/2885/8QTISE.png'
Twitter
'http://i1022.photobucket.com/albums/af345/redbirdjewellery/asparagus72twitterigottacreate.png'
Instagram
'http://i1022.photobucket.com/albums/af345/redbirdjewellery/mayablue72instagramigottacreate.png'
Email
'http://i1225.photobucket.com/albums/ee399/pungQreative/princesspink72igottacreateemail.png'
Kalau mau ditambahin lagi
dengan network path, google+, youtube, tinggal dicopy aja yang bagian dari itu.
Tapi diganti linknya, trus link gambarnya juga diganti.
Cara ambil Link Gambar :
Buka gambar ikon medsos yang
diinginkan, cari di google, atau ke blog mak annisa. Pilih ikonnya, klik kanan-
image url-nah itu link dicopykan untuk menggantikan tulisan yang warna Biru.
Langkah Kedua
Cari Kode: header-inner , di
CTRL-F aja biar gampang. Trus copykan kode di bawah ini tepat di atas kode
header-inner
.button-widget {
float:right;
border:0;
margin-right:140px;
margin-top:-80px;
height:50px;
width:420px;
}
.button-widget a img {
border:none;
}
.button-widget a:hover img {
border:none;
opacity:0.9;
filter:alpha(opacity=80);
-moz-opacity:0.90;
-khtml-opacity:0.9;
}
Setelah itu klik tombol
Preview dulu. Lihat posisinya. Seharusnya posisinya kayak di blog ini, kalau
tidak sesuai tinggal digeser-geser dengan mengubah ukuran yang warna Hijau di
kode di atas. Ukuran tersebut dihitung dari sebelah kanan ya. Jadi semakin
kecil seharusnya semakin ke kanan
Jadi misalnya terlalu ke
kanan, perbesar ukuran marginnya, biar semakin bergeser ke kiri. Demikian juga
untuk margin dari atas. Sambil di preview ya biar pas.
Lalu untuk yang warna ungu,
itu untuk mengatur lebar widgetnya. Semakin sedikit iconnya tentu semakin
kecil, Ukuran yang di kode di atas itu cukup untuk 4 icon. Kalau mau ditambah
lagi dengan path, Google+, you tube, berarti ukurannya harus diperbesar. Kalau
ntar pas dicoba, ngga terklik berarti ukuran marginnya kurang gede, tinggal
dibesarinya.
Sambil dicoba, di preview ya,
biar pas posisinya. Kalau sudah pas, tinggal di save aja.
Wokeh selamat mencoba yak.
Kurang jelas, silahkan ke tepakeh sumber.
