iPod Touch and iPhone template: Johny Bingung, a Movie Review Blogger Template

Johny Bingung is a 2 column movie or game review template created by Maskolis. The template features content slider, dual menu bar, category-wise display of posts, 3 column footer and much more.

Lets begin with the first menu bar, go to Edit Html and search for this code -

<li><a href='#'><span>Action</span>Big surprise</a></li>
<li><a class='arrow' href='#'><span>Box Office</span>The best movie</a>
<ul>
<li><a href='#'>DVD</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>

Replace '#' with your category links, change the text and the tagline like 'Big surprise' or 'The best movie' to suit your blog categories. Similarly, to edit the second menu bar, find the following code in Edit Html and make the changes. Replace 'sub menu 1, 2, 3' with sub-categories and you can add more categories under that as well. Follow the same steps for other sections and save the changes.

<div id='dropmenu'>
<div id='nav'>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a href='#' title='Drop menu'>Drop menu ››</a>
<ul class='children'>
<li><a href='#' title='Sub menu 1'>Sub menu 1 ››</a>
<ul class='children'>
<li><a href='#' title='Sub menu 1.1'>Sub menu 1.1</a></li>
<li><a href='#' title='Sub menu 1.2'>Sub menu 1.2</a></li>
<li><a href='#' title='Sub menu 1.3'>Sub menu 1.3</a></li>
</ul>
</li>

Moving on to the featured content slider, it picks up articles based on the selected label or category. Go to Layout, click on 'edit' feature content slider and add the label in 'content' box.

Below the navigation bar is the search box, category drop down section and subscription email box. In order to change the feed address, in Edit Html, check the expand widget templates box and find this code. Add your feed url in places marked in bold.

<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == '') {this.value = 'Enter your email address...';}' onfocus='if (this.value == 'Enter your email address...') {this.value = '';}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>

The main column automatically displays post thumbnails with comments in a grid format. While the sidebar comes with widgets which can be customised, you can show reviews from a particular category/label. To activate that feature, go to Layout, click on 'Edit' Moview Review and insert the below code, replace the text marked in bold with your blog url and the label -

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/play station?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://johny-backup.blogspot.com/feeds/posts/summary/-/play station?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johny-backup.blogspot.com/search/label/play station" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>

The internal post pages include social bookmarking icons, related articles and Facebook like button, making it easy to share content. The theme also has a neat looking comment form, to get that working simply replace your blog id in the code below, which is marked in bold.

<div class='cm_reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=4900105838884725772&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500
"); return false;'>Reply</a>
</div>

You will get the blog id on your browser address bar when you go to the dashboard.

Download the Johny Movie Review Blogger Template