setelah beberapa menit cari-cari di google dapat langsung scriptnya,
Nih buat kalian yang butuh langsung aja praktekan, ikuti tutorial di bawah ini.
1. masuk ke blogger kalian
2. pilih tata letak ( seperti gambar di bawah )
3. Pilih salah satu "Tambahkan Gadget" sesuai tempat yang kamu mau
4. Lalu pilih HTML/Javascript
5. masukan kode dibawah ini
<style> #profile{ border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height:120px;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkZ9e2oD6RXqlYZoqdxIyB4Um6oLuv9kmiv94yuc5z0T72S2jH37QtIWjr8gG_uq7xwxzUiHaigYbkpTEBk348yXYpGDoNbhadQpytDxFmIuRABrmQ2XGOGNcc-9ley7bpB92_KdpF7WU/s512-Ic42/Capturexx.JPG" align="left"/> <div style='text-align:justify'>Ngeblog bisa menjadi wadah untuk suatu pengungkapan idea, inspirasi, bahkan hal-hal yang dapat di temukan sehari-hari, Blog ini saya buat sesuai dengan kebutuhan saya yang berdasarkan keseharian. terimakasih kepada para pengunjung, Wasallam... <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/AVvXsEhYchMoHT6LeGwdznulgCbr6XhI80MycztptcoCH_NGBvfd0eatmoYHylf3VtOHifq0KBWN7Kdba2DxlBJC9JhINR2Ng7sslgKINVwUylJRXb4dIN41qmTN2HqwNR3rZLeu-dxdqWT-Wlw/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'>
<!--Google Plus--> <a class='googleplus' href="https://plus.google.com/112728583004466737634" rel='external nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="https://www.facebook.com/aatoniiskandardinata" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="https://twitter.com/kacamataminust" rel='external nofollow' target='_blank' ></a> </div></div>
6. Kemudian simpan dan lihat hasilnya.
Keterangan : pada kode yang berwarna Biru adalah URL gambar kamu dan yang warna Merah adalah keterangan kamu.
Selamat Mencoba....
