#6 — How to Make Simple Social Widget or Profile Widget View Using AdminLTE
In the previous lesson, we talk much about widget and so some experience about it. In this lesson we will talk again with widget but in this case, we will build widget for social media that usually put it on user profile.
I guess you familiar with this, We usually saw it on user account page and you can make it self with this code.
A. Social Widget 1
View of that widget, have a code like this :
<! — Widget: user widget style 1 →
<div class=”box box-widget widget-user-2">
<! — Add the bg color to the header using any of the bg-* classes →
<div class=”widget-user-header bg-yellow”>
<div class=”widget-user-image”>
<img class=”img-circle” src=”../dist/img/user7–128x128.jpg” alt=”User Avatar”>
</div><! — /.widget-user-image →
<h3 class=”widget-user-username”>Nadia Carmichael</h3>
<h5 class=”widget-user-desc”>Lead Developer</h5>
</div>
<div class=”box-footer no-padding”>
<ul class=”nav nav-stacked”>
<li><a href=”#”>Projects <span class=”pull-right badge bg-blue”>31</span></a></li>
<li><a href=”#”>Tasks <span class=”pull-right badge bg-aqua”>5</span></a></li>
<li><a href=”#”>Completed Projects <span class=”pull-right badge bg-green”>12</span></a></li>
<li><a href=”#”>Followers <span class=”pull-right badge bg-red”>842</span></a></li>
</ul>
</div>
</div>
<! — /.widget-user — >
B. Social Widget 2
View of that widget, have a code like this :
<! — Widget: user widget style 1 →
<div class=”box box-widget widget-user”>
<! — Add the bg color to the header using any of the bg-* classes →
<div class=”widget-user-header bg-aqua-active”>
<h3 class=”widget-user-username”>Alexander Pierce</h3>
<h5 class=”widget-user-desc”>Founder & CEO</h5>
</div>
<div class=”widget-user-image”>
<img class=”img-circle” src=”../dist/img/user1–128x128.jpg” alt=”User Avatar”>
</div>
<div class=”box-footer”>
<div class=”row”>
<div class=”col-sm-4 border-right”>
<div class=”description-block”>
<h5 class=”description-header”>3,200</h5>
<span class=”description-text”>SALES</span>
</div>
<! — /.description-block →
</div>
<! — /.col →
<div class=”col-sm-4 border-right”>
<div class=”description-block”>
<h5 class=”description-header”>13,000</h5>
<span class=”description-text”>FOLLOWERS</span>
</div>
<! — /.description-block →
</div>
<! — /.col →
<div class=”col-sm-4">
<div class=”description-block”>
<h5 class=”description-header”>35</h5>
<span class=”description-text”>PRODUCTS</span>
</div>
<! — /.description-block →
</div>
<! — /.col →
</div>
<! — /.row →
</div>
</div>
<! — /.widget-user →
C. Social Widget 3
View of that widget, have a code like this :
<! — Widget: user widget style 1 →
<div class=”box box-widget widget-user”>
<! — Add the bg color to the header using any of the bg-* classes →
<div class=”widget-user-header bg-black” style=”background: url(‘../dist/img/photo1.png’) center center;”>
<h3 class=”widget-user-username”>Elizabeth Pierce</h3>
<h5 class=”widget-user-desc”>Web Designer</h5>
</div>
<div class=”widget-user-image”>
<img class=”img-circle” src=”../dist/img/user3–128x128.jpg” alt=”User Avatar”>
</div>
<div class=”box-footer”>
<div class=”row”>
<div class=”col-sm-4 border-right”>
<div class=”description-block”>
<h5 class=”description-header”>3,200</h5>
<span class=”description-text”>SALES</span>
</div>
<! — /.description-block →
</div>
<! — /.col →
<div class=”col-sm-4 border-right”>
<div class=”description-block”>
<h5 class=”description-header”>13,000</h5>
<span class=”description-text”>FOLLOWERS</span>
</div>
<! — /.description-block →
</div>
<! — /.col →
<div class=”col-sm-4">
<div class=”description-block”>
<h5 class=”description-header”>35</h5>
<span class=”description-text”>PRODUCTS</span>
</div>
<! — /.description-block →
</div>
<! — /.col →
</div>
<! — /.row →
</div>
</div>
<! — /.widget-user →
