Showing posts with label Tutorial Blogspot. Show all posts

Cara Embed VR View Image 360 Ke Dalam Postingan Blog

VR View memungkinkan Teman Blogger untuk menyematkan atau menanamkan image, foto, gambar 360 derajat VR Media ke dalam blog atau website baik pada tampilan desktop dan mobile, dan aplikasi bawaan ( Native Apps ) yang berjalan di OS Smartphone Android dan iOS. Teknologi ini dirancang untuk memungkinkan pengembang aplikasi tradisional untuk meningkatkan aplikasi dengan konten yang lebih mendalam dalam artian agar terlihat hidup dan aktraktif. Misalnya, VR View Di bawah ini yang dapat memudahkan para pengguna aplikasi travelling untuk memberikan informasi secara real atau nyata kepada pemirsa dengan tur scuba diving underwater, karena mereka ingin merencanakan liburan atau untuk keperluan pembangun rumah sebelum rumah benar-benar dibangun.




google vr view image 360
newatlas.com


Yang menjadi keprihatinan para Developer VR View : terbatasnya ketersediaan hardware VR di kalangan masyarakat umum dengan kata lain harga hardware VR View yang cukup Mahal. Namun untungnya image atau video yang dihasilkan oleh perangkat VR dapat kita nikmati pada segala jenis browser desktop ke aplikasi seluler tanpa hardware khusus.

Platform yang didukung View VR
VR View menangani hampir semua project yang sulit dan memakan waktu lama pekerjaan yang diperlukan untuk memastikan kompatibilitas di semua browser modern dan sistem operasi mobile dengan satu pengecualian: 360 video tidak bekerja di browser pada iOS.


 
Web
  •      versi modern dari Chrome dan Opera di Windows, MacOS, Linux, Android, dan iOS.
  •      versi modern Safari di MacOS dan iOS.
  •      versi modern dari Firefox pada Windows, MacOS, dan Linux.
  •      versi modern dari IE 11 dan The Edge pada Windows.

 
Native Apps / Aplikasi Bawaan
  •      iOS 8 dan versi lebih tinggi.
  •      Android 4.4 (Kit Kat) dan versi lebih tinggi.

Format yang didukung View VR

VR View mendukung audio mono dan stereo gambar 360 dan video. Gambar dan video perlu disimpan dalam bentuk persegi panjang-panorama (equirect-pano) format, yang merupakan format umum yang didukung oleh banyak solusi capture.

Pelajari Lebih Detailnya Di Sini Embedding VR View 

Berikut cara embed image 360 derajat dalam blogspot :

Gunakan kode di bawah ini untuk menampilkan gambar 360 derajat ke dalam postingan blog Teman Blogger

Copy kode di bawah ini lalu pastekan ke postingan blog pada MODE HTML BUKAN COMPOSE

<div id="vrview"><iframe allowfullscreen="true" scrolling="no" style="border: 0px none;" src="https://storage.googleapis.com/vrview/2.0/index.html?preview=https://3.bp.blogspot.com/-BkwyduOKSfI/WNTrdQbH99I/AAAAAAAAIQE/DKSIo0fAhIc5v8ceyTgVXrEl49S9KbOPgCLcB/s1600/Pulau%2BKelapa%2BDua.jpg&amp;image=https://3.bp.blogspot.com/-BkwyduOKSfI/WNTrdQbH99I/AAAAAAAAIQE/DKSIo0fAhIc5v8ceyTgVXrEl49S9KbOPgCLcB/s1600/Pulau%2BKelapa%2BDua.jpg&amp;is_stereo=true&amp;"height="500" width="100%"></iframe></div>

Keterangan : ganti tulisan atau link berwarna kuning dengan image 360 milik kamu dan untuk mengatur lebar dan tinggi silahkan ganti variabel hight untuk tinggi gambar dan width untuk lebar image.

Untuk penerapan yang lebih kompleks silahkan pelajari tutorial ini VR View For Web, Android dan iOS

Demikan artikel tutorial sederhana ini semoga bermanfaat dan Terima Kasih.

Cara Mengatasi Eliminate render-blocking JavaScript and CSS Pada Test PageSpeed Insights

Cara Mengatasi Eliminate render-blocking JavaScript and CSS in above-the-fold content Pada PageSpeed Insights - Ok Teman Blogger artikel kali ini saya akan coba membahas dan mempelajari cara menghapus kode widget default CSS (widget_css_bundle.css) yang terdapat pada template Blogger untuk meningkatkan Page Speed blog Blogger Kamu.

Untuk menjadikan blog teman blogger ramai pengunjung atau visitors Kamu tidak cukup dengan menyajikan atau membahas topik atau tema artikel yang unik, original dan berkualitas. Kamu juga harus memastikan para pengunjung merasa nyaman saat mengunjungi atau sedang browsing blog / website Kamu. Meskipun blog Kamu banyak berisi iklan paling tidak kecepatan loading blog Kamu cukup cepat baik saat pengunjung mengakses melalui mobile device, laptop atau PC.

Mengatasi Eliminate render-blocking JavaScript and CSS Test PageSpeed Insights


Jika blog Kamu mengalami masalah loading yang lemot dan Kamu membiarkan hal tersebut lambat laun pengunjung akan bosan lalu meninggalkan blog Kamu, sehingga situs Kamu akan memiliki tingkat bouncing yang relatif tinggi. Situs Kamu akan memiliki reputasi yang buruk bahkan negatif di mata para pengunjung.

Hasil test Blog Wahab Saputra menggunakan tool baru google Test My Site Think With Google

Sebelum Di Optimasi

Sesudah Di Optimasi

Salah satu cara untuk mengatasi masalah tersebut adalah dengan menyembunyikan atau bahkan menghapus widget default CSS (widget_css_bundle.css) dari blog Blogger Kamu.

Secara umum ada beberapa faktor yang mempengaruhi hasil test PageSpeed Insights blog, diantaranya :
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Avoid landing page redirects
  • Leverage browser caching
  • Optimize images

Namun dari ke empat faktor tersebut, point pertama yang paling mempengaruhi hasil test PageSpeed Insights blog karena termasuk Should Fix atau kesalahan yang Harus diPerbaiki (Optimize CSS Delivery) bahkan wajib hukumnya jika Kamu ingin hasil test PageSpeed Insights blog Kamu memenuhi standart.

Berikut 3 default file Widget CSS umum yang terdapat di template blog Blogger :

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=367973271035573867&zx=0aa7d473-9366-475d-b9e5-3d07cdbeb132' />

1. Pertama sebelum Teman Blogger menerapkan tutorial ini, pastikan Kamu sudah meng-back up template blog Kamu.
2. Buka Dashboard Blog pilih > Template.
3. Klik 'Edit HTML'.
4. Dalam editor Template tekan CTRL + F dan cari kode <b: skin> <! [CDATA [/ *
5. Tepat sebelum pada baris yang sama copy paste kode berikut ini.

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*
6. Maka akan terlihat seperti ini;

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[/* */// The the CSS and and style codes for the Blogger template /]]></b:skin>
7. Klik 'Save Template'

Silahkan test blog Kamu di google PageSpeed Insights apakah score testingnya membaik maka kamu telah berhasil, Tapi jika tidak mengalami peningkatan nilai test PageSpeed Insights. Coba ikuti langkah berikut :

1. Salin semua kode antara kode <b: skin> <! [CDATA [/ * dan]]> </ b: skin> dan paste dalam tag baru <style>. Seperti ini:

<style type="text/css"> // Paste the CSS codes here </style>
2. Klik 'Save Template'

Dampak positif dan negatif dari Melepaskan, Menyembunyikan atau Menghapus default Widget CSS file dari template blog Blogger

Sebelum Kamu menggunakan metode atau cara ini Kamu harus tahu bahwa menghapus : -

  • Jika Kamu menggunakan salah satu template default yang diberikan oleh Blogger, kemudian melakukan hal ini benar-benar akan menghancurkan desain dan struktur blog Kamu sebagian atau mungkin seluruhnya.
  • Kamu akan terlalu banyak bergantung dari built-in template Blogger untuk menyesuaikannya.
  • Kamu akan menghabiskan cukup banyak waktu untuk malakukan perbaikanTemplate.

Meskipun Kamu harus menghapus widget default CSSs karena;

  • Kecepatan halaman akan meningkat secara signifikan; sehingga loading blog Kamu akan menjadi makin cepat dari sebelumnya. Seperti yang kamu ketahui jika loading website / blog cepat diperlukan untuk mengurangi tingkat bouncing.
  • Hindari memuat hal yang tidak perlu dalam blog Kamu. Kode CSS ini tidak begitu penting untuk kinerja suatu blog. Sebenarnya mereka hanya mengurangi kinerja blog dengan memberatkan saat browser mengakses blog.
  • Jika Kamu mengcoding template Blogger sendiri maka Kamu harus menghapus widget default CSS.
  • Jika Kamu menggunakan template blogger hasil custom maka Kamu juga harus menghapus default CSSs dari Blogger.
  • Menghapus default CSSs tidak akan menimbulkan masalah dalam menggunakan gadget default / widget dari Blogger.

Saat ini saya menggunakan teknik ini di blog ini. Saya sarankan Kamu untuk menyingkirkan kedua widget default CSS (widget_css_bundle.css) dan widget default JavaScript (Widgets.js) dari template blog Blogger karena akan meningkatkan kecepatan loading halaman Blogger blog Kamu secara drastis.

Semoga informasi tips dan tricks membantu Kamu. Jika ada yang kurang jelas silahkan ditanyakan. Sekian dan terima kasih.

Memasang Hreflang Tag Di Blogspot Untuk Blog Multibahasa

Cara Memasang Hreflang Tag Pada Situs Multibahasa - Teman Blogger sedang mengelolah Blog atau Website dengan 2 bahasa atau lebih...? Berarti harus memasang Tag Hreflang pada web Teman Blogger. Apa itu Hreflang Tag...? Tag hreflang digunakan untuk memberitahu atau menginformasikan Google dan mesin pencari lainnya ( bing, yahoo, baidu, yandex ) tentang bahasa yang digunakan pada halaman tertentu di website Teman Blogger. Search engine menggunakan tag hreflang untuk 'redirect' pengunjung ke halaman dalam bahasa yang tepat. Hreflang juga disebut sebagai rel = "alternate" hreflang = "x".

Bentuk Umum atau Format Penulisan Hreflang Tag :

<link rel="alternate" href="http://example.com" hreflang="en-us" />

Apakah Hreflang Tag Bagus Untuk SEO?

Sejauh ini tidak ada pernyataan resmi baik dari  Google, MOZ ataupun YOAST tentang Hreflang Tag baik untuk meningkatkan kemampuan SEO suatu situs, namun satu hal yang pasti pemasangan Hreflang Tag pada struktur website akan memberi nilai positif terhadap nama baik situs kita, karena penerapan Hreflang Tag pada situs akan membantu mesin pencari dalam mengelompokkan situs kita kedalam bahasa yang telah ditentukan.

Hreflang Tag

Berikut Cara Memasang Hreflang Tag Pada Situs Multibahasa :

Letakkan kode di bawah tepat setelah <head>

<link rel="alternate" href="http://example.com/" hreflang="x-default" />

Keterangan : Ganti text yang berwarna Biru dengan alamat blog atau website Teman Blogger

Jika situs Teman Blogger menggunakan 2,3,sampai 5 bahasa sekaligus, silahkan gunakan Hreflang Tag Generator untuk membuatnya : http://www.aleydasolis.com/en/international-seo-tools/hreflang-tags-generator/

Demikian postingan kali ini tentang  Memasang Hreflang Tag Di Blogspot Untuk Blog Multibahasa, semoga dapat bermanfaat bagi Teman Bloggger. Sekian dan Tengkiu...

Custom Permalink Posting Blogspot Untuk SEO

Custom Permalink Posting Blogspot Untuk SEO - Teman Blogger kali ini saya mau berbagi info mengenai cara custom url artikel blogspot agar lebih SEO, ada beberapa pakar SEO, Ahli SEO, Master SEO dan blogger senior berpendapat bahwa optimasi pada permalink posting dapat mempengaruhi peringkat artikel dalam search engine karena permalink yang dioptimasi dengan memperpendek karakter dan penargetan kata kunci yang relevan dan tepat dapat mempermudah mesin pencari (google,bing,yahoo,yandex,baidu dan lainya) dalam meng-crawl artikel pada website atau blog kita.

Custom URL Posting Blogspot Agar SEO


Untuk sebagian platform seperti, wordpress,drupal dll. mengubah atau memodifikasi url konten bisa dilakukan dengan mudah karena memang telah dilengkapi dengan fitur yang disesuaikan. Namun bagaimana dengan Blogger atau blogspot apakah hal tersebut bisa dilakukan. Jawabannya bisa hanya saja terbatas, untuk lebih lengkapnya mari kita simak sama-sama cara modifikasi url postingan pada blogspot :

Berikut langkah untuk mengcustom permalink posting blogger sesuai keinginan kita : Disarankan jangan sampai lebih dari 100 karakter....!!!

Custom Permalink Posting Blogspot

Tanda baca yang bisa digunakan untuk permalink postingan blogger adalah :
  • Strip  ( - )
  • Titik   ( . )
Contoh Custom Permalink Posting Blogspot ( Hanya Bisa dilakukan Pada Postingan Yang Belum dipublish, Jika Ingin Merubah Permalink Artikel Yang Telah Dipublikasikan Kembalikan Post Terlebih Dahulu Menjadi Post Draf ) : 
  1. Strip  ( - ) : http://www.wahabsaputra.com/2016/02/custom-permalink-blogspot-seo.html
  2. Titik  ( . ) : http://www.wahabsaputra.com/2016/02/custom.permalink.blogspot.seo.html
Keterangan : Untuk mengetahui panjang karakter link gunakan tools ini https://charcounter.com/en/
Demikian artikel kali ini tentang Custom Permalink Posting Blogspot Untuk SEO semoga dapat bermanfaat untuk saya pribadi dan teman blogger. Sekian dan tararengkiu...

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...

Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman

Cara membagi konten atau artikel ke dalam tiga bagian dalam satu halaman - Teman blogger kali ini saya akan membuat tutorial untuk membuat posting ke dalam beberapa bagian, cara kerja script ini sebenarnya mirip dengan Tabviews yang kita kenal namun jika dilihat dari layout jauh berbeda.

Jika pada tabview konten dipisahkan bertujuan untuk mengelompokkan dalam kategori atau label khusus akan tetapi pada tutorial ini bertujuan untuk memisahkan artikel karna jumlah artikel yang cukup banyak jadi kita tidak perlu meng-scroll terlalu panjang kebawah cukup mengklik tombol untuk beralih ke konten selanjutnya.

View Live Demo

Membagi Artikel Tiga Bagian Dalam Satu Laman


Berikut tutorialnya :

Pastikan template blogger teman blogger sudah terdapat  Jquery :

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Jika sudah abaikan saja,,,,dan jika belum ada silahkan tambahkan sebelum atau diatas <head>. Untuk membuat artikel posting teman blogger tebagi 3 silahkan gunakan kode di bawah ini. Simpan kode dalam post atau page pada mode HTML.

<style>
    .post-pagination {
        margin: 20px auto;
        text-align: center;
        width: 100%;
    }
    .button_1, .button_2, .button_3 {
        border: 2px solid #f4655f;
        font-weight: 900;
        padding: 6px 36px;
        color:#f4655f;
        transition:ease 0.69s !important;
    }
    .button_1:hover, .button_2:hover, .button_3:hover {
        background: none repeat scroll 0 0 #f4655f;
        color: #fff;
        text-decoration: none;
    }
    </style>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('.button_1').click(function(){
    jQuery('.content_1').fadeIn('slow');
      jQuery('.content_2').fadeOut('fast');
    jQuery('.content_3').fadeOut('fast');
    jQuery(this).css('background','#F4655F');
    jQuery(this).css('color','#fff');
    jQuery('.button_2').css('background','#fff');
    jQuery('.button_2').css('color','#F4655F');
    jQuery('.button_3').css('background','#fff');
    jQuery('.button_3').css('color','#F4655F');
    return false;
    });
    jQuery('.button_2').click(function(){
    jQuery('.content_1').fadeOut('fast');
      jQuery('.content_2').fadeIn('slow');
    jQuery('.content_3').fadeOut('fast');
    jQuery(this).css('background','#F4655F');
    jQuery(this).css('color','#fff');
    jQuery('.button_1').css('background','#fff');
    jQuery('.button_1').css('color','#F4655F');
    jQuery('.button_3').css('background','#fff');
    jQuery('.button_3').css('color','#F4655F');
    return false;
    });
    jQuery('.button_3').click(function(){
    jQuery('.content_1').fadeOut('fast');
      jQuery('.content_2').fadeOut('fast');
    jQuery('.content_3').fadeIn('slow');
    jQuery(this).css('background','#F4655F');
    jQuery(this).css('color','#fff');
    jQuery('.button_1').css('background','#fff');
    jQuery('.button_1').css('color','#F4655F');
    jQuery('.button_2').css('background','#fff');
    jQuery('.button_2').css('color','#F4655F');
    return false;
    });
    });
    </script>

    <div class="content_1">

    Add Content Here

    </div>

    <div class="content_2" style="display: none;">

    Add Content Here

    </div>

    <div class="content_3" style="display: none;">

    Add Content Here

    </div>

    <div class="post-pagination">
    <a class="button_1" href="#">1</a>
    <a class="button_2" href="#">2</a>
    <a class="button_3" href="#">3</a>
    </div>

Silahkan ganti text Add Content Here dengan konten yang anda inginkan, baik itu text,  gambar video dan lain-lain...

Setting HTTPS Blogspot

Cara Setting HTTPS Blogspot - Sejak 2008, Google telah bekerja untuk mengenkripsi koneksi antara penggunanya dan server Google. Selama bertahun-tahun Google juga telah mengumumkan bahwa layanan mereka seperti Search, Gmail, Drive, dan banyak produk lainnya telah dienkripsi koneksinya secara default, dan yang terbaru, Google telah membuat pengumuman serupa untuk produk iklannya.

Dalam kasus yang sama, hari ini Google memperluas pada HTTPS Everywhere misi ini di mulai dari suatu peluncuran awal dari dukungan HTTPS untuk layanan pengguna Blogspot Blogger. HTTPS adalah landasan keamanan internet karena menyediakan beberapa manfaat penting : Yaiitu membuat lebih sulit bagi oknum yang ingin mencuri informasi atau melacak aktivitas blog penulis dan pengunjung, membantu memeriksa bahwa pengunjung membuka situs yang benar dan tidak sedang diarahkan ke lokasi berbahaya (Link Phising), dan membantu mendeteksi jika seorang hacker mencoba untuk mengubah data yang dikirim dari Blogger untuk pengunjung blog.

Sementara peluncuran awal ini tidak akan mendukung semua pengguna Blogger, Google hanya ingin mengambil langkah pertama untuk membuat HTTPS tersedia untuk layanan Blogspot; bagi para pengguna yang ingin mencobanya. Akan tetapi sayangnya, blog dengan domain kustom tidak didukung dalam versi pertama ini.

Berikut tutorial cara mengaktifkan HTTPS blogspot :
  • Login Blog anda
  • Pilih blog yang ingin di aktifkan (Hanya untuk blog subdomain)
  • Lalu pilih Setting atau Setelan lalu pilih Yes atau Ya. Lihat Gambar Di Bawah...!!!
Cara Setting atau mengaktifkan HTTPS Blogspot

Setelah diaktifkan, blog Anda akan diakses melalui koneksi HTTP dan HTTPS. Pengguan Blogspot harus menyadari bahwa jika mereka memilih untuk mengenkripsi akses ke blognya, ada beberapa fungsi pada blog yang tidak dapat bekerja melalui koneksi HTTPS. Hal ini dapat mempengaruhi template, widget, dan konten/artikel posting blog, hal ini sering disebabkan oleh kesalahan konten campuran, beberapa di antaranya mungkin pemilik blog yang harus perbaiki sendiri secara manual.

Uji coba HTTPS ini telah di uji coba pada 2 blog milik google Official Google Blog dan Google Online Security Blog.

Membuat Aplikasi Android Untuk Web dan Blog Tanpa Coding

Membuat aplikasi android tanpa coding bukan hal yang mustahil lagi - Aplikasi Android saat bisa dikatakan sebagai kebutuhan buat mereka yang terbiasa dengan teknologi, karena dengan adanya aplikasi khususnya aplikasi android user dapat memperoleh kemudahan sesuai kebutuhan mereka. Banyak situs besar contohnya traveloka.com yang baru-baru ini telah meluncurkan aplikasi mobile untuk mendukung websitenya agar penggunanya mudah saat mengakses situsnya melalui smartfphone. Seperti yang kita tahu untuk membuat sebuah aplikasi android bisa dibilang gampang-gampang sulit dan paling tidak kita harus menguasai bahasa pemograman java dan terbiasa dengan toolsnya yang umum digunakan untuk membuat aplikasi android seperti eclipse, phonegap dan lain-lain.Namun tahukah anda sekarang ada tools online yang menyediakan untuk membuat aplikasi dengan mudah tanpa coding...? www.appsgeyser.com merupakan tools online yang dapat membantu kebutuhan anda akan aplikasi android tanpa harus repot-repot coding dengan tool ini anda bisa membuat berbagai aplikasi sederhana seperti aplikasi web, aplikasi browser, aplikasi calculator, mesenger dan facebook page dan lain-lain. Namun kali ini saya akan menjelaskan cara membuat aplikasi android untuk sebuah web atau blog dengan mudah, berikut tutorialnya :

  • Klik Create Now!
Membuat Aplikasi Android Untuk Web dan Blog Tanpa Coding

  • Pada halaman berikutnya akan ada beberapa pilihan silahkan pilih WEBSITE

Membuat Aplikasi Android Untuk Web dan Blog Tanpa Coding

  • Pada halaman CREATE URL WEBSITE
          -> APP SETTINGS : Masukkan Url Web Atau Blog anda lalu Klik Next
          -> APP NAME        : Masukkan Nama Aplikasi Web Atau Blog anda lalu Klik Next
          -> DESCRIPTION  : Next
          -> ICON                : Anda bisa menggunakan Default Icon atau Custom Icon
          -> KLIK CREATE APP

Membuat Aplikasi Android Untuk Web dan Blog Tanpa Coding
Membuat Aplikasi Android Untuk Web dan Blog Tanpa Coding
Membuat Aplikasi Android Untuk Web dan Blog Tanpa Coding
  • Setelah itu silahkan sing up untuk mendownload masukakan identitas yang di minta dan klik Sing Up
Membuat Aplikasi Android Untuk Web dan Blog Tanpa Coding
  • Dan terakhir anda bisa mendownload aplikasinya dihalaman selanjutnya

Membuat Aplikasi Android Untuk Web dan Blog Tanpa Coding
Demikian tutorial singkat tentang cara mudah membuat aplikasi android untuk web atau blog tanpa coding  atau membuat aplikasi android tanpa koding semoga bermanfaat.Sekian dan terima kasih.

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.

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