New Blogger Template : Directus

Hi everybody , this is a new Blogger template. The name might be a little unheard , but it means Simple in Latin. I have used a lot of CSS3 essentially shadows and border-radius property. The header design is quite similar to the Dynamic Views template and it is Responsive like the previous template (No horizontal scroll-bar till 580px). It has threaded comments but now with Circular avatar picture. The colors used are overall of lighter shade and give a kind of soothing effect.



Complete List of Features

-Responsive design (No horizontal scrollbar till 580px)
-Cross browser compatibility 
-Page Navigation
-Widgets ready sidebar
-Its own Related Post widget
-Stylish commenting system with Circular Avatars
-Attractive Post Title with hover and active states
-jQuery and CSS3 powered Header design
-Three column footer
-Threaded Reply feature for Blogger Comment system
-Eye-catching Sidebar Design
-Search Engine Optimized
-Near W3C Valid
-95%+ Google Page Speed score 

-Integrated Menu and Search Box
-CSS3 shadows around post area
-Inbuilt FB and Twitter Icon
-Attractive web fonts like Trade Winds and Playball
-Appealing "Read More" button with hover and active states
-Modified input and select fields
-Responsive Images

How to configure the features:

The menu is just below the Header and automatically displays all the pages of the blog. Firstly when you install it on your blog, go to  Layout (or Page Elements) and remove the title of that widget. The title should remain blank for it to display the pages correctly. In case you are using the New interface then you can easily add custom links to this menu by going to Pages in the Dashboard and then choosing Web Address in the New Page option.

2.Page Navigation
To change the number of posts to be shown on using pagination find the term postperpage ( Using CTRL+F ) ,There will be a script something like this

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget

Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.

3.Enabling Reply option for the comments
The the reply option in the comment will have to enabled . Just search for the term blogid= ( using CTRL+F ) with "Expand Widget Preview" option ticked. You will see something like this "blogID=XXXXXXXXXXXX" replace this XXXXXXXXXXX number with your Blog's ID. [To find your Blog's ID just Open Design Tab and in the Address bar of your browser there will be a very long number , just paste that here]

4. Deleting Navbar and Attribution widget
If you are using Simple templates or any other default Blogger template, Then it might happen that the NavBar and Attirbution widget would be visible in the sidebar just after installing the template. To remove these widgets you will have to Edit HTML of the Blog and search for something like "Navbar" & "Attribution". These too things you will find inbetween b:widget tags . Remove everything including these tags which will look something like this

<b:widget id='Navbar' >

Note: Interestingly this can only be done in the Old Blogger Interface. In case you try it in new Blogger interface ,it will always crash.

5. Header
The header text can be changed easily using the Header widget present in the Page Elements (or Layouts ). If you want to add a background image ,then search for the following term .header{ and you will see something like this

.header{background-image:-moz-linear-gradient(center top, rgba(255, 255, 255, 0.1), rgba(100, 100, 100, 0.05));background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.05)));background-attachment:scroll;background-color:rgba(243, 243, 243, 1);-moz-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-o-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);height:90px !important;position:absolute;top:0px !important;left:0px !important;width:100% !important;z-index:1001;display:block;-webkit-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);-moz-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);}

Remove all the background- attributes from the above code and replace it with a single attribute containing the URL of the background ,something like this:

.header{background: url(IMAGE-URL);-moz-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-ms-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-o-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px 0px rgba(0, 0, 0, 0.3);height:90px !important;position:absolute;top:0px !important;left:0px !important;width:100% !important;z-index:1001;display:block;-webkit-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);-moz-box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);box-shadow:0px 3px 30px rgba(0, 0, 0, 0.1);}

6. Some other features

>>To add border across images add a class="thumb" in the img tag

>>To make images with rounded edges , add a class="image" in the a tag surrounding the img tag.

>>The images are scaled down in smaller screens ,never exceeding the white post area

>> If you want to add buttons like the Read More one ,you can achieve it b adding a class="button" in a a tag something like this:

<a href="URL" class="button" >Button</a>

These also have option to add a small symbol just before them ,like for example a arrow

<a href="URL" class="next button" >Button</a>

For complete list of options check this URL

This template could not have been possible without Codrops (Header Text) ,RDT (Buttons) and CSS-Tricks (a lot of things)

I hope you like the template and don't hesitate to the ask about any problems you face while using the template.



Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
MUXLIMO said...

Hoho.. nice, Bro! :)

@MUXLIMOThanks :)

Zeesun said...

Very nice template,

@ZeesunThanks :)

Heritage said...

Thanks for your hard work.

Heritage said...

Dear Prayag!

Why don't you publish a blogger SEO pack on the next post?

@FerdinandThis just gave me a idea, Thanks man

Pradeep said...

Hi hi hi, Little same as the last one...
but fonts are mind blowing..
you keep making...
I will keep downloading :D

woww.. so cool

Thanks for such enthusiasm :)

Unknown said...

I recently used a blogger template designed by you in my blog but in that "read more" button is not working. It vanished and full blog post is visible in home page.
I haven't changed code in template.
Let me know what could be the possible reason and how to rectify it.

It is because you have added no jump break in your post. Just go to Post Editor and add from there. It looks like your previous template might have had a Auto-Read-More hack in it so you might not manually added it through the Post Editor.

Unknown said...

i recently used this template. Thank you prayag verma

Unknown said...

why avatar not appear in my blog's comment?

That's a problem with old Nested comment hack

Unknown said...

how to solve it?

Shifting to the new Blogger Threaded Comments will solve that problem

Unknown said...

Hi Prayag,

I found out that under "settings" there is one "Basic" tab. In that there is an option for "select post editor". It is checked with updated post editor option. Do you want me to set this option or else.
But here i can't see any option like no jump break which you have mentioned.
Can you please guide me.

No no,not in the Settings tab. When you make a new Post, just besides the Insert Image button (The second Icon on the Right of it) you will see a Insert Jump break button .

Unknown said...

Thanks a lot for help. But i have seen in other templates that they on their own creates jump break and 1st image of the post is shown as a summary.
That leads to the consistency in blog. But here i have to create jump break on my own for my blog and actual image size is visible as a summary of blog.
I want something like my other blog
Can you help me in fetching that.

This tutorial by BloggerSentral will be helpful in this

Very nice Prgyan..
can you tell me how to change the comment view ? ?

i installed this template on my blog and realized that Sharethis plugin is not working properly with this template. please suggest

Anonymous said...

thanks...keep good job

Anonymous said...

this is more than awesome template.. i installed it in my new blog, but whenever i place button it is align in right side, i tried to align left side and center but it does not work... so please how do i align it in center and right..?

Anonymous said...

no reply yet... :(

Anonymous said...

plz reply buddyyyy....!!!!!