How To Setup Basil Blogger Template

Basil is the cracking portfolio Blogger Template that enables yous to practice a professional person portfolio website in addition to larn by your blog. Basil is equipped alongside diverse of widgets which volition help yous to seat out your weblog to a greater extent than professionally. To larn inwards slow for yous nosotros convey published this detailed documentation, thus that yous tin laissez passer notice setup your weblog correctly. You convey made a skillful determination past times choosing our template.
You tin laissez passer notice banking concern tally the alive demo or download the template through the push below in addition to too Please Read this documentation carefully inwards lodge to laid upward your weblog in addition to delight banking concern complaint that there’s no back upward for gratis users.

Free Download Free Version Buy Now Premium Version

Basic Setup

Video Documentation

You tin laissez passer notice banking concern tally this below video to empathise the setup procedure much to a greater extent than easily, exactly click the below ikon to sentry the video lead on YouTube, or click this link – How To Setup Basil Blogger Template – SoraTemplates

.docline{display:block;border-top:1px venture #eee;position:relative;margin:10px 0;}.box-code{background:#444;color:#fff;border:1px venture #1c1c1c;padding:10px;}

Header Background

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

#header-wrapper {
text-align: center;
padding:0;
background: url(http://3.bp.blogspot.com/-3UcLXxRcetg/WaTYDnjaJbI/AAAAAAAADt0/LL7OaZTjsE4hTzpKkm-Jj55c8JI4SZBhQCK4BGAYYCw/s1600/head-back.jpg) no-repeat centre bottom;
background-attachment: fixed;
background-size: cover;
margin-bottom: 10px;
height:100vh;
box-sizing:border-box;
position:relative;
width: 100%;
}

Change the dark highlighted code alongside your ain ikon link.

Note:- Don’t alter anything else, otherwise the background volition non piece of employment properly.

Main Menu/DropDown/Multi DropDown

Access your blog Layout > click Edit link on Main Menu widget.

Normal Link : Features

Sub Link: _Sub Link 1.0 (before the link add “_”) 1 underscore
Sub Link 2: __Sub Link 1.1 (before the link add “__”) 2 underscore

Header Title

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Header Title Widget Section, and in addition to thus add your description text into the content section. Have a hold back to the format below.

<p>
Welcome To Basil
</p>

Header Flashing Text

Access your blog Layout > click Add a Gadget > HTML/JavaScript on Logo Description Widget Section and in addition to thus add your description text into the content section. Have a hold back to the format below.

<div class=’type’>
<span>A Theme For</span><p></p>
</div>
<script language=’javascript’ type=’text/javascript’>//<![CDATA[
$(function() {
“use strict”;
$(“.header-logo-desc p”).typed({
strings: [“Portfolio”, “Landing Page” , ” Agency”], //Headlines(Change It)
loop: true,
startDelay: 1e3,
backDelay: 2e3
});
});
//]]></script>

Social Top/Footer

Access your weblog Layout >click Edit link on Social Topwidget.

Icons Available { facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen }

Fixed Menu

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<ul id=’nav’>
<li class=’current’><a href=’#header-wrapper’>Home</a></li>
<li><a href=’#section-2′>Services</a></li>
<li><a href=’#section-3′>Works</a></li>
<li><a href=’#main-wrapper’>Portfolio</a></li>
<li><a href=’#section-5′>About</a></li>
<li><a href=’#section-6′>Contact</a></li>
</ul>

Change the details alongside your own.

Note:- Don’t alter the href=’ ‘Values Otherwise the carte du jour volition non work.

What Do We Offer (Section-1)

It has 2 types of widgets inwards it offset i is science bar in addition to the other i is science details.

Skill Bar’s

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’skills’>
<!– science –>
<dl>
<dt>HTML</dt>
<dd class=’skill-percent html’ data-percent=’90‘/>
<dt>CSS</dt>
<dd class=’skill-percent css’ data-percent=’85‘/>
<dt>jQuery</dt>
<dd class=’skill-percent jquery’ data-percent=’70‘/>
<dt>SCSS</dt>
<dd class=’skill-percent scss’ data-percent=’60‘/>
<dt>Javascript</dt>
<dd class=’skill-percent javascript’ data-percent=’50‘/>
<dt>PHP</dt>
<dd class=’skill-percent php’ data-percent=’30‘/>
<dt>XML</dt>
<dd class=’skill-percent xml’ data-percent=’40‘/>
</dl>
<!– #skill –>
</div>

Here are the things yous involve to change.

RedHighlighted code is for the abilities yous wish to mention.
Blue Highlighted code is for the score for those abilities.

Skill Details

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’skill-details’>
<!– First –>
<div class=’special-tiles wow fadeInUp’ data-wow-delay=’0s’>
<span class=’special-icons’>
<i aria-hidden=’true’ class=’fa fa-heart-o’/>
</span>
<span class=’special-content’>
<h6 class=’special-heading’>Web Designing</h6>
<p class=’special-text’>Lorem Ipsum is only dummy text of the printing in addition to typesetting industry. Lorem Ipsum has been the industry's. </p></span>
</div>
<!– First One Ends –>
<!– Second –>
<div class=’special-tiles wow fadeInUp’ data-wow-delay=’0.2s’>
<span class=’special-icons’>
<i aria-hidden=’true’ class=’fa fa-birthday-cake’/>
</span>
<span class=’special-content’>
<h6 class=’special-heading’>App Development</h6>
<p class=’special-text’>Lorem Ipsum is only dummy text of the printing in addition to typesetting industry. Lorem Ipsum has been the industry's. </p></span>
</div>
<!– Second Ends –>
<!– Third –>
<div class=’special-tiles wow fadeInUp’ data-wow-delay=’0.3s’>
<span class=’special-icons’>
<i aria-hidden=’true’ class=’fa fa-cutlery’/>
</span><span class=’special-content’>
<h6 class=’special-heading’>Web Application</h6>
<p class=’special-text’>Lorem Ipsum is only dummy text of the printing in addition to typesetting industry. Lorem Ipsum has been the industry's. </p></span>
</div>
<!– Third Ends –>
</div>

Here are the things yous involve to change.

Red Highlighted code is for the icons yous wish to mention. (fontawesome – http://fontawesome.io/cheatsheet/)
Blue Highlighted code is for the titles.
Green Highlighted code is for the Descriptions.

Our Working Process (Section-2)

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’sora-works-box’ id=’section-3′>
<div class=’works-wrap row’>
<div class=’works-title’>
<h4>Our Working Process</h4>
<span>Our procedure on creating awesome projects.</span>
</div>
<div style=’clear: both;’/>
<!– First –>
<div class=’works-tiles’>
<span class=’works-icons’>
<li data-percent=’25’><span class=’text’><i aria-hidden=’true’ class=’fa fa-lightbulb-o’/></span><span class=’bar-circle-right’ style=’transform: rotate(90deg);’/><span class=’bar-circle-left’/><span class=’bar-circle-cover’/></li>
</span>
<h6 class=’works-heading’>1. Concept</h6>
<p class=’works-text’>Lorem Ipsum is only dummy text of the printing in addition to typesetting industry. </p>
</div>
<!– First One Ends –>
<!– Second –>
<div class=’works-tiles’>
<span class=’works-icons’>
<li data-percent=’50’><span class=’text’><i aria-hidden=’true’ class=’fa fa-clipboard’/></span></li>
</span>
<h6 class=’works-heading’>2. PREPARE</h6>
<p class=’works-text’>Lorem Ipsum is only dummy text of the printing in addition to typesetting industry. </p>
</div>
<!– Second Ends –>
<!– Third –>
<div class=’works-tiles’>
<span class=’works-icons’>
<li data-percent=’75’><span class=’text’><i aria-hidden=’true’ class=’fa fa-paint-brush’/></span></li>
</span>
<h6 class=’works-heading’>3. RETOUCH</h6>
<p class=’works-text’>Lorem Ipsum is only dummy text of the printing in addition to typesetting industry. </p>
</div>
<!– Third Ends –>
<!– Fourth –>
<div class=’works-tiles’>
<span class=’works-icons’>
<li data-percent=’100′><span class=’text’><i aria-hidden=’true’ class=’fa fa-gift’/></span></li>
</span>
<h6 class=’works-heading’>4. FINALIZE</h6>
<p class=’works-text’>Lorem Ipsum is only dummy text of the printing in addition to typesetting industry. </p>
</div>
<!– Fourth Ends –>
</div></div>

Here are the things yous involve to change.

<h4>Steps inwards Our Works</h4> – Main Title.
<span>Our procedure on creating awesome projects.</span> – Title Description
<i aria-hidden=’true’ class=’fa fa-lightbulb-o’/> -Icon (fontawesome – http://fontawesome.io/cheatsheet/)
<h6 class=’works-heading’>1. Concept</h6> -Tiles title
<p class=’special-text’>Lorem Ipsum is only dummy text of the printing in addition to typesetting industry. Lorem Ipsum has been the industry's. </p> -Description

Counters (Section-3)

You tin laissez passer notice alter background, number, details in addition to icons inwards this section.

Background

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

.counter-box {
background: url(http://4.bp.blogspot.com/-Tev2WNGyFs8/WaUuh31ZVRI/AAAAAAAADuY/5D9_uZ3rgrY9cVKC46DXxPMlXlxCOmB4gCK4BGAYYCw/s1600/sg-back.jpg) no-repeat;
background-attachment: scroll;
background-size: cover;
background-position: 50% 0;
overflow: hidden;
margin: 0 auto;
padding: 40px 0;
position:relative;
}

Change the crimson highlighted code alongside your ain ikon link.

Note:- Don’t alter anything else, otherwise the background volition non piece of employment properly.

Number, details in addition to icons

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’counter-box-item’>
<i class=’color lnr lnr-code’/>
<h1 class=’counter-sora’>3000</h1>
<div class=’counter-sora-text’>Projects Completed</div>
</div>
<div class=’counter-box-item’>
<i class=’color lnr lnr-coffee-cup’/>
<h1 class=’counter-sora’>50</h1>
<div class=’counter-sora-text’>Happy Customers</div>
</div>
<div class=’counter-box-item’>
<i class=’color lnr lnr-book’/>
<h1 class=’counter-sora’>324</h1>
<div class=’counter-sora-text’>Cups Of Coffee</div>
</div>
<div class=’counter-box-item’>
<i class=’color lnr lnr-gift’/>
<h1 class=’counter-sora’>1234</h1>
<div class=’counter-sora-text’>Awards</div>
</div>

Here are the things yous involve to change.

Red Highlighted code is for the icons yous wish to mention. (fontawesome – http://fontawesome.io/cheatsheet/)
Blue Highlighted code is for the numbers.
Green Highlighted code is for the Descriptions.

Our Portfolio (Section-4):

This is the championship for recent posts yous volition publish.
Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’Portfolio-title’>
<h4>Our Portfolio.</h4>
<span>A creative way that believes inwards the ability of creative ideas in addition to cracking design.</span>
</div>

Change the details alongside your desired one.

Testimonials (Section-5)

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’gallery-cell’>
<div class=’testimonial’>
<img class=’testimonial-avatar’ src=’http://1.bp.blogspot.com/-zjRQwZusQuA/WaUu4AM9p_I/AAAAAAAADug/68l5-04iSWoVMAkpi8iQGM430fUYKAzdACK4BGAYYCw/s400/128.jpg‘/>
<q class=’testimonial-quote’>"Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Duis mauris ex, gravida ut leo eu, rhoncus porta orci. Fusce vitae rutrum nulla."</q>
<span class=’testimonial-author’>Joe Smith, CEO of Cubix</span>
</div>
</div>
<div class=’gallery-cell’>
<div class=’testimonial’>
<img class=’testimonial-avatar’ src=’http://4.bp.blogspot.com/-B1N0s6e1Y90/WaUvFDHMc7I/AAAAAAAADuo/5L4qayXHNiAWVAgZhTRhJ7S2VSAL-E-3QCK4BGAYYCw/s400/128%2B%25281%2529.jpg‘/>
<q class=’testimonial-quote’>"Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Duis mauris ex, gravida ut leo eu, rhoncus porta orci. Fusce vitae rutrum nulla."</q>
<span class=’testimonial-author’>Lisa Jones, Freelance Web Developer</span>
</div>
</div>
<div class=’gallery-cell’>
<div class=’testimonial’>
<img class=’testimonial-avatar’ src=’http://1.bp.blogspot.com/–AljITWu1is/WaUvSgSDbEI/AAAAAAAADuw/5FZ7WobSdtAVINLVQT3qpCSktRNlDA23gCK4BGAYYCw/s400/128.jpg‘/>
<q class=’testimonial-quote’>"Lorem ipsum dolor sit down amet, consectetur adipiscing elit. Duis mauris ex, gravida ut leo eu, rhoncus porta orci. Fusce vitae rutrum nulla.&quot;</q>
<span class=’testimonial-author’>Ryan Waltz, Front-End Developer</span>
</div>
</div>

Here are the things yous involve to change.

Red Highlighted code is for the users image.
Blue Highlighted code is for the review.
Green Highlighted code is for the user details.

Meet The Team (Section-6):

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’about-wrap row’>
<div class=’about-title’>
<h4>Meet The Team</h4>
<span>Our procedure on creating awesome projects.</span>
</div>
<div style=’clear: both;’/>
<!– First –>
<div class=’about-tiles wow fadeInLeft’ data-wow-delay=’0.2s’ style=’visibility: visible;’>
<div class=’team-member text-center’>
<div class=’team-img’>
<img alt=” src=’http://1.bp.blogspot.com/-P1UCUBWGCMU/WaUv1CxF6kI/AAAAAAAADvM/aOSCRX-UHAwKF8EFs20fqryoqDNa3DJQwCK4BGAYYCw/s1600/team_1.jpg‘/>
<div class=’overlay’>
<div class=’team-details text-center’>
<p>
Our spider web pattern squad volition pass fourth dimension alongside our digital marketing team.
</p>
<div class=’socials mt-20′>
<a href=’#’><i class=’fa fa-facebook’/></a>
<a href=’#’><i class=’fa fa-twitter’/></a>
<a href=’#’><i class=’fa fa-google-plus’/></a>
<a href=’#’><i class=’fa fa-envelope’/></a>
</div>
</div>
</div>
</div>
<h6 class=’team-title’>John Marshall</h6>
<span>Designer</span>
</div>
</div>
<!– First One Ends –>
<!– Second –>
<div class=’about-tiles wow fadeInUp’ data-wow-delay=’0s’ style=’visibility: visible;’>
<div class=’team-member text-center’>
<div class=’team-img’>
<img alt=” src=’http://1.bp.blogspot.com/-lS8BCMfild4/WaUv1I0ZzxI/AAAAAAAADvI/TRbkU8DD6qAMXTEciXxlZXakbMGB29xWQCK4BGAYYCw/s1600/team_2.jpg’/>
<div class=’overlay’>
<div class=’team-details text-center’>
<p>
Our spider web pattern squad volition pass fourth dimension alongside our digital marketing team.
</p>
<div class=’socials mt-20′>
<a href=’#’><i class=’fa fa-facebook’/></a>
<a href=’#’><i class=’fa fa-twitter’/></a>
<a href=’#’><i class=’fa fa-google-plus’/></a>
<a href=’#’><i class=’fa fa-envelope’/></a>
</div>
</div>
</div>
</div>
<h6 class=’team-title’>Steve Roberts</h6>
<span>Photographer</span>
</div>
</div>
<!– Second Ends –>
<!– Third –>
<div class=’about-tiles wow fadeInRight’ data-wow-delay=’0.2s’ style=’visibility: visible;’>
<div class=’team-member final text-center’>
<div class=’team-img’>
<img alt=” src=’http://3.bp.blogspot.com/-NN3Axwd3gjc/WaUv1CODCDI/AAAAAAAADvE/vyiHmT0rl98F-ZTqYB0xmst60IHuVFmxQCK4BGAYYCw/s1600/team_3.jpg’/>
<div class=’overlay’>
<div class=’team-details text-center’>
<p>
Our spider web pattern squad volition pass fourth dimension alongside our digital marketing team.
</p>
<div class=’socials mt-20′>
<a href=’#’><i class=’fa fa-facebook’/></a>
<a href=’#’><i class=’fa fa-twitter’/></a>
<a href=’#’><i class=’fa fa-google-plus’/></a>
<a href=’#’><i class=’fa fa-envelope’/></a>
</div>
</div>
</div>
</div>
<h6 class=’team-title’>Michael Cartney</h6>
<span>Designer</span>
</div>
</div>
<!– Third Ends –>
</div>

Change the highlighted part’s alongside your ain details for every squad member.

Get In Touch (Section-7):

There are few things which yous tin laissez passer notice alter inwards this section.

Headings in addition to description.

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’contact-title’>
<h4>Get inwards Touch</h4>
<span>Feel gratis to drib us a trouble to contact us</span>
</div>

Feel gratis To Contact

Access your blog Theme > click Edit Html> and in addition to thus notice the next coding.

<div class=’contact-other’>
<h1 class=’con-title’>Feel gratis To Contact</h1>
<p class=’con-text’>
Lorem ipsum dolor sit down amet, consectetur adipisicing elit. Voluptate dolores, quasi unde quisquam facilis at ullam aperiam similique dicta voluptatibus!
</p>
<ul class=’con-list’>
<li><i class=’lnr lnr-map’/>3066 Stone Lane, Wayne, Pennsylvania.</li>
<li><i class=’lnr lnr-phone’/>+610-401-6021, +610-401-6022</li>
<li><i class=’lnr lnr-envelope’/>[email protected]</li>
<li><i class=’lnr lnr-earth’/>www.yourdomain.com</li>
</ul>
</div>

Change the highlighted part’s alongside your ain details for every squad member.

Contact Form

To brand the contact cast piece of employment yous convey to practice nothing, it industrial plant automatically hurrah!!

Footer Navigation

Access your blog Layout > click Edit link on Topnav widget.

it automatically picks pages in addition to page links but inwards illustration it doesn’t pick, delight come across the higher upward ikon to add together one, yous tin laissez passer notice too add together external links(Links from somewhere else).

Facebook Page Plugin:

or yous tin laissez passer notice follow this tutorial if higher upward method won’t piece of employment
How to Add Responsive Facebook Like Box Widget In Blogger

Template Customization

Access your weblog Template > click Customize.
Colors

Installation And Custom Services

We render enough of templates for gratis but if yous wish something unique for your weblog in addition to thus allow us practice a unique pattern for your blog, Just state us your needs in addition to nosotros volition convert your dream pattern into reality. We too Provide Blogger Template Installation Service. Our Installation service gives yous a simple, quick in addition to secure way of getting your template setup without hassle.

Sumber https://www.sorabloggingtips.com/

SHARE ON Twitter Facebook Google+ Pinterest