BlogTube Responsive Video Blogger Template

Documentation
Thank you for purchasing my template. If you have any questions that are beyond the scope of this help
file, please feel free to contact us. Thanks so much!

- Created: 14/6/2014
- Current Version: 1.0.0

Files Included in .zip File

1. Template File.xml
2. Backup JavaScripts
3. Documentation ( How To Upload and customize template )
4. Background Images

Getting started
You have a blogger account, so let's get started!
1. Page2 Installation.
2. Page 3 Default setting.
a. Page 3 Embedded Comment.
b. Page 4 Blog Feed.

3. Page 6 Layout.
4. Page 7 Widget Content.
a.
b.
c.
d.

Page 7 Setting Main Blog Part.

Page 8 Featured Videos Carousel.
Page 9 Labeled Videos Widgets.
Page 15 Social Icons Widget.

5. Page 16 HTML Content.

a. Page 16 Main Menu.
b. Page 16 Footer Copyrights.
c. Page 17 Social Icons.

6. Page 18 Error 404 Page.

7. Page 19 Embeding Videos ( Very Important ).
8. Page 20 Credits.

Documentation of BlogTube Responsive Video Blogger Template

1. Installation.
Unzip the Template.zip file.
1- On Blogger Dashboard Click Template.
2- Click on Download Full Template to keep your old template.
3- Click Browse... button. Find where the Template.xml file location.
4- Then Click Upload.
5- Edit mobile Preveiw. (follow images).

Documentation of BlogTube Responsive Video Blogger Template

2. Default Setting.
After installing the theme, this it the minimun setting to make all widget works fine in this themes.

A. Embedded Comment.
This to make comment area show.
1- On Blogger Dashboard Click Setting.
2- Click Posts and Comments.
3- in Comment Location Choose Embedded.
4- make it show 3 posts on the main page
5- Then Click Save settings.

Documentation of BlogTube Responsive Video Blogger Template

B. Blog Feed.
This to make Featured Post and Post by Label work fine.
1- On Blogger Dashboard Click Setting.
2- Click Search preferences.
3- Meta tags > Description choose Disabled.
4- Click Other.
5- In Site Feed > Allow Blog Feed Choose Full.
6- Then Click Save settings.

Documentation of BlogTube Responsive Video Blogger Template

Now you can Edit the meta tags better manully follow this steps
1- On Blogger Dashbord Click Template
2- Click Edit HTML
3- Scroll down and Find this Code :

<meta content='Description_Here' name='description'/>

<meta content='Keywords_Here' name='keywords'/>

4- Change Description_Here with your blog description. And change Keywords_Here with your blog
keywords you want to use.
5- Click Save template.

Documentation of BlogTube Responsive Video Blogger Template

3. Layout.

Documentation of BlogTube Responsive Video Blogger Template

4. Widget Content.
A. Setting Main Blog Part.
To Edit Main Blog Part you can follow this step:
1- On Dashbord Blogger Click Layout.
2- Click Edit on Blog Posts Widget
3- Change it to look like that image ( Like what i use the demo blog ) or change it to whatever you need.
4- Click Save.

Documentation of BlogTube Responsive Video Blogger Template

B. Featured Videos Carousel.

To Add Featured Videos Carousel follow this steps.

1- On Dashbord Blogger Click Layout.

2- Click Add a Gadget.
3- Choose HTML/Javascript.
4- Copy this Code:
<script type='text/javascript'>
var numposts = 6;
var showcommentnum = true;
var showpostdate = true;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/featured-posts?published&alt=json-inscript&callback=carouselposts"></script>

numposts

Number of posts to be shown in the carousel.

showcommentnum

Make it true to display Commemts or false to hide commemts.

showpostdate

Make it true to display Date or false to hide Date.

5- Click Save.
6. Now give any post you want to appear in that carousel the Label ( featured-posts ), it's case sensitive.

Documentation of BlogTube Responsive Video Blogger Template

C. Labeled Videos Widgets.

There are 6 types each types has it's own code follow images and codes carefully.

1. Home page small Thumbnails.

1- On Dashbord Blogger Click Layout.

2- Click Add a Gadget.
3- Choose HTML/Javascript.
4- Copy this Code:
<script type="text/javascript">
var numposts2 = 9;
var showhover2 = true;
var showpostsummary2 = false;
var showpostdate2 = true;
var showcommentnum2 = false;
var displaymore2 = false;
var postwidth2 = 33.3333;
var thumbwidth2 = 230;
var thumbheight2 = 150;
var type2 = "stwo-posts";
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label_Here?published&alt=json-inscript&callback=labeledposts"></script>
numposts2

Number of posts to be shown in the widget.

Label_Here

Change it with the label of posts to be shown.

5- Click Save.

Documentation of BlogTube Responsive Video Blogger Template

2. Home Page Larg Thumbnails.

1- On Dashbord Blogger Click Layout.

2- Click Add a Gadget.
3- Choose HTML/Javascript.
4- Copy this Code:
<script type='text/javascript'>
var numposts2 = 4;
var showhover2 = true;
var showpostsummary2 = false;
var showpostdate2 = true;
var showcommentnum2 = true;
var displaymore2 = false;
var postwidth2 = 50;
var thumbheight2 = 240;
var thumbwidth2 = 360;
var type2 = "sone-post";
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label_Here?published&alt=json-inscript&callback=labeledposts"></script>
numposts2

Number of posts to be shown in the widget.

Label_Here

Change it with the label of posts to be shown.

5- Click Save.

Documentation of BlogTube Responsive Video Blogger Template

10

3. Home Page Larg with Summary Thumbnails.

1- On Dashbord Blogger Click Layout.

2- Click Add a Gadget.
3- Choose HTML/Javascript.
4- Copy this Code:
<script type='text/javascript'>
var numposts2 = 4;
var showhover2 = true;
var showpostsummary2 = true;
var numchars2 = 310;
var showpostdate2 = true;
var showcommentnum2 = true;
var displaymore2 = true;
var postwidth2 = 100;
var thumbwidth2 = 295;
var thumbheight2 = 197;
var type2 = "msone-post"
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Label_Here?published&alt=json-inscript&callback=labeledposts"></script>
numposts2

Number of posts to be shown in the widget.

Label_Here

Change it with the label of posts to be shown.

5- Click Save.

Documentation of BlogTube Responsive Video Blogger Template

11

4. Sidebar Recent videos.

1- On Dashbord Blogger Click Layout.
2- Click Add a Gadget.
3- Choose HTML/Javascript.
4- Copy this Code:
<script type='text/javascript'>
var numposts2 = 6;
var showhover2 = false;
var showpostsummary2 = false;
var showpostdate2 = true;
var showcommentnum2 = false;
var displaymore2 = false;
var postwidth2 = 50;
var thumbwidth2 = 165;
var thumbheight2 = 108;
var type2 = "stwo-posts";
</script>
<script type="text/javascript"
src="/feeds/posts/default?published&alt=json-inscript&callback=labeledposts"></script>
numposts2

Number of posts to be shown in

the widget.

5- Click Save.

Documentation of BlogTube Responsive Video Blogger Template

12

5. Sidebar Small Thumbnails.

1- On Dashbord Blogger Click Layout.
2- Click Add a Gadget.
3- Choose HTML/Javascript.
4- Copy this Code:
<script type='text/javascript'>
var numposts2 = 4;
var showhover2 = true;
var showpostsummary2 = false;
var showpostdate2 = true;
var showcommentnum2 = false;
var displaymore2 = false;
var postwidth2 = 50;
var thumbwidth2 = 165;
var thumbheight2 = 108;
var type2 = "stwo-posts";
</script>
<script type="text/javascript"
src="/feeds/posts/default//Label_Here?published&alt=json-inscript&callback=labeledposts"></script>
numposts2

Number of posts to be shown in

the widget.

Label_Here

Change it with the label of posts

to be shown.

5- Click Save.

Documentation of BlogTube Responsive Video Blogger Template

13

6. Sidebar Larg Thumbnails.

1- On Dashbord Blogger Click Layout.
2- Click Add a Gadget.
3- Choose HTML/Javascript.
4- Copy this Code:
<script type='text/javascript'>
var numposts2 = 3;
var showhover2 = true;
var showpostsummary2 = false;
var showpostdate2 = true;
var showcommentnum2 = true;
var displaymore2 = false;
var postwidth2 = 100;
var thumbheight2 = 240;
var thumbwidth2 = 360;
var type2 = "sone-post";
</script>
<script type="text/javascript"
src="/feeds/posts/default//Label_Here?published&alt=json-inscript&callback=labeledposts"></script>
numposts2

Number of posts to be shown in

the widget.

Label_Here

Change it with the label of posts

to be shown.

5- Click Save.

Documentation of BlogTube Responsive Video Blogger Template

14

D. Social Icons Widget.

1- On Dashbord Blogger Click Layout.
2- Click Add a Gadget.
3- Choose HTML/Javascript.
4- Copy this Code to show it in Footer
<ul class="list-unstyled social">
<li><a href="#"><i class="fa fa-facebook"></i>Follow Us on Facebook</a></li>
<li><a href="#"><i class="fa fa-twitter"></i>Follow Us on Twitter</a></li>
<li><a href="#"><i class="fa fa-google-plus"></i>Follow Us on Google
Plus</a></li>
<li><a href="#"><i class="fa fa-instagram"></i> Follow Us on Instagram</a></li>
<li><a href="#"><i class="fa fa-linkedin"></i> Follow Us on Linkedin</a></li>
<li><a href="#"><i class="fa fa-rss"></i>Join Our RSS Feed</a></li>
</ul>
5- Change ( # ) with the link of your pages.
Or Use this code to show it in sidebar like that
<div class="social-counter-item">
<a target="_blank" href="#">
<i class="fa fa-facebook"></i>
<span class="counter">132</span>
<span class="counter-text">Fans</span>
</a>
</div>
<div class="social-counter-item">
<a target="_blank" href="#">
<i class="fa fa-twitter"></i>
<span class="counter">54</span>
<span class="counter-text">Followers</span>
</a>
</div>
<div class="social-counter-item">
<a target="_blank" href="#">
<i class="fa fa-google-plus"></i>
<span class="counter">0</span>
<span class="counter-text">Fans</span>
</a>
</div>
<div class="social-counter-item last">
<a target="_blank" href="#">
<i class="fa fa-rss"></i>
<span class="counter">155</span>
<span class="counter-text">Subscribers</span>
</a>
</div>
6- Change the ( # ) and the number your followers on social pages manually.
7- Click Save.
Documentation of BlogTube Responsive Video Blogger Template

15

5. HTML Content.
A. Main Menu.
To Edit Menu in this theme you can follow this step:

1- On Blogger Dashbord Click Template

2- Click Edit HTML
3- Scroll down and Find this Code :
<ul class='nav navbar-nav list-inline menu' id='menu-header-menu'><!-- Edit Main Menu -->
<li class='active'><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li class='dropdown'><a href='#'>Menu</a>
<ul class='dropdown-menu'>
<li><a href='#'>Sub Item 1</a></li>
<li><a href='#'>Sub Item 2</a></li>
<li class='dropdown-submenu'><a href='#'>Sub Item 3 With Subs</a>
<ul class='dropdown-menu'>
<li><a href='#'>Sub Sub Item 1</a></li>
<li><a href='#'>Sub Sub Item 2</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 4</a></li>
<li><a href='#'>Sub Item 5</a></li>
</ul>
</li>
<li><a href='#'>Archive</a></li>
<li><a href='#'>Label</a></li>
<li><a href='#'>Error 404</a></li>
<li><a href='#'>About US</a></li>
<li><a href='#'>Purchase</a></li>
</ul>
4- Change ( # ) with Links and change content.

B. Footer Copyrights.
Scroll down to find this code and edit it :
<div class='copyright'><!-- Edit Footer Copyrights -->
All Rights Reserved 2014 &amp;copy; <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> - Powered
By <a href='http://www.blogger.com' rel='nofollow'>Blogger</a> - Created By <a href='#'>Sora
Templates</a>
</div>

6- Click Save template.

Documentation of BlogTube Responsive Video Blogger Template

16

C. Social Icons.
To Edit Menu in this theme you can follow this step:

1- On Blogger Dashbord Click Template

2- Click Edit HTML
3- Scroll down and Find this Code :
<div class='col-sm-3' id='header-social'><!-- Edit Social Icons -->
<a href='#'><i class='fa fa-facebook'/></a>
<a href='#'><i class='fa fa-twitter'/></a>
<a href='#'><i class='fa fa-google-plus'/></a>
<a href='#'><i class='fa fa-instagram'/></a>
<a href='#'><i class='fa fa-linkedin'/></a>
<a href='#'><i class='fa fa-rss'/></a>
</div>
4- Change ( # ) with Links and change content.

Documentation of BlogTube Responsive Video Blogger Template

17

6. Error 404 Page.

The page is already integrated with template you don't need to do anything. But if you would like to edit it find the
following code :
<div class='error-page'><!Edit Error Page -->
<div class='error-title'>
<i class='fa fa-trash-o'/> 404 - Page not found
</div>
<div class='error-description'>
<div class='error-line1'>
The page you are looking for might have been removed,<br/>had its name changed, or is temporarily
unavailable
</div>
<div class='error-line2'>
You can Go to <a expr:href='data:blog.homepageUrl'>Home</a> to check it again or just Contact Us
</div>
</div>
</div>

Documentation of BlogTube Responsive Video Blogger Template

18

7. Embeding Videos.
A. Youtube Videos.
To embed Youtube videos use the following code:
<iframe allowfullscreen="" frameborder="0" height="450" src="//www.youtube.com/embed/Video_Id"
width="720" ></iframe>
<img src="http://res.cloudinary.com/demo/image/youtube/w_480,h_270,c_fill/Video_Id.jpg" height="0"
with="0" />

Change height and width it's up to you.

Change ( Video_Id ) with the id of the video like that image.

B. Vimeo Videos.
To embed Vimeo videos use the following code:
<iframe allowfullscreen="" frameborder="0" height="281" mozallowfullscreen=""
src="//player.vimeo.com/video/Video_ID" webkitallowfullscreen="" width="500"></iframe>
<img src="http://res.cloudinary.com/demo/image/vimeo/w_360,h_240/Video_ID.jpg" height="0" width="0"
/></div>

Change height and width it's up to you.

Change ( Video_Id ) with the id of the video like that image.

Documentation of BlogTube Responsive Video Blogger Template

19

8. Credits.
A. Labeled Posts, Labeled Featured Posts, Summary Posts With Thumbnails Scripts by Ar-themes. Own Content B. Font Awesome. - MIT License C. jQuery. - MIT License D. jQuery OwlCarousel v2. - MIT License -

Once again, Thank you for purchasing my template. If you have any questions
that are beyond the scope of this help file, please feel free to contact me.

BlogTube Responsive Video Blogger Template

Documentation

Documentation of BlogTube Responsive Video Blogger Template

20