Help Archive

3 Columns: A Free Responsive 3 Column Blogger Template

Looking for a neat blogger template that features a left and right sidebar? Check out '3Columns' - a free responsive template built on bootstrap. This elegantly designed template features a 3 column layout and will resize perfectly on all screen sizes.

The header comes with a navigation bar placed beside the logo while the left sidebar to comes with pre-installed with a vertical navigation bar, giving you ample space to manage your links. You can use the right sidebar to add your own widgets.

DemoDownload

Header Navigation Links

Search for  in your template and change the URL and link text shown in blue below.

<!-- Header Navigation -->
<nav class='collapse navbar-collapse bs-navbar-collapse' role='navigation'>
  <ul class='nav navbar-nav'>
    <li>
      <a href='/p/contact.html'>
        Contact
      </a>
    </li>
    <li>
      <a href='/p/about.html'>
        About
      </a>
    </li>
    <li class='dropdown'>
      <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
        Dropdown Menu
          <b class='caret'/>
      </a>
   <ul class='dropdown-menu'>
    <li>
      <a href='#'>
        Action
      </a>
    </li>
    <li>
      <a href='#'>
        Another action
      </a>
    </li>
    <li>
      <a href='#'>
        Something else here
      </a>
    </li>
      <li class='divider'/>
    <li>
      <a href='#'>
        Separated link
      </a>
    </li>
  </ul>
   </li>
<li class='dropdown'>
  <a class='dropdown-toggle' data-toggle='dropdown' href='#'>
     Dual-Column dropdown 
      <b class='caret'></b>
  </a>
 <div class='dropdown-menu main-drop-two'>
  <div class='col-50'>
   <ul class='dropdown-menu'>
    <li>
      <a href='#'>
        Download
      </a>
    </li>
    <li>
      <a href='#'>
        Homes
      </a>
    </li>
.
.
. 
and so on..
</nav>

Sidebar Navigation Links

Search for  in your template and change the URL and link text shown in blue below.

<!-- Sidebar Navigation -->

<div id='MainMenu'>
 <div class='list-group'>
<!-- Link 1 -->  
  <a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo1'>Item 1</a>
<!-- Link 2 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo2'>Item 2 <i class='fa fa-caret-down'/></a>
<div class='collapse' id='demo2'>
    <!-- Link 2 SubItem 1 -->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' data-toggle='collapse' href='#SubMenu1'>Subitem 1 <i class='fa fa-caret-down'/></a>
<div class='collapse list-group-submenu' id='SubMenu1'>
    <!-- Link 2 SubItem 1 a-->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' href='#'>Subitem 1 a</a>
    <!-- Link 2 SubItem 2 b-->
<a class='list-group-item list-group-item-success' data-parent='#SubMenu1' href='#'>Subitem 2 b</a>
</div>
    <!-- Link 2 SubItem 2 -->
<a class='list-group-item list-group-item-success' href='#'>Subitem 2</a>
    <!-- Link 2 SubItem 3 -->
<a class='list-group-item list-group-item-success' href='#'>Subitem 3</a>
</div>
<!-- Link 3 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 3</a>
<!-- Link 4 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#demo4'>Item 4 <i class='fa fa-caret-down'/></a>
  <div class='collapse' id='demo4'>
<a class='list-group-item list-group-item-success' href='#'>Subitem 1</a>
<a class='list-group-item list-group-item-success' href='#'>Subitem 2</a>
  </div>
<!-- Link 5 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 5</a>
<!-- Link 6 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 6</a>
<!-- Link 7 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 7</a>
<!-- Link 8 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 8</a>
<!-- Link 9 -->
<a class='list-group-item list-group-item-success' data-parent='#MainMenu' data-toggle='collapse' href='#'>Item 9</a>

</div>
</div>

Social Links

To link to relevant social profiles, simply search for  in the template and make changes to the text shown in blue below..

<!-- Social Links -->

<div class='contact-box'>
<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>
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'/>
</a>
<a href='https://facebook.com/wajahat-xyz' target='_blank'>
<i class='fa fa-facebook'/>
</a>
<a href='https://plus.google.com/wajahat-xyz' target='_blank'>
<i class='fa fa-google-plus'/>
</a>
<a href='https://pinterest.com/wajahat-xyz' target='_blank'>
<i class='fa fa-pinterest'/>
</a>
<a href='https://youtube.com/wajahat-xyz' target='_blank'>
<i class='fa fa-youtube-play' rel='tooltip' title='YouTube'/>
</a>
</div>

Do let us know of any anomalies/layout problems that you may find in the template.

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

templates

No comments :

Post a Comment

Leave A Comment...

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.

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  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  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.

templates

3 comments :

Post a Comment

Leave A Comment...

Easily Add Social Sharing Icons To Blogger Posts

Allow users to share your blog posts on popular social networks such as Facebook, Google, Twitter, LinkedIn and Email with this quick loading, social sharing widget. It uses 'Font Awesome', allowing you to easily customize the icons using pure css.

Step 1. Adding Font Awesome

Just below the opening <head> tag in your template add the following code.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Step 2. Social Sharing Icons

Find the <data:post.body/> tag (usually the second one) in your template and add the following code right below it.

<!-- Social Sharing Icons -->
<!-- Code by: helparchive.blogspot.com -->
<div id='share-btns'>
<!-- CSS -->
<style>
#share-btns img {float: left; width: 60px; margin-right: 10px}
#share-btns ul {list-style-type: none;}
#share-btns ul li {display: inline-block; padding: 3px 5px 0 1px;}
</style>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaiONE2VgMVva-UDI7yjWr9Yel6ZLZNDqZS_rXVLMPYuJqfcoSWj2CCCvKtONM0g5n17wg37uC5-kP5a2A4yLGq_HXxKamkNUNWuDr2MeaOoQHveTXWDK6FfcGtwNkGlhneROPxmL6WANZ/'/>

<ul class='post-sharing-menu'>
<!-- Google Plus -->
<li class='share-gpl'>
 <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Google +'>
   <i class='fa fa-google-plus'></i>
 </a>
</li>
<!-- Facebook -->
<li class='share-fbk'>
 <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'>
   <i class='fa fa-facebook'></i>
 </a>
</li>
<!-- Twitter -->
<li class='share-twt'>
 <a expr:href='&quot;http://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share on Twitter'>
   <i class='fa fa-twitter'></i>
 </a>
</li>
<!-- Pinterest -->
<li class='share-pnt' >
 <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Pin It !'>
   <i class='fa fa-pinterest'></i>
 </a>
</li>
<!-- Linkedin -->
<li class='share-lkd'>
 <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Linkedin'>
   <i class='fa fa-linkedin'></i>
 </a>
</li>
<!-- Print -->
<li class='share-prn'>
 <a expr:href='&quot;http://www.printfriendly.com/print/v2?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Create PDF And Print Friendly !'>
   <i class='fa fa-print'></i>
 </a>
</li>
<!-- Email -->
<li class='share-eml'>
 <a href='mailto:?Subject=ENTER_SUBJECT_HERE&amp;Body=Hey! Check out this article...' rel='nofollow' target='_blank' title='Email This'>
   <i class='fa fa-envelope-o'></i>
 </a>
</li>
</ul>
</div>

That's it. The best thing about this widget is that there's no JavaScript used. You can also customize the icons using CSS only. Here are few customizations:

Original Colors

<!-- CSS -->
#share-btns ul li {display: inline-block; width: 30px; text-align: center;}
#share-btns ul li a {color:white;}
.share-gpl {background: #E13728;}
.share-fbk {background: #4A6EA9;}
.share-twt {background: #2DAAE1;}
.share-pnt {background: #CB1F26;}
.share-lkd {background: #0092C1;}
.share-prn {background: #A29F9F;}
.share-eml {background: #7CB09F;}

Rounded Icons in DarkSeaGreen

<!-- CSS -->
#share-btns ul li {display: inline-block; background: darkseagreen; text-align: center; width: 30px; border-radius: 50%;}
#share-btns ul li a {color:white; text-shadow: 1px 1px 1px rgb(38, 40, 39);}

Custom Icons

You can use your own icons simply by replacing the code "<i class='fa fa-...'></i>" with the URL <img src='URL_HERE'/> of the image you would like to use.

widgets

No comments :

Post a Comment

Leave A Comment...

Change Thumbnail Size for Blogger Images, Popular Posts Widget

Blogger, by default assigns a 72 x 72 pixel size for thumbnails generated from your post images. You may desire to change the image thumbnail size on the Popular posts widget or even thumbnails displayed on homepage, generated from blog posts.

In your template, you'll find a couple of instances of the
"<img expr:src='data:post.thumbnailUrl'/>" tag . Using this tag, you can pick up the first image from a post and generate its thumbnail. By assigning a class/id to this tag and using a simple jquery code, we can define a custom thumbnail size for it.

Before you begin, make sure you have jquery installed in your template. If not, copy the latest version from below and paste it above the closing head tag </head>.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Custom thumbnail Size for Post Images

As mentioned in the begening, a 72 x 72 pixel size thumbnail from post image can be created using the tag:
<img expr:src='data:post.thumbnailUrl'/>

1. To the relevant image tag, simply add a class or id to the tag like this:
<img class="post-thumb" expr:src='data:post.thumbnailUrl'/>

2. Just above the closing head tag </head> in your template, paste the code below.

<script type="text/javascript">
 $(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>

3. The "120" is your new thumbnail size. You can increase or decrease the thumbnail width by changing the "120" to any other number. Lastly, ".post-thumb" is the class you have assigned to your images.

Changing thumbnail Size In Popular Posts Widget

Changing the thumbnail size for Popular Post images is simple. Just paste the code below just above closing head tag </head> in your template.

<script type="text/javascript">
 $(document).ready(function() {$('.PopularPosts img').attr('width', '100%').attr('height', 'auto').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>

Change "120" to any other number to set the desired size for popular posts thumbnail images.

Please give proper credit if you wish to cover this post on your blog.

widgets

15 comments :

Post a Comment

Leave A Comment...

NotePlus: An Elegant 2 Column Responsive Blogger Template (Free)

NotePlus Template is a completely free, fast loading blogger template build using Bootstrap. It features a 2 column layout with the sidebar on the right. The layout is fully responsive and will adjust perfectly on mobile devices and desktop PCs alike.

The theme comes with pre-installed related posts widget and a profile box. Irrespective of what niche you cover, this general purpose theme can be used on almost all topics.

DemoDownload

Profile Box:

You can edit the Profile Box directly from the template. Simply search for  in your template and make changes to the text shown in blue below.

<!-- Profile Box -->
<div class='profile-box'>

<!-- Insert Link/URL of your Profile Pic -->
<img class='img-responsive pimg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgHNJ_gnJv8xcziK41fqHvbqVpqZ-0Cwrz5mKOyoAn7V-jSSWuyb6zd8_f5Nnyz3t0c0aqq0v0g4DF_w3IXFSaPv8QKwb7m9NUBEFAzKiFjHYeuPPszDjC4XLo0rPisyRB0kEoIeBOhGo/s320/default-avatar.png'/>

<!-- Add Name Here -->
<h4>Wajahat Razzaq</h4>

<!-- A line About Yourself -->
<span>I cover news and reviews of the latest Hollywood action movies.</span>

</div>

Social Links:

To link to relevant social profiles, simply search for "" and make changes to the text shown in blue below.

<!-- Social Links -->

<div class='contact-box'>

<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>

<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'/>
</a>

<a href='https://facebook.com/wajahat-xyz' target='_blank'>
<i class='fa fa-facebook'/>
</a>

<a href='https://plus.google.com/wajahat-xyz' target='_blank'>
<i class='fa fa-google-plus'/>
</a>

<a href='https://youtube.com/wajahat-xyz' target='_blank'>
<i class='fa fa-youtube-play' rel='tooltip' title='YouTube'/>
</a>

</div>

Do let us know of any layout problems / anomalies that you may find in the template.

Please keep the footer links intact.

templates

1 comment :

Post a Comment

Leave A Comment...

The Writer Template: A Neat, Simple Responsive Blogger Template

The Writer Template is an elegant white blogger template with a simple, one column layout. It is fully responsive and adjusts perfectly on all screen sizes. If you're a writer, journalist or a even a blogger with a liking for plain and simple design, this template is for you.

The Writer Template comes with pre-installed related post widget and a profile box that displays below all posts.

DemoDownload

Profile Box:

You can edit the Profile Box directly from the template. Simply search for  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'>
  <!-- Link/URL of your Photo -->
<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: 400;'><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'>

<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>
<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'>
</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>

</div>
    </div>
</div>
</div>

Social Links (In Footer):

To point social links to your social accounts simply search for  in the template and make changes to the text shown in blue below.

<!-- Social Networks -->

<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'/>
  </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>

<a href='https://twitter.com/wajahat-xyz' target='_blank'>
<i class='fa fa-twitter'>
</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>

</div>

Do inform us of any anomalies / layout problems that you may find in the template.