Home » Article » Blogcrowds » Blogger Tutorial » Cara Membuat Style Progress Loading Bar Seperti Youtube Pada Blogger

Cara Membuat Style Progress Loading Bar Seperti Youtube Pada Blogger

Kamis, 18 Desember 2014 Unknown

Nah sebelumnya kami mencatat bagaimana Anda : dapat menambahkan memudar Ajax efek pembebanan mengagumkan di blog blogger Anda yang hanya membuat pembaca Anda untuk menikmati waktu pembukaan dia harus menghadapi, baik sekarang saya menemukan tutorial lain yang mengagumkan jika Anda sudah familiar dengan YouTube dan Anda menelusuri itu setiap hari Anda mungkin telah melihat jenis merah kemajuan loader dengan menggunakan yang terjadi ketika halaman sedang loading dan kemudian menghilang pergi


Yah aku mencari loader sama seperti yang saya sangat menyukainya, jadi aku datang di sebuah situs web disebut Tutorialzine yang diposting tutorial ini di website, tapi itu sedikit khas, jadi saya tetap beberapa hal hanya untuk membuatnya kompatibel dengan Blogger blog dan sekarang hal-hal karya besar, jadi saya diuji di website saya dan mungkin saya masih menggunakannya jika Anda datang lebih awal kurasa. Jadi Anda bisa melihat di atas bar loading.

Jadi sekarang jika Anda berpikir terlihat mengagumkan memungkinkan mengucapkan terima kasih kepada pencipta dan pengubah dan jangan mulai menambahkan ini ke daftar Blogger atau Wordpress Blog. Nah sekarang terus terang saya belum diuji widget ini di blog Wordpress, tapi aku telah diuji ini di Blogger dan bekerja dengan baik. Jadi mungkin itu akan bekerja besar pada situs Wordpress juga :)

     Buka Blogger> Template> Edit HTML.
     Tekan Ctrl + F & mencari </ body> tag & paste di bawah kode di atas itu.

<style>#nprogress{pointer-events:none}#nprogress .bar{background:#29d;height:2px;left:0;position:fixed;top:0;width:100%;z-index:100}#nprogress .peg{-ms-transform:rotate(3deg) translate(0px,-4px);-webkit-transform:rotate(3deg) translate(0px,-4px);box-shadow:0 0 10px #29d, 0 0 5px #29d;display:block;height:100%;opacity:1.0;position:absolute;right:0;transform:rotate(3deg) translate(0px,-4px);width:100px}#nprogress .spinner{display:block;position:fixed;right:15px;top:15px;z-index:100}#nprogress .spinner-icon{-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite;border:solid 2px transparent;border-left-color:#29d;border-radius:50%;border-top-color:#29d;box-sizing:border-box;height:18px;width:18px}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}.photo{display:none}</style><div id='loadMore'/><script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><script src='http://goo.gl/10Okof'/>

Sekarang tekan Simpan Template & Anda selesai, sekarang hanya menyegarkan blog Anda dan melihat efek ini pembebanan mengagumkan.

Nah jika Anda mencintai efek ini dan trik kemudian melakukan berbagi dengan semua teman-teman Anda dengan menyukai di bawah ini, jika Anda menghadapi masalah melakukan komentar di bawah ini :)