Cara membuat widget about me keren di blog

Sore all
kali ini mimin mau kasih Tutorial
Cara membuat widget about me keren di blog

1. Masuk Setelan - tata letak - Tambahkan Gadget - Html / java script
 ( Masukan kode di bawah ini )

<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://fbcdn-profile-a.akamaihd.net/hprofile-ak-frc1/t1.0-1/c27.0.160.160/p160x160/10171842_624113267674367_8441139293337408510_n.jpg" align="left"/> <div style='text-align:justify'>Nama : muhammad rizal
Status : pelajarSeorang newbie blogger asal jakarta yang ingin share ilmu tutorial yang bermanfaat<a style="color:#888;" href="http://abang-jali.blogspot.com/p/nama-muhammad-rizal-ajahh.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/AVvXsEi90gJEZ_kcBiOckv_Mvt85CsC4bIQziHPqrgP-Amb3pKn14r4yTCvWoMG4XaJC1cb-F_roQGDKGP1uaCxvJ_T03ZCMRnc4A7Ad6l1NVreti5lflenXCOHSRTgIZOj4N1pxMx5eSjfKYjA/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/AbangJali" target='_blank'></a> <!--Google Plus--> <a class='googleplus' href="https://plus.google.com/u/0/101399352908511362766" rel='external nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="https://www.facebook.com/vhtmlcovu" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="https://twitter.com/v_html" rel='external nofollow' target='_blank' ></a> </div>

Keterangan :
Warna : Pink : ganti dengan Gambar kamu
Warna : Oren : ganti dengan Diskripsi kamu
Warna : Merah : ganti dengan URL kamu

4. Simpan dan selesai

Sekian tutorial dari saya semoga bermanfaat
Jika ingin copy paste harap masukan sumber nya

Tweet