Zitizen (Full Versions)

Hehe ... Hello again...

Here is another Zitizen, oops, this is the zitizen with full features... Cahyabiru.com include the Auto-Slider, Glider, and Tabber.

Installation And Set Up


Change The LOGO.

Go to Edit HTML
please find this image Address:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheMFP8Kg5e32cWzV27Ny7D9eVySvD6aC08y9dLxET9moiVSgy_Zf_8gMXqn-J3yKfQ8geb7J0RUYzMh95N2pWZmZ21Wh7mQkp6L4xP3wp1SInNCY4uYj3CafC_FUtMR1wWvKbxB8hlz7wM/s1600/logo.png

after that, change it with your own image logo.

HOST YOUR JAVASCRIPT (JS)

The Zitizen use JS feature, like slider, glider, and tabber; because of that, you need to find any web that facilitating about the JS hosting. For example: fileave.com
Host all the JS file into the web, and put in the into the template.

Find this words below:

<script type="text/javascript" src="YOUR-JAVASCRIPT-HOSTING-LOCATION/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="YOUR-JAVASCRIPT-HOSTING-LOCATION/slider.js"></script>
<script type="text/javascript" src="YOUR-JAVASCRIPT-HOSTING-LOCATION/glide.js"></script>
<script type="text/javascript" src="YOUR-JAVASCRIPT-HOSTING-LOCATION/tabber.js"></script>

Change the YOUR-JAVASCRIPT-HOSTING-LOCATION with your own.

SET UP THE MENU BAR

The First Menu

• Sign in to blogger
• Go to Layout -- Edit HTML tab
• No need to check Expand widget template
  

• Find (Ctrl+F) this below:
  

<li><a href='#'>Title Here</a></li>

Then, You will find like this:

<li><a href='#'>Title Here</a></li>
<li><a href='#'>Title Here</a></li>
<li><a href='#'>Title Here</a></li>
<li><a href='#'>Title Here</a></li>
<li><a href='#'>Title Here</a></li>

Please, change # symbol with your targeted address.
Change the word Title Here with your own title.

The Second Menu

find this (Ctrl+F) :

<li><a href='PARENT-LINK-ADDRESS'>PARENT TITLE</a>

below that code, you will find like this:

<li><a href='PARENT-LINK-ADDRESS'>PARENT TITLE</a>
<li><a href='PARENT-LINK-ADDRESS'>PARENT TITLE</a>
<li><a href='PARENT-LINK-ADDRESS'>PARENT TITLE</a>
<li><a href='PARENT-LINK-ADDRESS'>PARENT TITLE</a>
<li><a href='PARENT-LINK-ADDRESS'>PARENT TITLE</a>
<li><a href='PARENT-LINK-ADDRESS'>PARENT TITLE</a>

Please, change PARENT-LINK-ADDRESS with your own targeted address.
After that, change the word PARENT-TITLE with your own title.
Save your template


Auto Slider

Every content in slider have HTML structure. Below, I would explain how to make one content of the Slider. After You make it one, you can build another contents by copy-paste below the previous one. Here it is the structure:


<div class="panel">

<a href="LINK-ADDRESS"> <img class="ethumb" src="YOUR-IMAGE-ADDRESS" alt=""/> </a>
</div>


Please Change the words :
LINK ADDRESS --> with your own targeted link
YOUR IMAGE ADDRESS --> with your own image address. Please, Remember that the image size is 100px height and 200px width.

To edit that, you could use wordprocessor, notepad, or any software. Oh yes, almost forgot,
You can fill in the Slider widget maximum 12 contents.


GLIDER CONTENT

<div class="glidecontent">

<div class="inpost">
<h2><a href="YOUR-TITLE-LINK-ADDRESS" title="TITLE"> TITLE </a></h2>
<p> YOUR TEASER POST </p>

</div>

<img src="YOUR-IMAGE-ADDRESS" alt=""/>

</div>

Please Change the Words :
TITLE --> with your own title. Example: Batman is back or etc.
YOUR-TITLE-LINK-ADDRESS --> with the link where the post is located. Example: http://www.cahayabiru.com/templates/single.html
YOUR-TEASER-POST --> with post which can make your reader teased. Example: LOREM IPSUM
YOUR-IMAGE-ADDRESS --> with the address where your image located. Example: http://www.imagehost.com/bla/bla.jpg

You could fill in the Glider widget in only 6 contents maximum.


Set up your Feedburner ID:
1. Please go to Blogger Edit HTML :
2. Sign in to Blogger
3. Click The “Layout” Tab
4. Click “Edit HTML”
5. No need to check the “Expand Widget Template” box

6. Find (Ctrl+F) this text:
CahayaBirusSphere

After that, change it with your ID.

7. Save your Template


If you find that my works are made yo interested, and do not want to miss our next posting, please subscribe in my feedburner form ... OK Guys... :)... Thank you for coming

DEMO DOWNLOAD