Cara membuat widget Profil Admin V.1 (Author Box) di Blog

HaiSob apa kabar? Kamu pastinya sudah sering melihat kotak profil mengenai penulis blog di blog-blog di luar sana, apakah kamu tertarik ingin memasang yang berbeda di blog kamu?Blogger sebenarnya telah menyediakan widget profil seperti ini, kamu tinggal mencarinya di widget-widget bawaan blogspot.

Widget about author ini juga bisa menambah daya tarik tampilan blog kamu, kamu bisa memasang widget ini dan mengarahkannya ke halaman profil kamu untuk profil selengkapnya. Sebenarnya saya sudah membagikan widget about seperti ini di artikel sebelumnya (baca: widget profil about me - light) dan untuk tampilan yang berbeda kamu dapat mencoba widget seperti dibawah ini.

Kotak tetang admin penulis blog
Widget Profil Admin


Memasang widget About The Author di Blogger


1. Di Blog kamu 😄
2. Pilih menu Tata Letak  ➜ Tambahkan Gadget.
3. Kemudian pilih widget HTML/JavaScript

Cara membuat widget "Profil Admin V1" (Author Box) di Blogger
Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

4. Masukan kode di bawah ini ke dalam kotak yang tersedia.
<div class=kotak>
  <div id=myprofile>
  <img  id="profile" src="http://1.bp.blogspot.com/-mgViYHhWxRQ/ViGlUui12yI/AAAAAAAAFd0/apxAH4XZ8ks/s320/brando-m.PNG" align="left"/> Hallo guys, kenalkan nama saya Brando Mewo, add sosial network saya, yah !?..<br/> <a style="color:#666;"  href="http://www.seocips.com" rel='nofollow' target='_blank'> Read More..</a><br/>
    <div class='touchme'><!--Google Plus--> <a class='googleplus' href="https://plus.google.com/u/0/103662134309614692674" rel='external nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="https://www.facebook.com/haisob" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="https://twitter.com/haisob" rel='external nofollow' target='_blank' ></a>
</div></div></div>
<style>
   #myprofile{border:1px solid #ddd; margin:0;padding:10px; overflow:hidden;background:#333;border:1px solid #1e1e1e;border-radius:4px;color:#ddd;box-shadow: 2px 2px 2px 2px #000; }
   #profile{ border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height:150px;width: 120px;border-radius:4px;} #profile:hover { border:2px solid #ccc;cursor:pointer;text-align:justify; }
   .opacity:hover  {  -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; }
   .touchme a { display:block;height:50px;width:37px;padding:0 5px;margin-top:10px; float:left;background:transparent url(http://1.bp.blogspot.com/-LcpFcjk1OXs/UdBRd-mQ_mI/AAAAAAAABrg/QRU5DBFAqBM/s1600/Sharing+Touch+Me.png) no-repeat;} .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; }
  </style> 

Setting widget


Setelah kamu memasangnya sekarang silahkan ganti tulisan berwarna hijau di atas sesuka kamu, kode berwarna merah dengan foto profil kamu dan link-link berwarna biru yang masing-masing mengarah ke akun sosmed saya dengan milik kamu.
  • Kode berwarna biru adalah alamat media sosial
  • Kode berwarna merah adalah URL Foto Profil
  • Kode berwarna hijau adalah kata-kata perkenalan
  • Kode berwarna oranye adalah ukuran gambar foto profil dalam ukuran px, silahkan ubah nilainya jika kamu merasa ukuran foto profil kamu tidak pas.
5. Save dan selesai. Silahkan lihat hasilnya.

Oh iya widget seperti ini kamu juga dapat memasangnya dibawah postingan blog kamu, baca: cara memasang widget about author dibawah postingan.

Profil Admin V.2


Cara Memasang Widget Profil About Me di Blog
About Me

Jika kamu mau mencoba tampilan yang V.2 ini kamu dapat membaca artikelnya DISINI

Sekian mengenai cara membuat widget author box semoga bermanfaat.
Join This Site