CCNA Blog: Video Blogger Template Installations Guide

Showing posts with label Video Blogger Template Installations Guide. Show all posts

Monday 23 July 2012

Video Blogger Template Installations Guide

Posted by Free Blogger Template at 12:17 AM | Labels: Templates Instruction

Template Name: Video Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# HOW TO POST A VIDEO
Video Blogger Template only support video URL from Youtube.
A. Post a video only
Go to Youtube -> find a video -> Copy the url -> paste the url to Blogger post box.

B. Post a video with summary
Use "[starttext]" before and "[endtext]" after summary.

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<div id='page_nav'><!-- page nav html-->

<ul>

<li class='hometab'><a href='/'>Home</a></li>

<li class='page_item'><a href='#' title='About'>About</a>

<ul class='children'>

<li class='page_item'><a href='#' title='Sub Page 1'>Sub Page 1</a></li>

<li class='page_item'><a href='#' title='Sub Page 2'>Sub Page 2</a></li>

</ul>

</li>

<li class='page_item'><a href='#' title='FAQs'>FAQs</a></li>

<li class='page_item'><a href='#' title='Terms'>Terms</a></li>

<li class='page_item'><a href='#' title='Archive Pages'>Archive Pages</a>

<ul class='children'>

<li class='page_item'><a href='#' title='Sub Page in 1'>Sub Page in 1</a></li>

<li class='page_item'><a href='#' title='Sub Page in 2'>Sub Page in 2</a></li>

<li class='page_item'><a href='#' title='Site Map'>Site Map</a></li>

</ul>

</li>

</ul>

</div> <!-- page nav #end -->

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP CATEGORIES MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<div id='main_nav'> <!-- main_nav html -->

<ul>

<li class='cat-item'><a href='/search/label/Entertainment'>Entertainment</a></li>

<li class='cat-item'><a href='/search/label/Funny'>Funny</a></li>

<li class='cat-item'><a href='/search/label/Health'>Health</a></li>

<li class='cat-item'><a href='/search/label/Music'>Music</a></li>

<li class='cat-item'><a href='/search/label/Others'>Others</a></li>

<li class='cat-item'><a href='/search/label/Sports'>Sports</a></li>

<li class='cat-item'><a href='/search/label/Blog'>Blog</a></li>

Change "red text" with your own category

# SETUP SLIDE VIDEO
Go to "Edit HTML" page
Search the codes like below

<li>

<div class='video_section'>

<object height='385' width='640'><param name='movie' value='http://www.youtube.com/v/2Y2BEhvS-ck'/><param name='allowFullScreen' value='true'/><param name='allowscriptaccess' value='always'/><embed allowfullscreen='true' allowscriptaccess='always' height='385' src='http://www.youtube.com/v/2Y2BEhvS-ck' type='application/x-shockwave-flash' width='640' wmode='transparent'/></object></div>

<h4> <a href='#' rel='bookmark' title='Inkheart Movie'>Inkheart Movie</a> </h4>

</li>



<li>

<div class='video_section'>

<object height='385' width='640'><param name='movie' value='http://www.youtube.com/v/FNQowwwwYa0'/><param name='allowFullScreen' value='true'/><param name='allowscriptaccess' value='always'/><embed allowfullscreen='true' allowscriptaccess='always' height='385' src='http://www.youtube.com/v/FNQowwwwYa0' type='application/x-shockwave-flash' width='640' wmode='transparent'/></object></div>

<h4> <a href='#' rel='bookmark' title='Iron Man 2 Trailer 2 (OFFICIAL)'>Iron Man 2 Trailer 2 (OFFICIAL)</a> </h4>

</li>



<li>

<div class='video_section'>

<object height='385' width='480'><param name='movie' value='http://www.youtube.com/v/F9bV_v9b8go'/><param name='allowFullScreen' value='true'/><param name='allowscriptaccess' value='always'/><embed allowfullscreen='true' allowscriptaccess='always' height='385' src='http://www.youtube.com/v/F9bV_v9b8go' type='application/x-shockwave-flash' width='480' wmode='transparent'/></object>

</div>

<h4> <a href='#' rel='bookmark' title='Kicked In The Nuts World Record Holder'>Kicked In The Nuts World Record Holder</a> </h4>

</li>



<li>

<div class='video_section'>

<object height='385' width='640'><param name='movie' value='http://www.youtube.com/v/Pki6jbSbXIY'/><param name='allowFullScreen' value='true'/><param name='allowscriptaccess' value='always'/><embed allowfullscreen='true' allowscriptaccess='always' height='385' src='http://www.youtube.com/v/Pki6jbSbXIY' type='application/x-shockwave-flash' width='640' wmode='transparent'/></object>

</div>

<h4> <a href='#' rel='bookmark' title='Lord of the Rings: Fellowship of the ring trailer'>Lord of the Rings: Fellowship of the ring trailer</a> </h4>

</li>



<li>

<div class='video_section'>

<object height='385' width='640'><param name='movie' value='http://www.youtube.com/v/sjSG6z_13-Q'/><param name='allowFullScreen' value='true'/><param name='allowscriptaccess' value='always'/><embed allowfullscreen='true' allowscriptaccess='always' height='385' src='http://www.youtube.com/v/sjSG6z_13-Q' type='application/x-shockwave-flash' width='640' wmode='transparent'/></object></div>

<h4> <a href='#' rel='bookmark' title='Miley Cyrus – Cant Be Tamed'>Miley Cyrus - Cant Be Tamed</a> </h4>

</li>

Red text = Code of video

# = url
Green text = Title of video

# RECENT VIDEO WIDGET
Go to "page elements" -> "add a gadget" sidebar -> "HTML/Javascript"
Copy this codes

<script type='text/javascript'>

//<![CDATA[

function showrecentpostswiththumbs(json) {

document.write('<ul class="recent_posts_with_thumbs">');

for (var i = 0; i < numposts; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length;k++){

if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){

var commenttext=entry.link[k].title;

var commenturl=entry.link[k].href;

}

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;break;

}

}

if("content"in entry){

var postcontent=entry.content.$t;

}

var vidid = postcontent.substring(postcontent.indexOf("http://www.youtube.com/watch?v=")+31,postcontent.indexOf("<"));





try {thumburl='http://i2.ytimg.com/vi/'+vidid+'/default.jpg';}catch (error){

thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ZmvP5yCKOcX5CfupYovDT8lYe1PloypRi8PzJQX5xEyEDYvLUMQ7OPZpPs88GX4MHfVpujdnTd4FG-1uV54oziwgUGQmo7u5UWk2mgUX37Ulyp2fg57OcOpDCTtTg_9Kr7cToF5tvA/s800/noimagethumb.png';

}

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";

document.write('<li class="clearfix">');





if(showpostthumbnails==true)

document.write('<a href="'+ posturl + '"><img class="recent_thumb" src="'+thumburl+'"/></a>');

document.write('<div class="recent_video_title"><a href="'+posturl+'" target ="_top">'+posttitle+'</a></div><br>');

var textinside = postcontent.substring(postcontent.indexOf("[starttext]")+11,postcontent.indexOf("[endtext]"));

var re = /<\S[^>]*>/g;

postcontent = textinside.replace(re, "");





if (showpostsummary == true) {



if (postcontent.length < numchars) {

document.write('<div class="recent_video_desc">');

document.write(postcontent);

document.write('</div>');}

else {

document.write('<div class="recent_video_desc">');

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...');

document.write('</div>');}

}



var towrite='';var flag=0;

document.write('<br><div class="recent_video_footer">');



if(showpostdate==true) {towrite=towrite+monthnames[parseInt(cdmonth,10)]+' '+cdday+' , '+cdyear;flag=1;}



if(showcommentnum==true)

{

if (flag==1) {towrite=towrite+' | ';}

if(commenttext=='1 Comments') commenttext='1 Comment';

if(commenttext=='0 Comments') commenttext='No Comments';

commenttext = '<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';

towrite=towrite+commenttext;

flag=1;

;

}











document.write(towrite);



document.write('</div></li>');

if(displayseparator==true)

if (i!=(numposts-1))

document.write('<hr size=0.5>');



}document.write('</ul>');







}

//]]>

</script>

<script style="text/javascript">

var numposts = 5;

var showpostthumbnails = true;

var displaymore = true;

var displayseparator = false;

var showcommentnum = true;

var showpostdate = true;

var showpostsummary = false;

var numchars = 50;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

<div class="clear"/></div>