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/AVvXsEjU8GBf1tYl6h98h1oLqSGS2s01S9n6Y7wUSlpvE1e_xWT5O-Wsy4ILYbzTqY587e6VeQHUnVkm909VNsYdDhYWL35gh6SCWcqu5cHrpx6IW80qDARzsbrWGnlkH0XoG8OJMT3DEWp34gs/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
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/AVvXsEjU8GBf1tYl6h98h1oLqSGS2s01S9n6Y7wUSlpvE1e_xWT5O-Wsy4ILYbzTqY587e6VeQHUnVkm909VNsYdDhYWL35gh6SCWcqu5cHrpx6IW80qDARzsbrWGnlkH0XoG8OJMT3DEWp34gs/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
Post a Comment