Kamis, 05 Juni 2014

Cara Membuat Social Sharing Icon Angry Birds

Buat sobat blogger yang ingin membuat social sharing icon dengan tampilan yang berbeda, mungkin tips yang satu ini bisa di coba. Social sharing yang kali ini saya share berbentuk angry bird. Social share ini selain bentuknya yang unik, juga sangat berbeda dengan social share yang lain. Dan tips ini saya dapat dari blognya mas www.vikrymadz.web.id.

Seperti apa Cara Membuat Social Sharing Icon Angry Birds ini ?? silahkan sobat ikuti step-step berikut :
  • Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Vikrymadz */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

  • Kemudian buka menu tata letak > add gadget/tambah gadget (HTML/JavaScript)
  • Lalu masukkan kode dibawah ini
<ul class="bubblewrap">

<li><a href="https://plus.google.com/112967100591602380317"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrsqmO9WeQKKpl2zd3huMlMH6qX7MlFdVJvJo32oldi3OfOh8y-Qa97btNXo70F5qHFb8vJ3PocPPtjl-7ZV6wJhuk86JgUiRUUhmAjDrhM3DI4aMCGGI3mpBcKn3Ezr_agn3ZtVGNvQ/s1600/bloggertrix-googleplus.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQqMFr_pegTjfLQEyXCa6toLX2QIfAMtKMBEFX_AYRC0v4KA2jw1bA17elWuQgPpmbM1N9817sHhGOhlCZbKpOhtE7RnmcnprGgHNcfnbM_v83jMIXAyHgpviC8QONP8NaxbuIsQap_YE/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.youtube.com/vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4tXs9mec0qCkN47oq-aVTbbpvOvdd-Ub2NTnniFcu3V21Xp4nI3kQCoLmhNJW-PV7Iyad-nodCMEfvR7e8hmscMkybpZFm80_227__P3diO7JizeQNzAFza75QOH7nhVNZYPSPvRMkKo/s1600/bloggertrix-youtube.png" title="Add to Youtube" /></a></li>

<li><a href="http://www.twitter/vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjECGWXVzQSsGYir3xDPTPK2lqHzUoVKbLoPbOqkBRYfbW1ZJN1brMo2VXsyc3TFf84uulfR4gEypxhP3OUSPHxW2PuVCJ1NJcj5iGbspTm7L8yyEQVQXcEJwBO7UZFrPnPfnd-8z3nPgA/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfjKtAtAwCL89grGgu33Kf5q5EEkqo0sNzFTkuTxLGMXuqpNauCxC563_3ZMiHi39RSprtpjtOokBvH9Cp4JrTUW6Me9J-FG8PSSMj401X15QJAuDTFnsm2GUhz7nQDisHQ9j3KaouBo/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>

  • Simpan
Sampai disini sobat sudah mempunyai social share icon yang berbeda dengan yang lain, yaitu social share berbentuk angry bird.

Selamat Mencoba, Semoga bermanfaat.

Tidak ada komentar:

Posting Komentar