javascript - Using RSS content to display posts in custom placeholders -


i'm doing website , until now, i've been using rss feed widget. well, want little more stylish (something fits website). basically, want - rss titles, images, short post content , post times websites rss feed, , display in nice fancy placeholders have on homepage. here homepage code (specifically recent posts section):

    <div id="templatemo-blog">         <div class="container">             <div class="row">                 <div class="templatemo-line-header" style="margin-top: 0px;" >                     <div class="text-center">                         <hr class="team_hr team_hr_left hr_gray"/><span class="span_blog txt_darkgrey">blog posts</span>                         <hr class="team_hr team_hr_right hr_gray" />                     </div>                 </div>                 <br class="clearfix"/>             </div>             <div class="blog_box">                 <div class="col-sm-5 col-md-6 blog_post">                     <ul class="list-inline">                         <li class="col-md-4">                             <a href="#">                                 <img class="img-responsive" src="images/blog-image-1.jpg" alt="gallery 1" />                             </a>                         </li>                         <li  class="col-md-8">                             <div class="pull-left">                                 <span class="blog_header">this post</span><br/>                                 <span>posted : <a class="link_orange" href="#"><span class="txt_orange">tracy</span></a></span>                             </div>                             <div class="pull-right">                                 <a class="btn btn-orange" href="#" role="button">21 february 2084</a>                             </div>                             <div class="clearfix"> </div>                             <p class="blog_text">                                 aliquam quis rutrum risus, ut condimentum ipsum. nullam aliquet libero augue, eget auctor felis vulputate id. proin enim eu libero ornare malesuada. sed iaculis fringilla lacinia. sed laoreet lectus vitae [...]                             </p>                         </li>                     </ul>                 </div> <!-- /.blog_post 1 -->                  <div class="col-sm-5 col-md-6 blog_post">                     <ul class="list-inline">                         <li class="col-md-4"><a href="#">                             <img class="img-responsive" src="images/blog-image-2.jpg" alt="gallery 2" /></a>                         </li>                         <li class="col-md-8">                             <div class="pull-left">                                 <span class="blog_header">website template</span><br/>                                 <span>posted : <a class="link_orange" href="#"><span class="txt_orange">mary</span></a></span>                             </div>                             <div class="pull-right">                                 <a class="btn btn-orange" href="#" role="button">18 february 2084</a>                             </div>                             <div class="clearfix"> </div>                             <p class="blog_text">                                     morbi imperdiet ipsum sit amet dui pharetra, vulputate porta neque tristique. quisque id turpis tristique, venenatis erat sit amet, venenatis turpis. ut tellus ipsum, posuere bibendum [...]                             </p>                         </li>                     </ul>                    </div><!-- /.blog_post 2 -->                  <div class="templatemo_clear"></div>                  <div class="col-sm-5 col-md-6 blog_post">                     <ul class="list-inline">                         <li class="col-md-4"><a href="#">                             <img class="img-responsive" src="images/blog-image-2.jpg" alt="gallery 3" /></a>                         </li>                         <li class="col-md-8">                             <div class="pull-left">                                 <span class="blog_header">web development</span><br/>                                 <span>posted : <a class="link_orange" href="#"><span class="txt_orange">julia</span></a></span>                             </div>                             <div class="pull-right">                                 <a class="btn btn-orange" href="#" role="button">14 february 2084</a>                             </div>                             <div class="clearfix"> </div>                             <p class="blog_text">                                     fusce molestie tellus risus, id commodo turpis convallis id. morbi mattis sapien sapien, vitae lacinia ante interdum sit amet. praesent eget varius diam, ac tempor est. mauris @ scelerisque magna [...]                             </p>                         </li>                     </ul>                    </div><!-- /.blog_post 3 -->                  <div class="col-sm-5 col-md-6 blog_post">                     <ul class="list-inline">                         <li class="col-md-4">                             <a href="#">                                 <img class="img-responsive" src="images/blog-image-1.jpg"  alt="gallery 4" />                             </a>                         </li>                         <li class="col-md-8">                             <div class="pull-left">                                 <span class="blog_header">new fluid layout</span><br/>                                 <span>posted : <a class="link_orange" href="#"><span class="txt_orange">linda</span></a></span>                             </div>                             <div class="pull-right">                                 <a class="btn btn-orange" href="#" role="button">11 february 2084</a>                             </div>                             <div class="clearfix"> </div>                             <p class="blog_text">                                 in venenatis sodales purus cursus. ut consectetur, libero ac elementum tristique, enim ante aliquet mauris, scelerisque congue magna neque ac purus. aliquam facilisis volutpat odio [...]                             </p>                         </li>                     </ul>                 </div> <!-- /.blog_post 4 -->              </div>         </div>     </div> 

here visual reference of above code: enter image description here

basically, want - replace information pre-set there (from template i'm referencing), have no idea how that. if required, i'd happy upload entire project (html, css, js, img). appreciate in advance :)


Comments

Popular posts from this blog

javascript - jQuery: Add class depending on URL in the best way -

caching - How to check if a url path exists in the service worker cache -

Redirect to a HTTPS version using .htaccess -