Membuat Social Icon Mobil Bergerak

Hampir di setiap blog yang kita kunjungi pasti selalu ada social iconnya di sidebar yaa gak sob? Selain untuk dekorasi di blog, social icon ini juga buat menambah pengikut blog kita di sosial media sob. Berbagai macam efek ditambahkan di social icon itu biar tambah keren yaa.

Cara membuat social icon mobil bergerak di blog cukup mudah hanya menggunakan sedikit kode CSS HTML 5. Social icon mobil bergerak dapat digunakan untuk Website, Blogger dan Wordpress. Social icon mobil bergerak ini memiliki beberapa fitur yaitu, pertama ada background kotanya jadi terlihat manis ditambah dengan efek animasi mobil bergerak dan yang kedua memiliki efek mobilnya bergerak otomatis kalo disentuh baru berhenti. Social icon mobil bergerak murni hanya menggunakan kode CSS tidak menggunakan Javascript jadi aman buat SEO sob.

Ok sob langsung aja ke TKP untuk membuat social icon mobil bergerak. Caranya gampang tinggal copy-paste dan sedikit modifikasi kode. Silahkan disimak caranya dan untuk contoh seperti yang terlihat di bawah pada masing-masing pemasangan.

Penting !!! sebaiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari hal-hal yang tidak diinginkan dalam menerapkan widget ini.

1. Pemasangan Di Kotak Gadget

Cara Pemasangan :

Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / JavaScript".

Copy - paste kode di bawah ini dan sesuaikan sedikit kodenya untuk latar belakang, lebar widget dan username akun sosial media sobat.

<!-- Social Icon Mobil Bergerak by http://monosbit.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:-100%;}100%{right:100%;}}
@-moz-keyframes SCgerak /* Firefox */{0%{right:-100%;}100%{right:100%;}}
@-webkit-keyframes SCgerak /* Safari and Chrome */{0%{right:-100%;}100%{right:100%;}}
@-o-keyframes SCgerak /* Opera */{0%{right:-100%;}100%{right:100%;}}
#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>
<div id="SCsocial" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVKpBbzj1NlUBQOGo7kes6OAwP9mwWTZvApAVbFJ6e-lTguDYQnD9AwlGRBP7nsH1gYtobCcjTuKRzWROrLLs96u-aKAxptA05PnHGbDffirpkmjl-VoALyEz_8tjKxYQ0gqOrunCK1pA/s1600/city_scroll.jpg);height:225px;width:300px;overflow:hidden;border:0px;">
<!--Start Facebook Icon-->
<a title="Like Us on Facebook" href="https://www.facebook.com/monosbit" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhstRR9t_GL0fLGkXuTtKSZncZRmr_JDnXWIeLZEKqcyAAOTQVWYz2QCXEKFNf4JmCOJbeW5FqJ7NagDirQrPNiw7Cq-BGugweJgwGbd3Nh3BvYdgRZcTftxZwilF999CIvqt_USCqUiae/s1600/truck+facebook-2-icon.png" width="50px" alt="Icon" style="margin-top:175px;" height="50px" border="0"></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a title="Follow Us on Twitter" href="https://twitter.com/monosbit" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6sL_T-jXvYPh-bvZGa9nysPQgaVQlu49somDEQO2F1e8fl0V9yoC84pdYN2kjtf1wVXmQyfEDYvBcSVjEVcpRGttzRDch8p-hbX0ttdN010jFW1E0fPpPJDvdraeiIL8FvlpOJo4pX0qE/s1600/truck+twitter-icon.png" width="50px" alt="Icon" style="margin-left:8px;" height="50px" border="0"></a>
<!--End Twitter Icon-->
<!--Start Google+ Icon-->
<a title="Follow Us on Google+" href="https://plus.google.com/monosbit" target="_blank" rel="author">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_lw-NX7weHzLS4E20odqOogt4Jg24OcfKfjj5MzdjCCjQnTHHpyLrScMXOLj8EG6FGcHf8FA4zLjzPjYJ0LNbG7qAH_qq1Sol6Y4FB4RvIEoqHDEWlei4oHL_iRk_7P1wbnDL9__DeP73/s1600/truck+google.png" width="50px" alt="Icon" style="margin-left:8px;" height="50px" border="0"></a>
<!--End Google+ Icon-->
<!--Start Rss Icon-->
<a title="Grab Our RSS Feed" href="http://feeds.feedburner.com/monosbit" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2ItTh8c3cU45HU8Uasez9tX5_UHdyxtqcjwoci3K_i9NF8Is1m2KmghsHX-a610RYkZ4ERjzJOuarrEtGqSXKuvYLNl-DH_TGhvUXQmEMozpYm1_3meFB_tHUMBC4EocGovT_JodP-q6/s1600/truck+rss-icon.png" width="50px" alt="Icon" style="margin-left:8px;" height="50px" border="0"></a>
<!--End Rss Icon-->
</div>
<!-- Social Icon Mobil Bergerak by http://monosbit.blogspot.com/ -->

KETERANGAN :

Kode yang berwarna merah pada kode [ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVKpBbzj1NlUBQOGo7kes6OAwP9mwWTZvApAVbFJ6e-lTguDYQnD9AwlGRBP7nsH1gYtobCcjTuKRzWROrLLs96u-aKAxptA05PnHGbDffirpkmjl-VoALyEz_8tjKxYQ0gqOrunCK1pA/s1600/city_scroll.jpg ] merupakan URL untuk gambar latar belakang.
width:300px merupakan kode untuk lebar widget, silakan sobat sesuaikan lebarnya agar sesuai dengan tema blog sobat. Cara merubah lebar widget tinggal mengganti angkanya saja. Biasanya lebar widget antara 250 px sampai 300 px.
Pada kode yang berwarna biru [ monosbit ] merupakan username untuk akun facebook, twitter, google dan rss feed blog. Silakan di ganti sesuai dengan username sobat untuk akun-akun tersebut.
Apabila sobat ingin menyesuaikan timing dan speed animasi silakan sobat otak-atik pada bagian kode CSS [ <style> .... </style> ]. Timing merupakan durasi waktu animasi yang ditampilkan pada kode CSS ada pada animation-duration : 15s; silakan sobat otak-atik angkanya saja untuk menyesuaikan dengan keinginan sobat. Speed merupakan kecepatan animasi bergerak dan kode tersebut ada pada transition: all 5s ease-in-out; sama seperti timing untuk menyesuaikan kecepatan animasi tinggal merubah angkanya saja.

Klik "Save" dan lihat hasilnya...

2. Pemasangan Full Screen

Cara Pemasangan :

Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".

Cari kode <Body> kemudian copy-paste kode di bawah ini dan letakan kode tersebut di bawah di bawah kode <Body> atau bisa juga di taruh di kotak gadget blog sebagai gadget. Pastikan sobat menyesuaikan username akun sosial media sobat.

<!-- Social Icon Mobil Bergerak by http://monosbit.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:-100%;}100%{right:100%;}}
@-moz-keyframes SCgerak /* Firefox */{0%{right:-100%;}100%{right:100%;}}
@-webkit-keyframes SCgerak /* Safari and Chrome */{0%{right:-100%;}100%{right:100%;}}
@-o-keyframes SCgerak /* Opera */{0%{right:-100%;}100%{right:100%;}}
#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>
<div id="SCsocial" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3t1Qq2TuB6SWzprzBJd8buF-d6Ib3mRiK5k_AH8X_3Vg3zH4CvCeFd2p8TSHRryn7OrldXiuEO-HPT_q1H7uL5AmpCQq1Hg9Tu3QHsUwVD156FqzIkhD7VaFtQ3Qz7wf6_vDeU99uiCvH/s1600/city_white.jpg);height:225px;width:100%;overflow:hidden;position:fixed;bottom:0px;border:0px;">
<!--Start Facebook Icon-->
<a title="Like Us on Facebook" href="https://www.facebook.com/monosbit" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhstRR9t_GL0fLGkXuTtKSZncZRmr_JDnXWIeLZEKqcyAAOTQVWYz2QCXEKFNf4JmCOJbeW5FqJ7NagDirQrPNiw7Cq-BGugweJgwGbd3Nh3BvYdgRZcTftxZwilF999CIvqt_USCqUiae/s1600/truck+facebook-2-icon.png" width="50px" alt="Icon" style="margin-top:175px;" height="50px" border="0"></a>
<!--End Facebook Icon-->
<!--Start Twitter Icon-->
<a title="Follow Us on Twitter" href="https://twitter.com/monosbit" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6sL_T-jXvYPh-bvZGa9nysPQgaVQlu49somDEQO2F1e8fl0V9yoC84pdYN2kjtf1wVXmQyfEDYvBcSVjEVcpRGttzRDch8p-hbX0ttdN010jFW1E0fPpPJDvdraeiIL8FvlpOJo4pX0qE/s1600/truck+twitter-icon.png" width="50px" alt="Icon" style="margin-left:8px;" height="50px" border="0"></a>
<!--End Twitter Icon-->
<!--Start Google+ Icon-->
<a title="Follow Us on Google+" href="https://plus.google.com/monosbit" target="_blank" rel="author">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_lw-NX7weHzLS4E20odqOogt4Jg24OcfKfjj5MzdjCCjQnTHHpyLrScMXOLj8EG6FGcHf8FA4zLjzPjYJ0LNbG7qAH_qq1Sol6Y4FB4RvIEoqHDEWlei4oHL_iRk_7P1wbnDL9__DeP73/s1600/truck+google.png" width="50px" alt="Icon" style="margin-left:8px;" height="50px" border="0"></a>
<!--End Google+ Icon-->
<!--Start Rss Icon-->
<a title="Grab Our RSS Feed" href="http://feeds.feedburner.com/monosbit" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2ItTh8c3cU45HU8Uasez9tX5_UHdyxtqcjwoci3K_i9NF8Is1m2KmghsHX-a610RYkZ4ERjzJOuarrEtGqSXKuvYLNl-DH_TGhvUXQmEMozpYm1_3meFB_tHUMBC4EocGovT_JodP-q6/s1600/truck+rss-icon.png" width="50px" alt="Icon" style="margin-left:8px;" height="50px" border="0"></a>
<!--End Rss Icon-->
</div>
<!-- Social Icon Mobil Bergerak by http://monosbit.blogspot.com/ -->

KETERANGAN :

Kode yang berwarna merah pada kode [ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVKpBbzj1NlUBQOGo7kes6OAwP9mwWTZvApAVbFJ6e-lTguDYQnD9AwlGRBP7nsH1gYtobCcjTuKRzWROrLLs96u-aKAxptA05PnHGbDffirpkmjl-VoALyEz_8tjKxYQ0gqOrunCK1pA/s1600/city_scroll.jpg ] merupakan URL untuk gambar latar belakang.
Pada kode yang berwarna biru [ monosbit ] merupakan username untuk akun facebook, twitter, google dan rss feed blog. Silakan di ganti sesuai dengan username sobat untuk akun-akun tersebut.
Apabila sobat ingin menyesuaikan timing dan speed animasi silakan sobat otak-atik pada bagian kode CSS [ <style> .... </style> ]. Timing merupakan durasi waktu animasi yang ditampilkan pada kode CSS ada pada animation-duration : 15s; silakan sobat otak-atik angkanya saja untuk menyesuaikan dengan keinginan sobat. Speed merupakan kecepatan animasi bergerak dan kode tersebut ada pada transition: all 5s ease-in-out; sama seperti timing untuk menyesuaikan kecepatan animasi tinggal merubah angkanya saja.

Klik "Save" dan lihat hasilnya...

Pilihan Latar Belakang

URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVKpBbzj1NlUBQOGo7kes6OAwP9mwWTZvApAVbFJ6e-lTguDYQnD9AwlGRBP7nsH1gYtobCcjTuKRzWROrLLs96u-aKAxptA05PnHGbDffirpkmjl-VoALyEz_8tjKxYQ0gqOrunCK1pA/s1600/city_scroll.jpg

URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSwDTBn03uLibPN2Yut-3I6Kv4YrGfU-SEah4aUiIaQDFrE913Jz3hzOtJI2hWm-N78SjjdW500puNR1yBbb1jyGOynfVC5efBG2el2ld-vrVhDb28zAdZDxTas7x3jp6yisIit9kCCkq5/s1600/city_white.png

URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyG9Q3Oj-HnVq7wixVcIfvov43bjssRXpcqtl8l-rgEwEgKeOupC4sWRGb29lsY8CNb-JO3YQGUbto9rV5fnUr-rap9xyiUjOvZL33U_jDk-Ujn3TTiwNDnuC4lJhBGptIvZOPBfOOQGvo/s320/backgroundcityfull.jpg