Senin, 02 Mei 2016

New Light Template Documentation

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='lightnavigation' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
  <input type='checkbox'>&#9776; Navigation</input>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Blog</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Terms of Service</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Bisnis Online</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Info Menarik</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Internet</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Profil Artis</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Tips Blogger</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;

Widget Sosial Media di Sidebar

Cari dan ganti semua link yang ditandai dengan link sosial media Anda.

<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='lightsosmed-img'>
<img alt='N Light' class='img-responsive' height='180' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj9wDlTBBduoM7QEp7wNDggRfWTBmqsNuSmXNi5UHvjRE-HLxrV1k91thu2UiXRHgh8-J8PJm0jsatFZNtwbNJh8ZH5WR2Q2C-y8lSSdrleFO71M6Y6x0YJIR1YcCfq2-yZwS68S_l4duf/s1600/Info+Arlina.jpg' title='N Light' width='300'/>
<div class='aboutfloat-img'><span class='lightsosmed-float'><a href='https://www.blogger.com/follow-blog.g?blogID=1944583533354688007' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='lightsosmed-info'>
  <h4><span>N Light</span></h4>
<p>N Light Responsive Blogger Template</p>
</div>
<div class='lightsosmed-wrpicon'>
<ul class='extender'>
<li class='lightsosmed-icon fbl'><a href='#' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='lightsosmed-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='lightsosmed-icon crcl'><a href='#' rel='nofollow' target='_blank' title='Follow Our Instagram'><i class='fa fa-google-instagram fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>

Link di Footer

Cari dan ganti semua tanda # dengan link pilihan Anda.

<footer id='footer-wrapper' itemscope='itemscope' itemtype='https://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='instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/></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 5 pada kode postperpage=5 dengan jumlah post yang ingin ditampilkan di tiap halaman.

var postperpage=5;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>

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/qzcx9-jru4g">
</div>
</div>
</div>

Ganti kode yang ditandai dengan link video youtube.

Simak contoh youtube video responsive di bawah ini


Shortcodes


Drop Caps

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

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>

Membagi konten post menjadi tiga

<div class="bagitiga">
--- 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>

Nonaktifkan tampilan khusus mobile


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


Perbaikan



Perbaikan gambar featured post yang tidak full

Login ke Blogger > Buka Template editor > Cari dan ganti CSS berikut

/* Arlina Featured Post */
#featured-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px}
.featured-post a{font-size:1.2em;color:#fff;display:inline-block}
.featured-post a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-post a{margin:0;font-size:18px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0}
.featured-post .secondary-post{width:32%;margin:0 0 20px 0}
.featured-post .main-post{width:67.7%;padding:0}
.featured-post span{background-color:rgba(0,0,0,0.7);padding:5px 6px;color:#fff;text-transform:uppercase;font-size:10px;font-style:normal;top:10px;left:10px;z-index:2;font-weight:700;position:absolute}
.featured-post img{height:100%;transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover}
.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%}
.featured-post header{position:absolute;bottom:0;left:0;padding:20px}
.featured-post h4{font-size:15px;line-height:1.3;}

Dengan CSS ini

/* Arlina Featured Post */
#featured-posts-section{max-height:350px;overflow:hidden;margin:0 auto 20px}
.featured-post a{font-size:1.2em;color:#fff;}
.featured-post a:hover{color:#fff;text-decoration:underline;}
.main-post.featured-post a{margin:0;font-size:18px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
.featured-post .secondary-post{width:32%;margin:0 0 20px 0}
.featured-post .main-post{width:65.9%;padding:0}
.featured-post span{background-color:rgba(0,0,0,0.7);padding:5px 6px;color:#fff;text-transform:uppercase;font-size:10px;font-style:normal;top:10px;left:10px;z-index:2;font-weight:700;position:absolute}
.featured-post img{height:100%;transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover}
.featured-post .secondary-post img{height:165px;object-fit:cover;width:100%}
.featured-post header{position:absolute;bottom:0;left:0;padding:20px}
.featured-post h4{font-size:15px;line-height:1.3;}

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

83 komentar

  1. wah makin seger tmplatenya teh :D
    izin comot ya :D

    BalasHapus
  2. Sungguh nyaman temlate-nya. Suka bangat. Terima kasih dan teruskan usaha. :)

    BalasHapus
  3. featured post tidak memunculkan gambar, bagaimana cara mengatasinya? terima kasih sebelumnya

    BalasHapus
  4. Bu arlina, biar related postnya ada gambar gimana caranya?

    BalasHapus
  5. Problem saya sama dengan mas eros sutrisno diatas, gambar pada featured post tidak muncul .....

    BalasHapus
    Balasan
    1. wah sama saya juga problem seperti anda.

      Hapus
  6. Kelebihan versi Premium dengan versi gratis apa mbak?.

    BalasHapus
  7. I have installed your theme on my blog, But in home page, Only one featuerd post is coming, instead of three. Why so , can you help me.?

    Translated To Indo:
    Saya telah menginstal tema di blog saya , Tapi di halaman rumah , hanya satu posting featuerd akan datang , bukannya tiga . Mengapa begitu , Anda dapat membantu saya . ?

    BalasHapus
  8. Templatenya elegan, vast loading tampilan warnanya cantik seperti yang bikin :)

    BalasHapus
  9. problemnya sama mbak di featured post gak ada gambarnya di tunggu fixnya makasih sebelumnya templatenya keren

    BalasHapus
  10. Responsive dan Fast Loading pakek biiaannget template nya

    BalasHapus
  11. mantap nih template barunya, btw saran buat mbak arline desain menunya bikin responsif dong hehehe..

    BalasHapus
  12. mbak di tampilan hape kok susah dipencet ya "navigation" nya?

    BalasHapus
  13. Mantap, 100% work sudah sy coba di blog kabbandung.com
    makasih banyak bu Arlina

    BalasHapus
  14. nama blog yang dibawh "join our site" warnanya putih jadi tulisannya gak keliatan.
    cara ngatasinnya gimana ya?

    BalasHapus
  15. Saya mau menghapus gambar yang tiga di atas itu bisa nggak mba?

    BalasHapus
  16. Mbak terimakasih atas templatenya sebelumnya, mau tanya mbak saya habis pasang template mbak arlina dan ada kode merah pada saat edit template. apakah yang berwarna merah itu berpengaruh atau tidak mbak? atau adakah salah satu kode yang hilang..terimakasih

    BalasHapus
  17. Link di blo saya kenapa warna hitam ... gimana cara ganti warna link di blog?

    BalasHapus
  18. Simple dan elegan templatenya mba arlina

    BalasHapus
  19. mantab templatenya makasih mba x-)

    BalasHapus
  20. pleas say this info in English
    i cant understand this language

    BalasHapus
  21. How can I change the blue color of the header?

    BalasHapus
  22. Bagus banget tuh templatenya... Mau dong,, :D

    BalasHapus
  23. mbak cara edit slide navigasi untuk tampilan mobile nya gimana ya ?? soal nya slide navigasi nya terlalu panjang ke bawah ..
    ohh ya saya sudah pakai template N light nya terima kasih ya..

    BalasHapus
  24. Makasih mbak amelia. cara nambahin tulisan yang di atas emoticon dimana mbak?

    BalasHapus
  25. Mbak arliana, saya mau order template n light versi premium. Saya udah kontak mbak arliana via formulir kontak tapi gak bisa. Boleh minta email mbak? Biar ntar saya kontak lagi via email

    BalasHapus
  26. Mbk arlina jumb break itu apa?

    BalasHapus
  27. Hello sear!
    My name is Sao Su
    May I ask you one question please!
    How to create Contact page in this template?
    I will hope you reply .

    BalasHapus
  28. how can change social media in this template i replace all link but social media not cahnge pls help

    BalasHapus
  29. Sir I have a Question How To align Footer Text in This Template Please Reply. I Need Your Help

    BalasHapus
  30. Cakep templatenya mba, kaya yg buat hehe

    BalasHapus
  31. Halo mba, kenapa blog saya featured postnya cuma ada 2 ya? gimana biar tiga? terimakasih.

    BalasHapus
  32. ohaaaaa mantap x template nya, pengen upgread ni

    BalasHapus
  33. mbak, tanya dong, cara agar post thumbnail dan related post thumbnail otomatis terisi gambar tertentu saat ada postingan yang tidak ada gambarnya gimana ya?
    mohon pencerahannya mbak. makasih.

    BalasHapus
  34. ijin sedot ya mba Erlina..Terimakasih

    BalasHapus
  35. Thanks you ! This template is very good

    BalasHapus

Komentar Anda adalah tanggapan pribadi, kami berhak menghapus komentar yang mengandung kata-kata pelecehan, intimidasi, dan SARA. Terima kasih.