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