Cara Membuat Social Icon Mobil

Posted on
  • 27 Juli 2013
  • by
  • Alfiandika Nmp
  • in
  • Label:
  • Social icon mobil bergerak ini fiturnya keren, pertama ada background kotanya jadi keliatan kayak beneran gan. Terus Agan INI 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 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(http://1.bp.blogspot.com/-08SF0c0n8D0/UP6b7vVbZlI/AAAAAAAACSo/LMTSqBXFnXo/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="http://4.bp.blogspot.com/-gAmdUWWlHso/UP6Wm_FJseI/AAAAAAAACQ4/Y6RPi0oUFq4/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="http://1.bp.blogspot.com/-RngqWlUQ4Po/UP6WnwXHzhI/AAAAAAAACRE/XP1DmM3kQZs/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="http://1.bp.blogspot.com/-shuV4bVmcsw/UP6Wm_mLtsI/AAAAAAAACRI/xUx-HthPRkY/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="http://4.bp.blogspot.com/-Oqfvq05w5mU/UP6WngRY-lI/AAAAAAAACRM/4qF5H9vscn8/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(http://1.bp.blogspot.com/-08SF0c0n8D0/UP6b7vVbZlI/AAAAAAAACSo/LMTSqBXFnXo/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="http://4.bp.blogspot.com/-gAmdUWWlHso/UP6Wm_FJseI/AAAAAAAACQ4/Y6RPi0oUFq4/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="http://1.bp.blogspot.com/-RngqWlUQ4Po/UP6WnwXHzhI/AAAAAAAACRE/XP1DmM3kQZs/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="http://1.bp.blogspot.com/-shuV4bVmcsw/UP6Wm_mLtsI/AAAAAAAACRI/xUx-HthPRkY/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="http://4.bp.blogspot.com/-Oqfvq05w5mU/UP6WngRY-lI/AAAAAAAACRM/4qF5H9vscn8/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.


    3 komentar:

    Muhammad Edi Susono mengatakan...

    Postigan bagus, Numpang praktek bro..

    sherlina halim mengatakan...

    www.indobet77.com

    Master Agen Bola , Casino , Tangkas , Togel Terbesar
    dan Terpercaya Pilihan Para Bettor

    Promo Terbaru :
    - Bonus  10% New Member Sportsbook
    - Bonus 5% New Member Casino Online
    - Bonus 10% Setiap Hari Bola Tangkas
    - CASHBACK untuk Member
    - BONUS REFERRAL 5% + 1% Seumur Hidup

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : indobet77_sb2@yahoo.com
    - EMAIL : indobet77@gmail.com
    - WHATSAPP : +63 905 213 7238
    - WECHAT : indobet77
    - SMS CENTER : +63 905 213 7238
    - PIN BB : 2B65A547 / 24CC5D0F

    Salam Admin ,
    http://indobet77.com/

    sherlina halim mengatakan...

    Pengen yang lebih seru ...
    Ayo kunjungi wwwasianbet77com
    Buktikan sendiri ..

    Real Play = Real Money

    - Referal 5 + 1 % ( seumur hidup ) .
    - Cash Back up to 10 % .
    - Bonus Royalty Rewards setiap bulan .

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : op1_asianbet77@yahoo.com
    - EMAIL : asianbet77@yahoo.com
    - WHATSAPP : +63 905 213 7234
    - WECHAT : asianbet_77
    - SMS CENTER : +63 905 209 8162
    - PIN BB : 2B4BB06A / 28339A41

    Salam Admin ,
    http://asianbet77.com/

    Posting Komentar

    Yang dah mampir di Blog Ane Jangan Lupa ninggalin KOmen ea gan.

     
    (◕‿-) Designer By Alfiandika Nur Muhammad Putra
    Sponsored By Blog Newb1e