Info :

Udah mulai ujian besok gw broo,

jadi jarang post yahh

tapi tetep gw update kok

tenang ajaa
≡
Home » test » Test

Test


Yups,lagi males buka photoshop soal nya ngelag melulu/not respon not respon ._.
yaudah deh,cuma gambar SC nya aja ya?? ehehhee ituloh gambar di atas....,oke kali ini gw kan bahas trick yaitu "Widget social media tanpa gambar/sprite" nah kali ini kita gak menggunakan gambar/css sprite,tapi hanya menggunakan jutsu CSS ==V ok,contoh nya udah liatkan?? yuk langsung aja

  1. Login ke blogger
  2. Pilih template
  3. Pilih EDIT HTML
  4. Cari kode ]]><b:skin
  5. Letakkan kode di bawah ini,diatas kode tadi ._.





/* Start CSS X-Gen Sosial Media Button */
#xgen-socmed{ margin:5px auto;width:220px;}
.xgen-fb{float:left;background:#254dfd;padding:20px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #0121b1;border-right:5px solid #0121b1;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;}
.xgen-fb:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.xgen-fb a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-fb a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-tweet{float:left;background:#00cae8;padding:20px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #006f7f;border-right:5px solid #006f7f;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;}
.xgen-tweet:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.xgen-tweet a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-tweet a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-gplus{float:left;background:#313232;padding:12px 5px 28px 5px;-webkit-border-radius:8px 8px 8px 0;-moz-border-radius:8px 8px 8px 0;border-radius:8px 8px 8px 0;margin:7px;width:40px;max-height:20px;text-align:center;border-top:5px solid #000;border-right:5px solid #000;-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;}
.xgen-gplus:hover{-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;}
.xgen-gplus a:link{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
.xgen-gplus a:visited{font-weight:700;font-size:50px;color:#fff;text-decoration:none}
/* end */

6.nah...,setelah itu ini dia kode HTML nya letakkan di widget "HTML/JAVASCRIP" kalian... di sitebar


<!-- Start HTML X-Gen CSS Button -->
<div id="xgen-socmed">
<div class="xgen-fb">
<a href="LIKE FB">f</a>
</div>
<div class="xgen-tweet">
<a href="LINK TWEETER">t</a>
</div>
<div class="xgen-gplus">
<a href="LINK GPLUS">g</a>
</div>
</div>
<!-- End -->
KETERANGAN:
-Kode warna merah =ganti dengan link google plus kamu
-Kode warna cyan/biru laut=ganti dengan link tweeter kamu
-Kode warna biru=ganti dengan link facebook kamu

7.SAVE/SIMPAN

Simple kan??

Source


2

2 comments

Baca sebelum komen,kecuali gak bisa baca
---------------------------------------------------------------------
-No spam
-No sara
-tidak di anjurkan promosi link iklan
-Bacot sesuai dengan postingan
-Tidak memancing keributan