Wondrous: A Simple, Responsive Blogger Template (Free)

'Wondrous' is a beautifully designed responsive blogger template with a simple one column layout. This general purpose template comes pre-installed with social sharing buttons and a profile box displayed below the post area. Whether you writer, journalist or even a blogger with liking for simple designs, check out Wondrous. It may be exactly what you are looking for.

Wondrous responsive blogger template
DemoDownload

Embed Videos Responsively

Embedded videos are not responsive by default. To embed your videos responsively, just copy the following div block and simply paste the URL of your video as shown in blue below.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="http://www.dailymotion.com/embed/video/x2ccnkp"></iframe>
</div>

Profile Box

Simply search for <!--Profile Box--> in your template and make changes to the text shown in blue below.

<!--Profile Box-->
<div class='profile-box'>
 <div class='row'>
  <div class='col-xs-4 col-sm-3 col-md-3 col-lg-3'>
<img class='img-responsive pimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7xbYwK7uUhCGY0EfLTfY8L948aoCCb-SYP_unymA3cvaTEsw41JBPH_bFiEZldza4LSUT92xtt6q7NR2X2jQHr81Op5KBO-rWveUyqLp8uz1SH4PJflcGqXnFMm_MkKvU_ukEGESgixy_/s1600/img-profile.jpg'/>
  </div>
  <div class='col-xs-8 col-sm-9 col-md-9 col-lg-9'>
<h4 style='font-size: 16px; font-weight: 700; color: #444444;'><data:post.author/></h4>
<span style='font-size: 15px;'>A 27-year-old freelance journalist based in London, specialising in the media industry.</span>
    <br/>
<!-- Insert Links To Your Social Profile's Here -->
<div class='contact-box pull-right'>
<!-- Email -->
<a href='mailto:wajahat-xyz123@gmail.com?Subject=Hey!' target='_top'><i class='fa fa-envelope-o' rel='tooltip' title='wajahat-xyz123@gmail.com'/>
</a>
<!-- Twitter -->
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'>
</i></a>
<!-- Facebook -->
<a href='https://facebook.com/wajahat-xyz' target='_blank'>
<i class='fa fa-facebook'>
</i></a>
<!-- Google Plus -->
<a href='https://plus.google.com/wajahat-xyz' target='_blank'>
<i class='fa fa-google-plus'>
</i></a>
<!-- Pinterest -->
<a href='https://pinterest.com/wajahat-xyz' target='_blank'>
<i class='fa fa-pinterest'>
</i></a>
</div>
  </div>
 </div>
</div>

Profile Box

Simply search for <!-- Social --> in your template and make changes to the text shown in blue below.

<!-- Social -->
<div class='contact-box-footer'>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' target='_blank'>
<i class='fa fa-rss'></i>
</a>
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'></i>
</a>
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-pinterest'></i>
</a>
<a href='https://facebook.com/wajahat-xyz' target='_blank'>
<i class='fa fa-facebook'></i>
</a>
<a href='https://plus.google.com/wajahat-xyz' target='_blank'>
<i class='fa fa-google-plus'></i>
</a>
<a href='mailto:wajahat-xyz123@gmail.com?Subject=Hey!' target='_top'>
<i class='fa fa-envelope-o' rel='tooltip' title='wajahat-xyz123@gmail.com'/>
</a>

</div>

The template is free for use. Please do not edit/remove the footer credit link.

3 comments :

Reader's Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. How can I add a sidebar to the print in annex link? http://getaltitude.com.br/dsp-cpl210x

    ReplyDelete