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 class='infinite-nav' data-menu-responsive='992' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<div class='container'>
<div class='open-menu'>
<span class='item item-1'/>
<span class='item item-2'/>
<span class='item item-3'/>
</div>
<div class='close-menu'/>
<ul class='navlist'>
<li><a href='/' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Photography</span></a></li>
<li><a href='/error404' itemprop='url'><span itemprop='name'>404</span></a></li>
<li>
<a href='#'><span itemprop='name'>Action</span></a>
<ul class='sub-menu'>
<li><a href='#' itemprop='url'><span itemprop='name'>Tags</span></a></li>
<li>
<a href='#'><span itemprop='name'>Sub Menu</span></a>
<ul class='sub-menu'>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
</ul>
</li>
<li><a href='#'><span itemprop='name'>Live</span></a></li>
<li><a href='#'><span itemprop='name'>Fashion</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Adventures</span></a></li>
<li class='megamenu col-5'>
<a href='#'><span itemprop='name'>Travel</span></a>
<script class='java' type='text/javascript'>//<![CDATA[
var numposts = 5;
var outerclass = "sub-menu";
var starttag = "<li>";
var endtag = "</li>";
var intag = "div";
//]]>
</script>
<script class='java' src='/feeds/posts/default/-/Travel?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</li>
<li class='megamenu col-5'><a href='#' itemprop='url'><span itemprop='name'>Blogger</span></a>
<script class='java' type='text/javascript'>//<![CDATA[
var numposts = 5;
var outerclass = "sub-menu";
var starttag = "<li>";
var endtag = "</li>";
var intag = "div";
//]]>
</script>
<script class='java' src='/feeds/posts/default/-/Blogger?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</li>
</ul>
<div class='search-box'>
<span class='icon-search'>
<i class='fa fa-search'/>
</span>
<form action='/search' method='get'>
<input name='q' type='search' value='Search and hit enter'/>
</form>
</div>
<div class='share-box'>
<a class='social-facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='social-twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='social-gplus' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='social-linkedin' href='#' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
<a class='social-pinterest' href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/></a>
<a class='social-youtube' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
<a class='social-instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></a>
</div>
</div>
</nav>
Untuk mengganti recent post by label di dalam menu, cukup ganti nama label seperti contoh di bawah ini :
Ganti kode yang ditandai dengan nama label
<li class='megamenu col-5'>
<a href='#'><span itemprop='name'>Travel</span></a>
<script class='java' type='text/javascript'>//<![CDATA[
var numposts = 5;
var outerclass = "sub-menu";
var starttag = "<li>";
var endtag = "</li>";
var intag = "div";
//]]>
</script>
<script class='java' src='/feeds/posts/default/-/Travel?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
</li>Anda bisa juga menambahkan menu dengan label yang lain
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'/>Image Caption
 |
| Animag Template Documentation |
Widget
Widget Komentar Disqus
Khusus untuk tema yang menggunakan sistem komentar Disqus, ganti user name Disqus pada kode yang ditandai dengan user name disqus blog Anda
<script type='text/javascript'>
var disqus_shortname = "infinite-1";
!function(){var e=document.createElement("script");e.async=!0,e.type="text/javascript",e.src="//"+disqus_shortname+".disqus.com/count.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
</script>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'] = '3263220808940184577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3263220808940184577','//infiniteidn.blogspot.com/','3263220808940184577');
_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': '3263220808940184577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>Ganti semua kode 3263220808940184577 di atas dengan kode ID blog Anda.
Ganti kode //infiniteidn.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&max-results=9999&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:#f4f5f6;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:#7f8c8d;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:12px; text-decoration:none;color:#aaa;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 Follow by Email
Ganti kode yang ditandai dengan user name feedburner blog Anda
<div id='subscribe-box'>
<p>If you like Articles on this blog, Please subscribe for free via email.</p>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Infiniteidn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input type='text' name='email' onblur='if (this.value == "") {this.value = "Email address";}' onfocus='if (this.value == "Email address") {this.value = "";}' value='Email address'/>
<input name='uri' type='hidden' value='Infiniteidn'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>Widget Facebook Like Box
Ganti semua kode yang ditandai dengan nama fan page Anda
<div class="fb-page" data-href="https://www.facebook.com/idnthemes/" data-tabs="timeline" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/idnthemes/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/idnthemes/">Idntheme</a></blockquote></div>Widget Featured Post
Widget ini akan otomatis muncul di halaman utama blog dengan isi dari daftar artikel terbaru di blog.
<script type='text/javaScript'>
document.write("<script src=\"/feeds/posts/default/?max-results="+featured_numpost+"&orderby=published&alt=json-in-script&callback=sliderpost\"><\/script>");
</script>Namun jika Anda ingin menggantinya menjadi artikel terbaru berdasarkan label, perhatikan kode (dengan nama label Blogger) yang ditandai dan ganti menjadi seperti ini (Isi dengan nama label)
<script type='text/javaScript'>
document.write("<script src=\"/feeds/posts/default/-/Blogger?max-results="+featured_numpost+"&orderby=published&alt=json-in-script&callback=sliderpost\"><\/script>");
</script>Widget Recent Post with Thumbnail
Tambahkan kode di bawah ini di dalam sidebar widget (Jika sudah otomatis muncul abaikan saja penambahan kode ini)
<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:8px 0;transition:all .3s linear;}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{margin:0 10px 0 0;overflow:hidden;z-index:2;display:block;position:relative;border-radius:0;width:100px;height:auto;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
ul.recent_posts_arlina li a{color:#202020;font-size:14px;font-weight:400;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#ec2028}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=4,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>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/xwKif_4iOFk">
</div>
</div>
</div>Ganti kode yang ditandai dengan link video youtube.
Simak contoh youtube video responsive di bawah ini
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
Konfigurasi Infinite Scroll
Perhatikan pada kode yang ditandai, di sini Anda bisa mengganti fungsi dari infinite scroll yang ada di dalam template
var infinite_scroll=new InfiniteScroll({type:2,target:{posts:".blog-posts",post:".date-outer",anchors:".blog-pager",anchor:".blog-pager-older-link"},text:{load:'load more',loading:'',loaded:'thats all for now',error:'Error, very bad'}});console.log(infinite_scroll.on());| Data | Keterangan |
|---|---|
| type | Opsi 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya. Opsi 1 berarti pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya. Opsi 2 berarti pengguna perlu mengeklik tombol Muat Lagi
untuk memuat posting-posting sebelumnya, setelah itu pengguna hanya
perlu menggulung peramban sampai pada batas akhir halaman untuk memuat
posting-posting sebelumnya. |
Disqus
Jika akan menggunakan versi komentar dengan Disqus dan komentar disqus tidak muncul di postingan. Hapus terlebih dahulu komentar yang ada di postingan atau backup terlebih dahulu ke Disqus di pengaturan Disqus.
Nonaktifkan tampilan khusus mobile
Nonaktifkan versi mobile pada template ini, silakan klik Template > Tombol Gear > Pilih Tidak.
Oke cukup sekian untuk dokumentasi template Infinite, jika ada kesulitan lain jangan segan untuk bertanya lewat formulir kontak blog Idntheme. Terima kasih.