N Light 6

New Light là một template với bố cục Responsive và phù hợp cho tất cả các blog của Blogger. Đó là thiết kế với sự kết hợp màu sắc đơn giản, sạch sẽ, hiện đại và dễ nhìn, load nhanh, Tối ưu hóa SEO, và đã được xây dựng bằng cách sử dụng một số các xu hướng thiết kế phổ biến nhất hiện nay.

Cài đặt

1. Đăng nhập vào blogger > Mẫu > chỉnh sửa HTML.
2. Lưu lại mẫu cũ của bạn trước khi thực hiện.
3. Sau đó chọn "Upload".

Chỉnh sửa Theme

Navigation

Đăng nhập Blogger > Mẫu > "Chỉnh sửa HTML"

Tìm và thay thế tất cả các mã này với các #liên kết của bạn.

<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

Đăng nhập Blogger > Mẫu > "Chỉnh sửa HTML"

Tìm và thay thế xxxxx bằng các mã của bạn (Nếu không cần thiết, loại bỏ hoặc để nguyên như vậy cũng chẳng sao).

<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'/>

Quảng cáo trong bài viết

Dùng code dưới để đặt vào vị trí cần thiết.

<!-- Mã Banner/Ad ở đây -->

với các đoạn mã không áp dụng được:

Bạn có thể dùng công cụ chuyển đổi mã quảng cáo tại đây HTML Converter hoặc tại đây Parse HTML.

&lt;div style=&quot;display:block;text-align:center;margin:20px auto;&quot;&gt;
<!-- Mã Banner/Ad ở đây  -->
&lt;/div&gt;

Widget Sosial Media di Sidebar

Tìm và thay thế tất cả liên kết thành của bạn.

<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=757241125582091314' rel='nofollow' target='_blank' title='Đăng ký thành viên'><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 trong phần Footer

Tìm kiếm và thay thế tất cả các dấu # bằng link của bạn.

<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

Sửa phần phân trang cho bài viết, tìm postperpage=5 sửa thành số bạn muốn hiển thị trên mỗi trang.

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

Featured Posts

Để xóa các bài viết trong phần Featured Posts, mở trình soạn thảo mẫu sau đó tìm và xóa đoạn mã sau.

<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

Để thêm Syntax Highlighting trong bài viết, thêm mã <pre><code></code></pre> và nội dung (HTML, CSS, JavaScript, jQuery) vào giữa các thẻ.

<pre><code>
---NỘI DUNG MÃ ĐIỀN VÀO ĐÂY--
</code></pre>

Youtube Responsive Video

Sử dụng mã này để nhúng video youtube responsive

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

Thay thế phần đánh dấu bằng ID của video youtube.

Video Youtube Responsive DEMO

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">
--- NỘI DUNG ẨN/HIỆN ---
</div>

Chia nội dung bài viết thành 3 phần

<div class="bagitiga">
--- NỘI DUNG POST ---
</div>

Tạo bảng trong bài viết

<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>

Ví dụ:

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

Chỉnh sửa hiển thị cho điện thoại

Tắt các phiên bản di động của mẫu này, Mẫu > Nút hình bánh răng > Không.

Cập nhật

Sửa lỗi không hiển thị hình ảnh đầy đủ trong phần Featured Post

Đăng nhập Blogger > Mở chỉnh sửa HTML > Tìm đoạn CSS bên dưới

/* 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;}

Thay thế bằng đoạn CSS này

/* 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;}

Như vậy là đã hoàn thành chỉnh sửa template N Light, nếu có khó khăn hoặc điều gì khúc mắc, đừng ngại comment xuống phía dưới, hoặc Liên hệ. với mình

Nguồn: Arlinadzgn

NLight Template Blogspot Responsive 2016

Chào tất cả anh chị em!
Hôm nay Hà Nguyệt xin giới thiệu một Template Full Responsive cho blogger, chuẩn SEO, chuẩn Google Structured Data Testing Tool, đẹp và thân thiện với người dùng.

Đây là bản mã hóa bản quyền ở chân trang, tuy nhiên mình sẽ hướng dẫn các bạn thay đổi nếu muốn.
Bản pro được rao bán với giá 50.000 rp tiền indonesia. Tuy nhiên không phải ai cũng mua được và không biết cách mua như thế nào?
N Light Blogger Template Responsive and SEO Friendly được chia sẻ miễn phí tại Hà Nguyệt

Template này có gì đặc biệt

Features	Availability
Responsive	True Check
Google Testing Tool Validator	True Check
SEO Friendly	True Check
Mobile Friendly	True Check
Dynamic Heading	True
Adsense Ready	True
Valid Schema.org	True
High CTR	True
Personal Blog	True
2 Column	True
Auto Read More with Thumbnail	True
Responsive Ad Slot	True
Breadcrumbs	True
About Me Widget	True
Related Posts with Thumb	True
Search Box	True
Social Share Button	True
Responsive Dropdown Menu	True
Smooth Back to Top	True
Shortcodes	True
Unlimited Page Numbered	True

Để cài đặt Template giống với DEMO các bạn xem hướng dẫn N Light Template Documentation, cảm ơn!

Những bạn nào muốn thay đổi mã hóa ở chân trang vui lòng để lại bình luận phía dưới, mình sẽ hỗ trợ các bạn.