The most difficult part of creating a blog is to have beautiful, flexible and SEO Friendly template for your blog. Msoft comes with the solution of your problem and gonna serve you with the best Blogger template. Msoft is the most beautiful, user and seo friendly flexible templates which you can easily customize.for More Templates click here...
Msoft template has many useful features and potential. Following are some best features of this template:
- User Friendly Interface
- SEO Friendly Design
- Top Sticky Bar
- Easy Navigation Bar
- Ad Space in Header
- Single Left Sidebar
- Social Widget
- Threaded Comment Box
- Related Post Widget etc
DEMO DOWNLOAD
In order to install any template on blogger follow below steps:
- First Download Template and Unzip it.
- Login to Blogger >> Template >>
- Click On Backup/Restore Button at Top Left
- Select Template(.xml) From Your Computer
- Hit Upload Button
That's all for Installing Blogger Templates.
This is the free of cost template for everyone but due to my hard efforts i had implemented a footer credit link. Please Keep that link intact.
If you've knowledge about HTML, XML, CSS then you can customize this template and completely make this design of your blog. This template needs some changes like re-placing social usernames, Feedburner username and little things. Simply follow the tutorials.
Editing Navigation Menu:
- Go To Blogger >> Template >> Edit HTML
- Find For <ul id='nav'>
- You Will See The Following Code There.
<ul id='nav'> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li>
<a class='hsubs' href='Place here your link'>Make Money</a>.... <div id='lavalamp'/> </ul>
place your link on place your link here
Repeat this for all <li> elements
Editing Socializer Widget:
- Go To Blogger >> layout >> HTML/javascrip
- place the following code
There You Will replace the following
<style>
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>
<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=OnlineComputerCafe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="OnlineComputerCafe" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/pages/Computer-Cafe/1672539536299066?fref=ts" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhAl7fb8bQRalHjhSBIySN9y6oJqe3Yn2mKYxW6SdJLnR2uUGnYsKJfJBJHCsjvNZYiIGTFIFfnm7c6N-DmfG13FMziEM76uulX9Sm2uP-LuwnRi6KC276_AcVrYBp1qOgnIViu1rREeY/s1600/facebook_btrix.png" /></a>
<a href="https://plus.google.com/GOOGLE PLUS USER ID" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2bcEJvRBp7LzlAiXmeWo4rRU5Ie1pcsKs_54YgywF34tYCvcJs6vVE1Lyxgg4tS0r_8T8t55rh0y1guloeATf_usckfECnnoh0TieZm3BFxud_EIt7fhcmWPOfWSUY8awBKqk6sMw19s/s1600/googleplus_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/OnlineComputerCafe" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXVLXU1BWUpq1rQLM3GeuMjV1u6aWrkR3ObP-MSg8VkWZ-Zn7Njf09B7RHFcLNSJkm1YQQpPVjiGSVq40xwuUy_HXp5YytaoPj1OPPkb9YUVAOlieMb9IWHtSR4UVjTp9yj2-ZxThBbbw/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/OnlineComputerCafe">
<img src="http://feeds.feedburner.com/~fc/OnlineComputerCafe?bg=99CCFF&fg=444444&anim=0" height="26" width="88" style="border:0" alt="" /></a>
</div>
</div>
Replace onlinecomputercafe With Your FB Page Username Also Replace The Twitter Link With Yours and RSS feed with yours.
Editing Footer Menu:
- Go To Blogger >> Template >> Edit HTM
- Find For <div id='footer-top-wrapper'>
There You Will See The Code Like Below
<div id='footer-top-wrapper'>
<div id='footer-top'>
<ul id='footer-navigation'>
<li><a href='Place your link here'>Home</a></li>
<li><a href='Place your link here'>About Us</a></li>
<li><a href='Place your link here'>Contact Us</a></li>
<li><a href='Place your link here'>Sitemap</a></li>
<li><a href='Place your link here'>FAQ</a></li>
<li><a href='Place your link here'>Privacy Policy</a></li>
</ul> <div id='backtotop'> <p id='back-top'> <a href='#'>Back to top</a> </p> </div> </div></div>
replace the place your link here text with your pages or label links.
Repeat this for all <li> elements
Congratulations! You've Successfully Customized The Template!
Note: Dear Readers if you have any query/question feel free to ask me via comment box given below.Also Follow us on social media site and share that post with your friends.
useful tutorial keep it up...
EmoticonEmoticon