

NEW!! » Premium Support - PHP, MySQL, Dll Buku Query MySQL Lihat Detail » x

 Tutorial Web Development…

Home » CSS Tutorial » Membuat 15 Efek Social Media Button

Search... 
Dengan CSS Part I

Membuat 15 Efek Social Media Newsletter

Button Dengan CSS Part I Jadilah yang pertama
tahu berita terbaru dari
 Agus Prawoto Hadi  12-09-2016 Jagowebdev.com

 CSS Tutorial
Nama Lengkap

Hi Sobat… ketika kita  browsing dan membuka berbagai

Email
website, sering kita temui  berbagai social media button
dengan berbagai efek menarik,. Subscribe

Efek tersebut biasanya muncul ketika kita arahkan mouse

diatasnya (:hover) , nah bagi yang penasaran bagaimana cara
membuatnya, pada kesempatan ini kita akan membahasnya
lebih dalam.

Kita akan buat beberapa button, tepatnya 15 button  dengan

efek seperti  ini:

    
Effect 1 Effect 2 Effect 3 Effect 4 Effect 5

E-Book Terbaru
    
VIMEO

Effect 6 Effect 7 Effect 8 Effect 9 Effect 10

    
Effect 11 Effect 12 Effect 13 Effect 14 Effect 15
  FULL DEMO  Download

Jika sobat ingin langsung memakainya bisa langsung diklik

tombol download, tinggal diedit file css-nya sesuai keperluan.
Jika ingin melihat demo secara keseluruhan, silakan klik
tombol demo.
Optimasi Query
Pembahasan dibagi menjadi dua bagian, untuk bagian II dapat Database
diikuti  pada link: Membuat 15 Efek Social Media Button MySQL/MariaDB
Dengan CSS Part II.

I. Persiapan
Sebelum kita membuat efek social media button, terlebih
dahulu kita lakukan beberapa persiapan

Dukungan Browser
Efek yang dibahas pada tutorial ini dapat berjalan dengan baik
di browser modern, karena browser tersebut telah
mendukung css property transition.

Property ini merupakan komponen utama untuk Kupas Tuntas

membuat perpindahan element menjadi halus. Teknik Olah Data
Dengan Query
Khusus untuk Internet Explorer property ini hanya dapat MySQL
berjalan dengan baik di versi 10 keatas, karena untuk versi 9
kebawah tidak mendukung property transition dan property
sejenis yang berkaitan dengan animasi.

Icon Font
Sebelum masuk ke pembahasan, perlu untuk dibahas jenis
icon yang digunakan.

Pada tutorial ini kita menggunakan  icon font, saya

mengambilnya dari iconmoon, salah satu penyedia layanan
icon font yang bagus dan populer.

Icon tersebut bisa langsung digunakan dengan menambahkan Panduan Lengkap

class dengan awalan icon-, misal icon-facebook, namun agar Query MySQL -
lebih fleksibel, kita akan mendefinisikannya sendiri. Tutorial dan
Referensi Lengkap
Untuk definisi awal, kita buat terlebih dahulu file css yaitu  effe Query MySQL
ct_main_single.css , file tersebut  akan selalu kita gunakan di
setiap pembahasan, selanjutnya isikan css rule pada file
tersebut:
 1 @font-face {
2 font-family: 'icomoon';
src:url('fonts/icomoon/icomoon.eot?w6aef1
Like Us
3
4 src:url('fonts/icomoon/icomoon.eot?w6aef1
5 url('fonts/icomoon/icomoon.ttf?w6aef1 Follow
Like
6 url('fonts/icomoon/icomoon.woff?w6aef
url('fonts/icomoon/icomoon.svg?w6aef1 Google+ +1
7
8 font-weight: normal;
9 font-style: normal;
10 }
11 a { Social
12 font-family: icomoon;
13 font-size: 40px;
14 line-height: 65px;   Facebook
15 speak: none;
16 color: #5D5D5D;
text-decoration: none;
  Twitter
17
18 text-align: center;
19 display: inline-block;   Google Plus
20 position: relative;
idth 64   RSS

Pada definisi awal ini, element <a> yang merupakan element

utama kita buat dimensinya sebesar 64 x 64px, dengan font
family icomoon, akan membuat element <a> dan childrennya
Artikel Pilihan
hanya dapat diisi icon.

Maksudnya bisa diisikan teks lain tapi jenis font-nya tetap Membuat
icomoon sehingga tidak pas, karena memang pada tutorial ini Tabel
kita hanya akan memakai icon. Responsive
Dengan CSS – 4
Struktur Folder Alternatif

Untuk struktur foldernya, kita buat folder misal  Sample CSS Cookie Pada
Effect untuk menyimpan file html, kemudian didalamnya kita PHP –
buat folder  css untuk menyimpan file  effect_main_single.cs Panduan
s dan folder icon_fonts/icomoon untuk menyimpan file fonts. Lengkap

Struktur foldernya seperti tampak pada gambar berikut:

Mendesain
Form Login
Dengan CSS
3 – Clean dan
Responsive

10 Ide
Desain
Tabel
 Menarik Dengan CSS
3 – Fresh Design

untuk setiap pembahasan,  sobat bisa langsung klik Demo Character

Single untuk melihat langsung source code yang digunakan. Set dan
Collation

II. Membuat Social Media Pada MySQL – Yakin

Sudah Paham?
Button Dengan Efek Menarik
Membuat 15
1. Efek 1: Membuat efek slide up pada Efek Social

icon dengan css  TOP Media

Button Dengan CSS
Part I
Untuk membuat efek ini, element yang kita perlukan adalah:

1 Element <a> sebagai element  utama dengan Memahami

background warna abu-abu terang. GET dan
POST Pada
2 Pseudo element  :before dengan icon berwarna abu-
PHP dan HTTP
abu, tanpa background dan

3 Pseudo element :after dengan icon berwarna putih, Memahami

tanpa background. Character
Set dan
Transisi element seperti tampak pada contoh dibawah Character Encoding
(arahkan cursor diatas icon, atau jika menggunakan layar
sentuh, touch dan tahan): Memahami
Session
Pada PHP
  dan Penggunaannya


RECENT RANDOM COMMENT

contoh untuk beberapa set icon:

1 Trik Coding Cepat

dan E sien Pada
      PHP

    2 PHP Admin
Template
Dashboard
Pada contoh diatas, kotak berwarna biru adalah element :bef
ore sedangkan yang berwarna hijau  adalah element :after Pre x Tabel Pada
3
Kode HTML yang kita gunakan adalah: Database, Perlukah?
 1 <a class="fb" href="#"></a> Same Origin Policy
4
– Apa dan
Sedangkan untuk css nya: Bagaimana
Mengatasinya?

1 .fb{
2 background-color: #EAEAEA; JSONP Dengan
5
3 } Javascript dan
4 .fb:before,
jQuery – Lintas
5 .fb:after {
Domain
6 content: "f09a";
7 position: absolute;
8 width: 100%; 6 JSON Pada
9 height: 100%; Javascript –
10 left: 0; Panduan Lengkap
11 }
12 .fb:before {
7 JSON Pada
13 top: 0;
} Dokumen HTML
14
15 .fb:after {
16 top: 100%; JSON Dari Database
8
17 color: #FFFFFF; – PHP dan MySQL
18 }
19 .fb:hover {
20 background-color: #3b5998; 9 Memahami JSON
21 } Pada PHP

 Demo Single 10 Panduan Lengkap

Memahami JSON

Penjelasan:

Baris 15  akan memposisikan element :after di sebelah Kategori

bawah element <a> ,
2
 CODE EDITOR
Ketika terjadi event :hover , baris 24  akan menggeser
element :before keatas dan baris 27  akan  menggeser
21
 CSS TUTORIAL
element :after keatas.

1
 HTML TUTORIAL
2. Efek 2: Membuat efek slide up-
down pada icon dengan css   TOP  INSPIRASI 1

Efek ini sama seperti efek nomor 1, baik penggunaan element 1

 JAVASCRIPT
maupun posisi element, bedanya element :before   akan
TUTORIAL
bergeser ke bawah, tidak keatas. Transisi element  seperti
tampak pada icon berikut:
 JQUERY TUTORIAL4
 
6
 JSON

7
 LAINNYA
 
15
 MYSQL TUTORIAL

contoh untuk beberapa set icon:

3
 OPTIMASI WEB

       PHP TUTORIAL 52

   
6
 PHPMYADMIN

2
 WEB HOSTING
Keterangan:  kotak dengan border berwarna  biru adalah
element :before sedangkan yang berwarna hijau  adalah 7
 WEB
element :after Kode HTML yang kita perlukan:
OPTIMIZATION

1 <a class="dribbble" href="#"></a> 9

 WORDPRESS

Sedangkan kode css nya sama seperti efek nomor 1 hanya  XAMPP TUTORIAL5
pada line 27 diubah dari top: -100% menjadi top:  100%.

 Demo Single

3. Efek 3: Membuat efek slide to right

pada icon dengan css  TOP
Efek ini juga sama seperti efek sebelumnya, bedanya jika pada
efek sebelumnya  transisi terjadi pada  warna background
element <a> , pada efek ini element yang digeser memiliki
background sendiri.

Element yang kita gunakan juga sama yaitu:

1 Element <a> yang berperan sebagai container,

dengan background abu-abu terang.

2 Pseudo element  :before dengan icon berwarna abu-

abu, tanpa background, dan

3 Pseudo element :after dengan icon berwarna putih

dengan background berwarna hijau.

Transisi element tampak sebagai berikut:

   
contoh untuk beberapa set icon:

     
   
pada icon diatas, element dengan border berwarna biru
merupakan element :before , sedangkan yang berwarna hijau
merupakan element :after

Kode HTML yang kita perlukan:

1 <a class="su" href="#"></a>

Sedangkan untuk css nya:

1 .su {
2 background-color: #EAEAEA;
3 }
4 .su:before,
5 .su:after {
6 position: absolute;
7 content: "f1a4";
8 width: 100%;
9 height: 100%;
10 }
11 .su:before {
12 top: 0;
13 left: 0;
14 }
15 .su:after {
16 top: 0;
17 left: -100%;
18 background-color: #5FBB4C;
19 color: #FFFFFF;
20 }
21 .su:hover:before{

 Demo Single
Penjelasan:

Baris 17 akan membuat element :after berada di sebelah

kiri.

Saat terjadi event :hover , baris 22 dan 25 masing-masing

akan menggeser element :before dan :after ke kanan.

4. Efek 4: Membuat efek kubus (cube)

pada icon dengan css  TOP
Efek ini akan membuat element berputar seperti kubus, untuk
transisi elemennya terdapat dua macam bentuk, yaitu:

a. Transisi menyerupai kubus

Pada efek ini, transisi seolah olah menyerupai kubus, namun

bukan benar-benar kubus karena sedikit terjadi overlap antar
element.

Dengan nilai transisi yang kecil, overlap tersebut tidak

kelihatan, yang tampak adalah pergeseran yang halus,
ditambah dengan efek fade in-out akan memperindah  efek
yang dihasilkan.

Untuk membuat efek ini, element yang kita perlukan adalah:

1 Element <a> yang berperan sebagai container dan

perspective 3D untuk element childrennya ( :before
dan :after ), namun secara visual tidak terlihat.

2 Pseudo element  :before dengan  icon dan

dengan background warna tertentu, dan

3 Pseudo element :after dengan icon dan background

warna tertentu.

Transisi element seperti tampak pada contoh berikut:

 
contoh untuk beberapa set icon:

     
    
Pada contoh diatas, element dengan border berwarna merah
adalah element <a> , yang berwarna biru adalah element :af
ter , dan yang berwarna hijau adalah element :after .

Kode HTML yang diperlukan:

1 <a class="gplus" href="#"></a>

sedangkan css rule nya:

1 .gplus {
2 background:none
3 overflow: visible;
4 perspective: 300px;
5 }
6 .gplus:before,
7 .gplus:after {
8 position: absolute;
9 top: 0;
10 left: 0;
11 content: "f0d5";
12 width: 100%;
13 height: 100%;
14 }
15 .gplus:before {
16 z-index: 1;
17 background-color: #EAEAEA;
18 }
19 .gplus:after {
20 background-color: #d34836;
l #FFFFFF

 Demo Single

Penjelasan:

Perspective pada baris nomor 3 digunakan untuk sudut

pandang efek 3D untuk element :before dan :after ,

Baris 23 akan memposisikan element :after dibawah

dengan rotasi sebesar 90° berlawanan arah jarum jam.

Ketika terjadi event :hover , baris 27 membuat element :b

efore bergerak ke atas dan berputar 90° searah jarum jam
 dan baris 31 akan membuat element :after berputar










kedepan.

b. Transisi seperti kubus (true cube)

Berbeda dengan versi sebelumnya, pada versi ini, element
akan bergerak berurutan, sehingga akan benar-benar seperti
kubus yang berputar.

Terdapat beberapa teknik untuk membuat efek ini, yang perlu

diperhatikan adalah apakah terjadi “zoom” pada element? baik
sebelum maupun sesudah diputar.

Jika ya, maka sebaiknya cari alternatif cara lain, karena hal
tersebut akan membuat teks menjadi pecah, untuk
mengatasinya  salah satu solusinya adalah kita buat sisi-sisi
kubus berdiri sendiri dan masing-masing memiliki transisi
sendiri-sendiri.

Element yang diperlukan dan pergerakan antar element sama

dengan efek  sebelumnya. Transisi element  seperti tampak
pada contoh berikut:

 
contoh untuk beberapa set icon:

     
   
pada contoh diatas, element dengan border berwarna biru
adalah element :before , sedangkan yang berwarna
hijau (ketika :hover ) adalah element :after .

Kode HTML yang kita perlukan:

1 <a class="gplus-cube" href="#"></a>

sedangkan css yang kita perlukan:

1 .gplus-cube {
2 perspective: 700px;
 3 -webkit-transform-style: preserve-3d;
4 overflow: visible !important;
5 width: 64px;
6 height: 64px;
7 }
8 .gplus-cube:before,
9 .gplus-cube:after {
10 content: "f0d5";
11 position: absolute;
12 width: 100%;
13 height: 100%;
14 left: 0;
15 top: 0;
16 transform-origin: 50% 50% -32px;
17 transition: all 0.3s ease-out;
18 }
19 .gplus-cube:before {
20 z-index: 1;
21 background-color: #d9d9d9;

 Demo Single

Penjelasan:

Perspective pada baris 2 akan menjadi sudut pandang dari

efek 3D, semakin kecil nilainyya maka akan semakin tampak
efek 3D nya.

Baris 26 akan membuat posisi awal element :after

berputar 90° dan baris 16 akan membuatnya berada di
posisi bawah.

Baris 20 akan membuat element before berada di depan

element after

Ketika terjadi event :hover , baris 31 akan memutar

element :before keatas, baris 34 membuat element :afte
r berputar kedepan, dan baris 30 akan membuat element
:after berada di depan element :before .

5. Efek 5: Membuat efek ip pada

icon dengan css  TOP
Efek ini akan membuat element bergerak dengan sumbu
tertentu (flip) ke belakang. Untuk membuat efek ini diperlukan
element:

Element <a> yang berperan sebagai container

 1
(secara visual tidak kelihatan) dan sebagai perspective
3d untuk element :before dan :after .

2 Pseudo element :before dengan icon berwarna abu-

abu dan background berwarna abu-abu terang

3 Pseudo element :after dengan icon berwarna putih

dan background berwarna coklat.

Transisi element tampak seperti contoh berikut:

 
contoh untuk beberapa set icon:

     
   
Pada contoh diatas, element dengan border berwarna merah
adalah element <a> , yang berwarna biru adalah element :be
fore , dan yang berwarna hijau (ketika :hover ) adalah
element :after . Kode HTML yang diperlukan:

1 <a class="instagram" href="#"></a>

sedangkan kode css yang diperlukan:

1 .effect-raw .instagram {
2 background: none;
3 overflow: visible;
4 perspective: 300px;
5 }
6 .effect-raw .instagram:before,
7 .effect-raw .instagram:after {
8 content: "f16d";
9 position: absolute;
10 top: 0;
11 left: 0;
12 width: 100%;
13 height: 100%;
14 }
15 .effect-raw .instagram:before {
 16 background-color: #EAEAEA;
17 -webkit-transform-origin-y: 100%;
18 }
19 .effect-raw .instagram:after {
20 background-color:#DCAD65;
21 color: #FFFFFF;

 Demo Single

Penjelasan:

1 Properti perspective pada baris 3 digunakan sebagai

sudut pemutaran element :before dan :after

2 Baris 17 digunakan sebagai sudut pemutaran element

:before

3 Baris 24 digunakan sebagai sudut pemutaran element

:after dan baris 25 merupakan posisi awal element
:after (berputar 90° berlawanan arah jarum jam)

4 Ketika terjadi event :hover , baris 28 digunakan untuk

memutar element :before 90° searah jarum jam dan
baris 32 untuk memutar element :after 90° searah
jarum jam

6. Efek 6: Membuat efek icon

berputar dengan css  TOP
Efek ini akan membuat icon berputar 360° sebanyak satu kali.
Element yang kita gunakan adalah anchor <a> dan pseduo
element :before , element <a> kita gunakan sebagai
background sedangkan element :before berisi icon.

Transisi element seperti tampak pada contoh berikut:

 
Contoh untuk beberapa set icon:

     
    
Pada contoh diatas, element dengan border warna biru adalah
element :before dan yang berwarna merah adalah element
<a> .

Kode HTML yang kita gunakan:

1 <a class="twitter" href="#"></a>

sedangkan css yang kita gunakan:

1 .twitter {
2 background-color: #5FA9FF;
3 }
4 .twitter:before {
5 color: #FFFFFF;
6 content: "f099";
7 }
8 .twitter:hover {
9 background-color: #2289FF;
10 }
11 .twitter:hover:before{
12 transform: rotate(360deg);
13 }

 Demo Single

Penjelasan: Ketika terjadi event :hover , maka baris 14 akan

merubah warna background pada element <a> dan baris 17
akan membuat element :before berputar 360°.

7. Efek 7: Membuat efek zoom pada

icon dengan css  TOP
Efek ini hanya merubah warna background dan ukuran font,
cukup menggunakan transition, semua perubahan tersebut
terlihat halus.

Element yang kita gunakan cukup <a> dan :before . Element

<a> berfungsi sebagai background   dan element :before
berisi icon. Transisi element seperti contoh berikut:
  
contoh untuk beberapa set icon:

     
   
Pada contoh diatas, element dengan border warna biru adalah
element :before dan yang berwarna merah adalah element
<a>

Kode HTML yang diperlukan:

1 <a class="rss" href="#"></a>

Kode css yang diperlukan:

1 .rss {
2 color: #FFFFFF;
3 background-color: #FF9F5B;
4 }
5 .rss:before {
6 color: #FFFFFF;
7 content: "f09e";
8 }
9 .rss:hover {
10 background-color: #FF7F24;
11 }
12 .rss:hover:before {
13 font-size: 120%;
14 }

 Demo Single

Ketika terjadi event :hover , baris 10 akan mengubah warna

background pada element <a> dan baris 13  akan
memperbesar ukuran icon.

Efek ini akan tidak maksimal jika menggunakan background

gambar, dimana jika gambar di perbesar biasanya akan pecah.

8. Efek 8: Membuat efek perubahan

warna pada icon dengan css  TOP

Efek ini akan merubah warna pada icon ketika mouse berada
di atas icon. Untuk membuatnya kita cukup menggunakan
element <a> sebagai background dan :before sebagai icon.

Transisi warna seperti tampak pada contoh berikut:

 
contoh untuk beberapa set icon:

     
   
Pada contoh diatas, element dengan border warna merah
adalah element , sedangkan yang berwarna biru adalah
element :before Kode HTML yang kita gunakan:

1 <a class="digg" href="#"></a>

Sedangkan style yang kita perlukan:

1 .digg {
2 background: #757575;
3 color: #5D5D5D;
4 }
5 .digg:before {
6 content: "f1a6";
7 }
8 .digg:hover:before {
9 color: #79BAFF;
10 }

 Demo Single

Ketika terjadi event :hover baris 9 akan merubah warna icon

menjadi biru dan property transition akan membuat
perubahan tersebut menjadi halus.
Efek ini akan sulit dilakukan jika kita menggunakan icon
berupa gambar, karena warna icon sudah fixed sesuai dengan
gambar yang ada.

III. Kesimpulan
Pada bagian satu ini kita membahas beberapa efek yang dapat
kita buat hanya dengan menggunakan CSS, diantaranya efek
slide dan kubus (3d).

Sobat dapat bereksperimen dengan mengubah nilai yang ada,

untuk efek yang lainnya kita bahas pada bagian dua: Membuat
15 Efek Social Media Button Dengan CSS Part II

Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai
ketinggalan, segera join ke milis kami untuk update
informasi terbaru dari Jagowebdev.com

Nama Lengkap

Email

Subscribe

Komitmen Kami: Kami senantiasa menghargai privasi

Anda dan tidak akan membagikan identitas Anda ke
pihak manapun.

Like Like +1

Share Share 0 Tweet Share

36 Feedback dari pembaca

Blogger Dhenny says:

26 August 2016 at 18:57

Cara pakainya gimana bang? misalnya jadi widget

disidebar/colum footer. Maklum masih pemula,
 hehehe

Reply

agusph says:
27 August 2016 at 06:14

Tinggal di copy-paste kode HTML nya mas,

terus di load file CSS nya

Reply

Defri says:
15 October 2016 at 23:34

Gan? Yang dimaksud dengan content itu apa ya?kan

ada tuh yg di atas mksdnya apa ya?

Reply

Agus Prawoto Hadi says:

16 October 2016 at 04:46

Content maksudnya isi dari element mas,

memang untuk pseudo element ::before
dan ::after HARUS kita isi contentnya
meskipun kosong (“”)

Reply

fattah says:
6 December 2016 at 11:09

gan itu bisa di ganti dengan logo kita kah?

boleh di tunjukan kah untuk ganti objeknya

Reply

Agus Prawoto Hadi says:

7 December 2016 at 05:48

Bisa mas, namun perlu beberapa

perubahan. Intinya gambar pada button
tersebut menggunakan icon font, untuk
mengubahnya menjadi logo, maka perlu
untuk gambar menjadi background bukan
icon font
 Reply

helmi muharom says:

2 March 2017 at 21:49

gan, itu file icon fontsnya upload ke hosting?

Reply

Agus Prawoto Hadi says:

3 March 2017 at 08:15

Iya mas…

Reply

Ardho says:
2 May 2017 at 02:00

Mantap!! Terima kasih..

Reply

Agus Prawoto Hadi says:

2 May 2017 at 20:14

Sama sama mas

Reply

adi says:
3 May 2017 at 17:50

gan, cara ngatasi supaya font web kita nggak ikut

berubah gmna?
manu saya fontnya jadi besar karena dihubungkan
dengan effect_main_single

Reply

Agus Prawoto Hadi says:

4 May 2017 at 06:06

Untuk web, sebaiknya font dideklarasikan

pada bagian body mas, misal: body {font-
family: open-sans}, selanjutnya untuk
bagian spesifik, seperti icon font, definisikan
 class sendiri, misal: .social btn { … }

Reply

pradhipta says:
17 November 2017 at 02:41

mas mau tanya dong, kalau membuat efek highlight

ketika datanya berubah gimana ?

Reply

Agus Prawoto Hadi says:

18 November 2017 at 18:44

Maksudnya bagaimana ya mas? highlight

pada row tabel ketika diedit?

Reply

sapuan says:
26 March 2018 at 12:17

mas, bisa dicontohkan untuk mengubah jadi logo ?

maaf mas, saya masih bingung, karna baru belajar
juga.

Reply

Agus Prawoto Hadi says:

26 March 2018 at 22:06

Coba property dan value pada selector

anchornya diganti mas:
a{…}
coba diisi background-image: …

Reply

Irshandy says:
31 March 2018 at 12:46

Om ada efek yang tiba tiba ada gambar panah gtuh

klo dipencet tapi awalnya itu kga ada gambarnya cmn
ada tulisan

Reply
 Agus Prawoto Hadi says:
1 April 2018 at 05:56

Itu sama seperti efek 3 mas, awalnya tidak

kelihatan kemudian kelihatan, tanda panah
bisa diletakkan di pseudo element :before
atau :after dan tidak terlihat, ketika mouse
berada di atas elemen, pseudo elemen
tersebut di munculkan.

Reply

Aziz says:
2 December 2018 at 09:44

Mas, maaf saya newbie he

Kalau file fontnya dan css nya disimpan di bawah
folder apa jika dimasukan ke theme wordpress yang
sudah ada?

Reply

Agus Prawoto Hadi says:

2 December 2018 at 10:16

Didalam folder themes mas, misal wp-

content/themes/nama_theme/css

Reply

Dimas Anugerah says:

18 December 2018 at 09:27

Mas saya kok ganti pakai icon lain kodenya berbeda ya

jadi tidak muncul
ex kode facebook yg mas gunakan “\f09a” sedangkan
yang ada di web iconmoon “ea90”
saya bingung mas mencari librarynya.

Reply

Agus Prawoto Hadi says:

21 December 2018 at 08:47

Mending langsung menggunakan font

awesome saja mas:
https://jagowebdev.com/cara-
 menggunakan-font-awesome/

Reply

Evan D. Nugraha says:

13 January 2019 at 14:48

Ijin make efek yang ke 15 mas. Terima kasih

sebelumnya mas

Ohiya mas, saya mau tanya. Apakah sudah ada icon

untuk sosial media LINE? Karena sudah bongkar
penelurusan digoogle belum ketemu . Rata – rata
make gambar, sedangkan saya kurang nyaman kalau
icon menggunakan gambar .

Mungkin ada saran dari mas.

Reply

Agus Prawoto Hadi says:

14 January 2019 at 07:31

Sama sama mas

Di Font Awesome ada mas line icon

Reply

rohim says:
27 November 2019 at 06:19

o gitu toh… mulai sedikit ngerti..

Reply

Agus Prawoto Hadi says:

30 November 2019 at 05:55

Sip mass….

Reply

aguska420 says:
15 February 2020 at 10:58

akhirnyeee ktemu jga artikel bermanfaat kek gini:))

Reply
 Agus Prawoto Hadi says:
20 February 2020 at 06:03

Siap mas…

Reply

Faaris says:
14 May 2020 at 13:26

terimakasih mas, cukup membantu untuk yang baru

hijrah ke wp hehe

Reply

Agus Prawoto Hadi says:

16 May 2020 at 06:27

Sama sama mas…

Reply

Wahyu F says:
18 June 2020 at 23:08

kalau pakai foto sendiri (bukan icon) bisa ga mas?

Reply

Agus Prawoto Hadi says:

20 June 2020 at 08:20

Bisa mas…

Reply

riski says:
30 June 2020 at 05:21

maaf masih pemula….

cara menggunkannya gimana? sy pake blogspot
ini khusus buat wordpress?
kalau bisa buat blogspot kodenya ditempel di bagian
mana?

Reply
 Agus Prawoto Hadi says:
4 July 2020 at 05:50

Ini penggunaannya umum mas, bisa

wordpress, blogspot, maupun lainnya.
Untuk blogspot saya belum pernah

Reply

riski says:
12 July 2020 at 21:46

Bagi tutorial buat blogspot mas

Sy tdk mengerti bagaimana cara
pakenya buat blogspot

Reply

Agus Prawoto Hadi says:

13 July 2020 at 18:39

Maaf tidak familiar

dengan blogspot
mas…

Reply

Silakan tinggalkan komentar

 Your Comment

 Name :

 Email :

 Website (optional) :

I'm not a robot

reCAPTCHA
Privacy - Terms

Notify me of followup comments via e-mail. You can also

 subscribe without commenting.

Submit

Copyright ©2020 www.jagowebdev.com

HOME  ABOUT  CONTACT  E-BOOK PREMIUM  PREMIUM SUPPORT