Các tính năng nổi bật
- Thiết kế Responsive
- Menu Drop down
- Bố cục đẹp, hợp lí.
- Các button chia sẻ qua mạng xã hội
- Hộp thoại giới thiệu author
- Hỗ trợ quảng cáo adsense
- Cùng nhiều tính năng khác
Hướng dẫn tùy chỉnh template
Thêm Logo và tùy chỉnh top navigation
Các bạn tìm đoạn code dưới đây
<!---Slider -->
<div class='col-sm-12'>
<b:section id='slider' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='slider' type='HTML'>
<b:includable id='main'>
<div class='ei-slider' id='ei-slider'>
<!--large images go here-->
<ul class='ei-slider-large'>
<li>
<img alt='image06' src='http://3.bp.blogspot.com/-OgALPxjVyE4/U7gsjg2wXFI/AAAAAAAAAKo/hV9sdl6YGx8/s1600/1.jpg'/>
<div class='ei-title'>
<h2>Passionate</h2>
<h3>Seeker</h3>
</div>
</li>
<li>
<img alt='image01' src='http://3.bp.blogspot.com/-i7rJIQwi_MI/U7gskcAu03I/AAAAAAAAAKw/g4VEtfbBAgU/s1600/2.jpg'/>
<div class='ei-title'>
<h2>Creative</h2>
<h3>Duet</h3>
</div>
</li>
<li>
<img alt='image02' src='http://4.bp.blogspot.com/-0Mf5X3ardQo/U7gskeVBIGI/AAAAAAAAAKs/NJhLEypOGGQ/s1600/3.jpg'/>
<div class='ei-title'>
<h2>Friendly</h2>
<h3>Devil</h3>
</div>
</li>
<li>
<img alt='image03' src='http://2.bp.blogspot.com/--2TaJ7AErnk/U7gskz38zQI/AAAAAAAAAK0/SpCWfoG0V74/s1600/4.jpg'/>
<div class='ei-title'>
<h2>Be</h2>
<h3>Creative</h3>
</div>
</li>
<li>
<img alt='image04' src='http://3.bp.blogspot.com/-46IyPtuE8ZU/U7gslSsWaWI/AAAAAAAAALA/ByfD9YccNgw/s1600/5.jpg'/>
<div class='ei-title'>
<h2>Insecure</h2>
<h3>Hussler</h3>
</div>
</li>
<li>
<img alt='image05' src='http://3.bp.blogspot.com/-nLf6KZ6-GsU/U7gsmERsiwI/AAAAAAAAALM/eeYAzs7yOVY/s1600/6.jpg'/>
<div class='ei-title'>
<h2>Loving</h2>
<h3>Rebel</h3>
</div>
</li>
</ul><!-- ei-slider-large -->
<!--thumbnals go here-->
<ul class='ei-slider-thumbs'>
<li class='ei-slider-element'>Current</li>
<li><a href='#'>Slide 6</a><img alt='thumb06' src='http://3.bp.blogspot.com/-OgALPxjVyE4/U7gsjg2wXFI/AAAAAAAAAKo/hV9sdl6YGx8/s150/1.jpg'/></li>
<li><a href='#'>Slide 1</a><img alt='thumb01' src='http://3.bp.blogspot.com/-i7rJIQwi_MI/U7gskcAu03I/AAAAAAAAAKw/g4VEtfbBAgU/s150/2.jpg'/></li>
<li><a href='#'>Slide 2</a><img alt='thumb02' src='http://4.bp.blogspot.com/-0Mf5X3ardQo/U7gskeVBIGI/AAAAAAAAAKs/NJhLEypOGGQ/s150/3.jpg'/></li>
<li><a href='#'>Slide 3</a><img alt='thumb03' src='http://2.bp.blogspot.com/--2TaJ7AErnk/U7gskz38zQI/AAAAAAAAAK0/SpCWfoG0V74/s150/4.jpg'/></li>
<li><a href='#'>Slide 4</a><img alt='thumb04' src='http://3.bp.blogspot.com/-46IyPtuE8ZU/U7gslSsWaWI/AAAAAAAAALA/ByfD9YccNgw/s150/5.jpg'/></li>
<li><a href='#'>Slide 5</a><img alt='thumb05' src='http://3.bp.blogspot.com/-nLf6KZ6-GsU/U7gsmERsiwI/AAAAAAAAALM/eeYAzs7yOVY/s150/6.jpg'/></li>
</ul><!-- ei-slider-thumbs -->
</div><!-- ei-slider -->
</b:includable>
</b:widget>
</b:section>
</div>
<!---end of slider -->
Thay thế đường link logo của bạn và các đường link navigation.
Lưu ý rằng tất cả các đường link theo label của bạn phải có dạng http://blog url/search/label/ label _name... và phải kết thúc bằng "?max-results=6"
Chẳng hạn như sau http://blog url/search/label/blog?max-results=6
Tùy chỉnh header
Bạn tìm đoạn code sau:
<!---header -->
<div class='col-sm-12'>
<b:section id='header1' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='logo' type='HTML'>
<b:includable id='main'>
<h1>Hello! We are SimplexDesign</h1>
<div class='lead'>
<p>we love creative ideas and great designs.</p>
</div>
<div class='divide60'/>
</b:includable>
</b:widget>
</b:section>
</div>
<!---end of header -->
Bạn có thể thay thế đoạn văn bản bằng những lời giới thiệu của bạn. Bạn cũng có thể bỏ phần này đi bằng cách xóa tất cả code của phần này.
Tùy chỉnh main slider
Bạn tìm đoạn code sau:
<!---Slider -->
<div class='col-sm-12'>
<b:section id='slider' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='slider' type='HTML'>
<b:includable id='main'>
<div class='ei-slider' id='ei-slider'>
<!--large images go here-->
<ul class='ei-slider-large'>
<li>
<img alt='image06' src='http://3.bp.blogspot.com/-OgALPxjVyE4/U7gsjg2wXFI/AAAAAAAAAKo/hV9sdl6YGx8/s1600/1.jpg'/>
<div class='ei-title'>
<h2>Passionate</h2>
<h3>Seeker</h3>
</div>
</li>
<li>
<img alt='image01' src='http://3.bp.blogspot.com/-i7rJIQwi_MI/U7gskcAu03I/AAAAAAAAAKw/g4VEtfbBAgU/s1600/2.jpg'/>
<div class='ei-title'>
<h2>Creative</h2>
<h3>Duet</h3>
</div>
</li>
<li>
<img alt='image02' src='http://4.bp.blogspot.com/-0Mf5X3ardQo/U7gskeVBIGI/AAAAAAAAAKs/NJhLEypOGGQ/s1600/3.jpg'/>
<div class='ei-title'>
<h2>Friendly</h2>
<h3>Devil</h3>
</div>
</li>
<li>
<img alt='image03' src='http://2.bp.blogspot.com/--2TaJ7AErnk/U7gskz38zQI/AAAAAAAAAK0/SpCWfoG0V74/s1600/4.jpg'/>
<div class='ei-title'>
<h2>Be</h2>
<h3>Creative</h3>
</div>
</li>
<li>
<img alt='image04' src='http://3.bp.blogspot.com/-46IyPtuE8ZU/U7gslSsWaWI/AAAAAAAAALA/ByfD9YccNgw/s1600/5.jpg'/>
<div class='ei-title'>
<h2>Insecure</h2>
<h3>Hussler</h3>
</div>
</li>
<li>
<img alt='image05' src='http://3.bp.blogspot.com/-nLf6KZ6-GsU/U7gsmERsiwI/AAAAAAAAALM/eeYAzs7yOVY/s1600/6.jpg'/>
<div class='ei-title'>
<h2>Loving</h2>
<h3>Rebel</h3>
</div>
</li>
</ul><!-- ei-slider-large -->
<!--thumbnals go here-->
<ul class='ei-slider-thumbs'>
<li class='ei-slider-element'>Current</li>
<li><a href='#'>Slide 6</a><img alt='thumb06' src='http://3.bp.blogspot.com/-OgALPxjVyE4/U7gsjg2wXFI/AAAAAAAAAKo/hV9sdl6YGx8/s150/1.jpg'/></li>
<li><a href='#'>Slide 1</a><img alt='thumb01' src='http://3.bp.blogspot.com/-i7rJIQwi_MI/U7gskcAu03I/AAAAAAAAAKw/g4VEtfbBAgU/s150/2.jpg'/></li>
<li><a href='#'>Slide 2</a><img alt='thumb02' src='http://4.bp.blogspot.com/-0Mf5X3ardQo/U7gskeVBIGI/AAAAAAAAAKs/NJhLEypOGGQ/s150/3.jpg'/></li>
<li><a href='#'>Slide 3</a><img alt='thumb03' src='http://2.bp.blogspot.com/--2TaJ7AErnk/U7gskz38zQI/AAAAAAAAAK0/SpCWfoG0V74/s150/4.jpg'/></li>
<li><a href='#'>Slide 4</a><img alt='thumb04' src='http://3.bp.blogspot.com/-46IyPtuE8ZU/U7gslSsWaWI/AAAAAAAAALA/ByfD9YccNgw/s150/5.jpg'/></li>
<li><a href='#'>Slide 5</a><img alt='thumb05' src='http://3.bp.blogspot.com/-nLf6KZ6-GsU/U7gsmERsiwI/AAAAAAAAALM/eeYAzs7yOVY/s150/6.jpg'/></li>
</ul><!-- ei-slider-thumbs -->
</div><!-- ei-slider -->
</b:includable>
</b:widget>
</b:section>
</div>
<!---end of slider -->
Bạn có thể thay thế hình ảnh của bạn và kích thước tùy chỉnh.
Tùy chỉnh quảng cáo
Dưới slider là các vị trí quảng cáo.
Bạn tìm đoạn code sau:
<!--- advertise-->
<b:section id='adv1' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='adv1' type='HTML'>
<b:includable id='main'>
<div class='col-sm-3'>
<div class='text-center services-1'>
<div class='col-wrapper'>
<div class='icon-border bm15'> <i class='icon-picons-bulb'/> </div><h5 class='upper'>Creative Ideas</h5><p>Nulla vitae libero pharetra augue. Etiam porta malesuada magna mollis euismod consectetur sem urdom tempus porttitor.</p>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class='text-center services-1'>
<div class='col-wrapper'>
<div class='icon-border bm15'> <i class='icon-picons-rocket'/> </div><h5 class='upper'>Rapid Solutions</h5><p>Nulla vitae libero pharetra augue. Etiam porta malesuada magna mollis euismod consectetur sem urdom tempus porttitor.</p>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class='text-center services-1'>
<div class='col-wrapper'>
<div class='icon-border bm15'> <i class='icon-picons-lab'/> </div><h5 class='upper'>Magic Touch</h5><p>Nulla vitae libero pharetra augue. Etiam porta malesuada magna mollis euismod consectetur sem urdom tempus porttitor.</p>
</div>
</div>
</div>
<div class='col-sm-3'>
<div class='text-center services-1'>
<div class='col-wrapper'>
<div class='icon-border bm15'> <i class='icon-picons-award'/> </div><h5 class='upper'>AWARD WINNING</h5><p>Nulla vitae libero pharetra augue. Etiam porta malesuada magna mollis euismod consectetur sem urdom tempus porttitor.</p>
</div>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
<!---end of advertise -->
Bạn có thể tùy chỉnh theo ý của bạn.
Tùy chỉnh nội dung Customer testimonial
Bạn tìm đoạn code sau:
<!---Customer testimonial -->
<div class='parallax' style='background-image: url(http://tlnap38wsaf2tcqwj2unvg2uq0.wpengine.netdna-cdn.com/wp-content/uploads/2014/03/parallax1.jpg);'>
<div class='container inner'>
<div class='row'>
<div class='col-sm-12'>
<div class='section-title-wrapper'>
<h3 class='section-title'>What our customers think</h3>
</div>
</div>
<div class='col-sm-12'>
<div class='text-center'>
<div class='tab-container' id='testimonials'>
<div class='panel-container'>
<div class='' id='tst1'>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor gravida at eget metus. Vestibulum id ligula porta.<span class='author'>Elsie Spear</span> </div>
<div class='' id='tst2'>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed.<span class='author'>Barclay Widerski</span> </div>
<div class='' id='tst3'>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Praesent commodo cursus magna. Donec sed odio dui.<span class='author'>Coriss Ambady</span> </div>
<div class='' id='tst4'>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Praesent commodo cursus magna. Donec sed odio dui.<span class='author'>Nikolas Brooten</span> </div>
</div>
<ul class='etabs'>
<li class='tab'><a class='' href='#tst1'/></li>
<li class='tab'><a class='' href='#tst2'/></li>
<li class='tab'><a class='' href='#tst3'/></li>
<li class='tab'><a class='' href='#tst4'/></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--end of testimonial-->
Bạn có thể tùy chỉnh customer testimonial trong đoạn code theo ý bạn muốn. Đường link "http://tlnap38wsaf2tcqwj2unvg2uq0.wpengine.netdna-cdn.com/wp-content/uploads/2014/03/parallax1.jpg" là ảnh nền của nội dung customer testimonial. Bạn có thể thay đổi nó để thay đổi ảnh nền.
Tùy chỉnh key feature
Bạn tìm đoạn code bên dưới:
<!---Key features -->
<div class='dark-wrapper'>
<div class='container inner' style='padding-bottom: 0px;'>
<div class='row'>
<div class='col-sm-12'>
<div class='section-title-wrapper'>
<h3 class='section-title'>Key Features of Simplex's templates</h3>
</div>
<div class='thin'>
<div class='text-center'>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna posuere velit aliquet.</p>
</div>
<div class='divide40'/>
</div>
</div>
<div class='aq-block aq-block-aq_icon_multiple_block col-sm-3 aq-first '>
<div class='services-2'>
<div class='icon'>
<i class='icon-picons-desktop-preferences icn'/>
</div>
<div class='text'>
<h5 class='upper'>100% Responsive Layout</h5><p>Nulla vitae libero, a pharetra augue. Integer posuere a ante venenatis condimentum.</p>
</div>
<div class='divide20'/>
<div class='icon'>
<i class='icon-picons-support icn'/>
</div>
<div class='text'>
<h5 class='upper'>Free Support & Updates</h5><p>Nulla vitae libero, a pharetra augue. Integer posuere a ante venenatis condimentum.</p>
</div>
<div class='divide20'/>
<div class='icon'>
<i class='icon-picons-drawing icn'/>
</div>
<div class='text'>
<h5 class='upper'>Pixel Perfect Design</h5><p>Nulla vitae libero, a pharetra augue. Integer posuere a ante venenatis condimentum.</p>
</div>
</div>
</div>
<div class='aq-block aq-block-aq_image_block col-sm-6'>
<img alt='aq_block_19' src='http://tlnap38wsaf2tcqwj2unvg2uq0.wpengine.netdna-cdn.com/wp-content/uploads/2014/04/loom-browser.png'/>
</div>
<div class='aq-block aq-block-aq_icon_multiple_block col-sm-3 '>
<div class='services-2'>
<div class='icon'>
<i class='icon-picons-window-layout-3 icn'/>
</div>
<div class='text'>
<h5 class='upper'>Rich Layout Options</h5><p>Nulla vitae libero, a pharetra augue. Integer posuere a ante venenatis condimentum.</p>
</div>
<div class='divide20'/>
<div class='icon'>
<i class='icon-picons-earth icn'/>
</div>
<div class='text'>
<h5 class='upper'>SEO Friendly</h5><p>Nulla vitae libero, a pharetra augue. Integer posuere a ante venenatis condimentum.</p>
</div>
<div class='divide20'/>
<div class='icon'>
<i class='icon-picons-brush-2 icn'/>
</div>
<div class='text'>
<h5 class='upper'>Colour Palates</h5><p>Nulla vitae libero, a pharetra augue. Integer posuere a ante venenatis condimentum.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!---end of Key features -->
Tùy chỉnh theo ý bạn muốn. Muốn không hiển thị mục này thì có thể xóa đoạn code này đi.
Tùy chỉnh Our process part
Bạn tìm đoạn code sau:
<!---Our process -->
<div class='parallax' style='background-image: url(http://tlnap38wsaf2tcqwj2unvg2uq0.wpengine.netdna-cdn.com/wp-content/uploads/2014/03/parallax2.jpg);'>
<div class='container inner'>
<div class='row'>
<div class='col-sm-12'>
<div class='section-title-wrapper'>
<h3 class='section-title'>Our Process</h3>
</div>
<div class='thin'>
<div class='text-center'>
<p>Consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<div class='divide40'/>
</div>
</div>
<div class='col-sm-12'>
<div class='row services-3 text-center'>
<div class='col-sm-3 col'>
<div class='icon'><i class='icon-picons-bulb icn'/></div>
<h4 class='upper'>1. Creative Ideas</h4>
</div>
<div class='col-sm-3 col'>
<div class='icon'><i class='icon-picons-rocket icn'/></div>
<h4 class='upper'>2. Rapid Solutions</h4>
</div>
<div class='col-sm-3 col'>
<div class='icon'><i class='icon-picons-lab icn'/></div>
<h4 class='upper'>3. Magic Touch</h4>
</div>
<div class='col-sm-3 col'>
<div class='icon'><i class='icon-picons-award icn'/></div>
<h4 class='upper'>4. Award Winning</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<!---end of our process -->
Tùy chỉnh Call to action message
Bạn tìm đoạn code sau:
<!---call to action -->
<div class='dark-wrapper'>
<div class='container inner'>
<div class='row'>
<div class='col-sm-12'>
<div class='text-center'>
<p class='lead lite'>
<a href='#'>If you like what you see, let's work together</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!---end of call to action -->
Tùy chỉnh author post dưới cuối mỗi bài viết
Các bạn tìm đoạn code sau:
<!--post author-->
<div class='about-author image-caption'>
<div class='author-image'>
<img alt='' class='avatar avatar-120 photo' height='120' src='http://1.gravatar.com/avatar/bb43b8611ea6edf1a25c2abdc0a7285f?s=120&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D120&r=G' width='120'/>
</div>
<div class='author-details vcard author'>
<h3>
About the author
</h3>
<p>Huy Dinh Quang (known as Nhamngahanh) is a blogger and founder of Simplexdesign blog . Learn more about him <a href='http://www.thesimplexdesign.com/p/about-me.html'>here</a> and connect with SimplexDesign community in <a href='http://twitter.com/dinhquanghuy'>Twitter</a>,<a href='http://www.facebook.com/simplexdesignblog'>Facebook</a>,and <a href='https://plus.google.com/u/0/106038766758854870457?rel=author'>Google+</a></p>
<ul class='social'>
<li><a href='#' target='_blank'><i class='icon-s-pinterest'/></a></li>
<li><a href='#' target='_blank'><i class='icon-s-facebook'/></a></li>
<li><a href='#' target='_blank'><i class='icon-s-twitter'/></a></li>
<li><a href='#' target='_blank'><i class='icon-s-linkedin'/></a></li>
<li><a href='#' target='_blank'><i class='icon-s-skype'/></a></li>
<li><a href='#' target='_blank'><i class='icon-s-dribbble'/></a></li>
</ul>
</div>
<div class='clearfix'/>
</div>
Tùy chỉnh sidebar
Bạn tìm đoạn code sau:
<!--sidebar-->
<aside class='col-sm-4 sidebar lp30'>
<div class='sidebox widget widget_search' id='search-2'>
<form action='/search' class='searchform' id='searchform' method='get'>
<input class='search' id='s2' name='q' onblur='this.value='Search something'' onfocus='this.value=''' type='text' value='Search something'/>
<button class='btn btn-default' type='submit'>Find</button>
</form>
</div>
<div class='sidebox widget ebor_popular' id='ebor_popular-widget-3'>
<h3 class='widget-title'>Recent Posts</h3>
<ul class='post-list'>
<script>
document.write("<script src=\"/feeds/posts/default/-/blog?max-results=6&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</ul>
</div>
<!--sidebar ads code go here-->
</aside>
<!--end of sidebar-->
Bạn cũng có thể thêm đoạn code của bạn vào sau đoạn văn bản "sidebar ads code go here"
Tùy chỉnh footer link
Bạn tìm đoạn code sau:
<ul class='footer-menu pull-right' id='menu-footer-menu'>
<li><a href=''>Home</a></li>
<li><a href='/search/label/gallery?max-result=6'>Portfolio</a></li>
<li><a href=''>About</a></li>
<li><a href='/search/label/blog?max-result=6'>Blog</a></li>
<li><a href=''>Contact</a></li>
</ul>
Tùy chỉnh theo ý bạn muốn.
Cách post bài viết
Template này có hai dạng post bài viết, một là nomal post
và dạng khác là portfolio post
Để hiển thị dạng normal blog post, bạn phải thêm label "blog" khi xuất bản bài viết
Để hiển thị dạng portfolio post, bạn phải thêm label "gallery"
Một bài viết phải có một trong hai label "blog" và "gallery". Nếu bạn không có bất kì một label nào thì bài viết đó sẽ không được hiển thị. Nếu bạn có cả hai label thì nó sẽ làm lỗi toàn bộ site.
Blogger Template for Seo hi vọng bạn sẽ cảm thấy hài lòng với những gì mà chúng tôi đã chia sẻ và hướng dẫn các bạn tùy chỉnh template này. Thanks thesimplexdesign for sharing this template.