dokumentasi

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. Page 7ــSetting Main Blog Part.

b. Page 8ــFeatured Videos Carousel.

c. Page 9ــLabeled Videos Widgets.

d. 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.

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).

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 Savesettings.

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>DescriptionchooseDisabled.

4- Click Other.

5- In Site Feed>Allow Blog Feed Choose Full.

6- Then Click Save settings.

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 :

4- Change Description_Herewith your blog description. And change Keywords_Here with your blog keywords you want to use.

5- Click Save template.

3. Layout.

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.

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:

Text Box: <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-in-script&callback=carouselposts"></script>

numposts	Number of posts to be shown in the carousel.
showcommentnum	Make ittrue to display Commemts or falseto hide commemts.
showpostdate	Make ittrue to display Date or falseto 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.

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:

Text Box: <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-in-script&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.

2. Home Page Larg Thumbnails.

1- On Dashbord Blogger Click Layout.

2- Click Add a Gadget.

3- Choose HTML/Javascript.

4- Copy this Code:

Text Box: <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-in-script&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.

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:

Text Box: <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-in-script&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.

4. Sidebar Recent videos.

1- On Dashbord Blogger Click Layout.

2- Click Add a Gadget.

3- Choose HTML/Javascript.

4- Copy this Code:

numposts2

Number of posts to be shown in the widget.

5- Click Save.

5. Sidebar Small Thumbnails.

1- On Dashbord Blogger Click Layout.

2- Click Add a Gadget.

3- Choose HTML/Javascript.

4- Copy this Code:

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.

6. Sidebar Larg Thumbnails.

1- On Dashbord Blogger Click Layout.

2- Click Add a Gadget.

3- Choose HTML/Javascript.

4- Copy this Code:

Text Box: <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-in-script&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.

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

Text Box: <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

Text Box: <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.

5. HTML Content.

A.Main Menu.

To Edit Menu in this theme you can follow this step:

1- On Blogger Dashbord Click Template

2- ClickEdit HTML

3- Scroll down and Find this Code :

Text Box: <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 :

Text Box: <div class='copyright'><!-- Edit Footer Copyrights -->
All Rights Reserved 2014 &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.

C. Social Icons.

To Edit Menu in this theme you can follow this step:

1- On Blogger Dashbord Click Template

2- ClickEdit HTML

3- Scroll down and Find this Code :

Text Box: <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.

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 :

Text Box: <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>

7. Embeding Videos.

A. Youtube Videos.

To embed Youtube videos use the following code:

Text Box: <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:

Text Box: <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.

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 BloggerTemplate

Documentation

About Me

Blog Archive

Tube Dangdut

Saturday, January 28, 2017

dokumentasi

No comments:

Post a Comment

Social Pages

Advertisement

Recent Posts

Movies Trailers

Monata

Popular Videos

Labels

Video Tags

Follow Us

About Us