#3 — Create Widget Easily Using AdminLTE
In the last post, we talk about how to using starter.html. By the way, you can rename it’s file whatever do you want. But the point is when we want to put some code, let’s put it on Main Content.
In this section, let’s make some experiment with widget. By the way, AdminLTE have some code for widget that we can easily use. we can check all of widget with open index.html and click widgets.
How about code for every widget there, let’s check this out :
A. Widget 1
Copy and paste it into Main Content
<div class=”row”>
<div class=”col-md-3 col-sm-6 col-xs-12">
<div class=”info-box”>
<span class=”info-box-icon bg-aqua”><i class=”fa fa-envelope-o”></i></span><div class=”info-box-content”>
<span class=”info-box-text”>Messages</span>
<span class=”info-box-number”>1,410</span>
</div>
</div>
</div><div class=”col-md-3 col-sm-6 col-xs-12">
<div class=”info-box”>
<span class=”info-box-icon bg-green”><i class=”fa fa-flag-o”></i></span><div class=”info-box-content”>
<span class=”info-box-text”>Bookmarks</span>
<span class=”info-box-number”>410</span>
</div>
</div>
</div><div class=”col-md-3 col-sm-6 col-xs-12">
<div class=”info-box”>
<span class=”info-box-icon bg-yellow”><i class=”fa fa-files-o”></i></span><div class=”info-box-content”>
<span class=”info-box-text”>Uploads</span>
<span class=”info-box-number”>13,648</span>
</div>
</div>
</div><div class=”col-md-3 col-sm-6 col-xs-12">
<div class=”info-box”>
<span class=”info-box-icon bg-red”><i class=”fa fa-star-o”></i></span><div class=”info-box-content”>
<span class=”info-box-text”>Likes</span>
<span class=”info-box-number”>93,139</span>
</div>
</div>
</div>
</div>
B. Widget 2
Copy and paste it,
<div class=”row”>
<div class=”col-md-3 col-sm-6 col-xs-12">
<div class=”info-box bg-aqua”>
<span class=”info-box-icon”><i class=”fa fa-bookmark-o”></i></span><div class=”info-box-content”>
<span class=”info-box-text”>Bookmarks</span>
<span class=”info-box-number”>41,410</span><div class=”progress”>
<div class=”progress-bar” style=”width: 70%”></div>
</div>
<span class=”progress-description”>
70% Increase in 30 Days
</span>
</div>
</div>
</div><div class=”col-md-3 col-sm-6 col-xs-12">
<div class=”info-box bg-green”>
<span class=”info-box-icon”><i class=”fa fa-thumbs-o-up”></i></span><div class=”info-box-content”>
<span class=”info-box-text”>Likes</span>
<span class=”info-box-number”>41,410</span><div class=”progress”>
<div class=”progress-bar” style=”width: 70%”></div>
</div>
<span class=”progress-description”>
70% Increase in 30 Days
</span>
</div>
</div>
</div><div class=”col-md-3 col-sm-6 col-xs-12">
<div class=”info-box bg-yellow”>
<span class=”info-box-icon”><i class=”fa fa-calendar”></i></span><div class=”info-box-content”>
<span class=”info-box-text”>Events</span>
<span class=”info-box-number”>41,410</span><div class=”progress”>
<div class=”progress-bar” style=”width: 70%”></div>
</div>
<span class=”progress-description”>
70% Increase in 30 Days
</span>
</div>
</div>
</div><div class=”col-md-3 col-sm-6 col-xs-12">
<div class=”info-box bg-red”>
<span class=”info-box-icon”><i class=”fa fa-comments-o”></i></span><div class=”info-box-content”>
<span class=”info-box-text”>Comments</span>
<span class=”info-box-number”>41,410</span><div class=”progress”>
<div class=”progress-bar” style=”width: 70%”></div>
</div>
<span class=”progress-description”>
70% Increase in 30 Days
</span>
</div>
</div>
</div>
</div>
C. Widget 3
Copy and paste it
<div class=”row”>
<div class=”col-lg-3 col-xs-6">
<div class=”small-box bg-aqua”>
<div class=”inner”>
<h3>150</h3><p>New Orders</p>
</div>
<div class=”icon”>
<i class=”fa fa-shopping-cart”></i>
</div>
<a href=”#” class=”small-box-footer”>
More info <i class=”fa fa-arrow-circle-right”></i>
</a>
</div>
</div><div class=”col-lg-3 col-xs-6">
<div class=”small-box bg-green”>
<div class=”inner”>
<h3>53<sup style=”font-size: 20px”>%</sup></h3><p>Bounce Rate</p>
</div>
<div class=”icon”>
<i class=”ion ion-stats-bars”></i>
</div>
<a href=”#” class=”small-box-footer”>
More info <i class=”fa fa-arrow-circle-right”></i>
</a>
</div>
</div><div class=”col-lg-3 col-xs-6">
<div class=”small-box bg-yellow”>
<div class=”inner”>
<h3>44</h3><p>User Registrations</p>
</div>
<div class=”icon”>
<i class=”ion ion-person-add”></i>
</div>
<a href=”#” class=”small-box-footer”>
More info <i class=”fa fa-arrow-circle-right”></i>
</a>
</div>
</div><div class=”col-lg-3 col-xs-6">
<div class=”small-box bg-red”>
<div class=”inner”>
<h3>65</h3><p>Unique Visitors</p>
</div>
<div class=”icon”>
<i class=”ion ion-pie-graph”></i>
</div>
<a href=”#” class=”small-box-footer”>
More info <i class=”fa fa-arrow-circle-right”></i>
</a>
</div>
</div>
</div>
That’s all. For your information if you wanna download AdminLTE you can check this post
