Cara Edit About Me di Widget Homepage Blog dengan CSS

Ada banyak cara untuk mempercantik halaman blog kita, seperti postingan kali ini akan membahas tentang Cara Edit About Me di Widget Homepage Blog dengan CSS.

Berikut adalah screenshot dari tutorial yang ada di postingan ini:

Langsung saja di bawah ini adalah langkah - langkah yang harus sobat ikuti untuk membuat about me seperti di atas.

1. Login ke akun blogger sobat

2. Masuk ke "Template"

3. Backup data terlebih dahulu sebelum beranjak ke "Edit HTML"

4. Masuk ke "Edit HTML"

5. Cari kode ]]><b:/skin>, lebih cepat memakai Ctrl+F (F3)

6. Masukkan kode di bawah ini tepat di atas kode ]]><b/:skin>

     /* Author Blog */
    .AHSadmin {width:auto; height:83px;padding:5px}
    .AHSadmin-gambar {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;}
    .AHSdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px; font-size:11px; text-align:justify; color:#000;}
    .AHSfb, .AHSgp, .AHStw {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: 1px;position:relative;margin-right:0px}
    .AHSfb {background: #3B5998;margin-left:73px}
    .AHSfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
    .AHSgp {background: #D34836;font-size:11px;margin-left:85px}
    .AHSgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
    .AHStw {background: #4099FF;margin-left:73px}
    .AHStw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}

7. Kemudian simpan template

Eits... jangan terburu buru karena tutorial di atas bukan hasil akhir melainkan tutorial yang pertama, masih ada lanjutannya untuk memasang kode yang kedua untuk hasil akhirnya. Silahkan mengikuti langkah ke dua ini

1. Login ke akun blogger sobat

2. Masuk ke "Tata Letak"

3. Tambahkan Gadget pada tempat yang di inginkan

4. Pilih JavaScript/HTML klik (+) pada bagian atas

5. Setelah itu masukkan kode di bawah ini

 <!--Author Blog Start --><div class='AHSadmin'><img alt='Achart403' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-frc3/c57.57.714.714/s160x160/970411_10200635831036486_1340914070_n.jpg' title="Aizzan AFanie" class='AHSadmin-gambar' /><a class='AHSfb' href='http://www.facebook.com/admin.afanieshare' rel='nofollow' target="_blank">f</a><a class='AHSgp' href='https://plus.google.com/110515590190805743840' rel='nofollow' target="_blank">G</a><a class='AHStw' href='http://twitter.com/AFanie_028' rel='nofollow' target="_blank">t</a> <div class='AHSdeskripsi'>Hai, saya <a href=https://plus.google.com/110515590190805743840 title="Achart403" rel='nofollow' target="_blank">Achart403</a><br/> Saya seorang lelaki yang suka touring untuk mencari teman atau menambah saudara, dan saya ingin belajar tentang seluk beluk dari blog karena saya ingin menggali ilmu lebih banyak lagi dari blog.<br/><a style="color:#888;" href="#" target="_blank"> Read More &#187;</a><br/>
<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/110515590190805743840" data-rel="author">

Silahkan Anda edit seperlunya saja

6. Selanjutnya simpan dan lihat hasilnya

Semoga artikel di atas dapat membantu dan bermanfaat buat sobat sekalian, jika ada kendala, kritik maupun saran silahkan kirim melalui form kolom komentar di bawah

Related Posts:

---