Cara Membuat Skill Bar Section Seperti Idblanter pada Blog
Meta Moz - Hai blogger, jiaka anda termasuk orang yang sudah lama dalam ngeblog pastinya anda tidak asing lagi jika mendengar nama Idblanter atau idblanter.com. Blog Dunia Blanter adalah blog yang membahas seputar tutorial blog, SEO, Coding, Web Design dan membagikan Template Blogger desain terbaik selain itu idblanter juga Berbagi Template Keren dan Tips Seputar Blogger, Grid, CSS, HTML, Javascript, Widget, Pengetahuan, Fakta Unik, Web Tools, SEO, pemiliknya bernama Rio Ilham Hadi adalah seorang Web Designer dan Front-End Developer.
Baca Juga : Cara Membuat Popular Post Mirip Iklan Teks/Link Adsense Ala Meta Moz
Tutorial ini saya buat karena ada yang request agar Meta Moz membagikan tutorial Skill Bar Section seperti Idblanter, yang Penjelasan terperinci saya juga ikut penasaran dan ternyata lumayan bagus jika diterapkan pada blog sobat apalagi Idblanter tidak main-main dalam dunia desain web.
anpa basa-basi saya mengunjungi situs tersebut buat melihat source codenya lalu mengambil bagian kode yang bersangkutan Herbi skill section tersebut.
Baca Juga : Cara Ampuh Mengatasi Loading Blog Dari JS Google Analytics
Baca Juga : Cara Ampuh Mengatasi Loading Blog Dari JS Google Analytics
Pada postingan terdahulu, saya juga pernah membuat Skill Bar section namun tanpa animasi dan terkesan kaku tampaknya yang ada pada halaman Cara Membuat Skill Bar Pada Halaman Blog. walaupun didalam tutorial tersebut saya buat dihalaman statis namun tapi saja bisa anda gunakan pada widget juga.
Namun, pada tutorial ini saya mengubah dua bagian kode tersebut agar tidak terkesan menjiplak 100% punya mas Rio namun tampilannya tetap sama. Jadi, anda menambah perlu khawatir. Pengubahan ini juga dimaksudkan agar saya bisa mengidentifikasi Iterasi bagian-bagian kode Skill section dan menambah wawasan saya khususnya.
Demo
Sebelum ke tutorialnya, Fungsi dari Skill Bar Belajar sendiri adalah memberitahu pengguna terhadap skill anda dalam sesuatu 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 Berhubungan dengan benar sesuai perintah yang saya tuliskan pada halaman ini. jadi, simak Berhubungan dengan teliti dan praktikkan pada blog uji coba terlebih dahulu sebelum dipasang pada blog utama.
Baca Juga : 47 Free Backlinks From High Authority Sites
Baca Juga : 47 Free Backlinks From High Authority Sites
Sebelum mempraktekkannya, saya Bertentangan dengan harapan anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak mengurangi anda inginkan seperti kode tidak cocok, mapersoalan 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 sepertinya 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 melakukan 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 memamerkan hasilnya
Post a Comment