MAU MEMASANG IKON AWSOME DENGAN GRADASI WARNA DI BLOG? BEGINI CARANYA!

Rekan rekan blogger! Kita bahas sedikit perihal kecenderungan kita sebagai seorang blogger yang terkadang memiliki sensasi sebagai desainer, dan tanpa kita sadari keinginan tersebut telah membawa kita mendekati kedua hal ini: Menjadi seorang programmer dan atau menjadi seorang desainer.

Dalam hal mendesain template peranan css, kemudian elemen ikon ikon seperti awsome misalnya sudah tidak bisa di abaikan lagi, ada yang bertanya apakah elemen elemen serupa seperti itu tidak memberatkan loading sebuah tema atau template blogger? Jawabannya tergantung, jika ditulis dan ditempatkan dengan benar tentu saja tidak akan terlalu berpengaruh pada kecepatan, bahkan tema tema blogger AMP tidak dapat meninggalkan kaidah kaidah keindahan elemen elemen template seperti ini.

PROGRAMMER vs DESAINER

Disana ada terletak perbedaan persoalan yang harus dihadapi oleh seorang programmer dengan seorang desainer. Seorang programmer harus dapat membuat semua fungsi bekerja menurut standard kebutuhan atau membuat sebuah template dapat bekerja dan berfungsi sebagai sebuah template menurut permintaan klien. Mampu bekerja dengan bahasa program dan koding sepenuhnya. Sedangkan seorang desainer harus membuat sebuah tema agar memiliki "wajah" berdasarkan pemikiran estitika atau keindahan. Sementara pekerjaan seorang programmer lebih pasti, tugas seorang desainer justeru menjadi rumit.

Seorang desainer tema selain harus memahami dasar koding juga harus memiliki cita rasa seni yang dapat dijual. Seorang desainer misalnya akan bertanya dengan kode apa saya bisa membuat kombinasi warna yang menarik? Atau sekedar menempatkan Menu di tempat yang tepat di atas template sehingga enak dipandang mata? Atau membuat menu tersebut tidak hanya sedap dipandang mata tapi justeru menjadi sangat user friendly? Seorang desainer kadang dituntut agar dapat membuat sebuah tema justeru menjadi manusiawi dan cocok dengan kepribadian calon penggunanya.

Dan disanalah letak kehebatannya: Kombinasi seorang programmer dengan seorang desainer akan menghasilkan seorang 'KREATOR'

MEMBUAT IKON MENJADI BERWARNA DENGAN STYLE GRADASI

Pernah memperhatikan template template yang didesain untuk wordpress blog? Atau pernah melihat karya karya envanto yang sangat "mobile" namun dengan loading cepat tanpa kehilangan keindahannya. Disinilah peranan dan sentuhan seorang desainer dan seorang programmer sekaligus diperlukan dalam pembuatan sebuah template yang indah, gegas, dan cepat!

Bukan hanya template bergaya  infinite yang dominan warna gradasi pada headrnya akan tetapi setiap ikon dapat kita berikan warna gradasi sesuka hati dan menurut selera kita asalkan mengikuti syarat ini: Mengkombinasikan kode css dengan ikon "fa fa awsome" dan atau sejenis dengan itu.

Langkah pertama kita harus  masuk ke pengaturan blogger langsung ke opsi "edit TEMA" saja ya karena dengan asumsi kita sudah mengerti caranya jika telah membaca tutorial tutorial kami sebelumnya.

Dengan asumsi kita sedang mengedit tema bawaan, maka cari kode </head> lalu kopi kode dibawah ini dan pastekan diatas kode </head> tadi.

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

Save. Dan lalu untuk percobaan kembali ke pengaturan blogger - pilih add widget - pilih HTML/java script, lalu pastekan kode ikon fa fa awsome yang telah kami pilih dibawah ini kedalam kotak widget HTML/javascript tadi atau lihat gambar dibawah.

<i class="fa fa-facebook-official" aria-hidden="true"></i>

Save. Jika mau geser saja widgetnya biar berada diatas postingan,  maka kode  tersebut akan berbentuk ikon facebook seperti dibawah ini, masih dalam ujud ikon yang berwarna hitam putih

Agar Widget tadi berwarna gradasi (kombinasi dua warna) kita perlu menambahkan kode dibawah ini dan meletakannya diatas kode: ]]></b:skin>, begini kodenya:

.gradient-icon {

    background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    display: initial;

}

Dan langkah berikutnya adalah kembali ke kode ikon fa fa awsome yang berada didalam widget HTML/java script yakni: <i class="fa fa-facebook-official" aria-hidden="true"></i> Edit dengan menambahkan: "gradient-icon" jadi kode fa fa awsomenya akan menjadi seperti ini:

<i class="fa fa-facebook-official gradient-icon fa-5x" aria-hidden="true"></i>

Perhatikan letak posisi kode perintah pemanggil tambahan yang di sorot warna kuning. Maka ikon akan berganti warna dari hitam dan putih menjadi gradasi! Lihat gambar:

Cobakan kepada semua ikon fa fa awsome ada ratusan kode kode ikon sejenis gratis dan bebas di pergunakan di Internet. Jika kita ingin mengganti warna gradasi atau kombinasi warna kita dapat melakukannya dengan merubah kode css yang telah kita letakan di atas kode ]]></b:skin> diatas.

.gradient-icon {

    background: -webkit-gradient(linear, left top, left bottom, from(#1E90FF), to(#FFC0CB));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    display: initial;

}

Ganti saja kode warna dengan kode warna css, cari daftar kode warna warni di internet, semuanya gratis.

Selamat mencoba menjadi desainer template! Kalau kita berfikir kita bisa, kita pasti bisa, Tujuan dan pencapaian besar itu selalu di awali dengan sebuah langkah kecil dan biasa saja pada awalnya dahulu....