Fanstrap Anime Responsive Blogger Template - Template Truyện tranh - Anime cho Blogger

Fanstrap Anime Responsive Blogger Template

Fanstrap Anime là một template sử dụng bootstrap css framework. Bên cạnh việc tăng tốc độ cho website bootstrap css framework cũng cung cấp tính năng responsive cho template. Và bạn sẽ không mất quá nhiều thời gian để chỉnh sửa code vì bootstrap đã cung cấp sẵn các tính năng cần thiết như: menu tab, buttons spoiler, menu tooltip...

• DOWNLOAD
• https://yuukithemes-fanstrap.blogspot.com

Tính năng

1Có hộp tìm kiếm với hiệu ứng pop-up khi bạn nhấn vào nút tìm kiếm
22 chế độ xem tùy chỉnh grid style hoặc list style
3Slider bài viết nổi bật
4Widget recent post theo label dạng slide hoặc grid style
5Popular post dạng 2 cột độc đáo.

Hướng dẫn

Chuyển đổi Grid hoặc List style Widget - Recent Post Spetific Label Widget - Status Project Page - Contact Page - Staff Post - Download Box

1Chuyển đổi Grid hoặc List style

Tìm id='list' đổi thành id='grid' và ngược lại.

2Widget - Recent Post Spetific Label

Vào Bố cục >> Chỉnh sửa và thay thế Ore Monogatari thành tên label bạn muốn hiển thị.

Note: Đối với widget Anime Slider và Recent PV mỗi label phải có ít nhất 6 bài viết.

3Widget - Status Project

<div class='rilisan'>
<ul>
<li>
<b>Rokka no Yuusha</b>
<i class="progress"><i class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%;">40%</i></i>
</li>
<li>
<b>Gunslinger Stratos</b>
<i class="progress"><i class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%;">80%</i></i>
</li>
<li>
<b>Himouto! Umaru-chan</b>
<i class="progress"><i class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">60%</i></i>
</li>
<li>
<b>Bakemonogatari</b>
<i class="progress"><i class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:45%;">45%</i></i>
</li>
</ul>
<div class="alert alert-success" role="alert">
The original novels revolve around two high school students named
</div>
</div>

4Page - Contact

<form name="contact-form">
    <div class="form-group">
        <label><i class="glyphicon glyphicon-user"></i> Name <i class="glyphicon glyphicon-asterisk"></i></label>
        <input class="form-control" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    </div>
    <div class="form-group">
        <label><i class="glyphicon glyphicon-envelope"></i> Email <i class="glyphicon glyphicon-asterisk"></i></label>
        <input class="form-control" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
    </div>
    <div class="form-group">
        <label><i class="glyphicon glyphicon-pencil"></i> Messages <i class="glyphicon glyphicon-asterisk"></i></label>
        <textarea class="form-control" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="8"></textarea>
    </div>
    <input id="ContactForm1_contact-form-submit" type="button" value="Send" />
    <div style="text-align: center; width: 100%;">
        <div id="ContactForm1_contact-form-error-message"></div>
        <div id="ContactForm1_contact-form-success-message"></div>
    </div>
</form>
<style type="text/css">#comments,#blog-pager,.breadcrumbs,.post-footer{display:none}.form-group .glyphicon-asterisk{color:#D22323;font-size:7px;position:relative;top:-5px;padding:0 0 0 2px}.form-group label{text-transform:uppercase;font-size:14px;letter-spacing:.3px}.form-group i{font-size:12px;padding-right:5px}.btn-default,.btn-primary{width:100%} </style> 

5Page - Staff

<div class='staff_item row'>
    <div class='staff_thmb col-xs-6 col-sm-5 col-md-4'><img src="http://2.bp.blogspot.com/-nmHu-kVtj-A/VVPwArQtHuI/AAAAAAAALlU/TgRUQdFYtwQ/w230-h160-c/ore%2Bmonogatari%2B-%2B06.jpg" alt="Staff" class="img-rounded"></div>
    <div class='staff_pos col-xs-6 col-sm-7 col-md-8'>
        <h4>Frozen</h4>
        <ul>
            <li>First Text</li>
            <li>Second Text</li>
            <li>Third Text</li>
        </ul>
    </div>
</div>
<div class='staff_item row'>
    <div class='staff_thmb col-xs-6 col-sm-5 col-md-4'><img src="http://2.bp.blogspot.com/-nmHu-kVtj-A/VVPwArQtHuI/AAAAAAAALlU/TgRUQdFYtwQ/w230-h160-c/ore%2Bmonogatari%2B-%2B06.jpg" alt="Staff" class="img-rounded"></div>
    <div class='staff_pos col-xs-6 col-sm-7 col-md-8'>
        <h4>Frozen</h4>
        <ul>
            <li>First Text</li>
            <li>Second Text</li>
            <li>Third Text</li>
        </ul>
    </div>
</div>
<div class='staff_item row'>
    <div class='staff_thmb col-xs-6 col-sm-5 col-md-4'><img src="http://2.bp.blogspot.com/-nmHu-kVtj-A/VVPwArQtHuI/AAAAAAAALlU/TgRUQdFYtwQ/w230-h160-c/ore%2Bmonogatari%2B-%2B06.jpg" alt="Staff" class="img-rounded"></div>
    <div class='staff_pos col-xs-6 col-sm-7 col-md-8'>
        <h4>Frozen</h4>
        <ul>
            <li>First Text</li>
            <li>Second Text</li>
            <li>Third Text</li>
        </ul>
    </div>
</div> 

6Post - Download Box

 <div class='dl-box'>
    <h3 class='dl-title'>Download Arslan Senki – Episode 08 [Subtitle Indonesia]</h3>
    <div class='dl-item'><span class='dl-quality'>720</span>
        <div class='dl-anime'><a href='#'>Solidfiles</a> <a href='#'>Tustfiles</a> <a href='#'>Sharebeast</a> <a href='#'>Mirror</a></div>
    </div>
    <div class='dl-item'><span class='dl-quality'>480</span>
        <div class='dl-anime'><a href='#'>Solidfiles</a> <a href='#'>Tustfiles</a> <a href='#'>Sharebeast</a> <a href='#'>Mirror</a></div>
    </div>
</div>

Password: iris-tips.blogspot.com

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm