Johny Kenthir is a 4 column magazine style blogger template created by Maskolis. The theme is suitable for a news blog, as it includes several features like dual menu bar with dropdown, automatic featured content slider, automatic recent per category, 3 column footer, tab view of categories, automatic slider carousel, ads ready, pagination integrated and more.
Let's start with modifying the theme, for the first navigation bar, find this code -
The carousel below the menu bar updates automatically once you have 4 or more posts. While the slider in the main column shows articles as per the selected label, you need to paste the below code in Layout, click edit 'HTML/javascript' gadget -
This template also includes the 'video category' widget, that will display your latest video posts. To get it working, go to Layout, click on edit 'Video category', put in the desired label and save. Now get the embed code from YouTube, insert it in the post along with this line of code (in bold). It should look like this -
Besides the video section, you can show posts by another label as well, go to Layout, edit Label 1, put in the label and save the changes.
Johny Kenthir theme is extremely useful if you have lot of content, another way of showing posts per label is in tabbed format. To get that working, search for the following code in Edit Html and replace the labels -
Next you can customise the sidebar and footer columns by adding various blogger widgets. Its a very professional-looking theme with excellent features, so you won't miss out on showing your top content.
Download the Johny Magazine Blogger Template
<ul id='menubar'>Add your links after '<a href="' and the corresponding categories, for example - below 'Contact us' you can add sub-categories, so below 'ul' you can add sub-sections/categories etc. Right below the first menu bar is the second bar which automatically displays pages.
< li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw9Jn6qmT7tQfNkq-9OAXblCTiOssrObFeewvGu-RnAwMcnXHQAcuErlOD2sn2Zf8DcSNZjBSBtDzNgU1AKWYUfGIW0rJx992AxZhzRzLGYiIVQhjAUDwjoXcKvQX2HoSGZn8c1XCjr-dM/s1600/home_white.png' style='padding:0px;'/></a></li>
< li><a href='#'>About Us</a></li>
< li><a class='trigger' href='#'>Contact Us</a>
< ul>
< li><a href='#'>Goggle +</a></li>
< li class='hr'/>
< li><a href='#'>Contact on Facebook</a></li>
< li class='hr'/>
< li><a href='#'>Contact on Twitter</a></li>
< /ul>
< /li>
< li><a href='#'>Sport</a></li>
< li><a href='http://creatingwebsite-maskolis.blogspot.com/2012/07/johny-kenthir-template-ramai-seperti.html'>Instruction to use</a></li>
The carousel below the menu bar updates automatically once you have 4 or more posts. While the slider in the main column shows articles as per the selected label, you need to paste the below code in Layout, click edit 'HTML/javascript' gadget -
<div id='featuredContent'>Change the label (marked in bold) with the one you want to display and also the number of posts (marked in bold) to show in the slider. Adjacent to the slider, the latest posts are shown from the blog feed along with page navigation widget.
< div class='sliderwrapper' id='featured-slider'>
< script>
document.write("<script src="/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3"></script>");
< /script>
< /div>
< div id='paginate-featured-slider'>
< ul>
< script>
document.write("<script src="/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4"></script>");
< /script>
< /ul>
< div class='clear'></div>
< /div>
< script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
< /script>
< /div>
This template also includes the 'video category' widget, that will display your latest video posts. To get it working, go to Layout, click on edit 'Video category', put in the desired label and save. Now get the embed code from YouTube, insert it in the post along with this line of code (in bold). It should look like this -
<iframe width="560" height="315" src="http://www.youtube.com/embed/5pHbzBH3KxQ" frameborder="0" allowfullscreen></iframe><img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/5pHbzBH3KxQ/0.jpg" />Also ensure that you change the serial number in the above code (5pHbzBH3KxQ) in italics, and publish the post.
Besides the video section, you can show posts by another label as well, go to Layout, edit Label 1, put in the label and save the changes.
Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY";The next step is to search for this code, click on 'Expand widget' and add the labels (as indicated in bold) -
<div class='tab-wrapper'>Add the labels for all the tabs, and save the changes. Each post includes the social media sharing widget, and also the' Related posts' widget, so you don't need to bother of adding it manually.
< div class='tabber' id='tab1'>
< script>
document.write(" <script src="/feeds/posts/default/-/sport?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
< /script></div>
< div class='tabber' id='tab2'>
< script>
document.write(" <script src="/feeds/posts/default/-/sport?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
< /script></div>
< div class='tabber' id='tab3'>
< script>
document.write(" <script src="/feeds/posts/default/-/sport?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
< /script></div>
< div class='tabber' id='tab4'>
< script>
document.write(" <script src="/feeds/posts/default/-/comedy?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
< /script></div>
< div class='tabber' id='tab5'>
< script>
document.write(" <script src="/feeds/posts/default/-/jazz?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9"></script>");
< /script></div>
Download the Johny Magazine Blogger Template