Cara Menciptakan Progress Kafe Pelangi Ala Instagram
Bila kalian pengguna Instagram niscaya pernah melihat Progress kafe yang yang berwarna warni yang berada pada posisi atas setiap kita mengunjungi halaman tersebut. Dan pada kesempatan kali ini aku ingin membuatkan Cara Membuat Progress Bar Pelangi Ala Instagram. Sebenar nya cara ini sudah pernah di publikasikan oleh sahabat blogger yang berjulukan Igniel. Dan Artikel yang di buat oleh ia pun dengan kata kunci Cara Membuat Progress Bar Pelangi mungkin berada pada posisi Page One untuk kini ini. Dan tujuan aku menciptakan artikel ini semata hanya ingin membuatkan buat kalian dan langsung aku sendiri untuk menambah wawasan dalam dunia blogging.
Cara Membuat Progress Bar Pelangi Ala Instagram yang akan aku bagikan kali ini cara nya mudah, kalian cukup ikuti langkah - langkah nya sebagai berikut.
Cara Membuat Progress Bar Pelangi Ala Instagram
Silahkan kalian copy arahan di bawah ini kemudian letakan arahan tersebut di atas arahan </style> atau </b:skin> pada template kalian masing - masing. #ignielProgressBar { position: fixed; z-index: 999999; left:0; right: 0; top: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); background-size: 900% 900%; animation: ignielProgressBar 5s ease infinite; -moz-animation: ignielProgressBar 5s ease infinite; -webkit-animation: ignielProgressBar 5s ease infinite; -o-animation: ignielProgressBar 5s ease infinite; } @keyframes ignielProgressBar { 0% {background-position: 0% 100%;} 50% {background-position: 100% 200%;} 100% {background-position: 0% 100%;} } @-moz-keyframes ignielProgressBar { 0% {background-position: 0% 100%;} 50% {background-position: 100% 200%;} 100% {background-position: 0% 100%;} } Lihat yang aku tandai pada arahan height: 4px kalian dapat ganti ukuran untuk seberapa tinggi progress yang kalian inginkan. Semakin besar ukuran yang kalian tambahkan semakin besar pula ukuran progress kafe nya.
Dan untuk arahan warna yang aku tandai warnai kuning, kalian dapat ganti dengan arahan warna yang sesuai dengan warna template kalian.
Langkah Terakhir
Silahkan kalian copy arahan di bawah ini kemudian letakan arahan tersebut di atas arahan </body> pada template kalian masing - masing.
<div id='ignielProgressBar'/> <script> //<![CDATA[ function ignielBar(){document.getElementById('ignielProgressBar').style.display='none';} window.addEventListener ? window.addEventListener('load',ignielBar,false) : window.attachEvent && window.attachEvent('onload',ignielBar); //]]></script> Untuk referensi atau hasil nya menyerupai apa kalian dapat lihat Demo nya di bawah ini. Bila belum berubah.
Saya kira tutorial kali ini sudah di selesai dari langkah - langkah Cara Membuat Progress Bar Pelangi Ala Instagram yang telah aku berikan. Semoga artikel kali ini dapat bermanfaat buat sobat blogger. Selamat mencoba!
Script By : igniel.com