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.

Videofication Blogger Template image



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=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</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


Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

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

Post a Comment
aditya said...

nice template dude....

aditya said...

Rocket bar looks awesome here......

Thanks

beautiful template ;)

MUXLIMO said...

Nice n clean, Brother..

Nice template master..

very cool ;)

Thanks for the compliment :)

Thanks for the appreciation :)

iTeching said...

Nice template Prayag very clean but don think it will be use full to many as it is a video template. Try to change it into some template blog's or some classic Blogger template.


Have to say very cool template... nice work :D

Thanks a lot

Thanks for the suggestions, will do that too

nicee .

Thanks

ok Prayag

videos will not show on pages :/ and something is wron with the pages at all...
please take a look and reply , if u can help me...
http://50ulmu51c.blogspot.com/p/fl-studio-skin_6972.html
anyways.. nice template!

I didn't make this template optimized for pages, I will have to change the coding a bit. I will release the fixed version soon. Thanks for pointing out

Caygri said...

very beautiful theme!

Thanks

thanx for your reply! it would be great if you can fix this!

Check this post on how to fix the bugs with the pages

Luthfi All said...

Cool template...
I like

Nikhil said...

Nice Template, I really like and I want to use it for my video blog, but this templates titles have no H1 or H2 Tags, is there any way to fix it? that would really effect for seo.

I want to put the date in the posts, but every change I do not change anything. If you want we can talk via email and I can pay you something.

Send me an email: @ gmail.com guilherme.arra

Thank you.

Sincerely,
Guilherme Arra.

I suppose you are seeing Undefined Undefined instead of the Date ,to fix it

Go to Settings > Formatting > Timestamp format , change it to this type Tuesday,January 10,2012 ( This is for Old Blogger Interface )

I had already done so, but does not show the dates like this: 2anoa.com. You see the separation date?

Looks like my site is www.tweakstips.com

Thank you.

Add the following Code just after the <div class='information'> in the Edit HTML of the template

<p class='date updated' style='color:black;font-family:Condiment;position:relative;right: -460px;top: 167px;text-align: right;font-size: 15px;'><data:post.timestamp/></p>

You can see the demo of the working version http://videofication.blogspot.com/ncr

RzaaL 1306 said...

Mau BIkin Blog Seperti http://rzaal1306.blogspot.com/ ?
Baca Dulu Dasar Dasar CSS http://rzaal1306.blogspot.com/2012/05/dasar-dasar-css.html

Rash Rox said...

thanks for your template.it usefull for me.tank you very much admin.
softwarepro.info Admin