This sidebar is used in the {Theme} blog page
Screenshoot
Blog Sidebar
Classes (widgets):
— ct-search-widget (class used for search bar)
— ct-widget-categories (class used for categories in blog)
— ct-widget-latestPosts (class used to show latests posts)
— widget-flickr (class used to show flickr)
— tagcloud (class used to show tags)
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<div class="ct-sidebar"> <div class="row"> <div class="col-sm-6 col-md-12"> <section class="widget ct-search-widget ct-u-marginBottom100"> <div class="widget-inner"> <h4 class="text-uppercase ct-u-textNormal ct-fw-900">Search</h4> <div class="ct-divider ct-u-marginBoth30"></div> <div class="form-group"> <input id="search2" placeholder="Start searching ..." required type="text" name="field[]" class="form-control input-lg"> <button class="btn btn-primary"> <i class="fa fa-search"></i> </button> </div> </div> </section> </div> <div class="col-sm-6 col-md-12"> <section class="widget ct-widget-categories ct-u-marginBottom100"> <div class="widget-inner"> <h4 class="text-uppercase ct-u-textNormal ct-fw-900">Categories</h4> <div class="ct-divider--dark ct-u-marginBoth30"></div> <ul class="list-unstyled ct-fw-400"> <li><a href="#"><i class="fa fa-angle-right"></i>Creative (2)</a></li> <li><a href="#"><i class="fa fa-angle-right"></i>Design 19</a></li> <li><a href="#"><i class="fa fa-angle-right"></i>Photography (25)</a></li> <li><a href="#"><i class="fa fa-angle-right"></i>Image (37)</a></li> <li><a href="#"><i class="fa fa-angle-right"></i>Wordpress (82)</a></li> </ul> </div> </section> </div> <div class="col-sm-6 col-md-12"> <section class="widget ct-widget-latestPosts ct-u-marginBottom100"> <div class="widget-inner"> <h4 class="text-uppercase ct-u-textNormal ct-fw-900">Popular posts</h4> <div class="ct-divider--dark ct-u-marginBoth30"></div> <ul class="list-unstyled"> <li> <div class="widget-latest-posts-left"> <a href="blog-single.html"> <img src="assets/images/demo-content/popular-post1.jpg" alt=""> </a> </div> <div class="widget-latest-posts-content"> <a href="blog-single.html"> <h5 class="ct-fw-900">But I must explain.</h5> </a> <p class="ct-fw-400 ct-u-marginBottom10"> Lorem ipsum dolor sit amet, consectetuer dolor. Aenean massa . </p> <span class="ct-fw-300">Jul 29 2013</span> </div> </li> <li> <div class="widget-latest-posts-left"> <a href="blog-single.html"> <img src="assets/images/demo-content/popular-post2.jpg" alt=""> </a> </div> <div class="widget-latest-posts-content"> <a href="blog-single.html"> <h5 class="ct-fw-900">Lorem ipsum dolor sit amet .</h5> </a> <p class="ct-fw-400 ct-u-marginBottom10"> Lorem ipsum dolor sit amet, consectetuer dolor. Aenean massa . </p> <span class="ct-fw-300">Jul 29 2013</span> </div> </li> <li> <div class="widget-latest-posts-left"> <a href="blog-single.html"> <img src="assets/images/demo-content/popular-post3.jpg" alt=""> </a> </div> <div class="widget-latest-posts-content"> <a href="blog-single.html"> <h5 class="ct-fw-900">Donec quam felis, ultricies .</h5> </a> <p class="ct-fw-400 ct-u-marginBottom10"> Lorem ipsum dolor sit amet, consectetuer dolor. Aenean massa . </p> <span class="ct-fw-300">Jul 29 2013</span> </div> </li> <li> <div class="widget-latest-posts-left"> <a href="blog-single.html"> <img src="assets/images/demo-content/popular-post4.jpg" alt=""> </a> </div> <div class="widget-latest-posts-content"> <a href="blog-single.html"> <h5 class="ct-fw-900">These sweet mornings.</h5> </a> <p class="ct-fw-400 ct-u-marginBottom10"> Lorem ipsum dolor sit amet, consectetuer dolor. Aenean massa . </p> <span class="ct-fw-300">Jul 29 2013</span> </div> </li> </ul> </div> </section> </div> <div class="col-sm-6 col-md-12"> <section class="widget widget-flickr"> <div class="widget-inner"> <h4 class="text-uppercase ct-u-textNormal ct-fw-900">Photos Flickr</h4> <div class="ct-divider--dark ct-u-marginBoth30"></div> <div class="flickr_badge"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&display=latest&size=s&layout=x&source=user_set&set=72157612872346179"></script> </div> </div> </section> </div> <div class="col-sm-6 col-md-12"> <section class="widget widget-flickr ct-u-marginBoth100"> <div class="widget-inner"> <h4 class="text-uppercase ct-u-textNormal ct-fw-900">Latest Tweets</h4> <div class="ct-divider--dark ct-u-marginBoth30"></div> <div class="ct-twitter ct-js-twitter"></div> </div> </section> </div> <div class="col-sm-6 col-md-12"> <section class="widget"> <div class="widget-inner"> <h4 class="text-uppercase ct-u-textNormal ct-fw-900">Tags</h4> <div class="ct-divider--dark ct-u-marginBoth30"></div> <div class="tagcloud"> <a href="">Portfolio</a> <a href="">Theme</a> <a href="">HTML</a> <a href="">Course</a> <a href="">jQuery</a> <a href="">PHP</a> <a href="">Wordpress</a> <a href="">GIT</a> <a href="">Angular</a> </div> </div> </section> </div> </div> </div> |