12 Feb 2012
New Blogger Template : Videofication
This is my 4th template. I tried to make it a bit different. The idea was to make a YouTube type thing in Blogger. It has simple layout and some other functionality like Rater widget, Threaded Comment,etc. Here I wanted to mention that the base template and JavaScript was originally made by BloggerzBible ,I just did some modifications to the JavaScript and looks. Demo
Download
Complete List of Features
-Fixed Design
-Cross browser compatibility
-Page Navigation
-Widgets ready sidebar
-Stylish commenting system
-Attractive Post Title
-CSS3 powered Header design
-Three column footer
-Threaded Reply feature for Blogger Comment system
-80%+ Google Page Speed score
-Integrated Search Box
-CSS3 shadows around post area and footer
-Attractive web fonts like Jim Nightshade and Chelsea Market
-RocketBar jQuery Menu
-Inbuilt 5 star rating widget for each post
How to configure the features:
1.Menu
The menu widget is included separately in the Download Package. Just copy the contents of the widget into the HTML / JavaScript widget present below the Header. As you will observe , there will be two distinct menus present in the widget. The upper one is the one that will appear when you open the page the other one will appear while you scroll the page. Make the changes accordingly to them.
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="/";
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
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. Adding Videos
To add videos to a post. Just enclose the Youtube URL within [youtube]..[/youtube]
For example: [youtube]http://www.youtube.com/watch?v=gKWNUyTGqss[/youtube]
Make sure this is included in the top of the post. After that you can write your post the usual way. In the homepage you will see a automatically generated thumbnail of the video along a small extract from the post.
This is a YouTube template, so no other video sharing website URL will work.
4. Recent Post Widget
It is included separately in the Download package and you can just copy-paste it into a HTML/JavaScript widget .It will work smoothly. To do any changes in it, here are the following available option:
var numposts = 3;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
I believe you will like the template and feel free to ask about any difficulties you face while using the template.
Demo
Download
Til next time,
Prayag Verma
at 18:49