Tampilkan postingan dengan label awsome. Tampilkan semua postingan
Tampilkan postingan dengan label awsome. Tampilkan semua postingan
Jika sebelumnya saya sudah membahas perihal cara penggunaaan font awsome terbaru yakni font awsome5 yakni untuk mempercantik font menu navigasi sebuah blog, sekarang saya akan menjelaskan sebuah trik yang juga sangat bermanfaat untuk lebih mempercantik desain sebuah templat blogger yaitu membuat font awsome tersebut menjadi berwarna warni tanpa harus merugikan loading blog.
dapat dimanipulasi melalui perintah CSS
Semua ikon fa fa awsome bisa di perkaya dengan warna dengan menambahkan sedikit trik pada kodenya dengan kode tambahan: gradient-icon baiklah mari kita mulai penjelasannya:

MEMPERCANTIK IKON AWSOME DENGAN STYLE WARNA 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.
Masuk ke pengaturan blog:
  1. Pilih tema
  2. Pilih edit HTML
  3. Pada halaman editor HTML:
Cari kode </head> lalu kopi kode dibawah ini dan pastekan diatas tag atau kode </head> tadi. (Abaikan saja kalau link "pemanggil" font awsome5 ini telah terpasang di blog sobat)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous"/>
Save terlebih dahulu template. 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="fab fa-facebook-square"></i>


Save terlebih dahulu template. 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 trik pembuatan perintah kode CSS-nya:

.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 fa-10x" 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-10x" aria-hidden="true"></i>

Perhatikan letak posisi kode perintah pemanggil tambahan yang diberi warna merah. Sedangkan yang warna biru adalah ukuran besar ikon awsome. 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 yang gratis dan bebas di pergunakan di Internet.

Jika kita ingin mengganti warna gradasi atau kombinasi warna maka sobat dapat melakukannya dengan merubah kode css yang telah kita letakan di atas kode ]]></b:skin> diatas. Perhatikan kode warna HEX yang saya sorot dengan warna merah muda:

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

Trik ini telah diuji dan berlaku terhadap hampir semua browser-browser besar: chrome, edge, firefox, opera mobile, safari Apple dll.

Contoh nyata bisa anda lihat pada menu navigasi blog ini yang ikonnya telah menjadi dua warna dengan gaya kombinasi "gradasi"


editblogtema.net

SHARE YA:

TEMPLATE AWSOME REDESIGNED

2 komentar

Februari 07, 2019

Kali ini kami kembali ingin membagi template yang paling stabil dan mudah di update dan pastinya akan tetap mendapat support berupa konsultasi dengan kami jika terdapat masalah. Tema ini diangkat dari tema HTML klasik awsome dan lalu kami melakukan beberapa custom padanya.

Cocok buat ngeblog pemula dan lanjutan sekalipun dengan style sederhana dan mudah di update, bergaya dan bercita rasa klasik, premium dan cepat tanpa kredit sama sekali.
cocok pada layar paling kecil hingga paling lebar
  1. Ringan dan sederhana, menu navigasinya di adopsi dari contempo hybrid
  2. Related post 
  3. basis HTML klasik awsome
  4. Pasti responsive dan mobile friendly
  5. Tersedia slot iklan di atas header.
  6. Tanpa kredit
1. PETUNJUK MENGEDIT MENU BLOGGER KLASIK AWSOME:
Sobat bisa merobah link menu navigasi dengan mencari kode </header> diatas kode header akan sobat temui rincian kode menu sebagai berikut:

<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li>
<a href='/' title='Beranda'><i aria-hidden='true' class='fa fa-windows' style='color:orange'/>Beranda</a>
</li>
<li>
<a class='dutt' href='#'><i class='fa fa-rss' style='color:orange'/>Blogging</a>

<ul class='menux'>
<li><a href='https://www.editblogtema.net/search/label/blogger'>Triks/Tips</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/english'>English Posts</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/fakta'>fakta</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/kotak%20pencarian'>Pencarian</a>

</li>
<li><a href='https://www.editblogtema.net/search/label/navigasi'>Navigasi</a>
</li>
<li><a href='https://www.editblogtema.net/search/label/tutorialKhusus'>Spesial</a>
</li>
<li><a href='https://www.editblogtema.net/p/blog-page_30.html'>小部件</a>
</li>
</ul>
</li>
<li>

<a class='dutt' href='#'><i class='fa fa-download' style='color:orange'/>Download</a>
<ul class='menux'>
<li><a 

href='https://www.editblogtema.net/p/project-pandora.html'>Pandora.Pro</a>
</li>
<li><a href='https://www.editblogtema.net/2018/10/moslem-theme-for-free.html'>Tema Islami</a>
</li>
<li><a href='https://www.editblogtema.net/p/blog-page_7.html'>EB-themes</a>
</li>

<li><a href='https://www.editblogtema.net/2018/12/apakah-template-contempo-hybrid-itu.html#'>Tentang Kami</a>

</li>
</ul>
</li>

<li><a href='https://www.editblogtema.net/p/daftar-isi.html'><i class='fa fa-sitemap' style='color:orange'> </i>网站地图</a>
</li>
<li><a href='https://www.editblogtema.net/p/blog-page_4.html'><i aria-hidden='true' class='fa fa-first-order'/>Tentang Template ini</a>
</li>
</ul>
</nav>

Silahkan robah setiap link dan judul menu yang telah saya sorot (highlight) dengan warna kuning menjadi link dan judul menu dan sub-menu sobat sendiri.

2. CARA MEROBAH CREDIT MENU PADA FOOTER BLOGGER CONTEMPO HYBRID

Untuk urusan atribusi contempo hybrid tidak ada bedanya dengan tema blogger contempo aslinya.

Usahakan meletakan gagdet atau widget HTML atribusi template di posisi paling bawah tataletak template contempo hybrid. Perhatikan gambar:
letaknya paling bawah lay out template blogger
Klik atau pencet gagdet atribusi pada ikon pensil sebelah kanan, maka akan muncul kotak dialog dimana sobat bisa menuliskan credit footer:
bisa dituliskan credit atau hak cipta
Pada bagian hak cipta sobat tuliskan credit footer sederhana sobat sendiri, hasil penulisan akan terlihat pada kolom pratinjau dibawahnya. Pada contoh diatas saya menuliskannya sebagai berikut:

Copyright©2018 - 2019 created by: <ahref="http://www.editblogtema.net">editblogtema.net </a> 

Jadi sobat tinggal merobah kalimat yang telah saya sorot warna merah saja.


DEMO
DOWLOAD 
Ingin template berkualitas dari desainer envato? Silahkan kunjungi kami disini: Blogger template Installation
Tidak akan kecewa!


www.editblogtema.net

SHARE YA: