Cara Membuat Author Box di Blog

Widget about author ini juga bisa menambah blog Anda menjadi semakin keren, karena tampilannya yang rapi dan elegan serta enak dipandang. Co...

Widget about author ini juga bisa menambah blog Anda menjadi semakin keren, karena tampilannya yang rapi dan elegan serta enak dipandang. Coba perhatikan gambar di bawah ini, lebih kurang seperti itulah tampilan widget About The Author Box di blog sobat.

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="http://1.bp.blogspot.com/-LHPRNEl8RJE/VK-ktE4wFQI/AAAAAAAACUI/XPUJbNzGJiI/s1600/green.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://masdabang.blogspot.com" 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/MASDABANG" target='_blank'></a> <!--Google Plus--> <a class='googleplus' href="https://plus.google.com/u/0/+muhammadiqbal02" rel='external nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="https://www.facebook.com/public/Iqbal-Paja-Tapuih" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="https://twitter.com/02IQb4L" rel='external nofollow' target='_blank' ></a> </div>

Keterangan:

-Kode berwarna biru adalah ukuran tampilan foto profil.
-Kode berwarna Hijau adalah URL Foto Profil.
-Kode berwarna Kuning adalah kata-kata perkenalan.
-Kode berlatar Merah dapat anda sesuaikan sendiri dengan alamat media sosial anda.

5. Klik simpan dan selesai.Terima kasih telah membaca postingan tentang Cara Membuat Author Box di Blog. Sekarang blog sobat telah dilengkapi Author Box yang keren.