Yosh! Pada kesempatan kali ini saya akan membagikan tutorial mengenai cara memasang icon di samping judul widget blog. Oh, iya, icon yang digunakan dalam tutorial ini berasal dari Font Awesome yang pastinya akan mempercantik tampilan blogmu (hehehe...). Oke, tanpa perlu panjang lebar, mari simak tutorialnya berikut ini.

Versi 1
Untuk versi 1 ini, yang harus kamu lakukan dalam memasang icon dari FontAwesome di samping judul widget blogmu adalah dengan mengcopy kode di bawah ini. Letakkan kode tersebut di bawah kode <head> yang ada di template blogmu.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Langkah berikutnya adalah dengan mengcopy kode di bawah ini.
.element h2:before {
    content: "\f02e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 0.5em;
}

Letakkan kode tersebut tepat di bawah kode css judul widget blogmu. Contohnya seperti di bawah ini.
.widget h2 {font-size: 15px;
margin-bottom: 5px;
padding-bottom: 10px;
color: #484848;
padding-left: 10px;
height: auto;
text-transform: uppercase;
text-align: left;
font-weight: bold;
}
.element h2:before {
    content: "\f02e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 0.5em;
}

Perhatian! Untuk kode yang ditandai dengan warna merah (.element h2) merupakan kode pemanggil dari judul widget blog, Gantilah kode tersebut dengan kode pemanggil dari judul widget blogmu yang ingin kamu pasangi icon tersebut. Misalnya kamu ingin memasangnya di samping judul widget Popular Post, maka kode yang bewarna merah (.element h2) harus kamu ganti dengan .PopularPost h2 yang hasilnya seperti contoh di bawah ini.
.PopularPost h2:before {
    content: "\f02e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Kemudian, untuk kode yang ditandai dengan warna biru ("\f02e") merupakan kode dari icon yang ingin dipasang. Kamu bisa menggantinya dengan kode icon lain yang sesuai dengan keinginanmu yang dapat kamu lihat secara lengkap di sini atau di sini.

Kalau langkah-langkah di atas telah kamu terapkan di template blogmu, maka hasilnya akan seperti tampilan di bawah ini.


Versi 2
Untuk versi 2 ini, yang harus kamu lakukan dalam memasang icon dari FontAwesome di samping judul widget blogmu adalah dengan mengcopy kode di bawah ini yang berasal dari web fontawesome.com. Letakkan kode tersebut di bawah kode <head> yang ada di template blogmu.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>

Langkah berikutnya, kamu buka link fontawesome.com/icons?d=gallery.


Pada web tersebut, kamu cari icon yang ingin kamu pasang sesuai dengan keinginanmu. Misalnya, di sini kamu mencari icon “fire”, maka ketikkan kata kunci tersebut dan akan muncul hasil dari pencarianmu tersebut.


Pilih icon yang ingin kamu gunakan dengan cara menge-klik icon tersebut.


Kemudian akan muncul tampilan seperti di bawah ini.


Pada tampilan ini, kamu copy kode dari icon tersebut.


Kemudian letakkan kode dari icon yang telah kamu pilih tersebut di depan kode judul widget blogmu. Untuk contoh pemasangannya seperti bawah ini.
<h2><i class="fas fa-fire"></i> <data:title/></h2>

Jika sudah terpasang seperti contoh di atas, jangan lupa klik “Simpan” di Edit HTML Template Blogmu, dan hasilnya akan seperti tampilan di bawah ini.


Oke, sekiranya itu tutorial dari saya kali ini. Seperti biasa kalau ada pertanyaan atau saran yang ingin kamu sampaikan kepada saya, kamu dapat menuliskannya di kolom komentar yang letaknya ada di bawah artikel tutorial ini. Semoga bermanfaat, ya! 😁

NgeShare - Cara Memasang Icon di Samping Judul Widget Blog


Yosh! Pada kesempatan kali ini saya akan membagikan tutorial mengenai cara memasang icon di samping judul widget blog. Oh, iya, icon yang digunakan dalam tutorial ini berasal dari Font Awesome yang pastinya akan mempercantik tampilan blogmu (hehehe...). Oke, tanpa perlu panjang lebar, mari simak tutorialnya berikut ini.

Versi 1
Untuk versi 1 ini, yang harus kamu lakukan dalam memasang icon dari FontAwesome di samping judul widget blogmu adalah dengan mengcopy kode di bawah ini. Letakkan kode tersebut di bawah kode <head> yang ada di template blogmu.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Langkah berikutnya adalah dengan mengcopy kode di bawah ini.
.element h2:before {
    content: "\f02e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 0.5em;
}

Letakkan kode tersebut tepat di bawah kode css judul widget blogmu. Contohnya seperti di bawah ini.
.widget h2 {font-size: 15px;
margin-bottom: 5px;
padding-bottom: 10px;
color: #484848;
padding-left: 10px;
height: auto;
text-transform: uppercase;
text-align: left;
font-weight: bold;
}
.element h2:before {
    content: "\f02e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 0.5em;
}

Perhatian! Untuk kode yang ditandai dengan warna merah (.element h2) merupakan kode pemanggil dari judul widget blog, Gantilah kode tersebut dengan kode pemanggil dari judul widget blogmu yang ingin kamu pasangi icon tersebut. Misalnya kamu ingin memasangnya di samping judul widget Popular Post, maka kode yang bewarna merah (.element h2) harus kamu ganti dengan .PopularPost h2 yang hasilnya seperti contoh di bawah ini.
.PopularPost h2:before {
    content: "\f02e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Kemudian, untuk kode yang ditandai dengan warna biru ("\f02e") merupakan kode dari icon yang ingin dipasang. Kamu bisa menggantinya dengan kode icon lain yang sesuai dengan keinginanmu yang dapat kamu lihat secara lengkap di sini atau di sini.

Kalau langkah-langkah di atas telah kamu terapkan di template blogmu, maka hasilnya akan seperti tampilan di bawah ini.


Versi 2
Untuk versi 2 ini, yang harus kamu lakukan dalam memasang icon dari FontAwesome di samping judul widget blogmu adalah dengan mengcopy kode di bawah ini yang berasal dari web fontawesome.com. Letakkan kode tersebut di bawah kode <head> yang ada di template blogmu.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"/>

Langkah berikutnya, kamu buka link fontawesome.com/icons?d=gallery.


Pada web tersebut, kamu cari icon yang ingin kamu pasang sesuai dengan keinginanmu. Misalnya, di sini kamu mencari icon “fire”, maka ketikkan kata kunci tersebut dan akan muncul hasil dari pencarianmu tersebut.


Pilih icon yang ingin kamu gunakan dengan cara menge-klik icon tersebut.


Kemudian akan muncul tampilan seperti di bawah ini.


Pada tampilan ini, kamu copy kode dari icon tersebut.


Kemudian letakkan kode dari icon yang telah kamu pilih tersebut di depan kode judul widget blogmu. Untuk contoh pemasangannya seperti bawah ini.
<h2><i class="fas fa-fire"></i> <data:title/></h2>

Jika sudah terpasang seperti contoh di atas, jangan lupa klik “Simpan” di Edit HTML Template Blogmu, dan hasilnya akan seperti tampilan di bawah ini.


Oke, sekiranya itu tutorial dari saya kali ini. Seperti biasa kalau ada pertanyaan atau saran yang ingin kamu sampaikan kepada saya, kamu dapat menuliskannya di kolom komentar yang letaknya ada di bawah artikel tutorial ini. Semoga bermanfaat, ya! 😁

No comments