Buat AuthorBox Keren Versi Gedget

Malam semuanya....
wuuih cuape juga habis jalan jalan, skrang waktunya berbagi dengan kalian semua, pagi tadi saya sempat jalan ama om google, ketemu blog anak mdan, wuih cantik banget kawan blognya, hmmm trus disitu saya baca ada AuthotBox yang keren dan mudah mejalankannya, penasaran yaaa...????
Nih tengok sendiri hasilnya punya saya.....

Gimana ... Cakeep Kan...???

Ok Langsung aja buat yang berminat silahkan duduk manis dan ikutilah langkah langkahnya...!!!

1. Masuk ke akun blogger anda. 
2. Lalu masuk ke bagian layout. 
3. Buat sebuah widget baru (add a gadget) 
4. Pilih HTML/Javascript 
5. Dan masukan kode dibawah. 
6. Save dan lihat hasilnya.

<style> #profile{
border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height: 100px;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="https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/387989_3644059947784_2069166773_n.jpg" align="left"/>
<div style='text-align:justify'>Hai...Saya Yudhistira Hobby saya senang mencari tahu apa yang saya tidak ketahui,karena suatu yang baru membuat saya lebih kreatif <a style="color:#888;" href="http://www.idwebcostumer.com/2013/04/blog-post.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/AVvXsEi0ffCgcHWnjIeyTGkZqU9BDYaElWJPid8jIbTkNbfJC-Ar2_z4K2BYb0jKcpquAwXMCTWK4v8bUKu1wZe6Xzij21PtkR9vkNfbN6-vZtDz2_kbzIRdnlRMwtGtEivEZR_tRu8NZj2MRH4/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://feedburner.google.com/fb/a/dashboard?id=70r20hbh09vih29ahk1s9l9o9o" target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/100868543292563383793" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/yudhistira.ciluppbaa" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/Yudhistira_C" rel='external nofollow' target='_blank' ></a>
</div>

KETT :

• https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/387989_3644059947784_2069166773_n.jpg adalah foto profil author. Usahakan ukurannya kecil dan vertikal.

• Hai...Saya Yudhistira Hobby saya senang mencari tahu apa yang saya tidak ketahui,karena suatu yang baru membuat saya lebih kreatif adalah text atau penjelasan tentang author

• http://www.idwebcostumer.com/2013/04/blog-post.html adalah alamat url artikel/page lebih lanjut mengenai si author.

• http://feedburner.google.com/fb/a/dashboard?id=70r20hbh09vih29ahk1s9l9o9o adalah alamat feed burner anda.

• https://plus.google.com/100868543292563383793 adalah alamat profil google+ anda.

• https://www.facebook.com/yudhistira.ciluppbaa adalah alamat profil facebook anda.

• https://twitter.com/Yudhistira_C adalah alamat profil twitter anda.

Hebat Kan....???

Sumber Yoyo Suharyo