Social Profile dengan efek Transisi

Bagaimana membuat social profile yang menarik bagi pengunjung?

You Like Follow Me, Please!!!

Social profile akan menarik perhatian jika kita dapat menampilkannya dengan lebih menarik dan meyakinkan pengunjung, bagaimana caranya? silahkan ikuti konten berikut ini yang mengacu pada konten dari Saudaraku di http://mkr-site.blogspot.com/2012/08/tombol-follow-me-dengan-efek-transisi.html sebagai nara sumbernya. Bagaimana penampilan social profil yang saya maksudkan? silahkan simak hasil berikut ini setelah diberikan efek transisi.

• Facebook
• Twitter
• Google+
• Pinterest
• LinkedIn
• DeviantArt
• Youtube
• RSS

Sobat teratik untuk membuatnya? silahkan copy paste script berikut ini dan masukkan pada HTML Javascript tambah widget di blgospot Sobat. Sobat tinggal pasang pada kotak kosong dan editlah alamat social profil milik Sobat, selanjutnya lihatlah hasilnya. Sobat pasti puas melihatnya, jika belum silahkan diedit style-nya dengan warna yang lebih menarik. Jika hendak berhubungan dengan admin silahkan dicoba untuk klik salah satu profil yang dimaksudkan dan berikan komentarnya.

<style type="text/css">
#buttoncb ul {margin:10px 15px;padding:0px;}
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8lumL_5KhmgTMvX7xOESQXM8yu23YFQx6L9MTY1ZiJLufVa-b7KC3DNpUHrt3drKnwYesIC_VynAMm268rxXlvxUw-IFwYmU2F-JLz86Q-LX_HD5JZBXaenRCnmu6EJquURdcHLfvCSU/s1600/blsocial12.png') 0 0 no-repeat;   height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #00ffff;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb {  background-position: 0 -384px;}
#buttoncb a.twiter {  background-position: 0 -432px;}
#buttoncb a.google {  background-position: 0 -480px;}
#buttoncb a.pint {  background-position: 0 -528px;}
#buttoncb a.linkedin {  background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube {  background-position: 0 -672px;}
#buttoncb a.rss {  background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover {  background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover {  background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover {  background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover {  background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover {  background-position: 0 -288px;color: #00ffff;}
#buttoncb a.rss:hover {  background-position: 0 -336px;color: #EC5601;}
</style>


<div id="buttoncb">
<ul>
   <li><a href="Link Facebook Anda" class="icon fb" ><span>Facebook</span></a></li>
   <li><a href="Link Twitter Anda" class="icon twiter" ><span>Twitter</span></a></li>
   <li><a href="Link Google+ Anda" class="icon google" ><span>Google+</span></a></li>
   <li><a href="Link Pinterest Anda" class="icon pint" ><span>Pinterest</span></a></li>
   <li><a href="Link Linkedin Anda" class="icon linkedin" ><span>LinkedIn</span></a></li>
   <li><a href="Link Deviant Art Anda" class="icon devart" ><span>DeviantArt</span></a></li>
   <li><a href="Link Youtube Anda" class="icon ytube" ><span>Youtube</span></a></li>
   <li><a href="Link RSS Anda" class="icon rss" ><span>RSS</span></a></li>
</ul>
</div>

Demikian konten saya kali ini semoga bermanfaat bagi kita sekalian dan terima kasih atas kesediaannya untuk membaca konten ini.

Bergabunglah bersama kami dengan para Mentor Bisnis ternama !

Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Balkblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone.