» » Download N Light Responsive And SEO Friendly Blogger Template

Download N Light Responsive And SEO Friendly Blogger Template

Download N Light Responsive And SEO Friendly Blogger Template - Halo para sobat Blogger Indonesia. Sudah lama tidak berjumpa, akhirnya saya bisa mengupdate kembali Anas Blogging Tips karena sangat banyak sekali kesibukan akhir-akhir ini karena saya sudah masuk ke janjang yang lebih tinggi, yakni SMK. Tepatnya di SMKN 1 Karawang, Jawa Barat. Pada pertemuan di artikel kali ini saya akan kembali membagikan template gratis yang bisa sobat download seperti template sebelumnya, Invision Blogger Template. Seperti Invision, template yang bernama N Light ini juga karya desainer template terkenal, yakni Arlina Design.
DI awal tahun 2016 lalu setelah membuat template pertama, Arlina kembali merilis template andalan nya dengan desain serta fitur futuristik yang baru tetapi tetap memaksimalkan SEO nya. Template kali ini bernama N Light Responsive And SEO Friendly Blogger Template. Sesuai dengan namanya sudah dapat dipastikan template ini sangat responsive dan mobile friendly sehingga sangat nyaman dibuka dengan semua perangkat visitor blog sobat.

Template berdasar awrna biru dan putih ini sebenarnya mengambil layout desain dari template Invision tempo dulu, tetapi Arlina membuatnya dengan desain flat yang sederhana dan salah salah satu keunggulan template N Light ini yaitu memiliki kelebihan kecepatan loading yang ringan. 

Fitur N Light Responsive And SEO Friendly Blogger Template

Download N Light Responsive And SEO Friendly Blogger Template by Anas Blogging Tips

Jika sobat merupakan penggemar setia template-template buatan Arlina Design maka saya rasa sobat sudah pasti mengetahui hampir semua template buatan nya dibuat seresponsive mungkin, tak terkecuali template biru nan indah ini. Masih mengedepankan fitru Full Responsive, Arlina menambahkan beberapa desain futuristik baru didalmnya. Berikut fitur lengkap tentang N Light Responsive And SEO Friendly Blogger Template.

1. Responsive (Cek)
2. Google Testing Tool Validator (Cek)
3. SEO Friendly (Cek)
4. Mobile Friendly (Cek)
5. Dynamic Heading
6. AdSense Ready
7. Valid Schema.org
8. High CTR
9. Personal Blog
10. 2 Column
11. Auto Readmore With Thumbnail 
12. Responsive Ad Slot
13. Breadcumbs
14. About Me Widget
15. Related Post With Thumb
16. Search Box
17. Social Share Button
18. Responsive Dropdown Menu
19. Smooth Back To Top
20. Shortcodes
21. Unlimited Page Numbered
Baca juga : AdSense Best Template

N Light Responsive And SEO Friendly Premium Blogger Template

N Light Responsive And SEO Friendly Premium Blogger Template
Selain versi gratis nya, ada juga versi Premium dari N Light Responsive And SEO Friendly Blogger Template ini. Ada beberapa fitur tambahan di versi premium ini, diantaranya :

1. 6 Varian Template
2. Recent Post With Thumbnail (6 Only)
3. Floating Search Box And Newsletter (6 Only)
4. Random Post Menu

Bonus Template Simplify
Beli N Light Premium, Dapat Bonus Simplify Responsive

Sobat bisa mendapatkan 2 template sempurna buatan Arlina Design ini hanya dengan harga sebesar Rp70.000 dan jika sobat berminat sobat bisa langsung menghubungi formulir kontak Arlina Desain melalui tombol di bawah ini.
Baca juga : New Line Responsive Premium Blogger Template

Setting N Light Responsive And SEO Friendly Blogger Template

Navigasi
Untuk mengganti atau mengubah serta mengedit link dan nama navigsai di Template N Light silahkan ikuti tutorial berikut ini.

Buka blogger >> Template >> Edit HTML
Cari kode di bawah ini dan ganti tanda # dengan link tujuan blog sobat dan sobat juga bisa mengganti nama tampilan nya.

<nav id='lightnavigation' itemscope='itemscope' itemtype='http://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
Untuk mengoptimalkan dan mengoptimasi SEO pada template N Light ini maka sobat perlu mengubah meta tag nya dengan keterangan blog sobat sendiri. Berikut tutorialnya.

Buka Blogger >> Template >> Edit HTML
Cari kode berikut ini dan ganti tanda xxxxx dengan keterangan blog sobat (Jika tidak diperlukan maka biarkan atau hapus saja)
<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 Dalam Artikel
Untuk menaruh dan menampilkan iklan didalam artikel blog sobat menggunakan template N Light ini maka silahkan ikuti tutorial dibawah ini.

Buka blogger >> Template >> Edit HTML
Cari kode berikut
<!-- Kode Banner/Iklan Anda Di sini -->

Dan ganti dengan kode iklan Google AdSense sobat yang sudah di parse terlebih dahulu. Berikut dibawah link tools parse nya


Widget Sosial Media Di Sidebar
Cari kode berikut ini dan ganti link yang ditandai dengan link sosial media milik sobat

<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='lightsosmed-img'>
<img alt='N Light' class='img-responsive' height='180' src='https://4.bp.blogspot.com/-jvRiCg0BHgk/VyO7VHzwFDI/AAAAAAAADCw/XAWK-rsio24QMitPfGRJXRFoxFPMWc6eACLcB/s1600/Info%2BArlina.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='https://www.facebook.com/arlinadesign' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/> Like</a></li>
<li class='lightsosmed-icon twitt'><a href='https://twitter.com/ArlinaDesign' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</a></li>
<li class='lightsosmed-icon crcl'><a href='https://plus.google.com/+AmeliaPutri90' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/> Circle</a></li>
</ul>
</div>
</div>
</div>

Link Di Footer
Silahkan sobat cari kode berikut dan ubah tanda # (pagar) dengan link milik sobat sesuai dengan keterangan nya.

<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
Silahkan cari kode berikut dan ganti angka 5 dengan jumlah artikel 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 Post
Untuk menghapus Featured Post dari bagain home template, silahkan pergi ke edit HTML Template, cari dan hapus semua kode berikut

<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 Highliting
Untuk menambahkan fitur Syntax Highliter pada artikel, tambahkan kode <pre><code></code></pre> lalu silahkan masukkan script (HTML, CSS, JavaScript, JQuery) didalamnya

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

Youtube Responsive Video
Khusus Template N Light, ntuk mengembed atau menempelkan video youtube kedalam postingan silahkan gunakan kode berikut dan ganti link yang ditandai dengan link video sobat.

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

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>

Perbaikan
Featured Post Yang Tidak Full
Silahkan cari 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;}

Dan ganti dengan kode CSS baru berikut 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;}

Dan silahkan follow Anas Blogging Tips untuk terus mengetahui Panduan, Trik, Dan Tips Lengkap Lain nya Tentang Blogging serta nantikan artikel berikutnya ya.
Terima kasih sobat telah mendownload "Download N Light Responsive And SEO Friendly Blogger Template". Temukan berbagai Blogger Template keren dan SEO lain nya di Anas Blogging Tips Blogger Template. Sobat tidak diperbolehkan untuk menyalin (copy-paste) segala maupun keseluruhkan konten Anas Blogging Tips.
Bagaimana templatenya sob?

0 Response to "Download N Light Responsive And SEO Friendly Blogger Template"

Post a Comment

Subscribe to: Post Comments (Atom)