Now lets get back to our widget, hence this is a small widget, we have created a small and tiny widget with simple codes but at the same time it gives your blog an elegant touch. The widget looks very cute and smooth. You can check the demo below before adding the widget.
.item .post-body ul li:before{
display:none;
}
.item .widget .post-body li { margin: 0;
}
.trendy_counters { width: 350px;
}
.trendy_counters:after {
clear: both;
content: ”;
display: block;
}
.trendy_counters ul {
list-style: none;
margin: 0;
padding: 0;
clear: both;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
}
.trendy_counters ul li a {
padding: 10px;
text-decoration:none;
}
.trendy-counters-per-row-2 ul li {
width: 50%;
float: left;
}
.trendy-counters-per-row-3 ul li {
width: 33.333%;
float: left;
}
.trendy-counters-per-row-4 ul li {
width: 25%;
float: left;
}
.sc_vertical a, .sc_vertical span:not(.fa) {
display: block;
text-align: center
}
.sc_horizontal a {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
.sc_horizontal span {
margin-right: 3px;
}
.show-labels-No .label {
display: none !important;
}
.trendy-counters-icons-order {
padding: 10px;
background: #f6f6f6;
}
.trendy-counters-icons-order div {
background: #eaeaea;
display: inline-block;
margin-right: 5px;
padding: 10px;
}
.trendy-counters-icons-order div:hover {
cursor: move;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
width: 33%;
float: left;
padding: 0;
}
Adding The Widget
<div class=”trendy_counters”>
<ul class=”sc_vertical”>
<li class=”count-twitter”><a data-color-hover=”#0084b4″ style=”background-color: rgb(51, 204, 255); padding: 10px;” class=”icon” href=”https://twitter.com/trendy_theme”><span class=”fa fa-fw fa-twitter” style=”font-size:24px; color:#fff” data-color-hover=”#fff”></span><span class=”items”><span data-color-hover=”#fff” class=”count” style=”font-size:16px; color:#fff”>114</span><span data-color-hover=”#fff” class=”label” style=”font-size:12px; color:#fff”>followers</span></span></a></li>
<li class=”count-googleplus”><a data-color-hover=”#ff9800″ style=”background-color:#ff9800; padding:10px;” class=”icon” href=”https://ift.tt/35ALJQK class=”fa fa-fw fa-rss” style=”font-size:24px; color:#fff” data-color-hover=”#fff”></span><span class=”items”><span data-color-hover=”#fff” class=”count” style=”font-size:16px; color:#fff”>0</span><span data-color-hover=”#fff” class=”label” style=”font-size:12px; color:#fff”>followers</span></span></a></li>
<li class=”count-facebook”><a data-color-hover=”#5E80BF” style=”background-color:#3B5998; padding:10px;” class=”icon” href=”https://ift.tt/2KME1Lh class=”fa fa-fw fa-facebook-official” style=”font-size:24px; color:#fff” data-color-hover=”#fff”></span><span class=”items”><span data-color-hover=”#fff” class=”count” style=”font-size:16px; color:#fff”>0</span><span data-color-hover=”#fff” class=”label” style=”font-size:12px; color:#fff”>likes</span></span></a></li>
<li class=”count-vimeo”><a data-color-hover=”#0088cc” style=”background-color:#00adef; padding:10px;” class=”icon” href=”https://ift.tt/37tSCVw class=”fa fa-fw fa-vimeo” style=”font-size:24px; color:#fff” data-color-hover=”#fff”></span><span class=”items”><span data-color-hover=”#fff” class=”count” style=”font-size:16px; color:#fff”>0</span><span data-color-hover=”#fff” class=”label” style=”font-size:12px; color:#fff”>followers</span></span></a></li>
<li class=”count-youtube”><a data-color-hover=”#90030c” style=”background-color:#bf2626; padding:10px;” class=”icon” href=””><span class=”fa fa-fw fa-youtube” style=”font-size:24px; color:#fff” data-color-hover=”#fff”></span><span class=”items”><span data-color-hover=”#fff” class=”count” style=”font-size:16px; color:#fff”>0</span><span data-color-hover=”#fff” class=”label” style=”font-size:12px; color:#fff”>subscribers</span></span></a></li>
<li class=”count-instagram”><a data-color-hover=”#8a3ab9″ style=”background-color:#cd486b; padding:10px;” class=”icon” href=”https://ift.tt/2qzaiyF class=”fa fa-fw fa-instagram” style=”font-size:24px; color:#fff” data-color-hover=”#fff”></span><span class=”items”><span data-color-hover=”#fff” class=”count” style=”font-size:16px; color:#fff”>266</span><span data-color-hover=”#fff” class=”label” style=”font-size:12px; color:#fff”>followers</span></span></a></li>
</ul>
</div>
<link href=’//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’/>
<style>
.trendy_counters:after {
clear: both;
content: ”;
display: block;
}
.trendy_counters ul {
list-style: none;
margin: 0;
padding: 0;
clear: both;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
}
.trendy_counters ul li a {
padding: 10px;
text-decoration:none;
}
.trendy-counters-per-row-2 ul li {
width: 50%;
float: left;
}
.trendy-counters-per-row-3 ul li {
width: 33.333%;
float: left;
}
.trendy-counters-per-row-4 ul li {
width: 25%;
float: left;
}
.sc_vertical a, .sc_vertical span:not(.fa) {
display: block;
text-align: center
}
.sc_horizontal a {
display: flex;
text-align: center;
align-items: center;
justify-content: center;
}
.sc_horizontal span {
margin-right: 3px;
}
.show-labels-No .label {
display: none !important;
}
.trendy-counters-icons-order {
padding: 10px;
background: #f6f6f6;
}
.trendy-counters-icons-order div {
background: #eaeaea;
display: inline-block;
margin-right: 5px;
padding: 10px;
}
.trendy-counters-icons-order div:hover {
cursor: move;
}
.trendy_counters ul li {
text-align: center;
background: #f9f9f9;
width: 33%;
float: left;
padding: 0;
}
</style>
Change the highlighted red text with your subscriber/followers/fan number. and if you already have fontawesome in your blog then remove blue highlighted code.
No comments:
Post a Comment