VideoBox

Video blogger templates have always been visually appealing. Another one to the list is Video Box, originally a wordpress theme and ported to blogger by Sora. VideoBox has dual menu bar with drop down, featured video slider, 4 column footer, header banner, page navigation widget and social media buttons in each post.

Lets begin with the drop down menu bar, go to Edit html and search for this code -

<nav class='primary'>
<ul class='sf-menu' id='topnav'>
<li><a href='#'><span class='right'>Home</span></a></li>
<li><a href='#'><span class='right'>Videos</span></a></li>
<li><a href='#'><span class='right'>Portfolio</span></a>
<ul class='sub-menu'>
<li><a href='#'><span class='right'>Portfolio 1 col</span></a></li>
<li><a href='#'><span class='right'>Portfolio 2 cols</span></a></li>
<li><a href='#'><span class='right'>Portfolio 3 cols</span></a>
<ul class='sub-menu'>
<li><a href='#'><span class='right'>1st category</span></a></li>
<li><a href='#'><span class='right'>2nd category</span></a></li>
<li><a href='#'><span class='right'>3rd category</span></a></li>
</ul>
</li>

Add your categories etc, replace '#' with the links, and below 'sub menu' you add your sub-categories, you can also add sub sub-categories below 'Portfolio 3 cols', save the changes.

To modify the video slider, its pretty simple, search for this code -

<ul class='slides'>
<li class='item'>
<p><iframe frameborder='0' height='315' src='http://www.youtube.com/embed/Ok2VamxrYAY' width='560'/></p>
</li>

<li class='item'>
<p><iframe frameborder='0' height='315' src='http://www.youtube.com/embed/JitvT29fybE' width='560'/></p>
</li>

Replace the 'YouTube' video link, which you get from the embed code. If this your embed code, take only the link marked in bold -

<iframe width="420" height="315" src="http://www.youtube.com/embed/xdLNMEXWTL8" frameborder="0" allowfullscreen></iframe>

The second part of the code is below it, where you have to add the headline (indicated in bold) and post link (#).

<ul class='thumbs pagination'>
<li>
<span class='youtube-temp'/>
<span class='hover-bg'/>
<a class='title' href='#' rel='0'>Lorem ipsum dolor sit amet</a>
<a class='link' href='#'/>
</li>
<li>
<span class='youtube-temp'/>
<span class='hover-bg'/>
<a class='title' href='#' rel='1'>Fusce et lectus nec neque feugiat</a>
<a class='link' href='#'/>
</li>

The main column will display your latest posts with a facebook like button, so users can instantly share your content. Although when you click on the post, the video doesn't load on the home page, it takes you to the post page where you can watch the clip.

For the page navigation widget to function, you need to make a small change in the below code -

<script type='text/javascript'>//<![CDATA[
var posts=9,
num=2,

Change the number of posts in each page from '9' and '2' is the number of buttons will display.

Download the VideoBox Blogger Template