Vous êtes sur la page 1sur 17

TEMPLATEZY

DOCUMENTATION
Anime Responsive Blogger Template
1: Installation of Template

How To Install Template on Site?

To Install Blogger Template on your site Follow These Steps:

Go to blogger dashboard.
Click on template tab and then follow the below process.

2: Customization of Template

How To Edit Responsive Menu?

To Customize the Top Navigation Menu Follow These Steps:

Go to blogger dashboard.
Click on template tab and then click on EDIT HTML
button.
Now Using CTRL + F find <!--Top Responsive Menu-->

And then customize the code according to your need.

Replace all # tags with your own like logo, themes, tools,
inspiration etc.
<!--Top Responsive Menu-->
<div class='nav-container'>
<div class='nav'>
<div id='menur'>
<div class='templatezy-menu'>
<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li style='background:#000;'><a expr:href='data:blog.homepageUrl' style='color:#fff;'>Home</a></li>
<li><a class='scroll' href='#google'>Google+</a></li>
<li><a class='scroll' href='#team'>Team</a></li>
<li><a class='scroll' href='#content-wrapper'>BLOG</a></li>
<li><a class='scroll' href='#admin-block'>Admin</a></li>
<li class='arrowb'><a href='#'>GALLERY</a>
<ul class='children'>
<li><a href='#'>New York Time</a></li>
<li><a href='#'>Awesome Designs</a></li>
<li><a href='#'>All Fonts Tools</a></li>
<li><a href='#'>Tatto Freebies</a></li>
</ul>
</li>
</ul>
<a class='menu-to-top' href='#top'><i class='fa fa-arrow-up'/></a></div>
<div id='nav-trigger'>
<span><i class='fa fa-align-justify fa-3x'/></span>
</div>
<nav id='nav-mobile'/>
</div></div></div></div>
<!--Top menu End -->

How To Edit Top Big Scrolling Title ?


To Customize the Top Title that scrolling Follow
These Steps:
Go to blogger dashboard.

Click on template tab and then click on EDIT HTML

button.
Now Using CTRL + F find <!--Top Title-->

And then customize the code according to your


need.
Replace all Welcome to Animes world with your own etc.
<!--Top Title-->
<div class='titlez'>Welcome to Animes world</div>
<!--Top Title-->

How To Edit Footer Social Buttons?


To Customize the Footer Social buttons Follow
These Steps:
Go to blogger dashboard.

Click on template tab and then click on EDIT HTML


button.
Now Using CTRL + F find <!-- Footer Social Buttons -->

And then customize the code according to your


need.
Replace all # links with your own facebook, google+ links etc.
<!-- Footer Social Buttons -->
<div id='social-bottom'>
<div class='margin-1200'>
<div class='sociler' style='margin: auto; padding-top: 30px; padding-bottom: 30px; text-align: center; width:
650px;'>
<div class='header-social'>
<a class='header-facebook' href='#'><span class='fa fa-facebook'/></a>
<a class='header-twitter' href='#'><span class='fa fa-twitter'/></a>
<a class='header-google-plus' href='#'><span class='fa fa-google-plus'/></a>
<a class='social-linkedin' href='#'><span class='fa fa-linkedin'/></a>
<a class='social-skype' href='#'><span class='fa fa-skype'/></a>
<a class='social-youtube' href='#'><span class='fa fa-youtube'/></a>
<a class='header-youtube-play' href='#'><span class='fa fa-youtube-play'/></a>

</div>
</div>
</div></div>
<!-- Footer Social Buttons (End)-->

How To Edit Google+ Section ?

To Customize the Author Bio Follow These Steps:

Go to blogger dashboard.
Click on template tab and then click on EDIT HTML
button.
Now Using CTRL + F find <!-- Google+ Section -->

And then customize the code according to your need.

Replace red url with your own google+ profile link.


Replace the blue url with your profile image link.
<!-- Google+ Section -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='margin-1200'>
<section id='google'>
<div class='container'>
<div class='row-fluid'>
<div class='span12 text-left'>
<h3 class='section-title'>Google+</h3>
</div>
</div>
<div class='row-fluid row-work'>
<!--Google+ Screenshot -->
<div class='span14'>
<a href='http://www.templatezy.com' rel='nofollow' target='_blank' title='Google+ Anime
Community'><img src='http://2.bp.blogspot.com/-x1y1-3NNC0/VegzoYioR1I/AAAAAAAAGuA/Swrd2s5miYY/s1600/Google-Plus-Dispersion.png'/></a>
</div>
<div class='span15'>
<h1>Join Our Anime Google+ Community!</h1>
<br/>
<br/>

<br/>
<br/>
<a class='btn btn-large btn-red' href='http://www.templatezy.com' rel='nofollow'
target='_blank'>Join Us</a>
</div>
</div>
</div>
</section>
</div><!-- Google+ Section (End) -->

How To edit The Gac Team Section ?

To Customize the Gac Team Follow These Steps:

Go to blogger dashboard.
Click on template tab and then click on EDIT HTML
button.
Now Using CTRL + F find <!-- The Gac Team -->

And then customize the code according to your


need.
Replace all similar to red links with your own images. Replace
similar to blue links with your team member names. And
replace all the green links with the url of google+ profiles.
.

<!-- The Gac Team -->


<section id='team'>
<div class='container'>
<div class='row-fluid'>
<div class='span12 text-left'>
<h2 class='section-title dark-grey'>The GAC Team</h2>
</div>
</div>
<div class='row-fluid'>
<div class='span12'>
<ul class='ch-grid' id='teamGrid'>
<center>

<li>
<div class='ch-item' style='background-image: url(https://lh4.googleusercontent.com/RMXPryFGPj8/AAAAAAAAAAI/AAAAAAAA0e4/MQqV3SzGVJE/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Richard A. Berrios</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/+RichardABerrios' target='_blank'><i class='fa fagoogle'/> Profile</a></p>
</div>
</li></center>
<li>
<div class='ch-item' style='background-image: url(https://lh6.googleusercontent.com/Am1ome7uBOU/AAAAAAAAAAI/AAAAAAAAMAw/in839cZAGiU/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Henna Salim</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/116798454937161795960' target='_blank'><i
class='fa fa-google'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh6.googleusercontent.com/xVKvnF62w4A/AAAAAAAAAAI/AAAAAAABWQI/ks_6GgLaY2U/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Joonho Chang</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/+JoonChang' target='_blank'><i class='fa fagoogle'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh4.googleusercontent.com/RMXPryFGPj8/AAAAAAAAAAI/AAAAAAAA0e4/MQqV3SzGVJE/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Richard A. Berrios</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/+RichardABerrios' target='_blank'><i class='fa fagoogle'/> Profile</a></p>

</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh3.googleusercontent.com/Xw1lcqkmC3g/AAAAAAAAAAI/AAAAAAACLSE/d4EmJ2cOq6M/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Diluen Cheong</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/+DiluenCheong' target='_blank'><i class='fa fagoogle'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh3.googleusercontent.com/aAaJE4CvJxU/AAAAAAAAAAI/AAAAAAAAKUY/-K0f4sDROaE/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Kurono Lamperouge</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/+KuronoLamperouge' target='_blank'><i class='fa
fa-google'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh4.googleusercontent.com/-IRD5JksGXs/AAAAAAAAAAI/AAAAAAAADog/D3XpxHvD_Lg/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Sensei Stein</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/+SenseiStein' target='_blank'><i class='fa fagoogle'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh3.googleusercontent.com/U7_Un7JbPsc/AAAAAAAAAAI/AAAAAAAAIPs/OtnDGeBzr6c/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Celis C.</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>

<p><br/><a href='https://plus.google.com/+CelisC' target='_blank'><i class='fa fa-google'/>


Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh3.googleusercontent.com/-739M4MD6ac/AAAAAAAAAAI/AAAAAAAAM7s/VequCFmaV2M/photo.jpg?sz=220)'>
<div class='ch-info'>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/+ShaneVincent' target='_blank'><i class='fa fagoogle'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh3.googleusercontent.com/-0tmWqc9Tf0/AAAAAAAAAAI/AAAAAAABS-E/qkc08BlOAc0/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Misaki-Cherry Ryuga</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/115243763282902761746' target='_blank'><i
class='fa fa-google'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh3.googleusercontent.com/r1WVTKImkE8/AAAAAAAAAAI/AAAAAAABojs/9srTa0YWKAU/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Kohana Hide</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/+KohanaHide' target='_blank'><i class='fa fagoogle'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh3.googleusercontent.com/T1CeeHr5aeU/AAAAAAAAAAI/AAAAAAAAgmo/-PYPRqTO9V8/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>John Philips Nufable</h3>
</div>
</div>

<div class='team-info-mobile hidden-desktop'>


<p><br/><a href='https://plus.google.com/+johnphilipsnufable' target='_blank'><i class='fa fagoogle'/> Profile</a></p>
</div>
</li>
<li>
<div class='ch-item' style='background-image: url(https://lh4.googleusercontent.com/jvJfVF4ue4c/AAAAAAAAAAI/AAAAAAABJ50/BWRbkPiDI8g/photo.jpg?sz=220)'>
<div class='ch-info'>
<h3>Mitko Nikolov</h3>
</div>
</div>
<div class='team-info-mobile hidden-desktop'>
<p><br/><a href='https://plus.google.com/111203633989965950154' target='_blank'><i
class='fa fa-google'/> Profile</a></p>
</div>
</li>
</ul>
</div>
</div>
<div class='hidden-desktop' style='height: 30px;'/>
<div class='row-fluid'>
<div class='span12'>
<h4>A Brief History of the GAC</h4>
<p>Welcome to Anime Maniacs, one of the biggest anime pages on Google+. On this page,
everything is Anime! This page is where you get your daily dose of anime the way you want it! Anime,
Manga, Japan and everything around it. You&#39;ll find it here. Some Extra description about Google+ will
goes here. Add additional info of your GAC team here to briefly discuss your site.
</p>
</div>
</div>
</div>
</section>
<!-- The Gac Team (End)-->

How To edit The Admin Section ?


To Customize the Admin Section Follow These
Steps:

Go to blogger dashboard.
Click on template tab and then click on EDIT HTML
button.

Now Using CTRL + F find <!-- Admin Section -->

And then customize the code according to your


need.
Replace all similar to red links with your own images. Replace
similar to blue links with your own image. And replace all the
green links with the url of google+ profile. Also replace the
texts with your owns texts.
.
<!-- Admin Section -->
<section id='admin-block'>
<div class='container'>
<div class='row-fluid'>
<h3 class='section-title' style='margin-top:50px;'>Admin</h3>
<div class='span13 text-left'>
<h4> is the second headline for admin to write something about himself or website something
else!</h4>
</div>
<div class='span4 item'>
<a href='http://wwww.templatezy.com' rel='nofollow' target='_blank'><img alt='GAC Ene'
src='http://3.bp.blogspot.com/tcgGeO0aBoE/VedNvVwFrcI/AAAAAAAAGtg/Z_v1mQmUuig/s1600/5884.jpg'/></a>
</div>
<div class='span6 item'>
<ul>
<li>Only Anime related content accepted.</li>
<li>Please post in the <b>correct category</b>.</li>
<li>This is listed item descripotion to write anything about rules etc.</li>
<li>This is listed item descripotion to write anything about rules etc.</li>
<li>This is listed item descripotion to write anything about rules etc.</li>
<li>This is listed item descripotion to write anything about rules etc.</li>
<li>This is listed item descripotion to write anything about rules etc.</li>
<li>This is listed item descripotion to write anything about rules etc.</li>
<li>This is listed item descripotion.<b> *Bolded Texts* </b>to write anything about
rules etc</li>
<li>You can upload your anime to our site by conacting us.</li>
</ul>
<br/>
<h4>If you need support, feel free to <a class='scroll' href='#contact'>contact us</a>!</h4>
</div>
</div>
</div>

</section>
<!-- Admin Section (End) -->

How To Edit Author Bio & Social Buttons ?

To Customize the Author Bio Follow These Steps:

Go to blogger dashboard.
Click on template tab and then click on EDIT HTML
button.
Now Using CTRL + F find <!-- Author Bio -->

And then customize the code according to your need.

Replace red url with your own image link.


Replace the blue url with your profile link.
Replace the orange text with your own bio texts.
Replace the green # sign with your profile social links.
Replace purple # with your facebook, google+, twitter,
and dribble link.
<!-- Author Bio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='postedby'>
<div class='author-image'>
<a href='http://www.templatezy.com' rel='nofollow' target='_blank'><img class='imgautor'
src='http://1.bp.blogspot.com/szrHwWDJkfk/VGj_bKFhiKI/AAAAAAAAD6c/EleQJHuWRjo/s1600/templatezy4.jpg'/></a></div>
<h2>About <span class='templatezy'><data:post.author/></span></h2>
<p>Hi, My Name is Hafeez Ullah Khan. I am a webdesigner, blogspot developer and UI designer. I am a
certified Themeforest top contributor and popular at JavaScript engineers. We have a team of professional
programmers, developers work together and make unique blogger templates.</p>
<div class='author-social'>
<a href='#'><i class='fa fa-facebook'/></a>
<a href='#'><i class='fa fa-twitter'/></a>
<a href='#'><i class='fa fa-dribbble'/></a>
<a href='#'><i class='fa fa-google-plus'/></a>
</div>
</div>
</b:if>

How To Edit Circle Scrolling Social


widgetn?
To Customize the Circle Scrolling social widget Follow These
Steps:

Go to blogger dashboard.
Click on template tab and then click on EDIT HTML
button.
Now Using CTRL + F find <!-- Style for Circle Widget -->

And then customize the code according to your need.

Replace red text with your own facebook page name.


<div style='float:left; margin:47px 13px;'><iframe allowtransparency='true' frameborder='0' scrolling='no'
src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ftemplatezy&am
p;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;col
orscheme=light&amp;font=arial&amp;height=21'
style='border:none;
overflow:hidden;
width:80px;
height:21px;'/></div>

Need More Help ?


Visit: http://www.templatezy.com
Email at: templatezy.info@gmail.com

Join

Us

Facebook

http://facebook.com/templatezy

GooglePlus

https://plus.google.com/b/templatezy