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.
Memasang widget About The Author Box di Blogger
1. Login ke akun Blogger sobat.2. Pada halaman dashboard, masuklah lah ke bagian Tata Letak.
3. Klik tambahkan gadget di posisi widget About The Author Box ini ingin dipasang.
4. Pilih HTML/Javascript, dan masukan kode berikut:
<div class=kotak>
<div id=myprofile>
<img id="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiihSWdJlHH91T1ot9JYOi7bkGLFYZQZrmzVMSZLflgifnNuJm3LmXf1dQW3LlNc7BCEcMylb2IORxhDBWrrVBn00v26umo3Hjk3-raop_wevi-LIWhvtRnvFJcN2KTSvCdsRwWHtbtmO8/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/seocips" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="https://twitter.com/seocips" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU9f65nBln2K8-rJWHT88JNJ2Jl_VAV2L0oEgKlZdLZBqWGKbIIgyAHk5LZu_s3nFSy06xVehIzJcrzXEuQsp9hRO5bYT74HW0iam49tVjnavn-IiGFtD9_y6COXIaqbxlDbb_lZBCMX8/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 About The Author Box
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.
Post Comment