Widget Meet the Author |
Mengenal kode CSS dan HTML author box
<style> #profile{
border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height: 130px;width: 90px;
}
#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://i1335.photobucket.com/albums/w677/yoyosuharyo/Photo0280_zps5b780680.jpg" align="left"/>
<div style='text-align:justify'>Text<a style="color:#888;" href="http://ujangyoyo.blogspot.com/p/about-me.html" 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/AVvXsEiFn3x_BVCw7h4BfItWD9Qfrm-FFKDODo8g3YkIROiePP4w3iilXesNYzmYueG0HbsZIRAZDlzFoRviSUN8tC8sH3aQn_dYBkx-wYrtOm44BFR3rRfut6jU6YskFDEMbEeydasn_XNuAsY/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/YoyoSaorang" target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/107611486450164893740" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/karyoyo?fref=ts" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/yo2manth" rel='external nofollow' target='_blank' ></a>
</div>
Keterangan:
- http://i1335.photobucket.com/albums/w677/yoyosuharyo/Photo0280_zps5b780680.jpg adalah foto profil author. Usahakan ukurannya kecil dan vertikal.
- Text adalah text atau penjelasan tentang author
- http://ujangyoyo.blogspot.com/p/about-me.html adalah alamat url artikel/page lebih lanjut mengenai si author.
- http://feeds.feedburner.com/YoyoSaorang adalah alamat feed burner anda.
- href="https://plus.google.com/107611486450164893740 adalah alamat profil google+ anda.
- https://www.facebook.com/karyoyo?fref=ts adalah alamat profil facebook anda.
- https://twitter.com/yo2manth adalah alamat profil twitter anda.
Pemasangan widget author box
- Masuk ke akun blogger anda.
- Lalu masuk ke bagian layout.
- Buat sebuah widget baru (add a gadget)
- Pilih HTML/Javascript
- Dan masukan kode diatas.
- Save dan lihat hasilnya.
Last word
Bagaimana? cukup mudahkan cara-cara diatas? anda dapat mendasain ulang setiap bagiannya dengan kreatifitas anda sendiri. Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Membuat Widget about Author box di blogger. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. Oh iya jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya !
Sekian post tentang Membuat Widget about Author box di blogger. Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!