×

search by faronesia.com

FARONESIA.COM
Profesional and Specialist WebDesign

Unduh dan dapatkan template blogger terbaik mulai dari premium hingga gratis tersedia di Faronesia.com

Unduh sekarang

Cara Membuat Skill Bar Section Seperti Idblanter pada Blog

Faronesia.com - Hai blogger, pastinya anda sudah tidak asing lagi jika mendengar kata atau nama Idblanter atau idblanter.com. Idblanter adalah situs yang membahas tentang tutorial dan desain seputar blogger berbahasa Indonesia, pemiliknya bernama Rio Ilham Hadi adalah seorang Web Designer dan Front-End Developer.

Pada tanggal 1 juni 2020 saya mendapatkan notifikasi request tutorial dari salah seorang blogger Indonesia. Dalam requestnya, ia meminta untuk dibuatkan tutorial Skill Bar Section seperti Idblanter, yang jelas saya juga ikut penasaran dan ternyata lumayan bagus jika diterapkan pada blog sobat apalagi Idblanter tidak main-main dalam dunia desain web.

...halo agan faronesia, saya request tutor buat skill persenan kayak Idblanter yang seperti di halaman ini https://about.idblanter.com...

Dari permintaan diatas, mungkin yang dimaksud skill persenan adalah Skill Bar Section dengan animasi yang berada dibawah blog milik mas Rio. Tanpa basa-basi saya mengunjungi situs tersebut untuk melihat source codenya lalu mengambil bagian kode yang bersangkutan dengan skill section tersebut.

Pada postingan terdahulu, saya juga pernah membuat Skill Bar section namun tanpa animasi dan terkesan kaku seperti yang ada pada halaman Cara Membuat Skill Bar Pada Halaman Blog. walaupun didalam tutorial tersebut saya buat dihalaman statis namun tetap saja bisa anda gunakan pada widget juga.

Namun, pada tutorial ini saya mengubah beberapa bagian kode tersebut agar tidak terkesan menjiplak 100% milik mas Rio namun tampilannya tetap sama. Jadi, anda tidak perlu khawatir. Pengubahan ini juga dimaksudkan agar saya bisa mengidentifikasi ulang bagian-bagian kode Skill section dan menambah wawasan saya khususnya.
Sebelum ke tutorialnya, Fungsi dari Skill Bar sendiri adalah memberitahu pengguna terhadap skill anda dalam suatu pekerjaan. Hal ini dapat menambah kepercayaan pengguna saat berkunjung pada blog yang anda kelola.

Tutorial Membuat Skill Bar Section Seperti Idblanter pada Blog ini saya jamin work 100% jika anda menerapkan dengan benar sesuai perintah yang saya tuliskan pada halaman ini. jadi, simak dengan teliti dan praktikkan pada blog uji coba terlebih dahulu sebelum dipasang pada blog utama.

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara Membuat Skill Section Seperti Idbanter pada Blog

  • Masuk ke dashboard blog
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode seperti ini ]]></b:skin> atau </style>
  • Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* SKILL SECTION by FARONESIA */
.faronesia-skill ul{padding:0;list-style:none}
.faronesia-skill .faro{position:relative;background:#eee;margin:0 0 10px;border-radius:20px;overflow:hidden}
.faronesia-skill li{position:relative;z-index:2;color:#fff;font-weight:500;padding:10px 15px;font-size:14px;border-radius:20px}
.faronesia-skill .faro:before{content:'';animation-name:efek;animation-duration:5s;background:#444;width:100%;position:absolute;left:0;top:0;bottom:0;z-index:1;border-radius:20px}
.faronesia-skill .faronesiahtml:before{background:#2d98da;width:95%}
.faronesia-skill .faronesiacss:before{background:#20bf6b;width:90%}
.faronesia-skill .faronesiajs:before{background:#f7b731;width:75%}
.faronesia-skill .faronesiaphp:before{background:#eb3b5a;width:30%}
.faronesia-skill .faronesiadg:before{background:#fa8231;width:50%}
@keyframes efek{from{width:0%}}
  • Lalu, simpan template
  • Selanjutnya yang perlu anda lakukan adalah menempelkan kode html dibawah ini pada widget tata letak
<div class="faronesia-skill">
<ul>
<div class="faro faronesiahtml"><li>HTML 95%</li></div>
<div class="faro faronesiacss"><li>CSS 90%</li></div>
<div class="faro faronesiajs"><li>Javascript 75%</li></div>
<div class="faro faronesiaphp"><li>PHP 30%</li></div>
<div class="faro faronesiadg"><li>Desain Grafis 50%</li></div>
</ul>
</div>
  • Setelah itu klik simpan dan lihat hasilnya
Peringatan: Jangan pernah merequest tutorial melalui whatsapp

Demikianlah mengenai Cara Membuat Skill Section Seperti Idblanter pada Blog semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.
Buka komentar
Tutup komentar
  1. bang coba bikin skill bar section yang tampilannya lebih menarik .. soalnya kebanyakan tampilannya seperti itu

    BalasHapus
  2. setahu saya skill bar section berguna sebagai informasi tentang keahlian kita di bidang tertentu, khususnya coding 😁

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Developer

test-1 test-2
Saya adalah seorang Web Designer dan Front-End Developer, 5 tahun dalam pengalaman bermain coding sejak SMA. Pemilik Blog Faronesia sekaligus Desainer Template Blogger.

azza / owner faronesia
Saya adalah mahasiswi sekaligus penulis lepas di sela-sela kesibukan saya. Penulis Faronesia sekaligus penyempurna naskah artikel.

shofi / author faronesia
Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup