Documentation

Crudely zealously mallard then smiled while in hence and some until iguana yikes crud less when jeepers sneered crud overdid pulled reindeer hyena that anticipative one soothing less ouch bee cockatoo compulsively hesitantly outran grimy cold the that basic according rewound showily gosh python.

Scant one conclusive up far cut this forsook and wow and towards diversely much more emoted rose manta cardinally near from much therefore this danced stiff casual by in aboard gosh drank as oversaw hit the irrational sadistically oyster a wittily.

Installation


1. Log in ke Blogger dashboard dan buka Template > Edit HTML.
2. Silahkan backup template lama Anda jika Anda memutuskan untuk menggunakannya lagi. Untuk melakukan ini, klik pada "download template lengkap" link dan simpan template.
3. Kemudian, cari lokasi XML template yang baru saja Anda download dan tekan "Upload".

Customize Theme


Navigation

Silakan buka Blogger > Template > "Edit HTML"

Cari dan ganti semua kode ini # dengan link Anda.

<nav id='animag-free' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
  <input type='checkbox'><i aria-hidden='true' class='fa fa-th-list'/> Menu</input>
<ul id='animag-click'>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>All</span></a>
<ul>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Terms of Service</span></a></li>
</ul>
</li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Animanga</span></a>
<ul>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Menu 4</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Menu 6</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Menu 7</span></a></li>
</ul>
</li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Anime</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Games</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Insider</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>List</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='ripplelink' href='#' itemprop='url'><span itemprop='name'>Showbiz</span></a></li>
</ul>
</nav>

Footer Menu

<div class='footer-menu'>
<div class='maxwrap bawahcr'>
<div class='joi-footer-block'>
<div class='meta'>
<div class='title'><a href='#'><span>About Animag</span></a></div>
<div class='desc'><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p></div>
</div>
</div>
<ul class='nomedic'>
<span class='social-right'>
<li class='sosialfoot'><a class='ripplelink gpl' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-2x'/></a></li>
<li class='sosialfoot'><a class='ripplelink fcb' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-2x'/></a></li>
<li class='sosialfoot'><a class='ripplelink twt' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-2x'/></a></li>
<li class='sosialfoot'><a class='ripplelink rss' href='#' rel='nofollow' target='_blank'><i class='fa fa-rss fa-2x'/></a></li>
</span>
</ul>

SEO Meta Tag

Buka Blogger, Template, "Edit HTML"

Cari dan ganti semua tulisan xxxxx dengan keterangan blog Anda (Jika tidak diperlukan, hapus atau dibiarkan juga tidak apa-apa).

<meta content='ISI-DENGAN-DESKRIPSI-BLOG' name='keywords'/>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/LINK-PROFIL-GOOGLE-PLUS' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='NAMA-PENULIS' name='Author'/>
<meta content='https://www.facebook.com/LINK-FAN-PAGE' property='article:author'/>
<meta content='https://www.facebook.com/LINK-PROFIL-FB' property='article:publisher'/>
<meta content='KODE-FB-APP' property='fb:app_id'/>
<meta content='KODE-PROFIL-ADMIN' property='fb:admins'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>

Widget Formulir Kontak dan Sitemap


Tambahkan kode di bawah ini di dalam postingan halaman statis

Formulir kontak


Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

<form id="kontak-arlina" name="contact-form">

<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />  
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7206507233509783875';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7206507233509783875','//animagfree.blogspot.com/','7206507233509783875');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '7206507233509783875', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ganti semua kode 7206507233509783875 di atas dengan kode ID blog Anda.
Ganti kode //animagfree.blogspot.com/ di atas dengan url blog Anda.

Widget Sitemap

<div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;">
</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1 {display:none;} #HTML3 {visibility:hidden;} /* CSS Full Sitemap */ #bp_toc{background:#31a2db;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:rgba(255,255,255,.5);font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);} #bp_toc tr:nth-child(1) a {color:#666;} #bp_toc td.toc-header-col1{background-color:#fff;} #bp_toc td.toc-header-col2{background-color:#fff;} #bp_toc td.toc-header-col3{background-color:#fff;} #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0} #bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700} #bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8} #bp_toc td.toc-entry-col2{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8} #bp_toc td.toc-entry-col3{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8} #bp_toc td a{color:#666;} .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px; text-decoration:none;color:#aaa;font-family:&#39;Roboto&#39;;font-weight:700;letter-spacing: 0.5px;} .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {text-decoration:none;} .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;} #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;} .toc-entry-col1 {counter-increment:rowNumber;} #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;} </style>

Widget Featured Post with Thumbnail


Buka template editor, cari kode di bawah ini dan ganti nama label Anime.

<div class='featured-post padding clearfix'>
<script type='text/javaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Anime?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>                        
</div>

Widget Recent Post by Label di Halaman Utama


Buka template editor, ganti semua nama label pada widget HTML70, HTML71, HTML72, HTML74, HTML76. Seperti contoh pada widget HTML70 dengan nama label Anime di bawah ini

<div class='recent-posts-title'>
<h2><span><data:title/></span></h2><ul class='header-action-link'>
<li class='action-link hidden-480'>
<a href='/search/label/Anime?&amp;amp;max-results=8'>See all posts<i aria-hidden='true' class='fa fa-angle-right'/></a>
</li>
</ul></div>
</b:if>
<div class='widget-content'>
<div class='news_pictures'>
<ul class='news_pictures_list'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=mythumb1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</div>

Kemudian di tata letak / Layout ganti nama labelnya pada widget tertentu sesuai id widget. Contoh HTML70


Page Navigation

Cari dan ganti angka 8 pada kode postperpage=8 dengan jumlah post yang ingin ditampilkan di tiap halaman.

var postperpage=8;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";

Shortcodes


Youtube Responsive Video

Gunakan kode ini untuk embed youtube video responsive

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/aax4KwD7e3Q">
</div>
</div>
</div>

Ganti kode yang ditandai dengan link video youtube.

Simak contoh youtube video responsive di bawah ini


Spoiler

<div id="flippy"><button class="ripplelink">Spoiler</button></div>
<div id="flippanel">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Drop Caps

<span class="first-letter">Your First Letter here</span>

Your First Letter here Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Button

<div style="text-align: center;">
<ul class="ripplelink button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>


Membagi konten post menjadi dua kolom

<div class="bagidua">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Membagi konten post menjadi tiga kolom

<div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Membagi konten post menjadi empat kolom

<div class="bagiempat">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones, eam mucius malorum id. Quo ea idque commodo utroque, per ex eros etiam accumsan.

Membuat tabel di postingan

<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
<tr>
<td>Division 1</td>
<td>Division 2</td>
<td>Division 3</td>
</tr>
</tbody>
</table>

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Setelan Lain


Nonaktifkan tampilan khusus mobile


Nonaktifkan versi mobile pada template ini, silakan klik Template > Tombol Gear > Pilih Tidak.


Oke cukup sekian untuk dokumentasi template Animag versi free, jika ada kesulitan lain jangan segan untuk bertanya lewat formulir kontak blog Idntheme. Terima kasih.

4 comments

Add your comment