Cara Membuat Widget Author di Blog. Seocips tentang Cara Membuat kotak Admin Blog atau  Widget Author di template Blogger. Ok tentunya sobat sudah sering berkunjung ke beberapa website atau blog dan menemukan beberpa kotak admin atau kotak penulis dibawah artikel blog. Perkenalkanlah diri kita sebagai penulis artikel pada sebuah Blog kepada para pembaca.

Agar terjadi hubungan atau komunikasi yang baik antara kita sebagai penulis dan pembaca. Salah satunya dengan memasang widget Author Box yang menjelaskan About The Author. Sebenarnya sudah disediakan widget bawaan dari Blogspot yang berfungsi untuk memperkenalkan diri kita sebagai penulis, yaitu Widget Mengenai Saya dari Google Plus. Namun karena tampilanya yang mengacu pada tampilan Google Plus, kadang-kadang menjadi tidak cocok dengan tampilan Blog kita.

Sebelumnya juga seocips.com telah membagikan beberapa widget blog :

    Widget Blog


Widget about author ini juga bisa menambah blog Anda menjadi semakin keren, karena tampilannya yang rapi dan elegan serta enak dipandang. Pada artikel sebelumnya saya juga sudah membangikan Widget yang mirip dengan widget author ini tapi lebih dikenal dengan permalink ( Baca : cara memasang permalink ditemplate Blogger ).

OK jika sobat tertarik untuk memasang widget About The Author Box ini, silakan ikuti langkah-langkahnya berikut.
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.

<style> #profile{ border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height:190px;width: 120px; } #profile:hover { border:2px solid #ccc;cursor:pointer;text-align:justify; } .opacity  { opacity: 0.5;margin-left: 50px;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;-moz-transform: rotate(7deg);-o-transform: rotate(7deg); -webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix(                     M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .opacity:hover  { opacity: 1; margin-left: 0px; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.Matrix(                     M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); zoom: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } </style> <img class="opacity" id="profile" src="https://lh4.googleusercontent.com/-9FowVSMFeso/AAAAAAAAAAI/AAAAAAAAAAA/Ph94sVe2YqY/photo.jpg" align="left"/> <div style='text-align:justify'>kata perkenalan kata perkenalan kata -kata perkenalan kata perkenalan kata perkenalan <a style="color:#888;" href="http://blog.spezer.net" rel='nofollow' target='_blank'> Read More..</a></div> <style> .touchme a { display:block;height:50px;width:45px;padding:0 4px;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;-webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all;-o-transition: ease-in 0.2s all;-ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all;cursor:pointer; } .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; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <div class='touchme'> <!--RSS--> <a class='rss' href="http://feeds.feedburner.com/seocips" target='_blank'></a> <!--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>

Keterangan:
-Kode berwarna biru adalah ukuran tampilan foto profil.
-Kode berwarna merah adalah URL Foto Profil.
-Kode berwarna hijau adalah kata-kata perkenalan.
-Kode berlatar oranye dapat anda sesuaikan sendiri dengan alamat media sosial anda.

Hasil Contohnya :

kotak tetang admin penulis blog

Sekian mengenai Cara Membuat Widget Author Box ( Kotak Admin Blog ) semoga bermanfaat.
10 Komentar untuk "Cara Membuat Widget Author Box ( Kotak Admin Blog )"

selamat malam,,_
izin langsung ke TKP kang,,_
sambil nunggu copa del ray,,_

Mantab infonya, blognya juga... boleh dapat templatenya

udah saya terapkan di blog saya gan, hehe terimakasih lancar rejekinya, amin

ok gan thank atas doanya, hehehe, mdah-mudahan gitudeh, dan mudah2han Cara Membuat kotak Admin Blog atau  Widget Author di template Blogger ini bermanfaat untuk yang lainnya.

Biasanya template blog yang saya pakai pastinya saya bagikan, atau mungkin jika belum ada itu karena lagi malas untuk uploadnya, sipa tau sudah ada beberapa template dapat di cek di Template Blogger seo responsive

sob, misal di blog banyak penulisnya gimane? masing2 punya deskripsi tersendiri??

wah thx artikelnya gan, bermanfaat banget

Wew mungkin sobat perlu kotak admin yang lebih kecil biar gak makan banyak tempat dan bisa muat beberapa admin sekaligus.