New Light Template Documentation

New Light is a Blogger template with Responsive layout and suited for all blog. It's design with simple color combination, clean and modern look, Fast, SEO Optimized, and has been built by using some of the most popular current design trends.

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='navigation-hype' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
  <input type='checkbox'><i aria-hidden='true' class='fa fa-th-list'/> Menu</input>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Homepage</span></a></li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Blog <i class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='/p/contact-form.html' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>HTML Converter</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='/p/sitemap.html' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='/p/static-page.html' itemprop='url'><span itemprop='name'>Static Page</span></a></li>
  <li><a href='/err404' itemprop='url'><span itemprop='name'>404 Page Not Found</span></a></li>
</ul>
</li>
  <li><a href='#' itemprop='url'><span itemprop='name'>Menu <i class='fa fa-angle-down fa-fw'/></span></a>
<ul>
<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>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 6</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Komputer</span></a></li>
<li class='ranpost'><a onclick='feelingLucky();' title='Random Post'>Random Post</a></li>
</ul>
</div>
</nav>

Top Navigation

<nav class='page-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
   <li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
   <li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
   <li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
    </ul>  
    <div class='clear'/>
</nav>
<div class='sosial-atas'>
  <li class='menu-item'>
    <a href='#' rel='nofollow' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook'/></a>
  </li>
  <li class='menu-item'>
    <a href='#' rel='nofollow' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter'/></a>
  </li>
  <li class='menu-item'>
    <a href='#' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus'/></a>
  </li>
  <li class='menu-item'>
    <a href='#' rel='nofollow' target='_blank' title='Follow Our Youtube Channel'><i class='fa fa-youtube-play'/></a>
  </li>
  <li class='menu-item'>
    <a href='#' rel='nofollow' target='_blank' title='Follow Our Instagram'><i class='fa fa-instagram'/></a>
  </li>
  <li class='menu-item'>
    <a href='#' rel='nofollow' target='_blank' title='Follow Our Linkedin'><i class='fa fa-linkedin'/></a>
  </li>
</div>

Mobile Navigation

<a class='mobzMenu ripple' href='javascript:;'><i class='fa fa-bars'/></a>
<div class='mobzspot'/>
<nav class='dropmedown' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='wrapper'>
<div class='profilemenu'>
<img alt='Admin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF0zxIQ0Y-VvoW6d20yIpuxgGR7ZKSUliSte4MlprJVQwSlRS6Owd8MfU3NHdi-0n2L6Cy1TWX_aWGzIFIHAKV30pjn-0phQB6D0woB9nxZrLlNQu_0xTNUCv_CexkAdvi-0mRPBSBNPY/s1600/noimage.png' title='Admin'/>
<h3>Nama Admin</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'/></a>
<p>emailanda@gmail.com</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav nlp-menu'>
<li><a class='waves-effect' expr:title='data:blog.title' href='/' itemprop='url'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-trophy'/> Ranking</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Players</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Groups</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Company</span></a></li>
</ul>
</li>
<li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-newspaper-o'/> News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-inbox'/> Inbox</span></a></li>
<h2>Submenu</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-gear'/> Settings</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-file'/> My File</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-cloud-upload'/> Upload</span></a></li>
</ul>
</div>
</nav>

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='xxxxx' name='keywords'/>
<link href='https://plus.google.com/xxxxx/posts' rel='publisher'/>
<link href='https://plus.google.com/xxxxx/about' rel='author'/>
<link href='https://plus.google.com/xxxxx' rel='me'/>
<meta content='xxxxx' name='google-site-verification'/>
<meta content='xxxxx' name='msvalidate.01'/>
<meta content='xxxxx' name='alexaVerifyID'/>
<meta content='xxxxx' name='Author'/>
<meta content='xxxxx' property='og:description'/>
<meta content='xxxxx' property='fb:app_id'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='xxxxx' name='twitter:site'/>
<meta content='xxxxx' name='twitter:creator'/>

Iklan di Postingan

Cari dan ganti tulisan ini

<!-- Kode Banner/Iklan Anda Di sini -->

dengan skrip kode iklan Anda :

Anda bisa memparse kode iklan disini HTML Converter.

&lt;div style=&quot;display:block;text-align:center;margin:20px auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;

Link di Footer

Cari dan ganti semua tanda # dengan link pilihan Anda.

<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
<div id='footme'>
<div class='footmekanan'>
<a href='#' title='About'>About</a> | 
<a href='#' title='Contact'>Contact</a> | 
<a href='#' title='Disclaimer'>Disclaimer</a> | 
<a href='#' title='Privacy Policy'>Privacy Policy</a> | 
<a href='#' title='Sitemap'>Sitemap</a>
<div class='clear'/>
<div class='footmekiri'>
<div class='medsosbawah'>
<a class='facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='googleplus' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='rssfeed' href='#' rel='nofollow' target='_blank'><i class='fa fa-rss'/></a>
</div>
</div>
</div>
</footer>

Page Navigation

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

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

Featured Posts

Untuk menghapus featured posts di homepage, silakan buka template editor kemudian cari dan hapus kode berikut ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'>        
<script type='text/javaScript'>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/?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>
</div>
</b:if>

Untuk mengganti feed post dengan satu label tertentu, silakan ganti kode ini

/feeds/posts/default/?max-results

Dengan kode ini (Ganti NAMA_LABEL dengan nama label pilihan Anda)

/feeds/posts/default/-/NAMA_LABEL?max-results

Author Box di bawah postingan

<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='90' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a> <i class='fa fa-check-circle' style='color:rgb(17,143,249);font-size:14px;' title='Verified Author'/></h4>
<p>
<data:post.authorAboutMe/>       
</p>
<div class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<div class='clear'/>
</div>
</div>
</div>
</div>
<div class='clear'/>

Shortcodes

Syntax Highlighting

Untuk menambah Syntax Highlighting di postingan, tambahkan kode <pre><code></code></pre> dan isi kode (HTML, CSS, JavaScript, jQuery) yang ingin ditambahkan didalamnya.

<pre><code>
---ISI KODE DI SINI--
</code></pre>

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/RfTkVF-wG1M">
</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="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>

Spoiler

<div id="flippy"><button>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.

Membagi konten post menjadi dua kolom

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

Membagi konten post menjadi tiga kolom

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

Membagi konten post menjadi empat kolom

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

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

Nonaktifkan tampilan khusus mobile

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

Oke cukup sekian untuk dokumentasi template New Light, jika ada kesulitan lain jangan segan untuk bertanya lewat formulir kontak blog Arlina Design. Terima kasih.

NLight

Tuesday, January 20, 2015

New Light Template Documentation

Installation

Customize Theme

Shortcodes

Nonaktifkan tampilan khusus mobile

Amelia Putri

Trending

Comments

Labels

Updates

Formulir Kontak