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 Ente suka.
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; animation:SCgerak 10s infinite; -moz-animation:SCjalan 10s infinite; /* Firefox */ -webkit-animation:SCjalan 10s infinite; /* Safari and Chrome */ -o-animation:SCjalan 10s infinite; /* Opera */ transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; /* Firefox 4 */ -webkit-transition: all 3s ease-in-out; /* Safari and Chrome */ -o-transition: all 3s ease-in-out; /* Opera */ } @keyframes SCgerak { 0% {right:0px;} 100% {right:300px;} } @-moz-keyframes SCjalan /* Firefox */ { 0% {right:0px;} 100% {right:250px;} } @-webkit-keyframes SCjalan /* Safari and Chrome */ { 0% {right:0px;} 100% {right:250px;} } @-o-keyframes SCjalan /* Opera */ { 0% {right:0px;} 100% {right:250px;} } </style> <center><div id="SCsocial" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzqHXlFaSQyFIXMuA7QrFCu-W-3mCvbA3Z-MKo4P-6Y-KgnDTK8KvKZuQISUmTTAgORxKoaRtOFKmlX891sKUy3A0o8M8hcRx9DRChNAnkuvUk4zBQfIxc_iUtyH5QF8omvQ_-ALKqZxt/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 Ente" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBaBT_XWaK_0IUTb4rs0-0gIsNlUDzO0oHi_XCqNZ7UMma4nn4-z05bFG86O6vXoRBj1N7pASQWxpeP0DDAcJlMcqa1K4VS0KS6IqRVdA9Bxh8m9khPevgqjJanztDQqIGu4Nyp-_3dCzW/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 Ente" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcc8Stpv5Q9dYBKx1dnLK4lBMRu9wUFVY7OH6YTjlePBK2dAlVbkBhVVu8HG5xGwY2xGgLukkco4lnlagTzPTIqPP83Uuj2xhwAaYT5RyiHLv_YmJxmFQ0vTLHsC6C5ZzvzbIyKI81YlH/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+ Ente" target="_blank" rel="author"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nyrhMkxVzx5SxfvHSQdt46zN_FRZqul-pB2h2B_07lhaUVd6JuqSIG-RpRrraYHXKbWSyh03Bj4JtLYUHQmFwbFAI-LVrRi_qHos0eMkLvYo0J7132S2TfRAnNLVfMkHWZ0fpf1iVUjq/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 Ente" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS17vscGqc8ukL2yI5Src7Fd2Kahs6HEoMCrX2VPUA7RQDR9BC4SzmKaQaQ-XtfWpvd0d38YKMTWVcq5e5igXMAxtKP7oTap1FSxqEKDjHJYAzKVla5CraAq0SC7ot97v6RkXy1wpsT7Qx/s1600/truck+rss-icon.pn" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a> <!--End Rss Icon--> </div></center>
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/AVvXsEjQzqHXlFaSQyFIXMuA7QrFCu-W-3mCvbA3Z-MKo4P-6Y-KgnDTK8KvKZuQISUmTTAgORxKoaRtOFKmlX891sKUy3A0o8M8hcRx9DRChNAnkuvUk4zBQfIxc_iUtyH5QF8omvQ_-ALKqZxt/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 Ente" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBaBT_XWaK_0IUTb4rs0-0gIsNlUDzO0oHi_XCqNZ7UMma4nn4-z05bFG86O6vXoRBj1N7pASQWxpeP0DDAcJlMcqa1K4VS0KS6IqRVdA9Bxh8m9khPevgqjJanztDQqIGu4Nyp-_3dCzW/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 Ente" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkcc8Stpv5Q9dYBKx1dnLK4lBMRu9wUFVY7OH6YTjlePBK2dAlVbkBhVVu8HG5xGwY2xGgLukkco4lnlagTzPTIqPP83Uuj2xhwAaYT5RyiHLv_YmJxmFQ0vTLHsC6C5ZzvzbIyKI81YlH/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+ Ente" target="_blank" rel="author"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nyrhMkxVzx5SxfvHSQdt46zN_FRZqul-pB2h2B_07lhaUVd6JuqSIG-RpRrraYHXKbWSyh03Bj4JtLYUHQmFwbFAI-LVrRi_qHos0eMkLvYo0J7132S2TfRAnNLVfMkHWZ0fpf1iVUjq/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 Ente" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS17vscGqc8ukL2yI5Src7Fd2Kahs6HEoMCrX2VPUA7RQDR9BC4SzmKaQaQ-XtfWpvd0d38YKMTWVcq5e5igXMAxtKP7oTap1FSxqEKDjHJYAzKVla5CraAq0SC7ot97v6RkXy1wpsT7Qx/s1600/truck+rss-icon.pn" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a> <!--End Rss Icon--> </div></center>
- Kalo udah di pastein sekarang tinggal ganti semua tulisan yang Ane highlight sama URL profile sosial media dan Feed Ente 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.
1 komentar:
Postigan bagus, Numpang praktek bro..
Posting Komentar
Yang dah mampir di Blog Ane Jangan Lupa ninggalin KOmen ea gan.