Hampir di setiap blog yang kita kunjungi pasti selalu ada social iconnya di sidebar ya gak gan? Selain buat ornamen di blog, social icon ini juga buat nambah pengikut blog kita di sosial media gan. Berbagai macam efek ditambahin di social icon itu biar tambah keren ya kan gan.
Pada kesempatan kali ini gw pengen berbagi hasil karya gw gan. Gw bakal share cara membuat social icon mobil bergerak di blog baik buat Blogger maupun Wordpress. Bagaimana apa loe tertarik gan? Kalo tertarik silahkan lanjut di baca postingan ini dan di ikutin tutorialnya.
Social icon mobil bergerak ini fiturnya keren, pertama ada background kotanya jadi keliatan kayak beneran gan. Terus gw buat 2 efek berbeda yang satu mobilnya gerak otomatis kalo disentuh baru berhenti dan yang satunya mobilnya diem kalo disentuh baru mobilnya bergerak gan. Dan yang paling penting ini kode murni CSS gak pake javascript jadi aman buat SEO gan.
Ok gan langsung aja ke cara membuat social icon mobil bergeraknya. Caranya gampang tinggal nambahin widget gak perlu edit HTML. Silahkan disimak caranya gan kalo loe suka. Di liat demonya dulu gan biar tau gimana iconnya.
[ DEMO ]
Membuat Social Icon Mobil Bergerak Di Blog
Buat di Blogger
Pertama loe masuk ke dashboard Blogger terus pilih Layout lalu klik Add a Gadget terus tambahin HTML/Javascript dan copy salah satu kode di bawah ini lalu pastein di kotak kosongnya gan.
Buat di Wordpress
Buat di Wordpress, caranya sama loe masuk ke Dashboard Wordpress lalu pilih Appearance lalu klik Widget dan tambahin widget Text ke sidebar dan copy salah satu kode dibawah ini lalu pastein di widget tersebut gan.
Kode social icon mobil diam
<!-- Social Icon Mobil Bergerak by http://seociyus.blogspot.com/ --><style type="text/css"> #SCsocial a:hover{ position:relative;-moz-animation:SCjalan 10s infinite; /* Firefox */animation:SCgerak 10s infinite;-o-animation:SCjalan 10s infinite; /* Opera */-webkit-animation:SCjalan 10s infinite; /* Safari and Chrome */ transition: all 3s ease-in-out;-webkit-transition: all 3s ease-in-out; /* Safari and Chrome */-moz-transition: all 3s ease-in-out; /* Firefox 4 */ -o-transition: all 3s ease-in-out; /* Opera */ } @keyframes SCgerak { 0% {right:0px;}@-webkit-keyframes SCjalan /* Safari and Chrome */100% {right:300px;} } @-moz-keyframes SCjalan /* Firefox */ { 0% {right:0px;} 100% {right:250px;} } { 0% {right:0px;} 100% {right:250px;} }<center><div id="SCsocial" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sQfGH1rMM735XrhCGczTbimcz7HJBxFyGoez-73j_EWNkwPprk3sguUJRim8aPFxbj7IW7-6K-yx8df4jWuCXKPnaZY1DAlLutvDrt130K4oDmgmKB962D_j5A0GFhUKNB7QMlF7-BqV/s1600/city.jpg); background-repeat:no-repeat; height: 225px; width: auto; border: 0; overflow:hidden;">@-o-keyframes SCjalan /* Opera */ { 0% {right:0px;} 100% {right:250px;} } </style> <!--Start Facebook Icon--><a title="Like Us on Facebook" href="URL Facebook Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEismSnECufOTAbFU4_j5qsgK1ZhNKhG9y4Piuduufz82KBGmNBtxsQNXDAij7nIepFx-GCdnhCe4tpe1pqRM-7YU-cMQ6fy_aTl9Ci7z1AKj_wbqV_P2w1z2lUl4e0kq7BShO0s5sRGPNMw/s1600/truck+facebook-2-icon.png" height="50" widht="50" alt="Icon" style="margin-top:175px;"/></a><!--End Facebook Icon--> <!--Start Twitter Icon--><a title="Follow Us on Twitter" href="URL Twitter Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLTGiJnGruC1r8dmXFyC6D1IZwg69gV4oAPgvc4mSKWmPmNgl3BTaAk3T4t2RPcx_Grhn2MHaKG8hOEDvw7A25dxWFlVALF_cLO_ysXAqPOQe1fHu6nRj_E5D0ESNFhQREljfBA-mkFJep/s1600/truck+twitter-icon.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a><!--End Twitter Icon--> <!--Start Google+ Icon--><a title="Follow Us on Google+" href="URL Google+ Loe" target="_blank" rel="author"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRxqEzQZHpnNt-lnpVytL84u5fFe5gyHRm9wF922BOG_L_HjSSN61L4aQqVotdhyphenhyphenEIQ2iZhqCd8CULftrLozhfEtPMsHPIu27nR1ZuXSL5kwnIRgfCKf2ulnpW6tx_lY3VyWr3mFiZPKJ5/s1600/truck+google.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a><!--End Google+ Icon--> <!--Start Rss Icon--><a title="Grab Our RSS Feed" href="URL RSS Feed Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEjAiA8gvo0PF-auDyhP5eLSamqqYu074Otih7Y4AOFhA2tLA2ywaAW6P2kb0z7taeP-oQBBMOikuEI_6VJq0QSDhDLn1sItpP3ylMXyArlaUppKlcwXmWa7iDLj8A8koIoMwhEudKppS/s1600/truck+rss-icon.pn" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a><!--End Rss Icon--> </div></center><div style="font-size:11px" align="right"><a href="http://seociyus.blogspot.com/2013/01/membuat-social-icon-mobil-bergerak-di-blog.html" rel="nofollow">[Get This Icon]</a></div>
Kode social icon mobil gerak otomatis
<!-- Social Icon Mobil Bergerak by http://seociyus.blogspot.com/ -->
<style type="text/css">
#SCsocial a{
position:relative;
animation-name: SCgerak;
-moz-animation-name:SCgerak; /* Firefox */
-webkit-animation-name:SCgerak; /* Safari and Chrome */
-o-animation-name:SCgerak; /* Opera */
animation-duration: 15s;
-moz-animation-duration:15s; /* Firefox */
-webkit-animation-duration:15s; /* Safari and Chrome */
-o-animation-duration:15s; /* Opera */
animation-iteration-count: infinite;
-moz-animation-iteration-count:infinite; /* Firefox */
-webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
-o-animation-iteration-count:infinite; /* Opera */
animation-timing-function: linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari and Chrome */
-o-animation-timing-function:linear; /* Opera */
transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out; /* Firefox 4 */
-webkit-transition: all 5s ease-in-out; /* Safari and Chrome */
-o-transition: all 5s ease-in-out; /* Opera */
}
@keyframes SCgerak
{
0% { right: -250px; }
100% { right: 300px; }
}
@-moz-keyframes SCgerak /* Firefox */
{
0% { right: -250px; }
100% { right: 300px; }
}
@-webkit-keyframes SCgerak /* Safari and Chrome */
{
0% { right: -250px; }
100% { right: 300px; }
}
@-o-keyframes SCgerak /* Opera */
{
0% { right: -250px; }
100% { right: 300px; }
}
#SCsocial a:hover{
animation-play-state:paused;
-moz-animation-play-state:paused; /* Firefox*/
-webkit-animation-play-state:paused; /* Safari and Chrome */
-o-animation-play-state:paused; /* Opera */
}
</style>
<center><div id="SCsocial" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sQfGH1rMM735XrhCGczTbimcz7HJBxFyGoez-73j_EWNkwPprk3sguUJRim8aPFxbj7IW7-6K-yx8df4jWuCXKPnaZY1DAlLutvDrt130K4oDmgmKB962D_j5A0GFhUKNB7QMlF7-BqV/s1600/city.jpg); background-repeat:no-repeat; height: 225px; width: auto; border: 0; overflow:hidden;">
<!--Start Facebook Icon-->
<a title="Like Us on Facebook" href="URL Facebook Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEismSnECufOTAbFU4_j5qsgK1ZhNKhG9y4Piuduufz82KBGmNBtxsQNXDAij7nIepFx-GCdnhCe4tpe1pqRM-7YU-cMQ6fy_aTl9Ci7z1AKj_wbqV_P2w1z2lUl4e0kq7BShO0s5sRGPNMw/s1600/truck+facebook-2-icon.png" height="50" widht="50" alt="Icon" style="margin-top:175px;"/></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a title="Follow Us on Twitter" href="URL Twitter Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLTGiJnGruC1r8dmXFyC6D1IZwg69gV4oAPgvc4mSKWmPmNgl3BTaAk3T4t2RPcx_Grhn2MHaKG8hOEDvw7A25dxWFlVALF_cLO_ysXAqPOQe1fHu6nRj_E5D0ESNFhQREljfBA-mkFJep/s1600/truck+twitter-icon.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Twitter Icon-->
<!--Start Google+ Icon-->
<a title="Follow Us on Google+" href="URL Google+ Loe" target="_blank" rel="author"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRxqEzQZHpnNt-lnpVytL84u5fFe5gyHRm9wF922BOG_L_HjSSN61L4aQqVotdhyphenhyphenEIQ2iZhqCd8CULftrLozhfEtPMsHPIu27nR1ZuXSL5kwnIRgfCKf2ulnpW6tx_lY3VyWr3mFiZPKJ5/s1600/truck+google.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Google+ Icon-->
<!--Start Rss Icon-->
<a title="Grab Our RSS Feed" href="URL RSS Feed Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXEjAiA8gvo0PF-auDyhP5eLSamqqYu074Otih7Y4AOFhA2tLA2ywaAW6P2kb0z7taeP-oQBBMOikuEI_6VJq0QSDhDLn1sItpP3ylMXyArlaUppKlcwXmWa7iDLj8A8koIoMwhEudKppS/s1600/truck+rss-icon.pn" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Rss Icon-->
</div></center>
<div style="font-size:11px" align="right"><a href="http://seociyus.blogspot.com/2013/01/membuat-social-icon-mobil-bergerak-di-blog.html" rel="nofollow">[Get This Icon]</a></div>
Kalo udah di pastein sekarang tinggal ganti semua tulisan yang gw highlight sama URL profile sosial media dan Feed loe lalu di save beres gan.
Coba sekarang di buka blognya apa udah ada social icon mobil bergeraknya belum gan. Selamat menikmati social icon mobil bergerak yang baru di blog gan.
Note : Mungkin di beberapa template mobilnya bakal keluar dari gambar, untuk ngatasinya silahkan tinggalin pertanyaan loe di bawah gan. Buat link ke postingan ini tolong jangan di hapus ya udah nofollow kok gan thanks.
Sekian dulu yang bisa gw share kali ini tentang cara membuat social icon mobil bergerak di blog gan. Kalo ada kesempatan gw bakal share cara membuat social icon keren yang laennya. Jangan lupa ninggalin komentar loe di bawah ato kalo ada pertanyaan silahkan ditanyain juga gan.
Update : Lupa gw gan kalo social icons mobil ini gak suport di browser IE.
