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'>☰ 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.
<div style="display:block;text-align:center;margin:20px auto;">
<!-- Kode Banner/Iklan Anda Di sini -->
</div>
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("<script src=\"/feeds/posts/default/?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</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.
Template baru
BalasHapusBelum dibagikan
HapusLancar 8-)
HapusSegera mbak, hehe ngk sabar
HapusSiap, nanti setelah sarapan pagi hihi
Hapusvery nice
BalasHapusThanks
Hapusmantab mbak templatenya
BalasHapusTerima kasih
Hapusmantab nih templatenya..
BalasHapusTrims
Hapustest..
BalasHapuswah makin seger tmplatenya teh :D
BalasHapusizin comot ya :D
Iya boleh
HapusSungguh nyaman temlate-nya. Suka bangat. Terima kasih dan teruskan usaha. :)
BalasHapusOke siap
Hapusfeatured post tidak memunculkan gambar, bagaimana cara mengatasinya? terima kasih sebelumnya
BalasHapusTambahkan jump break di dalam artikel
HapusBu arlina, biar related postnya ada gambar gimana caranya?
BalasHapusTambahkan jump break di dalam artikel
Hapusmantav x-)
BalasHapusProblem saya sama dengan mas eros sutrisno diatas, gambar pada featured post tidak muncul .....
BalasHapuswah sama saya juga problem seperti anda.
HapusKelebihan versi Premium dengan versi gratis apa mbak?.
BalasHapusBanyak, ada beberapa versi juga
HapusI 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.?
BalasHapusTranslated 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 . ?
Templatenya elegan, vast loading tampilan warnanya cantik seperti yang bikin :)
BalasHapusThanks For the template !!
BalasHapus:) thank you
BalasHapuslangsung install :D
BalasHapusKeren :D
BalasHapusproblemnya sama mbak di featured post gak ada gambarnya di tunggu fixnya makasih sebelumnya templatenya keren
BalasHapusnyoba
BalasHapuskeren :D
BalasHapusmantap
BalasHapusResponsive dan Fast Loading pakek biiaannget template nya
BalasHapusmantap nih template barunya, btw saran buat mbak arline desain menunya bikin responsif dong hehehe..
BalasHapusgood
BalasHapusmbak di tampilan hape kok susah dipencet ya "navigation" nya?
BalasHapusMantap, 100% work sudah sy coba di blog kabbandung.com
BalasHapusmakasih banyak bu Arlina
Ikut , mau dung
BalasHapusnama blog yang dibawh "join our site" warnanya putih jadi tulisannya gak keliatan.
BalasHapuscara ngatasinnya gimana ya?
Testing :D
BalasHapusini lebih keren, wauu
BalasHapusSaya mau menghapus gambar yang tiga di atas itu bisa nggak mba?
BalasHapusMbak 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
BalasHapusmantabbb themenya
BalasHapusLink di blo saya kenapa warna hitam ... gimana cara ganti warna link di blog?
BalasHapusSimple dan elegan templatenya mba arlina
BalasHapusThank you (k)
BalasHapusmantab templatenya makasih mba x-)
BalasHapuspleas say this info in English
BalasHapusi cant understand this language
mantap mbak, terimakasih
BalasHapuscheer
BalasHapusKerenn 8-)
BalasHapusHow can I change the blue color of the header?
BalasHapusBagus banget tuh templatenya... Mau dong,, :D
BalasHapusmbak cara edit slide navigasi untuk tampilan mobile nya gimana ya ?? soal nya slide navigasi nya terlalu panjang ke bawah ..
BalasHapusohh ya saya sudah pakai template N light nya terima kasih ya..
mkasih bak
BalasHapusMakasih mbak amelia. cara nambahin tulisan yang di atas emoticon dimana mbak?
BalasHapusmakasih :D
BalasHapusMbak 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
BalasHapusMbk arlina jumb break itu apa?
BalasHapustes
BalasHapusBagus :D
BalasHapusbenar-benar fast loading
BalasHapusHello sear!
BalasHapusMy name is Sao Su
May I ask you one question please!
How to create Contact page in this template?
I will hope you reply .
You just need to add in static post page
Hapushow can change social media in this template i replace all link but social media not cahnge pls help
BalasHapusSir I have a Question How To align Footer Text in This Template Please Reply. I Need Your Help
BalasHapusCakep templatenya mba, kaya yg buat hehe
BalasHapusHalo mba, kenapa blog saya featured postnya cuma ada 2 ya? gimana biar tiga? terimakasih.
BalasHapusohaaaaa mantap x template nya, pengen upgread ni
BalasHapushihi
BalasHapusmbak, tanya dong, cara agar post thumbnail dan related post thumbnail otomatis terisi gambar tertentu saat ada postingan yang tidak ada gambarnya gimana ya?
BalasHapusmohon pencerahannya mbak. makasih.
ijin sedot ya mba Erlina..Terimakasih
BalasHapusTest
BalasHapusnice
BalasHapusnice template
BalasHapushi
BalasHapusMantap
BalasHapustest
BalasHapusThanks you ! This template is very good
BalasHapus