Tuesday, April 19, 2016

Tutorial : Letak icon Facebook dan twitter bahagian tepi Blog

Korang nampak tak tepi blog hiphiphorray ni ada 2 icon berhuruf F dan T?? haa tulah rupa icon untuk facebook dan twitter aku.. Caranya mudah je rupanya.. aku belajar pun daripada Emas Putih.. Terima kasih kak Uzu.. Oklah kalau sembang banyak pun tak menjadi, so aku bagi step nye.. Lepas tu, korang just follow jee..
Steps :
1. Buka Dashboard > Layout > Add a Gadget > Html/Javascript
2. Korang copy je code kat bawah ni dan pastekan dekat ruang Html tadi.
<div style="display:scroll; position:fixed; top:200px; left:0px;">
<a class="linkopacity" href="http://www.facebook.com/facebook ID" target="_blank" rel="nofollow" title="Facebook" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="URL icon/image" /></a><br />
</div>

Info :
Merah : Kedudukan icon di blog korang.. Jarak daripada atas blog (tidak perlu diubah sebab sudah standard))
Oren Kuning : Kedudukan icon sama ada di kanan atau kiri.. Jika ingin icon itu berada di kanan, anda cuma tukar dari left kepada right (Tidak perlu diubah)
Hijau : Jarak daripada kedudukan icon tadi sama ada dari kiri atau kanan blog (JUga tidak perlu diubah)
Biru : Facebook ID korang (Buka wall facebook kawan-kawan dan copy linknya dengan highlight kuning tu)
Hijau Tua : Nama icon (Tidak perlu ditukar)
Purple Pink : url gambar icon yang korang nak (cari yang korang berkenan)

3. Korang dah boleh save..

Tapi kalau lepas tu, korang nak tambah icon untuk twitter pulak.. Korang ikut step kat bawah ni.. Copy dan pastekan di bawah html tadi..

<a class="linkopacity" href="https://twitter.com/umieyana94" target="_blank" rel="nofollow" title="Twitter" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="URL icon/image" /></a><br />

 Merah : Tukar ID twitter korang (ubah ikut link twitter kawan-kawan)
Hijau : url icon Twitter (Yang anda suka)

Lastly, korang pastekan sebelum </div> pada html facebook tadi..

**Hasilnya jadi macam kat bawah ni setelah digabungkan kod facebook dan twitter
Nilah hasil codingnya.. Aipp, ni aku punya coding tau..
Kalau tak boleh jugak, korang copy code kat bawah ni dan just tukarkan mana yang aku highlight okay?? Lagi senangkan??
<div style="display:scroll; position:fixed; top:200px; left:0px;">
<a class="linkopacity" href="https://www.facebook.com/umieusd" target="_blank" rel="nofollow" title="Facebook" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="http://3.bp.blogspot.com/-RSxkQPejbeE/TlbMobOARbI/AAAAAAAABVs/VA8tIOmpYCw/s1600/pinkfb2.png" /></a><br />

<a class="linkopacity" href="https://twitter.com/umieyana94" target="_blank" rel="nofollow" title="Twitter" imageanchor="1" style="margin-left: 1em; margin-left: 1em;"><img border="0" src="http://3.bp.blogspot.com/-khSCCldc8II/TlbfovRFB1I/AAAAAAAABYM/EtDglpYaNcc/s1600/pinktwitter2.png" /></a><br />
</div>
**Make sure ada jarak antara html facebook dan html twitter tau.. Kalau korang nak url icon, nah <KLIK> ..

Selamat mencuba !! (buat slow-slow yee)

11 comments:

faiza bunyamin said...

Woootwooot...
X menjadi ...:-(

Umie Yana said...

@faiza bunyamin eh?? fb pun tak jadi??

Umie Yana said...

@faiza bunyamin nanti umie edit balik yee.. bila dah siap edit, umie inform akak.. Sori yee

faiza bunyamin said...

@Umie Yana

Ke saya yang salah buat x jadi codingnya itu... :-)

PeRdU cINta said...

Alhamdulillah berpanjangan saham kanan berkongsi ilmu...

yusrina said...

updated discography rafeah buang... from yusrina
http://albumretro.blogspot.my/

Umie Yana said...

@faiza bunyamin saya dah perbaiki balik coding tu.. maap ye kak :)

faiza bunyamin said...

@Umie Yana

Ok....

Ennor Plenetzurah said...

Assalamualaikum... *new follower*

Waaah cantiknyer... Terima kasih... Dah JAdi...

http://ceritasiennor.blogspot.my/

Ennor Plenetzurah said...

Assalamualaikum... *new follower*

Waaah cantiknyer... Terima kasih... Dah JAdi...

http://ceritasiennor.blogspot.my/

Umie Yana said...

@Ennor Plenetzurah Sama2 kasih kak Ennor :)

 
 photo cats_zpscdjdlx5h.jpg