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.
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://www.seocips.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl7Hgp3iv7B6PyuXqRSpDoj2bHUUtqxFrP52oiGpsKTbQ7tSlwetNOLr-6E_fdFg31rkqFM2RvojjL53f4Qu8ynFj31LxTTl3Ho8ET5i87pkyPw0Lw3snPsFD2NPlwI9qeEVR3v4O88r4/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.
sekian tips Membuat Widget Author Box Keren
semoga bermanfaat
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon