Showing posts with label Coding. Show all posts

Membuat Sexy Buttons Pure CSS


Cara Membuat Tombol Demo dan Download

Cara Membuat Sexy Buttons Pure CSS - Teman Blogger sedang mencari tutorial cara membuat tombol demo dan download untuk posting atau membuat tombol download di blog. Untuk membuat tombol download keren sebenarnya cukup mudah kerena kita hanya membutuhkan CSS dan HTML sederhana untuk membuatnya. Lalu bagaimana untuk membuat download button atau demo button yang keren, responsive, mobile-friendly, sexy dan full color...?. Berikut langkah pembuatannya :

Pastikan template Teman Blogger sudah terpasang Font-Awesome !!!

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika sudah terdapat Font-Awesome... Langsung saja copy kode di bawah sebelum ]]></b:skin> Kemudian Save template.

/* -- WahabSaputra.Com ButtonS --*/  strong{font-weight:700} .button{background-color:#f2f2f2;background-image:linear-gradient(to bottom,#f2f2f2,#f2f2f2);border:1px solid #bfbfbf;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #d9d9d9,inset 0 0 0 1px #f2f2f2,0 2px 4px rgba(0,0,0,.2);color:#8c8c8c;text-shadow:0 1px 0 rgba(255,255,255,.5);border-radius:3px;cursor:pointer;display:inline-block;font-family:Verdana,sans-serif;font-size:12px;font-weight:400;line-height:20px;padding:9px 16px 9px;margin:16px 0 0 16px;transition:all 20ms ease-out;vertical-align:top} .button:focus,.button:hover{background:#f2f2f2;border-color:#8c8c8c;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #d9d9d9,inset 0 0 0 1px #f2f2f2} .button:active{background:#f2f2f2;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button .fa{color:#bfbfbf;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-blue{background-color:#42b0e3;background-image:linear-gradient(to bottom,#42b0e3,#2ba9e3);border:1px solid #107db0;box-shadow:inset 0 1px 0 #7cd4fc,inset 0 -1px 0 #2696c9,inset 0 0 0 1px #59b7e3,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-blue:focus,.button-blue:hover{background:#2ba9e3;border-color:#004c6f;box-shadow:inset 0 1px 0 #7cd4fc,inset 0 -1px 0 #2696c9,inset 0 0 0 1px #59b7e3} .button-blue:active{background:#2ba9e3;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-blue .fa{color:#107db0;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-green{background-color:#97cc76;background-image:linear-gradient(to bottom,#97cc76,#8bcc62);border:1px solid #5f993a;box-shadow:inset 0 1px 0 #c6e5b3,inset 0 -1px 0 #79b356,inset 0 0 0 1px #a4cc8b,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-green:focus,.button-green:hover{background:#8bcc62;border-color:#326612;box-shadow:inset 0 1px 0 #c6e5b3,inset 0 -1px 0 #79b356,inset 0 0 0 1px #a4cc8b} .button-green:active{background:#8bcc62;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-green .fa{color:#5f993a;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-purple{background-color:#847bba;background-image:linear-gradient(to bottom,#847bba,#7568ba);border:1px solid #493e87;box-shadow:inset 0 1px 0 #bab6d4,inset 0 -1px 0 #655aa1,inset 0 0 0 1px #948dba,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-purple:focus,.button-purple:hover{background:#7568ba;border-color:#1f1654;box-shadow:inset 0 1px 0 #bab6d4,inset 0 -1px 0 #655aa1,inset 0 0 0 1px #948dba} .button-purple:active{background:#7568ba;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-purple .fa{color:#493e87;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-orange{background-color:#f58a38;background-image:linear-gradient(to bottom,#f58a38,#f57c20);border:1px solid #c25706;box-shadow:inset 0 1px 0 #ffb984,inset 0 -1px 0 #db6f1d,inset 0 0 0 1px #f59851,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-orange:focus,.button-orange:hover{background:#f57c20;border-color:#730;box-shadow:inset 0 1px 0 #ffb984,inset 0 -1px 0 #db6f1d,inset 0 0 0 1px #f59851} .button-orange:active{background:#f57c20;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-orange .fa{color:#c25706;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-red{background-color:#ed6d64;background-image:linear-gradient(to bottom,#ed6d64,#ed574c);border:1px solid #ba3329;box-shadow:inset 0 1px 0 #ffb0aa,inset 0 -1px 0 #d44d44,inset 0 0 0 1px #ed837b,0 2px 4px rgba(0,0,0,.2);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)} .button-red:focus,.button-red:hover{background:#ed574c;border-color:#870c03;box-shadow:inset 0 1px 0 #ffb0aa,inset 0 -1px 0 #d44d44,inset 0 0 0 1px #ed837b} .button-red:active{background:#ed574c;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-red .fa{color:#ba3329;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button-yellow{background-color:#fce374;background-image:linear-gradient(to bottom,#fce374,#fcdf5b);border:1px solid #c9ae34;box-shadow:inset 0 1px 0 #fff6ce,inset 0 -1px 0 #e3c852,inset 0 0 0 1px #fce88d,0 2px 4px rgba(0,0,0,.2);color:#967d09;text-shadow:0 1px 0 rgba(255,255,255,.5)} .button-yellow:focus,.button-yellow:hover{background:#fcdf5b;border-color:#967d09;box-shadow:inset 0 1px 0 #fff6ce,inset 0 -1px 0 #e3c852,inset 0 0 0 1px #fce88d} .button-yellow:active{background:#fcdf5b;box-shadow:inset 0 2px 3px rgba(0,0,0,.2)} .button-yellow .fa{color:#c9ae34;text-shadow:0 1px 0 rgba(255,255,255,.3)} .button .fa{float:left;font-size:14px;line-height:20px;margin:-1px 8px 0 -4px;vertical-align:top}

Untuk penggunaanya, silahkan terapkan kode di bawah ini !

<div style="text-align: center;"> <a class="button" href="LINK" target="_blank"> <i class="fa fa-cloud-download"></i> <strong>Download</strong> </a> <a class="button button-purple" href="LINK" target="_blank"> <i class="fa fa-rocket"></i> Live <strong>Demo</strong> </a> </div> <div class="clear"></div>

Maka hasilnya akan tampak seperti di bawah ini :



Style atau Model lainnya :

<a class="button button-yellow" href="LINK" target="_blank"> <i class="fa fa-clock-o"></i> Waiting for <strong>confirmation</strong> </a>
Waiting for confirmation


<a class="button button-orange" href="LINK" target="_blank"> <i class="fa fa-exclamation-triangle"></i> Watch <strong>out!</strong> </a>
Watch out!


<a class="button button-red" href="LINK" target="_blank"> <i class="fa fa-times"></i> Order <strong>cancelled</strong> </a>
Order cancelled


<a class="button button-blue" href="LINK" target="_blank"> <i class="fa fa-globe"></i> Hello <strong>World</strong> </a>
Hello World


<a class="button button-green" href="LINK" target="_blank"> <i class="fa fa-check"></i> Order <strong>received</strong> </a>
Order received


Demikian tutorial kali ini tentang cara membuat tombol demo dan download pada blogspot/blogger, semoga bermanfaat. Sekian dan tengkiu...

Membuat Widget Select Text and Tweet Di Blogger

Membuat Select Text and Tweet Di Blogger - Belakangan ini saya mulai sering share artikel ke twitter melalui share button yang terdapat diblog namun menurut saya share button tersebut kinerjanya kurang powerfull karena pada saat share artikel yang muncul hanya link judul post dan menurut saya itu sedikit mengganggu karena saya harus mengcopy atau mengetik manual beberapa kata lagi untuk menyempurnakan tweet tersebut. Berbeda dengan wordpress yang dapat menggunakan sejenis plugin Select Text and Share it to Twitter, jadi saya berfikir untuk mencari script yang cara kerjanya sedikit mirif dengan plugin tersebut dan syukur alhamdulillah ketemu juga. Berikut penerapan Select Text and Share it to Twitter Widget in Blogger pada blog :

Sebagai demo silahkan select text atau block text di blog ini....!!!

How to Select Text and Share it to Twitter Widget in Blogger

Step 1 > Login Blogger, Klik menu Template > Edit HTML
Step 2 > Copy kode CSS di bawah ini, lalu paste tepat diatas atau sebelum  ]]></b:skin> atau </style>

.BWSTweet {
display:none;
top:0;
background:#333;
color:#f16786;
width:40px;
height:32px;
position:absolute;
margin-left:-20px;
opacity:0;
filter:alpha(opacity=0);
z-index:99;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
}
.BWSTweet span {
position:absolute;
content:" ";
border:solid rgba(0,0,0,0);
height:0;
width:0;
top:100%;
border-top-color:#333;
left:50%;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
border-width:7px;
margin:0 0 0 -7px;
}
.BWSTweet a {
color:#f16786;
}
.BWSTweet:hover {
background:#5EA9DD;
}
.BWSTweet:hover span {
border-top-color:#5EA9DD;
}
.BWStipContainer {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.BWStipContainer a {
width:100%;
background:transparent url(http://2.bp.blogspot.com/-P1HMdLuxt8c/VLTO0QWjwtI/AAAAAAAAFMo/pNAkrrrdPe8/s1600/BWS-tweet.png) 0 0 no-repeat;
left:0;
top:0;
height:100%;
text-decoration:none;
display:block;
padding:0;
}
.sharingLink {
display:block;
position:absolute;
text-indent:-9999px;
}

Step 3 > Copy kode HTML di bawah ini, setelah itu paste tepat di atas atau sebelum tag </Head>

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function() {
textToShare = '';
$(document).mousemove(function(m) {
generateTooltipPosition();
});
});
$(document).mouseup(function() {
$(document).mousemove(function(m) {
generateTooltipPosition()
});
var textToShare = getTextToShare();
var BWSTweet = document.getElementById("BWSTweet");
if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
var textToShare = getTextToShare();
var tooltipTitle = null;
var newTooltipTitle = $("#BWSTweet").attr("title");
if (newTooltipTitle == "") return;
if (newTooltipTitle !== tooltipTitle) $('#BWSTweet').animate({
opacity: 0
}, 30);
if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
if ($('#BWSTweet').show()) {
$('#BWSTweet').animate({
opacity: 0
}, 30);
}
});
function showMeTooltip() {
var pageURL = window.location.toString();
var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + mytwitterAccount + "&url=" + pageURL;
$('#BWSTweet').show();
$('#BWSTweet').animate({
opacity: 1
}, 30);
$('#sendToTwitter').attr('href', twitterLink);
}
function getTextToShare() {
shareTxt = '';
if (window.getSelection) {
shareTxt = window.getSelection();
generateTooltipPosition();
} else if (document.getSelection) {
shareTxt = document.getSelection();
generateTooltipPosition();
}
return shareTxt;
}
function generateTooltipPosition() {
var selection = window.getSelection && window.getSelection();
if (selection && selection.rangeCount > 0) {
range = selection.getRangeAt(0);
pos = $(window).scrollTop();
selection_text = selection.toString(), rect = range.getBoundingClientRect();
$('#BWSTweet').css({
top: (rect.top + pos - 20) - 32 + 'px',
left: rect.left + (rect.width / 2) + 'px',
});
}
}
/*]]>*/
</script>

Step 4 > Setelah itu simpan kode javascript di bawah ini tepat diatas atau sebelum tag </body>

<script>var mytwitterAccount = &quot;wahabsaputrabs&quot;;</script>
<div class='BWSTweet' id='BWSTweet'>
<div class='BWStipContainer'><a class='sharingLink twitter' href='' id='sendToTwitter'><span/></a></div>
</div>

Silahkan ganti text "wahabsaputrabs" Dengan username twitter anda.

Step 5 > Simpan Template dan lihat hasilnya.....

Demikian tutorial singkat tentang Cara Membuat Widget Select Text and Tweet Di Blogspot semoga bermanfaat. sekian dan terimah kasih.

Membuat Pricing Table Dengan CSS3 Dan HTML5

Membuat Pricing Table Dengan CSS3 Dan HTML5 - Pada posting kali ini saya akan memberikan 18 model Pricing Table yang bisa anda terapkan di web atau blogspot.  Pricing Table ini ada beberapa yan responsive dan support terhadap bootstrap. Silahkan lihat demonya yang bisa anda edit atau custum pada codepen.

Membuat Pricing Table Dengan CSS3 Dan HTML5


View Demo 1 View Demo 2 View Demo 3 View Demo 4

View Demo 5 View Demo 6 View Demo 7 View Demo 8 View Demo 9 View Demo 10 View Demo 11 View Demo 12

View Demo 13 View Demo 14 View Demo 15 View Demo 16 View Demo 17 View Demo 18


Jika anda bingung untuk penerapannya "Silahkan hubungi saya atau tinggalkan komentar"





Memberi Efek Animasi Pada Font Awesome

Memberi Efek Animasi Pada Font Awesome - Anda bosan dengan tampilan font awesome pada blog anda...? Dan ingin membuat font awesome di blog terlihat sedikit aktraktif...? Ok baiklah saya akan berikan solusi untuk masalah tersebut. Saya akan menjelaskan cara memberi setuhan efek pada font awesome yang anda gunakan pada blog atau website anda. Tutorial ini cukup simpel anda cukup menambahkan atribut pada class font awesome yang ingin beri beberapa macam efek, diantaranya :
  1. wrench animated
  2. ring animated
  3. horizontal animated
  4. pulse animated
  5. shake animated
  6. burst animated
  7. tada animated
Memberi Efek Animasi Pada Font Awesome
Untuk menggunakannya silahkan Copy kode CSS di bawah ini, lalu paste tepat diatas atau sebelum  ]]></b:skin> atau </style>

@-webkit-keyframes wrench {
  0% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  8% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  10% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  18% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  20% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  28% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  30% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  38% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  40% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  48% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  50% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  58% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  60% {
    -webkit-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  68% {
    -webkit-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  75% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes wrench {
  0% {
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  8% {
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  10% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  18% {
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  20% {
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  28% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  30% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  38% {
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  40% {
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  48% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  50% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  58% {
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  60% {
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }

  68% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  75% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.faa-wrench.animated,
.faa-wrench.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-wrench {
  -webkit-animation: wrench 2.5s ease infinite;
  animation: wrench 2.5s ease infinite;
  transform-origin-x: 90%;
  transform-origin-y: 35%;
  transform-origin-z: initial;
}

/* BELL */

@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  2% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  4% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  6% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  8% {
    -webkit-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  10% {
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  12% {
    -webkit-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  14% {
    -webkit-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  18% {
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  20% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes ring {
  0% {
    -webkit-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }

  2% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  4% {
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  6% {
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  8% {
    -webkit-transform: rotate(-22deg);
    -ms-transform: rotate(-22deg);
    transform: rotate(-22deg);
  }

  10% {
    -webkit-transform: rotate(22deg);
    -ms-transform: rotate(22deg);
    transform: rotate(22deg);
  }

  12% {
    -webkit-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    transform: rotate(-18deg);
  }

  14% {
    -webkit-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    transform: rotate(18deg);
  }

  16% {
    -webkit-transform: rotate(-12deg);
    -ms-transform: rotate(-12deg);
    transform: rotate(-12deg);
  }

  18% {
    -webkit-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    transform: rotate(12deg);
  }

  20% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-ring {
  -webkit-animation: ring 2s ease infinite;
  animation: ring 2s ease infinite;
  transform-origin-x: 50%;
  transform-origin-y: 0px;
  transform-origin-z: initial;
}

/* VERTICAL */

@-webkit-keyframes vertical {
  0% {
    -webkit-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  4% {
    -webkit-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  8% {
    -webkit-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  12% {
    -webkit-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  16% {
    -webkit-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  20% {
    -webkit-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  22% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes vertical {
  0% {
    -webkit-transform: translate(0,-3px);
    -ms-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  4% {
    -webkit-transform: translate(0,3px);
    -ms-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  8% {
    -webkit-transform: translate(0,-3px);
    -ms-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  12% {
    -webkit-transform: translate(0,3px);
    -ms-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  16% {
    -webkit-transform: translate(0,-3px);
    -ms-transform: translate(0,-3px);
    transform: translate(0,-3px);
  }

  20% {
    -webkit-transform: translate(0,3px);
    -ms-transform: translate(0,3px);
    transform: translate(0,3px);
  }

  22% {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.faa-vertical.animated,
.faa-vertical.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-vertical {
  -webkit-animation: vertical 2s ease infinite;
  animation: vertical 2s ease infinite;
}

/* HORIZONTAL */

@-webkit-keyframes horizontal {
  0% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }

  6% {
    -webkit-transform: translate(5px,0);
    transform: translate(5px,0);
  }

  12% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }

  18% {
    -webkit-transform: translate(5px,0);
    transform: translate(5px,0);
  }

  24% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }

  30% {
    -webkit-transform: translate(5px,0);
    transform: translate(5px,0);
  }

  36% {
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
  }
}

@keyframes horizontal {
  0% {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }

  6% {
    -webkit-transform: translate(5px,0);
    -ms-transform: translate(5px,0);
    transform: translate(5px,0);
  }

  12% {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }

  18% {
    -webkit-transform: translate(5px,0);
    -ms-transform: translate(5px,0);
    transform: translate(5px,0);
  }

  24% {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }

  30% {
    -webkit-transform: translate(5px,0);
    -ms-transform: translate(5px,0);
    transform: translate(5px,0);
  }

  36% {
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }
}

.faa-horizontal.animated,
.faa-horizontal.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-horizontal {
  -webkit-animation: horizontal 2s ease infinite;
  animation: horizontal 2s ease infinite;
}

/* FLASHING */

@-webkit-keyframes flash {
  0%, 100%, 50% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 100%, 50% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.faa-flash.animated,
.faa-flash.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-flash {
  -webkit-animation: flash 2s ease infinite;
  animation: flash 2s ease infinite;
}

/* BOUNCE */

@-webkit-keyframes bounce {
  0%, 10%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 10%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.faa-bounce.animated,
.faa-bounce.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-bounce {
  -webkit-animation: bounce 2s ease infinite;
  animation: bounce 2s ease infinite;
}

/* SPIN */

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.faa-spin.animated,
.faa-spin.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-spin {
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

/* FLOAT */

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.faa-float.animated,
.faa-float.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-float {
  -webkit-animation: float 2s linear infinite;
  animation: float 2s linear infinite;
}

/* PULSE */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  50% {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
  -webkit-animation: pulse 2s linear infinite;
  animation: pulse 2s linear infinite;
}

/* SHAKE */

.faa-shake.animated,
.faa-shake.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-shake {
  -webkit-animation: wrench 2.5s ease infinite;
  animation: wrench 2.5s ease infinite;
}

/* TADA */

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(.9) rotate(-8deg);
    transform: scale(.9) rotate(-8deg);
  }

  30%, 50%, 70% {
    -webkit-transform: scale(1.3) rotate(8deg);
    transform: scale(1.3) rotate(8deg);
  }

  40%, 60% {
    -webkit-transform: scale(1.3) rotate(-8deg);
    transform: scale(1.3) rotate(-8deg);
  }

  80% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(.9) rotate(-8deg);
    -ms-transform: scale(.9) rotate(-8deg);
    transform: scale(.9) rotate(-8deg);
  }

  30%, 50%, 70% {
    -webkit-transform: scale(1.3) rotate(8deg);
    -ms-transform: scale(1.3) rotate(8deg);
    transform: scale(1.3) rotate(8deg);
  }

  40%, 60% {
    -webkit-transform: scale(1.3) rotate(-8deg);
    -ms-transform: scale(1.3) rotate(-8deg);
    transform: scale(1.3) rotate(-8deg);
  }

  80% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.faa-tada.animated,
.faa-tada.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-tada {
  -webkit-animation: tada 2s linear infinite;
  animation: tada 2s linear infinite;
}

/* PASSING */

@-webkit-keyframes passing {
  0% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
  }

  50% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

@keyframes passing {
  0% {
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    opacity: 0;
  }

  50% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    opacity: 0;
  }
}

.faa-passing.animated,
.faa-passing.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing {
  -webkit-animation: passing 3s linear infinite;
  animation: passing 3s linear infinite;
}

/* WAVE */

@-webkit-keyframes burst {
  0% {
    opacity: .6;
  }

  50% {
    -webkit-transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes burst {
  0% {
    opacity: .6;
  }

  50% {
    -webkit-transform: scale(1.8);
    -ms-transform: scale(1.8);
    transform: scale(1.8);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.faa-burst.animated,
.faa-burst.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-burst {
  -webkit-animation: burst 3s infinite linear;
  animation: burst 3s infinite linear;
} 
Untuk penerapan pada HTML anda hanya perlu menambahkan kode di bawah ini di belakang nama class font awesome yang anda ingin beri efek.
  1. faa-wrench animated fa-4x
  2. faa-ring animated fa-4x
  3. faa-horizontal animated fa-4x
  4. faa-pulse animated fa-4x
  5. faa-shake animated fa-4x
  6. faa-burst animated fa-4x
  7. faa-tada animated fa-4x
Lihat contoh penerapannya di bawah ini :

<i class='fa fa-wrench faa-wrench animated fa-4x'></i>

<i class='fa fa-bell faa-ring animated fa-4x'></i>

<i class='fa fa-envelope faa-horizontal animated fa-4x'></i>

<i class='fa fa-heart faa-pulse animated fa-4x'></i>

<i class='fa fa-envelope faa-shake animated fa-4x'></i>

<i class='fa fa-envelope faa-burst animated fa-4x'></i>

<i class='fa fa-linux faa-tada animated fa-4x'></i>

View Demo More Effect

"fa-4x adalah kode untuk membuat font awesome 4 kali lebih besar jika tidak diperlukan silahkan hapus"



Koleksi Font Awesome Berwarna - Brand Dan Social Icons

Font Awesome Colored Collections - Brand And Social Icons - Posting kali ini saya akan membagikan koleksi font awesome Berwarna - Brand Dan Social Icons



Font Awesome Colored Collections - Brand And Social Icons -

Font Awesome Colored - Brand And Social Icons

<ul class="social-icons icon-circle list-unstyled list-inline"> 
<li> <a href="#"><i class="fa fa-adn"></i></a> </li>
<li> <a href="#"><i class="fa fa-android"></i></a> </li>
<li> <a href="#"><i class="fa fa-apple"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitbucket-square"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li>
<li> <a href="#"><i class="fa fa-css3"></i></a> </li>
<li> <a href="#"><i class="fa fa-dribbble"></i></a></li>
<li> <a href="#"><i class="fa fa-dropbox"></i></a></li>
<li> <a href="#"><i class="fa fa-facebook"></i></a></li>
<li> <a href="#"><i class="fa fa-facebook-square"></i></a></li>
<li> <a href="#"><i class="fa fa-flickr"></i></a></li>
<li> <a href="#"><i class="fa fa-foursquare"></i></a></li>
<li> <a href="#"><i class="fa fa-github"></i></a></li>
<li> <a href="#"><i class="fa fa-github-alt"></i></a></li>
<li> <a href="#"><i class="fa fa-github-square"></i></a></li>
<li> <a href="#"><i class="fa fa-google-plus"></i></a></li>
<li> <a href="#"><i class="fa fa-google-plus-square"></i></a></li>
<li> <a href="#"><i class="fa fa-html5"></i></a></li>
<li> <a href="#"><i class="fa fa-instagram"></i></a></li>
<li> <a href="#"><i class="fa fa-linkedin"></i></a></li>
<li> <a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li> <a href="#"><i class="fa fa-linux"></i></a></li>
<li> <a href="#"><i class="fa fa-maxcdn"></i></a></li>
<li> <a href="#"><i class="fa fa-pagelines"></i></a></li>
<li> <a href="#"><i class="fa fa-pinterest"></i></a></li>
<li> <a href="#"><i class="fa fa-pinterest-square"></i></a></li>
<li> <a href="#"><i class="fa fa-renren"></i></a></li>
<li> <a href="#"><i class="fa fa-skype"></i></a></li>
<li> <a href="#"><i class="fa fa-stack-exchange"></i></a></li>
<li> <a href="#"><i class="fa fa-stack-overflow"></i></a></li>
<li> <a href="#"><i class="fa fa-trello"></i></a></li>
<li> <a href="#"><i class="fa fa-tumblr"></i></a></li>
<li> <a href="#"><i class="fa fa-tumblr-square"></i></a></li>
<li> <a href="#"><i class="fa fa-twitter"></i></a></li>
<li> <a href="#"><i class="fa fa-twitter-square"></i></a></li>
<li> <a href="#"><i class="fa fa-vimeo-square"></i></a></li>
<li> <a href="#"><i class="fa fa-vk"></i></a></li>
<li> <a href="#"><i class="fa fa-weibo"></i></a></li>
<li> <a href="#"><i class="fa fa-windows"></i></a></li>
<li> <a href="#"><i class="fa fa-xing"></i></a></li>
<li> <a href="#"><i class="fa fa-xing-square"></i></a></li>
<li> <a href="#"><i class="fa fa-youtube"></i></a></li>
<li> <a href="#"><i class="fa fa-youtube-play"></i></a></li>
<li> <a href="#"><i class="fa fa-youtube-square"></i></a></li>
</ul>

Social Icons - Hover Zoom (.icon-zoom)

<ul class="social-icons icon-circle icon-zoom list-unstyled list-inline"> 
<li><a href="#"><i class="fa fa-adn"></i></a> </li>
<li><a href="#"><i class="fa fa-android"></i></a> </li>
<li> <a href="#"><i class="fa fa-apple"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li>
<li> <a href="#"><i class="fa fa-css3"></i></a> </li>
<li> <a href="#"><i class="fa fa-dribbble"></i></a></li>
<li> <a href="#"><i class="fa fa-dropbox"></i></a></li>
<li> <a href="#"><i class="fa fa-facebook"></i></a></li>
<li> <a href="#"><i class="fa fa-flickr"></i></a></li>
<li> <a href="#"><i class="fa fa-foursquare"></i></a></li>
</ul>

Social Icons - Hover Rotate (.icon-rotate)

<ul class="social-icons icon-circle icon-rotate list-unstyled list-inline"> 
<li> <a href="#"><i class="fa fa-adn"></i></a> </li>
<li> <a href="#"><i class="fa fa-android"></i></a> </li>
<li> <a href="#"><i class="fa fa-apple"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li>
<li> <a href="#"><i class="fa fa-css3"></i></a> </li>
<li> <a href="#"><i class="fa fa-dribbble"></i></a></li>
<li> <a href="#"><i class="fa fa-dropbox"></i></a></li>
<li> <a href="#"><i class="fa fa-facebook"></i></a></li>
<li> <a href="#"><i class="fa fa-flickr"></i></a></li>
<li> <a href="#"><i class="fa fa-foursquare"></i></a></li>
</ul>

Social Icons - Rounded (.icon-rounded)

<ul class="social-icons icon-rounded  list-unstyled list-inline"> 
<li> <a href="#"><i class="fa fa-adn"></i></a> </li>
<li> <a href="#"><i class="fa fa-android"></i></a> </li>
<li> <a href="#"><i class="fa fa-apple"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li>
<li> <a href="#"><i class="fa fa-css3"></i></a> </li>
<li> <a href="#"><i class="fa fa-dribbble"></i></a></li>
<li> <a href="#"><i class="fa fa-dropbox"></i></a></li>
<li> <a href="#"><i class="fa fa-facebook"></i></a></li>
<li> <a href="#"><i class="fa fa-flickr"></i></a></li>
<li> <a href="#"><i class="fa fa-foursquare"></i></a></li>
</ul>

Social Icons - Flat (.icon-flat)

<ul class="social-icons icon-flat list-unstyled list-inline"> 
<li> <a href="#"><i class="fa fa-adn"></i></a> </li>
<li> <a href="#"><i class="fa fa-android"></i></a> </li>
<li> <a href="#"><i class="fa fa-apple"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitbucket"></i></a> </li>
<li> <a href="#"><i class="fa fa-bitcoin"></i></a> </li>
<li> <a href="#"><i class="fa fa-css3"></i></a> </li>
<li> <a href="#"><i class="fa fa-dribbble"></i></a></li>
<li> <a href="#"><i class="fa fa-dropbox"></i></a></li>
<li> <a href="#"><i class="fa fa-facebook"></i></a></li>
<li> <a href="#"><i class="fa fa-flickr"></i></a></li>
<li> <a href="#"><i class="fa fa-foursquare"></i></a></li>
</ul>


/*Change icons size here*/
.social-icons .fa {
font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #FFF;
color: rgba(255, 255, 255, 0.8);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa{
border-radius: 50%;
}
.social-icons.icon-rounded .fa{
border-radius:5px;
}
.social-icons.icon-flat .fa{
border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
color: #FFF;
-webkit-box-shadow: 1px 1px 3px #333;
-moz-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
}
.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
transform: scale(1.1) rotate(360deg);
}

.social-icons .fa-adn{background-color:#504e54;}
.social-icons .fa-apple{background-color:#aeb5c5;}
.social-icons .fa-android{background-color:#A5C63B;}
.social-icons .fa-bitbucket,.social-icons .fa-bitbucket-square{background-color:#003366;}
.social-icons .fa-bitcoin,.social-icons .fa-btc{background-color:#F7931A;}
.social-icons .fa-css3{background-color:#1572B7;}
.social-icons .fa-dribbble{background-color:#F46899;}
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}
.social-icons .fa-flickr{background-color:#FF0084;}
.social-icons .fa-foursquare{background-color:#0086BE;}
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;}
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;}
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;}
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;}
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;}
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;}
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;}
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}



View Demo





Font Awesome Icons Dengan Variabel Merek Warna

Font Awesome Icons with Brand Color Variables - Anda bosan dengan warna font awesome pada blog anda...? Dan ingin membuat font awesome di blog terlihat sedikit kece...? Ok baiklah saya akan berikan solusi untuk masalah tersebut. Saya akan menjelaskan cara memberi setuhan warna pada font awesome yang anda gunakan pada blog atau website anda. Tutorial ini cukup simpel anda cukup menambahkan atribut pada class font awesome yang ingin dimodifikasi warnanya.

Font Awesome Icons Dengan Variabel Merek Warna


Perhatikan contoh penerapannya di bawah ini :

<i class="fa fa-adn"></i>
<i class="fa fa-android"></i>
<i class="fa fa-angellist"></i>
<i class="fa fa-apple"></i>
<i class="fa fa-behance"></i>
<i class="fa fa-behance-square"></i>
<i class="fa fa-bitbucket"></i>
<i class="fa fa-bitbucket-square"></i>
<i class="fa fa-bitcoin"></i>
<i class="fa fa-btc"></i>
<i class="fa fa-buysellads"></i>
<i class="fa fa-cc-amex"></i>
<i class="fa fa-cc-discover"></i>
<i class="fa fa-cc-mastercard"></i>
<i class="fa fa-cc-paypal"></i>
<i class="fa fa-cc-stripe"></i>
<i class="fa fa-cc-visa"></i>
<i class="fa fa-codepen"></i>
<i class="fa fa-connectdevelop"></i>
<i class="fa fa-css3"></i>
<i class="fa fa-dashcube"></i>
<i class="fa fa-delicious"></i>
<i class="fa fa-deviantart"></i>
<i class="fa fa-digg"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-dropbox"></i>
<i class="fa fa-drupal"></i>
<i class="fa fa-empire"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-official"></i>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-forumbee"></i>
<i class="fa fa-foursquare"></i>
<i class="fa fa-ge"></i>
<i class="fa fa-git"></i>
<i class="fa fa-git-square"></i>
<i class="fa fa-github"></i>
<i class="fa fa-github-alt"></i>
<i class="fa fa-github-square"></i>
<i class="fa fa-gittip"></i>
<i class="fa fa-google"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-google-plus-square"></i>
<i class="fa fa-google-wallet"></i>
<i class="fa fa-hacker-news"></i>
<i class="fa fa-html5"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-ioxhost"></i>
<i class="fa fa-joomla"></i>
<i class="fa fa-jsfiddle"></i>
<i class="fa fa-lastfm"></i>
<i class="fa fa-lastfm-square"></i>
<i class="fa fa-leanpub"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-linkedin-square"></i>
<i class="fa fa-linux"></i>
<i class="fa fa-maxcdn"></i>
<i class="fa fa-meanpath"></i>
<i class="fa fa-medium"></i>
<i class="fa fa-openid"></i>
<i class="fa fa-pagelines"></i>
<i class="fa fa-paypal"></i>
<i class="fa fa-pied-piper"></i>
<i class="fa fa-pied-piper-alt"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-pinterest-p"></i>
<i class="fa fa-pinterest-square"></i>
<i class="fa fa-qq"></i>
<i class="fa fa-ra"></i>
<i class="fa fa-rebel"></i>
<i class="fa fa-reddit"></i>
<i class="fa fa-reddit-square"></i>
<i class="fa fa-renren"></i>
<i class="fa fa-sellsy"></i>
<i class="fa fa-share-alt"></i>
<i class="fa fa-share-alt-square"></i>
<i class="fa fa-shirtsinbulk"></i>
<i class="fa fa-simplybuilt"></i>
<i class="fa fa-skyatlas"></i>
<i class="fa fa-skype"></i>
<i class="fa fa-slack"></i>
<i class="fa fa-slideshare"></i>
<i class="fa fa-soundcloud"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-stack-exchange"></i>
<i class="fa fa-stack-overflow"></i>
<i class="fa fa-steam"></i>
<i class="fa fa-steam-square"></i>
<i class="fa fa-stumbleupon"></i>
<i class="fa fa-stumbleupon-circle"></i>
<i class="fa fa-tencent-weibo"></i>
<i class="fa fa-trello"></i>
<i class="fa fa-tumblr"></i>
<i class="fa fa-tumblr-square"></i>
<i class="fa fa-twitch"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-viacoin"></i>
<i class="fa fa-vimeo-square"></i>
<i class="fa fa-vine"></i>
<i class="fa fa-vk"></i>
<i class="fa fa-wechat"></i>
<i class="fa fa-weibo"></i>
<i class="fa fa-weixin"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-wordpress"></i>
<i class="fa fa-xing"></i>
<i class="fa fa-xing-square"></i>
<i class="fa fa-yahoo"></i>
<i class="fa fa-yelp"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-youtube-play"></i>
<i class="fa fa-youtube-square"></i>



.fa.fa-adn {
  color: #4a484c;
}
.fa.fa-android {
  color: #a4c639;
}
.fa.fa-angellist {
  color: #000000;
}
.fa.fa-apple {
  color: #979797;
}
.fa.fa-behance {
  color: #1769ff;
}
.fa.fa-behance-square {
  color: #1769ff;
}
.fa.fa-bitbucket {
  color: #205081;
}
.fa.fa-bitbucket-square {
  color: #205081;
}
.fa.fa-bitcoin {
  color: #ee9209;
}
.fa.fa-btc {
  color: #ee9209;
}
.fa.fa-buysellads {
  color: #c90100;
}
.fa.fa-cc-amex {
  color: #007bc1;
}
.fa.fa-cc-discover {
  color: #f68121;
}
.fa.fa-cc-mastercard {
  color: #0a3a82;
}
.fa.fa-cc-paypal {
  color: #253b80;
}
.fa.fa-cc-stripe {
  color: #00afe1;
}
.fa.fa-cc-visa {
  color: #0157a2;
}
.fa.fa-codepen {
  color: #000000;
}
.fa.fa-connectdevelop {
  color: #391448;
}
.fa.fa-css3 {
  color: #1680c0;
}
.fa.fa-dashcube {
  color: #7f7f7f;
}
.fa.fa-delicious {
  color: #3399ff;
}
.fa.fa-deviantart {
  color: #4e6252;
}
.fa.fa-digg {
  color: #000000;
}
.fa.fa-dribbble {
  color: #444444;
}
.fa.fa-dropbox {
  color: #007ee5;
}
.fa.fa-drupal {
  color: #0077c0;
}
.fa.fa-empire {
  color: #000000;
}
.fa.fa-facebook {
  color: #3b5998;
}
.fa.fa-facebook-official {
  color: #3b5998;
}
.fa.fa-facebook-square {
  color: #3b5998;
}
.fa.fa-flickr {
  color: #ff0084;
}
.fa.fa-forumbee {
  color: #83ad13;
}
.fa.fa-foursquare {
  color: #0072b1;
}
.fa.fa-ge {
  color: #000000;
}
.fa.fa-git {
  color: #333333;
}
.fa.fa-git-square {
  color: #333333;
}
.fa.fa-github {
  color: #333333;
}
.fa.fa-github-alt {
  color: #333333;
}
.fa.fa-github-square {
  color: #333333;
}
.fa.fa-gittip {
  color: #663300;
}
.fa.fa-google {
  color: #4285f4;
}
.fa.fa-google-plus {
  color: #dd4b39;
}
.fa.fa-google-plus-square {
  color: #dd4b39;
}
.fa.fa-google-wallet {
  color: #4285f4;
}
.fa.fa-hacker-news {
  color: #ff6600;
}
.fa.fa-html5 {
  color: #e34f26;
}
.fa.fa-instagram {
  color: #3f729b;
}
.fa.fa-ioxhost {
  color: #faa729;
}
.fa.fa-joomla {
  color: #142849;
}
.fa.fa-jsfiddle {
  color: #4679bd;
}
.fa.fa-lastfm {
  color: #c3000d;
}
.fa.fa-lastfm-square {
  color: #c3000d;
}
.fa.fa-leanpub {
  color: #0c0c0c;
}
.fa.fa-linkedin {
  color: #0976b4;
}
.fa.fa-linkedin-square {
  color: #0976b4;
}
.fa.fa-linux {
  color: #333333;
}
.fa.fa-maxcdn {
  color: #ff6600;
}
.fa.fa-meanpath {
  color: #538ed7;
}
.fa.fa-medium {
  color: #000000;
}
.fa.fa-openid {
  color: #f78c40;
}
.fa.fa-pagelines {
  color: #000000;
}
.fa.fa-paypal {
  color: #253b80;
}
.fa.fa-pied-piper {
  color: #2f9f46;
}
.fa.fa-pied-piper-alt {
  color: #2f9f46;
}
.fa.fa-pied-piper-square {
  color: #2f9f46;
}
.fa.fa-pinterest {
  color: #cc2127;
}
.fa.fa-pinterest-p {
  color: #cc2127;
}
.fa.fa-pinterest-square {
  color: #cc2127;
}
.fa.fa-qq {
  color: #000000;
}
.fa.fa-ra {
  color: #000000;
}
.fa.fa-rebel {
  color: #000000;
}
.fa.fa-reddit {
  color: #ff4500;
}
.fa.fa-reddit-square {
  color: #ff4500;
}
.fa.fa-renren {
  color: #005eac;
}
.fa.fa-sellsy {
  color: #1f78b9;
}
.fa.fa-share-alt {
  color: #01bf01;
}
.fa.fa-share-alt-square {
  color: #01bf01;
}
.fa.fa-shirtsinbulk {
  color: #dd3a26;
}
.fa.fa-simplybuilt {
  color: #000000;
}
.fa.fa-skyatlas {
  color: #00adbb;
}
.fa.fa-skype {
  color: #00aff0;
}
.fa.fa-slack {
  color: #0f7965;
}
.fa.fa-slideshare {
  color: #e98325;
}
.fa.fa-soundcloud {
  color: #ff8800;
}
.fa.fa-spotify {
  color: #7ab800;
}
.fa.fa-stack-exchange {
  color: #000000;
}
.fa.fa-stack-overflow {
  color: #fe7a15;
}
.fa.fa-steam {
  color: #0b0b0b;
}
.fa.fa-steam-square {
  color: #0b0b0b;
}
.fa.fa-stumbleupon {
  color: #eb4924;
}
.fa.fa-stumbleupon-circle {
  color: #eb4924;
}
.fa.fa-tencent-weibo {
  color: #74af2c;
}
.fa.fa-trello {
  color: #256a92;
}
.fa.fa-tumblr {
  color: #35465c;
}
.fa.fa-tumblr-square {
  color: #35465c;
}
.fa.fa-twitch {
  color: #6441a5;
}
.fa.fa-twitter {
  color: #55acee;
}
.fa.fa-twitter-square {
  color: #55acee;
}
.fa.fa-viacoin {
  color: #333333;
}
.fa.fa-vimeo-square {
  color: #162221;
}
.fa.fa-vine {
  color: #00b488;
}
.fa.fa-vk {
  color: #45668e;
}
.fa.fa-wechat {
  color: #93d034;
}
.fa.fa-weibo {
  color: #e71d34;
}
.fa.fa-weixin {
  color: #93d034;
}
.fa.fa-windows {
  color: #00bcf2;
}
.fa.fa-wordpress {
  color: #21759b;
}
.fa.fa-xing {
  color: #026466;
}
.fa.fa-xing-square {
  color: #026466;
}
.fa.fa-yahoo {
  color: #400191;
}
.fa.fa-yelp {
  color: #af0606;
}
.fa.fa-youtube {
  color: #e52d27;
}
.fa.fa-youtube-play {
  color: #e52d27;
}
.fa.fa-youtube-square {
  color: #e52d27;
}

Coba perhatikan CSS diatas setiap class font awesome diberi atribute color yang berbeda. Jadi jika anda ingin membuat font awesome di blog atau web, sobat cukup color sesuai keinginan.

View Demo


Efek Loading Ala Blogger.com

Efek Loading Ala Blogger.com - Efek loading blog dimaksudkan agar blog memiliki sensasi tampilan yang berbeda pada saat visitors berkunjung. Efek loading pada blog juga dapat menambah kesan stylish sehingga dapat mempercantik tampilan blog. Untuk membuat Efek loading blog cukup mudah dan simple. Lantas bagaimana cara membuat efek loading pada blog...? Berikut langkah-langkah penerapannya pada blogspot :



Efek Loading Ala Blogger.com, efek loading blog,efek loading pada blog, membuat efek loading blog, membuat efek loading pada blog

Step 1 > Login Blogger, Klik menu Template > Edit HTML
Step 2 > Simpan kode external jQuery library di bawah ini, tepat diatas atau sebelum tag </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Jika template blog anda sudah terdapat jQuery library abaikan saja step ini


Step 3 > Copy kode CSS di bawah ini, lalu paste tepat diatas atau sebelum tag </head>

<style>
/* LOADING EFEK BLOG WAHABSAPUTRA.com */
#blogger-gear {
background:url(http://1.bp.blogspot.com/-p0CHmMzLHhU/VTiq0KrOdsI/AAAAAAAAEbU/FErqzwBYMBI/s1600/Blogger%2BLoading%2BBlog%2BWahab%2BSaputra.gif) no-repeat center;
background-color:#eee;
width:100%;height:100%;
position: fixed; left: 0px; top:0px; z-index: +100000;
}
</style>


Step 4 > Copy kode HTML di bawah ini, setelah itu paste tepat di bawah atau setelah tag <body>

<div id="blogger-gear"></div>


Step 5 > Setelah itu simpan kode jQuery di bawah ini tepat diatas atau sebelum tag </body>

<script>
//<![CDATA[
$(window).bind("load", function() {
    $('#blogger-gear').slideUp(1000);
});
//]]>
</script>


Step 6 > Simpan Template dan lihat hasilnya.....


Efek Loading ini hanya direkomendasikan untuk blog yang "fast loading"

Demikian tutorial singkat tentang cara membuat efek loading pada blogspot semoga dapat bermanfaat sekian dan terima kasih.

Menu With Animated Search Box


Menu With Animated Search Box

See the Pen Menu + Animated Search Box by Wahab Saputra (@Wahab_Saputra) on CodePen.

Simple Menu Pure CSS


Simple Menu Pure CSS

See the Pen CSS3 Only Menu by Wahab Saputra (@Wahab_Saputra) on CodePen.

Animated Navigation


Animated Navigation

See the Pen ANIMATED NAVIGATION by Wahab Saputra (@Wahab_Saputra) on CodePen.

Pure CSS Accordion Navigation


Pure CSS Accordion Navigation

See the Pen Pure CSS Accordion Nav by Wahab Saputra (@Wahab_Saputra) on CodePen.

CSS3 Responsive Menu Dropdown

Slide Out Menu With JQuery


Slide Out Menu With JQuery

See the Pen Slide Out Menu with JQuery by Wahab ID (@Wahab_Saputra) on CodePen.

Menu Fijo hamburger


Menu Fijo hamburger

See the Pen menu fijo by Wahab ID (@Wahab_Saputra) on CodePen.

Responsive Menu Using Trunk.js

JQuery Folding Menu


JQuery Folding Menu

See the Pen jQuery folding menu by Wahab ID (@Wahab_Saputra) on CodePen.

Pure CSS Fly Out Menu


Pure CSS Fly Out Menu

See the Pen CSS Fly-out menu by Wahab ID (@Wahab_Saputra) on CodePen.

Responsive Mega Menu With Search Box

Mobile Menu


Mobile Menu

See the Pen Mobile Menu by Wahab ID (@Wahab_Saputra) on CodePen.

Responsive Dan Mega Menu


Responsive Dan Mega Menu

See the Pen Responsive and Mega menu by Wahab ID (@Wahab_Saputra) on CodePen.