Cara Membuat Widget About Me Keren

Sore Sob,
Dala Sore saya ingin membuat widget About Me keren,Contohnya seperti dibawah ini

Oke tanpa pikir panjang ikuti langkah-langkahnya dibawah ini :
1. Login Blogger
2. Buka menu Tata Letak
3. Pilih dan Klik Tambah Gadget
4. Pilih HTML/Java Script
5. Copykan Kode Script dibawah ini :

<div class="seocips"> <img alt="seocips" class="seocips-gambar" src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xtl1/v/t1.0-9/12107730_525429960950893_7184231538423697466_n.jpg?oh=55a04c2a46d8aae9323c5ce24686b03b&oe=56EAAB93" title="Andrie" /> <a class="cipsfb" href="https://www.facebook.com/kudus.cyberblogofficalpage/?fref=ts" rel="nofollow" target="_blank">f</a> <a class="cipsgp" href="https://plus.google.com/104439295063232143645" rel="nofollow" target="_blank">G</a> <a class="cipstw" href="https://twitter.com/AndrieFatah" rel="nofollow" target="_blank">t</a> <div class="cipsdeskripsi"> Hallo, Nama saya <b><a href="https://www.facebook.com/andrie.fatah">Andrie Adzkia Fatah</a>,</b> Saya <b>lahir</b> di kota <br /> Kudus, ADD sosial Network saya.<a href="http://kudus-cyberblog.blogspot.co.id/" target="_blank"> Read More »</a></div></div>

<style>

.seocips { width:auto; margin:0; height:95px; padding:5px; border:1px solid #ddd; }

.seocips-gambar { float:left; width:85px; height:85px; margin:4px 1px 1px 3px; opacity:0.8; border-top:2px solid #cf2031; border-right:2px solid #0f7dc8; border-bottom:2px solid #2eb31a; border-left:2px solid #eab823; }

.cipsdeskripsi { width:auto; padding:0 0 0 20px; font-family:arial,sans-serif; margin:-90px 0 0 110px; font-size:11px; color:#ff000; }

.cipsfb,.cipsgp,.cipstw { color:#fff !important; display:block; font-weight:bold; line-height:14px; height:14px; width:14px; border:3px solid #444; text-align:center; padding:3px; border-radius:15px; font-size:13px; text-decoration:none !important; margin:5px; position:relative; margin-right:0; }

.cipsfb { background:#3B5998; margin-left:95px; }

.cipsfb:hover { border-color:#4F77CC; box-shadow:0 0 3px #4F77CC; }

.cipsgp { background:#D34836; font-size:12px; margin-left:95px; }

.cipsgp:hover { border-color:#EB503C; box-shadow:0 0 3px #EB503C; }

.cipstw { background:#4099FF; margin-left:95px; }

.cipstw:hover { border-color:#36D0FF; box-shadow:0 0 3px #36D0FF; }

</style>

CATT :
Ganti Tulisan Warna : Merah : Alamat Foto
                                     Pink    : Alamat Fanspage
                                     Kuning :Alamat Google+
                                     Biru    : Alamat Twitter
                                     Hijau  : Kota kamu
                                     Ungu  : Alamat Facebok
                                     Orange : Nama Lengkap kamu.
6. Simpan
       Mudahkan,
Semoga Artikel Ini Bermanfaat.Terima Kasih

Tweet

Subscribe to receive free email updates: