Tampilkan postingan dengan label Trik Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Trik Blog. Tampilkan semua postingan

Selasa, 30 Agustus 2016


Dibawah ini ada 6 Style yang bisa anda pilih salah satunya atau bisa langsung pasang semuanya biar rame .

Dan cara pemasangannya adalah seperti dibawah ini .


  1. Login Blogger
  2. Layout
  3. Add Gadget
  4. Tempelkan script Search Box 
  5. Save

Style 1


<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 2

<style type="text/css">
#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 3


<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 4




<style type="text/css">
#w2b-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 5




<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 6


<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Jumat, 19 Agustus 2016



     Baiklah kali ini saya akan membagikan tentang cara mengganti warna teks dan background saat di blok
Pada sebuah blog atau web kita sering menemukan gaya gaya teks yang saat di blok warna background dan teks tidak seperti warna standar biru dan putih yang membosankan itu, ada kuning, hijau, merah, ungu dan lain sebagainya. Lantas, bagaimana caranya? Ok, kita dapat memamfaakan elemen CSS yang sederhana dengan menambahkan ::selection{background-color:#ff6858;color:#fff;} pada style. Namun itu saja tidak cukup karena akan berjalan pada peramban Google Chrome saja menurut pengalaman.

Bagaimana agar berjalan pada semua peramban? Berjalan pada semua peramban sih enggak, namun kita dapat menutupi kekurangan agar berjalan pada IE, Opera, Edge, Mozilla maupun Chrome dengan menmbahkan

::-moz-selection {background:#0089E0;color:#fff;} ::-webkit-selection {background:#0089E0;color:#fff;}

Jadinya akan seperti ini dibawah ini :

::selection{background-color:#0089E0;color:#fff;}
::-moz-selection {background:#0089E0;color:#fff;}
::-webkit-selection {background:#0089E0;color:#fff;}

Untuk blogger silahkan copy dan tempel pada template sebelum ]]></b:skin>

Keterangan :
#0089E0: warna background pada saat di blok
#fff : dimana warna teks ikut berubah warna saat di blok

Kamis, 18 Agustus 2016


Membuat Banner Iklan Dengan Css - Seperti yang sudah kita tahu bahwa Banner Iklan berperilaku seperti poster dan baliho dimana di dalamnya berfungsi untuk memajang beraneka informasi sesuai dengan pihak yang bersangkutan. 
Banner iklan bisa sangat mudah kita jumpai di pinggir jalan dan tempat-tempat strategis dengan tujuan agar lebih banyak orang yang melihat dan menjangkau pasar yang luas. Biasanya iklan bertujuan komersil.


Banner iklan tidak hanya bisa kita jumpai di pinggir jalan maupun di berbagai perempatan, karena fungsi tersebut kini dapat diterapkan pada website maupun blog untuk menampilkan iklan berupa produk maupun layanan serta informasi. Pada umumnya, situs website yang memiliki pengunjung akan menampilkan banner baik itu berisi iklan produk sendiri maupun produk dari pihak lain dimana situs website tersebut berperan sebgai pemasar saja.

Dan pada umumnya, banner biasa dibuat dengan media gambar statis JPG, gambar bergerak GIF dan sering pula menggunakan media Animasi Flash. Semua itu tergantung dari penyedia produk.

Namun biasanya, masalah yang muncul ketika memajang banner baik gambar statis, bergerak maupun flash adalah pemuatan halaman akan bermasalah dan membuat situs tidak valid serta tidak responsive karena pada umumnya ukuran banner sudah ditentukan dari penyedia bahkan ketika kita mencoba membuat banner gambar sendiri sekalipun kita akan menentukan ukuran panjang dan lebar media yang akan kita tampilkan dalam hal ini gambar dan video.

Lalu, adakah cara yang lebih baik daripada menggunakan media gambar statis atau bergerak yang kadang membuat situs website menjadi bermasalah ? Tentu ada. yakni dengan menggunakan Css.

Adapun keuntungan yang kita peroleh ketika menggunakan metode ini adalah
- Pemuatan halaman lebih ringan
- Responsive
- Valid struktur data

Cara Membuat Banner Iklan Dengan Css
Yang kita butuhkan dilangkah pertama adalah dengan membuat DOM baru seperti ini

<div class="iklanbox">
<div class="text-iklan">
<a href="https://slideseo.blogspot.com">Buat Website Keren</a>
</div>
<div class="icon-iklan">
<a href="https://slideseo.blogspot.com">Ads by CS</a>
</div>
</div>

Kemudian yang perlu kita lakukan selanjutnya adalah mengatur stylingnya dengan memberikan sentuhan Css sesuai dengan kebutuhan seperti dibawah ini


.iklanbox {
  position:relative;
  width:100%;
  height:90px;
  display:table;
  table-layout:fixed;
  background:#82a5ce;
overflow:hidden;
}

.text-iklan,.text-iklan a {display:block;line-height:90px;color:#fff;font-size:30px;text-align:center;text-transform:uppercase;margin:0 auto;}
.icon-iklan {position:absolute;top:0;right:-85px;background:#d3d3d3 url(http://2.bp.blogspot.com/--ivaHIgXThk/UnJWU80FLhI/AAAAAAAAF_Y/WrH-8aYijGw/s1600/info-iklan.png) 0 0 no-repeat;width: 100px;height:15px;-webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;}

.icon-iklan a{opacity:0;}
.icon-iklan:hover {right:0;background-position:100% 0;
    padding-right:15px;padding-left:10px;}

.icon-iklan:hover > a {opacity:1;color:#333;}

Secara default, kode diatas akan menciptakan Banner Iklan dengan ukuran tinggi 90px dimana umumnya Banner Iklan utama menggunakan ukuran ini, namun kita bisa dengan mudah mengganti ukurannya tanpa perlu melakukan editing atau memberikan style khusus yang rumit. Untuk mengatur tinggi banner, kita bisa menggunakan class bantuan dengan membuat class dengan atribut khusus seperti ini


.side {
   height:250px;
}
.longside {
   height:600px;
}

Kemudian untuk DOM nya kita berikan class yang sudah kita buat tadi dengan mengakses element utama banner yakni

<div class="iklanbox side">
// untuk membuat banner bertinggi 250px dibagian sidebar, dan
<div class="iklanbox longside">
// untuk membuat banner besar dengan tinggi 600px pada sidebar.
Bagaimana dengan setup pada sisi lebar atau panjangnya ? Seperti yang sudah disebut diatas, ukuran ini akan selalu mengikuti luas daerah tempat ia diletakkan, semisal sidebar situs website memiliki ukuran 300px, maka banner ini akan memiliki ukuran yang sama dengan sidebar tersebut. Kemudian kita ingin membuat teks atau kontennya bergerak, bagaimana caranya ? Yang kita butuhkan sebagai ekseutornya cukup menggunakan Css @keyframe seperti dibawah ini Karena disini kita hanya ingin menampilkan Teks yang bergerak, maka elemen yang kita eksekusi adalah .text-iklan

.text-iklan{
  animation: animationFrames ease 10s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 10s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
  -moz-animation: animationFrames ease 10s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 10s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 10s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{

  0% {
    opacity:0;
    transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    transform:  translate(30px,0px)  ;
  }

  80% {
    transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }

}

@-moz-keyframes animationFrames{

  0% {
    opacity:0;
    -moz-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -moz-transform:  translate(30px,0px)  ;
  }

  80% {
    -moz-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }

}

@-webkit-keyframes animationFrames {

  0% {
    opacity:0;
    -webkit-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -webkit-transform:  translate(30px,0px)  ;
  }

  80% {
    -webkit-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }

}

@-o-keyframes animationFrames {

  0% {
    opacity:0;
    -o-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -o-transform:  translate(30px,0px)  ;
  }

  80% {
    -o-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }

}

@-ms-keyframes animationFrames {

  0% {
    opacity:0;
    -ms-transform:  translate(-1500px,0px)  ;
  }

  60% {
    opacity:1;
    -ms-transform:  translate(30px,0px)  ;
  }

  80% {
    -ms-transform:  translate(-10px,0px)  ;
  }

  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }

}

Jika anda ingin menggunakan animasi dengan gaya lain, silahkan menuju Kesini 

Contoh



Silahkan disesuaikan sendiri mengenai warna dan teks yang ingin ditampilkan serta gambar apa yang ingin ditampilkan dan animasi apa yang akan digunakan untuk masing-masing kontennya. Kreasikan dengan bebas ... dan semoga informasi dan tutorial ini bermanfaat.
Cara Ampuh Tingkatkan Page View Blog - kali ini saya akan berbagi trik yang ampuh sekali untuk meningkatkan pageview blog dengan sangat sangar ! Ya ... saya bilang sangar dan pokoknya Joss dah .

Caranya gimana  ???

Nah itu dia yang akan saya bahas di artikel ini .
Kebetulan tadi saya habis jalan-jalan di sebuah blog yang membuat bingung dan bilang "orang yang aneh yang punya blog ini" haha . Kenapa saya bilang aneh ... ?

Pas saya lihat statistik widget blog itu saya sempat bilang Hmmmeeh pantesan aja ... Page view blog tersebut sudah tembus 10 jutaan lebih >.< wooow ...

Padahal materinya biasa saja saya bilang . cuma post-post berita . Tapi dia pakai trik yang tidak saya sangka sama sekali . Yaitu dengan auto refresh . Nah loh ...

Caranya gampang sekali jika anda pengen pakai trik ini . Dan silahkan rasakan meledaknya pageviews di blog anda .

Cara Meningkatkan Pageviews dengan Auto Refresh


Untuk menggunakan cara ini , silahkan masuk ke template anda dan letakkan kode dibawah ini dibawah kode <head>

<meta content='200' http-equiv='refresh'/>
Simpan template anda . Selesai !

NB:
Ubah Angka "200" sesuai keinginan anda  . Angka tersebut adalah nilai Detik , jadi setiap 200 detik page yang tengah terbuka akan otomatis refresh ( Reload page ) dan itu tentu masuk perhitungan pageview .

Sekian...
Sebelumnya saya sudah memosting dan membahas Cara Menggunakan Icon Font Awesome Pada Css Dan HTML,pada kesempatan ini saya akan kembali memosting Daftar Kode Icon Font Awesome Lengkap.Nah but yang belum tau  Apa Itu Icon Font Awesome ?
Font Awesome adalah jenis font yang berbentuk gambar atau icon yang digunakan untuk mempercatik  tampilan blog atau website, Font awesome sendiri memiliki banyak versi, ada yang lama dan ada yang terbaru. Yang membedakan yang lama dengan yang baru adalah untuk versi terbaru biasanya ada penambahan ikon-ikon unik dan menarik.

Kelebihan Icon Font Awesome 

  • Ringan, bisa mempercepat loading blog karena biasanya yang digunakan adalah image atau gambar ikon.
  • Gratis alias Free , bisa digunakan untuk komersial maupun non komersial.
  • Icon akan terlihat sempurna di dalam ukuran font berapapun.
  • Mudah untuk diberikan Style CSS dan bisa di warnai.
  • Compatible dengan Bootsrap 3.0.0.
  • Support dengan Browser lama.
Okey langsung saja saya sajikan Daftar Kode Icon Font Awesome Lengkap.Dibawah Ini :


Daftar Kode Icon Font Awesome Lengkap

  •  fa-glass "\f000"
  •  fa-music "\f001"
  •  fa-search "\f002"
  •  fa-envelope-o "\f003"
  •  fa-heart "\f004"
  •  fa-star "\f005"
  •  fa-star-o "\f006"
  •  fa-user "\f007"
  •  fa-film "\f008"
  •  fa-th-large "\f009"
  •  fa-th "\f00a"
  •  fa-th-list "\f00b"
  •  fa-check "\f00c"
  •  fa-times "\f00d"
  •  fa-search-plus "\f00e"
  •  fa-search-minus "\f010"
  •  fa-power-off "\f011"
  •  fa-signal "\f012"
  •  fa-cog "\f013"
  •  fa-trash-o "\f014"
  •  fa-home "\f015"
  •  fa-file-o "\f016"
  •  fa-clock-o "\f017"
  •  fa-road "\f018"
  •  fa-download "\f019"
  •  fa-arrow-circle-o-down "\f01a"
  •  fa-arrow-circle-o-up "\f01b"
  •  fa-inbox "\f01c"
  •  fa-play-circle-o "\f01d"
  •  fa-repeat "\f01e"
  •  fa-refresh "\f021"
  •  fa-list-alt "\f022"
  •  fa-lock "\f023"
  •  fa-flag "\f024"
  •  fa-headphones "\f025"
  •  fa-volume-off "\f026"
  •  fa-volume-down "\f027"
  •  fa-volume-up "\f028"
  •  fa-qrcode "\f029"
  •  fa-barcode "\f02a"
  •  fa-tag "\f02b"
  •  fa-tags "\f02c"
  •  fa-book "\f02d"
  •  fa-bookmark "\f02e"
  •  fa-print "\f02f"
  •  fa-camera "\f030"
  •  fa-font "\f031"
  •  fa-bold "\f032"
  •  fa-italic "\f033"
  •  fa-text-height "\f034"
  •  fa-text-width "\f035"
  •  fa-align-left "\f036"
  •  fa-align-center "\f037"
  •  fa-align-right "\f038"
  •  fa-align-justify "\f039"
  •  fa-list "\f03a"
  •  fa-outdent "\f03b"
  •  fa-indent "\f03c"
  •  fa-video-camera "\f03d"
  •  fa-picture-o "\f03e"
  •  fa-pencil "\f040"
  •  fa-map-marker "\f041"
  •  fa-adjust "\f042"
  •  fa-tint "\f043"
  •  fa-pencil-square-o "\f044"
  •  fa-share-square-o "\f045"
  •  fa-check-square-o "\f046"
  •  fa-arrows "\f047"
  •  fa-step-backward "\f048"
  •  fa-fast-backward "\f049"
  •  fa-backward "\f04a"
  •  fa-play "\f04b"
  •  fa-pause "\f04c"
  •  fa-stop "\f04d"
  •  fa-forward "\f04e"
  •  fa-fast-forward "\f050"
  •  fa-step-forward "\f051"
  •  fa-eject "\f052"
  •  fa-chevron-left "\f053"
  •  fa-chevron-right "\f054"
  •  fa-plus-circle "\f055"
  •  fa-minus-circle "\f056"
  •  fa-times-circle "\f057"
  •  fa-check-circle "\f058"
  •  fa-question-circle "\f059"
  •  fa-info-circle "\f05a"
  •  fa-crosshairs "\f05b"
  •  fa-times-circle-o "\f05c"
  •  fa-check-circle-o "\f05d"
  •  fa-ban "\f05e"
  •  fa-arrow-left "\f060"
  •  fa-arrow-right "\f061"
  •  fa-arrow-up "\f062"
  •  fa-arrow-down "\f063"
  •  fa-share "\f064"
  •  fa-expand "\f065"
  •  fa-compress "\f066"
  •  fa-plus "\f067"
  •  fa-minus "\f068"
  •  fa-asterisk "\f069"
  •  fa-exclamation-circle "\f06a"
  •  fa-gift "\f06b"
  •  fa-leaf "\f06c"
  •  fa-fire "\f06d"
  •  fa-eye "\f06e"
  •  fa-eye-slash "\f070"
  •  fa-exclamation-triangle "\f071"
  •  fa-plane "\f072"
  •  fa-calendar "\f073"
  •  fa-random "\f074"
  •  fa-comment "\f075"
  •  fa-magnet "\f076"
  •  fa-chevron-up "\f077"
  •  fa-chevron-down "\f078"
  •  fa-retweet "\f079"
  •  fa-shopping-cart "\f07a"
  •  fa-folder "\f07b"
  •  fa-folder-open "\f07c"
  •  fa-arrows-v "\f07d"
  •  fa-arrows-h "\f07e"
  •  fa-bar-chart "\f080"
  •  fa-twitter-square "\f081"
  •  fa-facebook-square "\f082"
  •  fa-camera-retro "\f083"
  •  fa-key "\f084"
  •  fa-cogs "\f085"
  •  fa-comments "\f086"
  •  fa-thumbs-o-up "\f087"
  •  fa-thumbs-o-down "\f088"
  •  fa-star-half "\f089"
  •  fa-heart-o "\f08a"
  •  fa-sign-out "\f08b"
  •  fa-linkedin-square "\f08c"
  •  fa-thumb-tack "\f08d"
  •  fa-external-link "\f08e"
  •  fa-sign-in "\f090"
  •  fa-trophy "\f091"
  •  fa-github-square "\f092"
  •  fa-upload "\f093"
  •  fa-lemon-o "\f094"
  •  fa-phone "\f095"
  •  fa-square-o "\f096"
  •  fa-bookmark-o "\f097"
  •  fa-phone-square "\f098"
  •  fa-twitter "\f099"
  •  fa-facebook "\f09a"
  •  fa-github "\f09b"
  •  fa-unlock "\f09c"
  •  fa-credit-card "\f09d"
  •  fa-rss "\f09e"
  •  fa-hdd-o "\f0a0"
  •  fa-bullhorn "\f0a1"
  •  fa-bell "\f0f3"
  •  fa-certificate "\f0a3"
  •  fa-hand-o-right "\f0a4"
  •  fa-hand-o-left "\f0a5"
  •  fa-hand-o-up "\f0a6"
  •  fa-hand-o-down "\f0a7"
  •  fa-arrow-circle-left "\f0a8"
  •  fa-arrow-circle-right "\f0a9"
  •  fa-arrow-circle-up "\f0aa"
  •  fa-arrow-circle-down "\f0ab"
  •  fa-globe "\f0ac"
  •  fa-wrench "\f0ad"
  •  fa-tasks "\f0ae"
  •  fa-filter "\f0b0"
  •  fa-briefcase "\f0b1"
  •  fa-arrows-alt "\f0b2"
  •  fa-users "\f0c0"
  •  fa-link "\f0c1"
  •  fa-cloud "\f0c2"
  •  fa-flask "\f0c3"
  •  fa-scissors "\f0c4"
  •  fa-files-o "\f0c5"
  •  fa-paperclip "\f0c6"
  •  fa-floppy-o "\f0c7"
  •  fa-square "\f0c8"
  •  fa-bars "\f0c9"
  •  fa-list-ul "\f0ca"
  •  fa-list-ol "\f0cb"
  •  fa-strikethrough "\f0cc"
  •  fa-underline "\f0cd"
  •  fa-table "\f0ce"
  •  fa-magic "\f0d0"
  •  fa-truck "\f0d1"
  •  fa-pinterest "\f0d2"
  •  fa-pinterest-square "\f0d3"
  •  fa-google-plus-square "\f0d4"
  •  fa-google-plus "\f0d5"
  •  fa-money "\f0d6"
  •  fa-caret-down "\f0d7"
  •  fa-caret-up "\f0d8"
  •  fa-caret-left "\f0d9"
  •  fa-caret-right "\f0da"
  •  fa-columns "\f0db"
  •  fa-sort "\f0dc"
  •  fa-sort-desc "\f0dd"
  •  fa-sort-asc "\f0de"
  •  fa-envelope "\f0e0"
  •  fa-linkedin "\f0e1"
  •  fa-undo "\f0e2"
  •  fa-gavel "\f0e3"
  •  fa-tachometer "\f0e4"
  •  fa-comment-o "\f0e5"
  •  fa-comments-o "\f0e6"
  •  fa-bolt "\f0e7"
  •  fa-sitemap "\f0e8"
  •  fa-umbrella "\f0e9"
  •  fa-clipboard "\f0ea"
  •  fa-lightbulb-o "\f0eb"
  •  fa-exchange "\f0ec"
  •  fa-cloud-download "\f0ed"
  •  fa-cloud-upload "\f0ee"
  •  fa-user-md "\f0f0"
  •  fa-stethoscope "\f0f1"
  •  fa-suitcase "\f0f2"
  •  fa-bell-o "\f0a2"
  •  fa-coffee "\f0f4"
  •  fa-cutlery "\f0f5"
  •  fa-file-text-o "\f0f6"
  •  fa-building-o "\f0f7"
  •  fa-hospital-o "\f0f8"
  •  fa-ambulance "\f0f9"
  •  fa-medkit "\f0fa"
  •  fa-fighter-jet "\f0fb"
  •  fa-beer "\f0fc"
  •  fa-h-square "\f0fd"
  •  fa-plus-square "\f0fe"
  •  fa-angle-double-left "\f100"
  •  fa-angle-double-right "\f101"
  •  fa-angle-double-up "\f102"
  •  fa-angle-double-down "\f103"
  •  fa-angle-left "\f104"
  •  fa-angle-right "\f105"
  •  fa-angle-up "\f106"
  •  fa-angle-down "\f107"
  •  fa-desktop "\f108"
  •  fa-laptop "\f109"
  •  fa-tablet "\f10a"
  •  fa-mobile "\f10b"
  •  fa-circle-o "\f10c"
  •  fa-quote-left "\f10d"
  •  fa-quote-right "\f10e"
  •  fa-spinner "\f110"
  •  fa-circle "\f111"
  •  fa-reply "\f112"
  •  fa-github-alt "\f113"
  •  fa-folder-o "\f114"
  •  fa-folder-open-o "\f115"
  •  fa-smile-o "\f118"
  •  fa-frown-o "\f119"
  •  fa-meh-o "\f11a"
  •  fa-gamepad "\f11b"
  •  fa-keyboard-o "\f11c"
  •  fa-flag-o "\f11d"
  •  fa-flag-checkered "\f11e"
  •  fa-terminal "\f120"
  •  fa-code "\f121"
  •  fa-reply-all "\f122"
  •  fa-star-half-o "\f123"
  •  fa-location-arrow "\f124"
  •  fa-crop "\f125"
  •  fa-code-fork "\f126"
  •  fa-chain-broken "\f127"
  •  fa-question "\f128"
  •  fa-info "\f129"
  •  fa-exclamation "\f12a"
  •  fa-superscript "\f12b"
  •  fa-subscript "\f12c"
  •  fa-eraser "\f12d"
  •  fa-puzzle-piece "\f12e"
  •  fa-microphone "\f130"
  •  fa-microphone-slash "\f131"
  •  fa-shield "\f132"
  •  fa-calendar-o "\f133"
  •  fa-fire-extinguisher "\f134"
  •  fa-rocket "\f135"
  •  fa-maxcdn "\f136"
  •  fa-chevron-circle-left "\f137"
  •  fa-chevron-circle-right "\f138"
  •  fa-chevron-circle-up "\f139"
  •  fa-chevron-circle-down "\f13a"
  •  fa-html5 "\f13b"
  •  fa-css3 "\f13c"
  •  fa-anchor "\f13d"
  •  fa-unlock-alt "\f13e"
  •  fa-bullseye "\f140"
  •  fa-ellipsis-h "\f141"
  •  fa-ellipsis-v "\f142"
  •  fa-rss-square "\f143"
  •  fa-play-circle "\f144"
  •  fa-ticket "\f145"
  •  fa-minus-square "\f146"
  •  fa-minus-square-o "\f147"
  •  fa-level-up "\f148"
  •  fa-level-down "\f149"
  •  fa-check-square "\f14a"
  •  fa-pencil-square "\f14b"
  •  fa-external-link-square "\f14c"
  •  fa-share-square "\f14d"
  •  fa-compass "\f14e"
  •  fa-caret-square-o-down "\f150"
  •  fa-caret-square-o-up "\f151"
  •  fa-caret-square-o-right "\f152"
  •  fa-eur "\f153"
  •  fa-gbp "\f154"
  •  fa-usd "\f155"
  •  fa-inr "\f156"
  •  fa-jpy "\f157"
  •  fa-rub "\f158"
  •  fa-krw "\f159"
  •  fa-btc "\f15a"
  •  fa-file "\f15b"
  •  fa-file-text "\f15c"
  •  fa-sort-alpha-asc "\f15d"
  •  fa-sort-alpha-desc "\f15e"
  •  fa-sort-amount-asc "\f160"
  •  fa-sort-amount-desc "\f161"
  •  fa-sort-numeric-asc "\f162"
  •  fa-sort-numeric-desc "\f163"
  •  fa-thumbs-up "\f164"
  •  fa-thumbs-down "\f165"
  •  fa-youtube-square "\f166"
  •  fa-youtube "\f167"
  •  fa-xing "\f168"
  •  fa-xing-square "\f169"
  •  fa-youtube-play "\f16a"
  •  fa-dropbox "\f16b"
  •  fa-stack-overflow "\f16c"
  •  fa-instagram "\f16d"
  •  fa-flickr "\f16e"
  •  fa-adn "\f170"
  •  fa-bitbucket "\f171"
  •  fa-bitbucket-square "\f172"
  •  fa-tumblr "\f173"
  •  fa-tumblr-square "\f174"
  •  fa-long-arrow-down "\f175"
  •  fa-long-arrow-up "\f176"
  •  fa-long-arrow-left "\f177"
  •  fa-long-arrow-right "\f178"
  •  fa-apple "\f179"
  •  fa-windows "\f17a"
  •  fa-android "\f17b"
  •  fa-linux "\f17c"
  •  fa-dribbble "\f17d"
  •  fa-skype "\f17e"
  •  fa-foursquare "\f180"
  •  fa-trello "\f181"
  •  fa-female "\f182"
  •  fa-male "\f183"
  •  fa-gittip "\f184"
  •  fa-sun-o "\f185"
  •  fa-moon-o "\f186"
  •  fa-archive "\f187"
  •  fa-bug "\f188"
  •  fa-vk "\f189"
  •  fa-weibo "\f18a"
  •  fa-renren "\f18b"
  •  fa-pagelines "\f18c"
  •  fa-stack-exchange "\f18d"
  •  fa-arrow-circle-o-right "\f18e"
  •  fa-arrow-circle-o-left "\f190"
  •  fa-caret-square-o-left "\f191"
  •  fa-dot-circle-o "\f192"
  •  fa-wheelchair "\f193"
  •  fa-vimeo-square "\f194"
  •  fa-try "\f195"
  •  fa-plus-square-o "\f196"
  •  fa-space-shuttle "\f197"
  •  fa-slack "\f198"
  •  fa-envelope-square "\f199"
  •  fa-wordpress "\f19a"
  •  fa-openid "\f19b"
  •  fa-university "\f19c"
  •  fa-graduation-cap "\f19d"
  •  fa-yahoo "\f19e"
  •  fa-google "\f1a0"
  •  fa-reddit "\f1a1"
  •  fa-reddit-square "\f1a2"
  •  fa-stumbleupon-circle "\f1a3"
  •  fa-stumbleupon "\f1a4"
  •  fa-delicious "\f1a5"
  •  fa-digg "\f1a6"
  •  fa-pied-piper "\f1a7"
  •  fa-pied-piper-alt "\f1a8"
  •  fa-drupal "\f1a9"
  •  fa-joomla "\f1aa"
  •  fa-language "\f1ab"
  •  fa-fax "\f1ac"
  •  fa-building "\f1ad"
  •  fa-child "\f1ae"
  •  fa-paw "\f1b0"
  •  fa-spoon "\f1b1"
  •  fa-cube "\f1b2"
  •  fa-cubes "\f1b3"
  •  fa-behance "\f1b4"
  •  fa-behance-square "\f1b5"
  •  fa-steam "\f1b6"
  •  fa-steam-square "\f1b7"
  •  fa-recycle "\f1b8"
  •  fa-car "\f1b9"
  •  fa-taxi "\f1ba"
  •  fa-tree "\f1bb"
  •  fa-spotify "\f1bc"
  •  fa-deviantart "\f1bd"
  •  fa-soundcloud "\f1be"
  •  fa-database "\f1c0"
  •  fa-file-pdf-o "\f1c1"
  •  fa-file-word-o "\f1c2"
  •  fa-file-excel-o "\f1c3"
  •  fa-file-powerpoint-o "\f1c4"
  •  fa-file-image-o "\f1c5"
  •  fa-file-archive-o "\f1c6"
  •  fa-file-audio-o "\f1c7"
  •  fa-file-video-o "\f1c8"
  •  fa-file-code-o "\f1c9"
  •  fa-vine "\f1ca"
  •  fa-codepen "\f1cb"
  •  fa-jsfiddle "\f1cc"
  •  fa-life-ring "\f1cd"
  •  fa-circle-o-notch "\f1ce"
  •  fa-rebel "\f1d0"
  •  fa-empire "\f1d1"
  •  fa-git-square "\f1d2"
  •  fa-git "\f1d3"
  •  fa-hacker-news "\f1d4"
  •  fa-tencent-weibo "\f1d5"
  •  fa-qq "\f1d6"
  •  fa-weixin "\f1d7"
  •  fa-paper-plane "\f1d8"
  •  fa-paper-plane-o "\f1d9"
  •  fa-history "\f1da"
  •  fa-circle-thin "\f1db"
  •  fa-header "\f1dc"
  •  fa-paragraph "\f1dd"
  •  fa-sliders "\f1de"
  •  fa-share-alt "\f1e0"
  •  fa-share-alt-square "\f1e1"
  •  fa-bomb "\f1e2"
  •  fa-futbol-o "\f1e3"
  •  fa-tty "\f1e4"
  •  fa-binoculars "\f1e5"
  •  fa-plug "\f1e6"
  •  fa-slideshare "\f1e7"
  •  fa-twitch "\f1e8"
  •  fa-yelp "\f1e9"
  •  fa-newspaper-o "\f1ea"
  •  fa-wifi "\f1eb"
  •  fa-calculator "\f1ec"
  •  fa-paypal "\f1ed"
  •  fa-google-wallet "\f1ee"
  •  fa-cc-visa "\f1f0"
  •  fa-cc-mastercard "\f1f1"
  •  fa-cc-discover "\f1f2"
  •  fa-cc-amex "\f1f3"
  •  fa-cc-paypal "\f1f4"
  •  fa-cc-stripe "\f1f5"
  •  fa-bell-slash "\f1f6"
  •  fa-bell-slash-o "\f1f7"
  •  fa-trash "\f1f8"
  •  fa-copyright "\f1f9"
  •  fa-at "\f1fa"
  •  fa-eyedropper "\f1fb"
  •  fa-paint-brush "\f1fc"
  •  fa-birthday-cake "\f1fd"
  •  fa-area-chart "\f1fe"
  •  fa-pie-chart "\f200"
  •  fa-line-chart "\f201"
  •  fa-lastfm "\f202"
  •  fa-lastfm-square "\f203"
  •  fa-toggle-off "\f204"
  •  fa-toggle-on "\f205"
  •  fa-bicycle "\f206"
  •  fa-bus "\f207"
  •  fa-ioxhost "\f208"
  •  fa-angellist "\f209"
  •  fa-cc "\f20a"
  •  fa-ils "\f20b"
  •  fa-meanpath "\f20c"


Demikian mengenai Daftar Kode Icon Font Awesome Lengkap. Silahkan anda bereksperimen sendiri agar tampilan web/blog anda semakin terlihat keren.


Tips !!
Agar bisa menggunakan Font Awesome, maka anda perlu menambahkan stylesheet dibawah ini kemudian menyimpannya di atas kode </head>


<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Untuk cara pemasangan kode font awesomenya dapat dilihat Disini

Oke sekian dari saya..