How to add a Progress Bar for Blog

April 24, 2016
Cover How To Make Progress Bar
How to add a Progress Bar for Blog - before i share template One Stream Blogger Template, today i want share how to make Progress Bar Simple with CSS and HTML for fansub or fanshare or other ._.
Add CSS Proggress Bar
  1. Go To Blogger > Yourblog > Template > Edit HTML
  2. Copy this css and put before ]]></b:skin> or </style>
    /* Progress Bar Full */
    .fx:after,.sidebar .widget:after{content:"";display:table;clear:both}
    .fprogress b{text-transform:uppercase;font-size:14px;margin-bottom:2px;display:block}
    .fbar{width:100%;background:#F5F5F5;border:1px solid #ddd;height:25px;display:block;border-radius:3px;text-align:center;position:relative}
    .fbar span{display:block;height:100%;background:#428BCA;position:relative}
    .fbar span:after{content:attr(data-percent);color:#fff;text-align:center;position:absolute;left:0;right:0;top:0}
    /* Progress Bar Box */
    .fbar-box{padding:2px;border-radius:20px;}
    .fbar-box span{border-radius:20px}
    .fbar-box span:after{top:-2px;font-size:13px}
    /* Progress Bar Radius */
    .fbar-radius{width:130px;height:130px;border-radius:100%;overflow:hidden;border:0;}
    .fbar-radius:after{color:#428BCA;top:33%;font-size:30px;content:attr(data-percent);z-index:30;position:absolute;left:0;right:0}
    .fbar-radius span{display:block}
    .fbar-radius:before{content:"";background:#FFF;width:105px;height:105px;position:absolute;left:13px;top:13px;border-radius:100%;z-index:10}
    /* Progress Bar Tooltip 1 */
    .fbar-tip:hover span:after{opacity:1}
    .fbar-tip span:after{background:#333;top:-100%;right:0;left:inherit;width:40px;border-radius:3px;font-size:12px;opacity:0;transition:all .7s ease-in-out}
    /* Progress Bar Tooltip 2 */
    .fbar-atip span:after{background:#333;top:-120%;right:0;left:inherit;width:40px;border-radius:3px;font-size:12px}
    .fbar-atip span:before{content:"";position:absolute;border:5px solid transparent;border-top-color:#333;right:15px;top:-7px}
  3. Save Template
Add Widget Progress Bar
  1. Go To Blogger > Yourblog > Layout > Add a Gadget > HTML/Javascript
  2. Choose Style Progress Bar
    Progress Bar Full

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-full'><span style='width:50%' data-percent='50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-full'><span style='width:50%' data-percent='50%'></span></div>
    </div>
    Progress Bar Boxed

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-box'><span style='width:50%' data-percent='50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-box'><span style='width:50%' data-percent='50%'></span></div>
    </div>
    Progress Tooltip 1

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-tip'><span style='width:50%' data-percent='50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-tip'><span style='width:50%' data-percent='50%'></span></div>
    </div>
    Progress Tooltip 2

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-atip'><span style='width:50%' data-percent='50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-atip'><span style='width:50%' data-percent='50%'></span></div>
    </div>
    Progress Radius

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-radius' data-percent='50%'><span style='width:50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-radius' data-percent='50%'><span style='width:50%'></span></div>
    </div>
  3. Then Save
Cara Menambahkan Progress Bar di blog - sebelumnya saya sudah share template One Stream Blogger Template, hari ini saya ingin share cara membuat progress bar simple dengan css dan html untuk fansub atau fanshare. biasanya progress bar sangat berguna bagi fansub untuk menunjukan status garapan anime yang sedang dikerjakan.

Menambahkan CSS Progress Bar
  1. Masuk ke blogger > Blogmu > Template > Edit HTML
  2. Copy css dibawah ini sebelum kode ]]></b:skin> atau </style>
    /* Progress Bar Full */
    .fx:after,.sidebar .widget:after{content:"";display:table;clear:both}
    .fprogress b{text-transform:uppercase;font-size:14px;margin-bottom:2px;display:block}
    .fbar{width:100%;background:#F5F5F5;border:1px solid #ddd;height:25px;display:block;border-radius:3px;text-align:center;position:relative}
    .fbar span{display:block;height:100%;background:#428BCA;position:relative}
    .fbar span:after{content:attr(data-percent);color:#fff;text-align:center;position:absolute;left:0;right:0;top:0}
    /* Progress Bar Box */
    .fbar-box{padding:2px;border-radius:20px;}
    .fbar-box span{border-radius:20px}
    .fbar-box span:after{top:-2px;font-size:13px}
    /* Progress Bar Radius */
    .fbar-radius{width:130px;height:130px;border-radius:100%;overflow:hidden;border:0;}
    .fbar-radius:after{color:#428BCA;top:33%;font-size:30px;content:attr(data-percent);z-index:30;position:absolute;left:0;right:0}
    .fbar-radius span{display:block}
    .fbar-radius:before{content:"";background:#FFF;width:105px;height:105px;position:absolute;left:13px;top:13px;border-radius:100%;z-index:10}
    /* Progress Bar Tooltip 1 */
    .fbar-tip:hover span:after{opacity:1}
    .fbar-tip span:after{background:#333;top:-100%;right:0;left:inherit;width:40px;border-radius:3px;font-size:12px;opacity:0;transition:all .7s ease-in-out}
    /* Progress Bar Tooltip 2 */
    .fbar-atip span:after{background:#333;top:-120%;right:0;left:inherit;width:40px;border-radius:3px;font-size:12px}
    .fbar-atip span:before{content:"";position:absolute;border:5px solid transparent;border-top-color:#333;right:15px;top:-7px}
  3. Save Template
Menambahkan Progress Bar di Widget
karena tutor diatas masih cssnya sekarang tinggal memunculkan progress barnya di widget
  1. Pergi ke Blogger > Blogmu > Layout > Add a Gadget > HTML/Javascript
  2. Pilih gaya progres bar yang kamu sukai
    Progress Bar Penuh

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-full'><span style='width:50%' data-percent='50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-full'><span style='width:50%' data-percent='50%'></span></div>
    </div>
    Progress Bar Melengkung

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-box'><span style='width:50%' data-percent='50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-box'><span style='width:50%' data-percent='50%'></span></div>
    </div>
    Progress Tooltip 1

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-tip'><span style='width:50%' data-percent='50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-tip'><span style='width:50%' data-percent='50%'></span></div>
    </div>
    Progress Tooltip 2

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-atip'><span style='width:50%' data-percent='50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-atip'><span style='width:50%' data-percent='50%'></span></div>
    </div>
    Progress Radius

    <div class='fprogress fx'>
    <b>Progress Bar One</b>
    <div class='fbar fbar-radius' data-percent='50%'><span style='width:50%'></span></div>
    <b>Progress Bar Two</b>
    <div class='fbar fbar-radius' data-percent='50%'><span style='width:50%'></span></div>
    </div>
  3. Lalu Save Template


No comments

Subscribe to: Post Comments ( Atom )