It's been a long time waiting for a new template, right ? and in this post, I would like to show you a new template for business site name SimplexCreative. This template orignal name Loom, and designed by Wpengine.com. I converted it to Blogger template and modified some elements to make it look better (in my point of view :D
This template is a litle bit dificult to install and it requires you basic knowledge on code editing, HTML and CSS. Don't worry, not too much.
Install instruction
1. Download this template
2. Open it a word editor such as Notepad++ (because this editor can highlight the code, make you easier in editing)
Now we start from begining
3. To add logo and top navigation
Find this code
<div class='navbar-header'>
<div class='container'>
<div class='basic-wrapper'>
<a class='btn responsive-menu pull-right' data-target='.navbar-collapse' data-toggle='collapse'>
<i class='icon-menu-1'/>
</a>
<a class='navbar-brand' expr:href='data:blog.homepageUrl'>
<img alt='Alt Text' class='retina' src='http://3.bp.blogspot.com/-5AkmGEt7QN8/U7l9wPD14SI/AAAAAAAAAO0/cVE0RtlPQnY/s1600/logo.png'/>
</a>
</div>
<div class='collapse navbar-collapse pull-right'>
<ul class='nav navbar-nav' id='menu-standard-navigation'>
<li>
<a class='dropdown-toggle js-activated' data-toggle='dropdown' href='#' title='Home'>Home</a>
<ul class=' dropdown-menu' role='menu'>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
</ul>
</li>
<li>
<a class='dropdown-toggle' href='/search/label/gallery?max-results=6' title='Portfolio'>Portfolio</a>
</li>
<li>
<a class='dropdown-toggle' href='/search/label/blog?max-results=6' title='Category'>Blog</a>
</li>
<li>
<a class='dropdown-toggle js-activated' data-toggle='dropdown' href='#' title='Category'>About Us</a>
<ul class=' dropdown-menu' role='menu'>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
</ul>
</li>
<li>
<a class='dropdown-toggle js-activated' data-toggle='dropdown' href='#' title='Category'>Contact Us</a>
<ul class=' dropdown-menu' role='menu'>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
<li><a href='#' title='Category'>Category</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Edit the logo url and link in navigation bellow to your logo and links.
Pls note that all links to your label, category which have struction :
http://blog url/search/label/ label _name...must be add this code at the end "
?max-results=6"
For examle
http://blog url/search/label/blog?max-results=64. To edit the header
Find this code:
<!---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 -->
You can edit this text in header to whatever you want. You can also remove this part by delete all of this block code.
5. To edit the main slider
Find this code:
<!---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 -->
All things need to change marked in bold. You can change it to your images and thumbnails.
6. Under the slider is advertisment blocks
To edit, find this code:
<!--- 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 -->
You can edit content as you want.
7. To edit Customer testimonial part
Find this code
<!---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-->
You can edit customer testimonial in this code as you want. This url "
http://tlnap38wsaf2tcqwj2unvg2uq0.wpengine.netdna-cdn.com/wp-content/uploads/2014/03/parallax1.jpg" is background of customer testimonial part. You can change this to your background image.8. To edit key featureFind this code:<!---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 -->
Edit it as you want. To remove it out, only delete this block code.
9. Our process part
To edit, find this code
<!---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 -->
10. To edit Call to action message
Find this code:
<!---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 -->
11. To edit the post author at the end of each post
Find and edit this code
<!--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>
12. To edit the sidebar :
Find this code
<!--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-->
You can start add your ad code after the bold text "sidebar ads code go here"
13. To edit footer link
Find this code
<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>
Edit it as you want.
That's all for editing. Save template and it ready to use.
Usage
This template has two types of post, one is normal blog post
and the other is portfolio post
To make a post display as a normal blog post, just add label "blog" to its label list
And to make it display as portfolio post, add label "gallery"
One post have must have one label "blog" or "gallery". If have no label "blog" or "gallery", the post cannot display. If it has both of label "blog" and "gallery", it will make error for all site.
That's all for this template. It is free for download and use. Thanks for your support all the time.
I'm available for hire at 10$ if you want to install this template as good as live demo. Pls check contact at "contact us" or "hire us" page.
ليست هناك تعليقات:
إرسال تعليق