Wondrous: A Simple, Responsive Blogger Template (Free)
•
Blogger Themes
•
5 min read
Summary: Download the Wondrous responsive Blogger template for free. Features a clean, grid-based, SEO-optimized layout perfect for tech and lifestyle blogs.
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 a liking for simple designs, check out Wondrous. It may be exactly what you are looking for.
Table of Contents
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--> it 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='http://2.bp.blogspot.com/-N74swJOCMho/VIFIQ1YtiWI/AAAAAAAADfs/QkPMxvL_iQQ/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:[email protected]?Subject=Hey!' target='_top'><i class='fa fa-envelope-o' rel='tooltip' title='[email protected]'/>
</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 + "feeds/posts/default?alt=rss"' 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:[email protected]?Subject=Hey!' target='_top'>
<i class='fa fa-envelope-o' rel='tooltip' title='[email protected]'/>
</a>
</div>
The template is free to use. Please do not edit/remove the footer credit link.