Home Archives for April 2016

28 Apr 2016

How to add Bootstrap to Blogger

How to add bootstrap 3.0 to blogger
How to add Framework Twitter Bootstrap to Blogger - yesterday i already share How to add a progess in blog, today i will share how to add framework twitter bootstrap 3 in blogspot.

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.

My template also now using bootstrap 3.0 to create a responsive and full-featured blog provided from bootstrap like jumbotron, wells, progress, alerts, pager, pagination, etc.

What is Bootstrap?
  1. Bootstrap is a free front-end framework for faster and easier web development
  2. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
  3. Bootstrap also gives you the ability to easily create responsive designs
How to add Bootstrap in blog?We will use the CDN (Content Delivery Network) of MaxCDN which provide support for Bootstrap.
Note : If you use a template that I design, then you do not need to follow this tutorial, Because my template already use bootstraps

Add a Bootstrap CSS in Blog
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find <head> (CTRL + F in editor)
  2. Put the code below before <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!-- If the viewport meta tag already exists in your blog, then you should replace it with below -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  3. Save Template
Add a Bootstrap Javascript in Blog
If you want to make javascript drop down menus, tabs, scrollspy, collapse button (button spoiler), carousel, pop up alerts, button effect. then you should add this javascript. but if just want to create a responsive blog you do not need to add this javascript.
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find </head> (CTRL + F in editor)
  2. Put the code below before </head>
    <!-- jQuery library (Optional - if your blog have jquery dont copy this) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  3. Save Template
Now your blog have a bootstrap 3, for component, css, javascript you can visit the blog Bootstrap

Add a Bootstrap Container in Blog
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find <div id='outer-wrapper'> (CTRL + F in editor)
  2. Then add class='container' in <div id='outer-wrapper'> 
    <div class='container' id='outer-wrapper'>
  3. Save Template
Add a Bootstrap Grid in Blog
Bootstrap's grid system allows up to 12 columns across the page.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:
  1. Go to Blogger > Yourblog > Template > Edit HTML > Find <div id='main-wrapper'>
    (CTRL + F in editor)
    If it does not find HTML <div id='main-wrapper'>
    Please find this
    <div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
  2. then replace with this html 
    <div class='col-xs-12 col-sm-8 col-md-8 clearfix' id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
  3. Find <div id='sidebar-wrapper'> (CTRL + F in editor)
    If it does not find HTML <div id='sidebar-wrapper'>
    Please find this
    <div id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
    or
    <div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
  4. Then replace with this 
    <div class='col-xs-12 col-sm-4 col-md-4 clearfix' id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
  5. Find <div id='content-wrapper'> (CTRL + F in editor)
  6. Then replace with this <div class='row' id='content-wrapper'>
  7. Save Template
How to Make Post Gridsometimes i wonder why people liked the Style Post Grid.
If you want make post like grid you can follow this step
  1. Find HTML <div class='blog-posts hfeed'> CTRL + F in editor)
  2. Replace with this <div class='blog-posts hfeed row'>
  3. Find HTML <b:include data='post' name='post'/> (CTRL + F in editor)
  4. Replace with this 
    <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>
    <div class='_grid col-xs-6 col-sm-4 col-md-4'><b:include data='post' name='post'/><div/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if></b:if>
  5. Then Save Template
Now your blog is installed bootstrap, but your blog is not yet fully responsive. You have to manage the rest with CSS media queries for selectors who have not been responsive. if you are still confused with the tutorial above, please comment.
thank you
Cara Menambahkan Bootstrap di blogger - kemarin saya sudah share Cara menambahkan progress bar di blog, hari ini saya akan share cara menambahkan bootstrap di blogger.

Bootstrap yaitu kumpulan rangka HTML, CSS, dan Javascript yang paling popular sering digunakan developer untuk membuat blog responsive, dan mobile friendly.

Templateku juga menggunakan bootstrap versi 3 untuk membuat blog responsive dan full fitur yang disediakan bootstrap seperti jumbotron, well, progress, alert, pagination, button, dropdown, navigasi, dan lupa lagi.

Apa itu Bootstrap?
  1. Bootstrap adalah kerangka front-end gratis untuk pengembangan web lebih cepat dan lebih mudah
  2. Bootstrap menyediakan desain HTML dan CSS untuk typography, form, button, tabel, navigasi, pop up, slider dan lainnya
  3. Bootstrap juga memudahkan adnda untuk membuat blog responsif
Bagai mana cara menambahkan Bootstrap di blog?kita akan menggunakan CDN (Content Delivery Network) dari MaxCDN yang sudah disediakan di situs bootstrapnya.
Catatan : Jika kamu menggunakan template yang saya desain, maka kamu tidak perlu ikuti tutorial ini karena template saya sudah menggunakan bootstrap

Menambahkan CSS Bootstrap di blog
  1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <head> (CTRL + F di editor)
  2. Taruh kode dibawah ini sesudah kode <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!-- jika meta tag viewport sudah ada di blogmu maka ganti sama kode dibawah ini -->
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
  3. Save Template
Menambahkan Javascript Bootstrap di blog
jika kamu mau membuat navigasi dropdown, tab, scrollspy, tombol spoiler, slider, kotak pop up, kotak info atau kotak peringatanda, dan tombol efek maka kamu harus menambahkan javascript bootstrap di blogmu, namun jika kamu hanya ingin membuat blogmu responsive maka kamu tidak perlu menambahkan javascript ini.
  1. Pergi ke blogger > Blogmu > Template > Edit HTML > Cari kode </head> (CTRL + F in editor)
  2. Put the code below before </head>
    <!-- jQuery library (Opsional - jika blogmu udah ada jquery jangan kocy js script dibawah ini) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  3. Save Template
sekarang blogmu sudah terpasang bootstrap, untuk komponen, css, javascript kamu bisa cek disitus officialnya Bootstrap

Cara Menambahkan Kontainer Bootstrap di blog
  1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <div id='outer-wrapper'> (CTRL + F di editor)
  2. lalu tambahkan kode class='container' di <div id='outer-wrapper'> maka hasilnya seperti dibawah ini
    <div class='container' id='outer-wrapper'>
  3. Lalu save template
Membuat Main Wrapper dan Sidebar-Wrapper Responsive
dalam Sistem Grid Bootstrap yaitu hanya memperbolehkan 12 kolom. contohnya
<div class='container' id='content'>
<div class='col-xs-12 col-sm-8 col-md-8' id='main'>
</div>
<div class='col-xs-12 col-sm-4 col-md-4' id='side'>
</div>
</div>
element id='main' dan elemen id='side' harus totalnya berjumlah 12 tidak boleh lewat. 8 + 4 = 12
semoga paham, untuk col-xs-12 yaitu kolom akan 100% pada saat di mobile. silahkan cek di situsnya untuk info lebih lanjut
  1. Pergi ke Blogger > Blogmu > Template > Edit HTML > Cari kode <div id='main-wrapper'>
    (CTRL + F di editor)
    Jika tidak ketemu kode <div id='main-wrapper'>
    Silahkan cari kode ini
    <div id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
  2. Jika sudah ketemu lalu ganti dengan html dibawah ini 
    <div class='col-xs-12 col-sm-8 col-md-8 clearfix' id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
  3. Cari <div id='sidebar-wrapper'> (CTRL + F di editor)
    Jika tidak ketemu kode <div id='sidebar-wrapper'>
    Silahkan cari kode ini
    <div id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
    atau
    <div id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
  4. Jika sudah ketemu lalu ganti dengan html dibawah ini 
    <div class='col-xs-12 col-sm-4 col-md-4 clearfix' id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
  5. Cari kode <div id='content-wrapper'> (CTRL + F di editor)
  6. jika ketmeu kode diatas lalu ganti denga kode dibawah ini <div class='row' id='content-wrapper'>
  7. Save Template
Membuat Post Bergaya Grid dengan Bantuan Bootstrapterkadang saya sering bingung mengapa orang lebih suka template bergaya "Grid".
bagi yang ingin membuat post bergaya grid silahkan ikut tutorial dibawah ini
  1. Cari kode HTML <div class='blog-posts hfeed'> CTRL + F in editor)
  2. Lalu ganti dengan kode ini <div class='blog-posts hfeed row'>
  3. Cari kode HTML <b:include data='post' name='post'/> (CTRL + F in editor)
  4. Lalu ganti dengan kode ini 
    <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'>
    <div class='_grid col-xs-6 col-sm-4 col-md-4'><b:include data='post' name='post'/><div/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if></b:if>
  5. Terus Save Template
Blogmu sudah terpasang bootstrap berserta cincongnya, namun blogmu belum sepenuhnya responsif, kamu harus mengatur css untuk seletor yang kamu buat/tidak ada dibootstrap dengan menggunakan CSS Media Queries bisa cari digugel tuh infonya, jika masih bingung cincong diatas silahkan fatok the snake di komentar.
terima kasih

Read More

23 Apr 2016

How to add a Progress Bar for Blog

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


Read More

20 Apr 2016

OneStream Streaming Blogger Template v1.3

OneStream Streaming Blogger Template - is streaming the first template I created, I was challenged to design a dark color. because I see the design of streaming anime is dark. made me think hard to make designs with dark and the results are quite impressive to behold :D
Thank you for misscelles-d4p7e2i and ferdiferrah-d4lv08g for image one piece make my design is awesome :D
Cover Streaming Anime Blogger Template
Preview OneStreaming Anime Video Blogger Template
Description Template

OneStream Video Blogger Template is a template for Video, Movies, and Streaming anime with Newsticker, Carousel Slider and Spetific label, Defer Video for optimize loading blog, Searchbox, Turn off light in the post, Download button with spoiler/collapse and more important this template support RTL Blog.

This template is responsive, 2 column and colored dark and red with awesome features have well documented and PSD Header.

Note : Click Button "How To Configure Template" for setting this template
Change Thumbnail Post : Add HTML Image into iframe <iframe><img src="" alt="" title=""/></iframe> < example Add Thumbnail Post
from folder Document One Stream Blogger Template > Post - Streaming.txt

Log : Update v1.3 [5/7/16]

Documents (Only) Template (Only) Live Preview How to Configure Template
  • PSD Header
  • Responsive
  • Bootstrap
  • 2 Column
  • Spetific Label
  • Turn Off Light
  • Pagination
  • Search Box
  • Newsticker
  • Carousel Slider
  • Related Posts
  • Tab Video Mirror
  • Popup Report Video
  • Download Button Collapse
  • Support RTL
  • Document
  • Optimize
  • SEO
  • Remove Footer credits
Read More

11 Apr 2016

Sakura Blogger Template v2.2

Sakura Blogger Template -This template was previously named "Phrozen 2" but because I thought the name was weird so I replaced it with "Sakura" with different designs and nicer with the color pink
Template Sakura build with bootstrap and responsive
Sakura Anime Blogger Template
Description Template

Sakura Anime Blogger Template is a template for Share Anime like a Fansub or Fanshare with Custom Post for Anime Episode.

This template is responsive, 2 column and colored pink and black.

Note : Click Button "How To Configure Template" for setting this template
Log : Update v.2.2 [5/7/16]

Documents (Only) Template (Only) Live Preview How to Configure Template
  • Responsive
  • 2 Column
  • SEO
  • News Ticker
  • Pagination
  • Spetific Anime
  • Related Posts
  • Genre Dropdown
  • Search Box
  • Document
  • Remove Footer credits
Read More

6 Apr 2016

Sparkling Blogger Template

Sparkling Blogger Template - Today i will share template Sparkling Blogger Template adapted from wordpress, design by colorlib so i just convert from wordpress to blogger because i like that template, previously I've shared template Simple Fast Blogger Template.

This is the first wordpress template that I created for bloggers. if you want Request Template, you have to wait lol.
template
Sparkling Blogger Template
Description Template

Sparkling Blogger Template is a template minimalist from wordpress. designed by colorlib with awesome feature like slider from unslider, and support RTL and elegant look build with Skeleton and Bootstrap Responsive and more

This template is responsive, 3 column post, sidebar, and footer and colored red and white.

Note : Click Button "How To Configure Template" for setting this template and Document from Folder

Fix Unslider for RTL BLOG : Find this

<div class='banner' dir='ltr'> then change ltr be rtl
Download Live Preview How to Configure Template
  • Responsive
  • Mobile Friendly
  • Support RTL
  • 3 Column
  • Unslider
  • Optimize
  • SEO
  • Search Box
  • Bootstrap
  • Skeleton
  • Document
  • Remove Footer credits
Read More
Langganan: Postingan (Atom)