بلا عنوان

شادي الزمر
شادي الزمر
2:37 ص
0
Business Flat Blogger Template - Documentation

Business Flat - User Documentation

Getting Started

Theme Info

Created: 21/11/2014
Latest Update: N/A
Email: ThemePointer@gmail.com

Business Flat is a Blogger Premium Theme, With many features , Powerfull Admin Panel and more...

Features

  • Preaty and Flat Look New !!
  • PowerFull Admin Panel New !!
  • Fully customizable Design
  • Search Engine Optimized (SEO)
  • Post Layout Style : Boxed Width / Sidebar Right New !!
  • Adsense Ready
  • Fully Responsive
  • jQuery and CSS3 Effects
  • Multi Level Dropdown Menu
  • Cross Browser Compatible
  • Font Awesome Icons Integration
  • Full Images Quality
  • Popular Posts / Recent Posts / Recent Comments
  • Contact US Form
  • Custom Widgets
  • Threaded Comments
  • Custom Error Page
  • Shortcodes
  • Author Box
  • Sitemap
  • and more..

Installation

When you are ready to install a theme, you must first upload the theme file. The theme files can be uploaded in two ways:

  • Blogger Upload : Go to your dashboard > Template > Backup / Restore > Upload the .xml.
  • Copy And Paste : By open your template by Notepad and copy the entire text and paste it into Template in your dashboard.

Now click on "Browse" and select from your drive BFLAT.xml
After click on "Upload" and wait to finish upload.

Or click on "Edit HTML"

And open .xml file by Notepad and select all "Ctrl+A", and copy entire text and paste it here :

Customizing Theme

To these phase we will customize the template and install some widgets and add some Html.

Header Options

Logo Settings :

In your dashboard Select "Layout".

Upload Your Logo Header : In You Blog (Header), Click on "Edit" and applicate all settings below :


Widgets

Recent Posts

Add New Gadget > HTML/Javascript > add the following below code on gadget.

<script src="http://googledrive.com/host/0BxhAEJ5WPt2SdVZRcEZMZ3NJS2c/json.js"></script>
<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
<script type="text/javascript" 
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

Popular Post 

Popular Posts
Tags :

Add New Gadget > Labels > select Cloud Option, and you can select custom labels you want to show as Tags.

Popular Posts

Add New Gadget > Popular Posts > select Summary, Thumbnails and Number of Posts only 4.

Contact form

Add New Gadget > Contact Us.

Theme Options

Top Bar

Go to Dashboard > Template > Edit HTML. Now search for the following below code and add the links which you wish to add on top bar.

<!-- /top-bar -->

Full Width (Live Demo)

For Making a post or page full width you have to paste the following css code on that page or post which you wish to be full width

<style>
.sidebar, #blog-pager {display:none}
#content { width: 910px; float: left; }
.post-body { color: #666; text-transform: auto; word-wrap:break-word; width: 907px }
</style>

Error Page (Live Demo)

Go to Dashboard > Page > New Page. Set the Page name as "404". Now Paste the following code in HTML mode 

margin:0 auto;
 -moz-animation-name: pan;
 -moz-animation-duration:40s;
 -moz-animation-iteration-count: infinite;
 -moz-animation-timing-function: linear;
 -webkit-animation-name: pan;
 -webkit-animation-duration:40s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
}
@-moz-keyframes pan {
 0% {
  background-position: 1338px bottom;
 }
 100% {
  background-position: left bottom;
 }
}
@-webkit-keyframes pan {
 0% {
  background-position: 1338px bottom;
 }
 100% {
  background-position: left bottom;
 }
}
</style><br /></div>
<div id="containerr">
<br />
<table style="width: 100%px;"><tbody>
<tr>  <td><br />
<div class="shade" id="wall_container" style="min-height: 550px;">
<div style="margin-top: 20px;">
</div>
<div class="cover_pan">
<img src="https://s3.amazonaws.com/9lessonslabs/icons/404.png" /></div>
</div>
<div style="height: 50px;">
<br />
<br /></div>
</td> </tr>
</tbody></table>
<br /></div>
</div>

Now Click on the Button "Publish". Then again go to Setting > Search Preferences. Under "Errors and redirection" click on "Custom Page Not Found" and paste the following code.

 <script type = "text/javascript">
setTimeout(function() 
{
location.pathname= "/p/404.html"
}, 
0); 
</script>

Author Box

To edit author box. Go to Dashboard > Template > Edit HTML. Now search for the following below code and add the title, image and description you want.

<!-- /author-box -->

Sitemap (Live Demo)

For Creating a Sitemap. Go to Dashboard > Page > New Page. Name the page "Sitemap or what you want". Paste the below code in HTML tab.

<style>
#tabbed-toc {width:99%;margin:0 auto;background-color:#2B2B2B;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#333}#tabbed-toc .loading {display:block;padding:5px 10px;font:normal bold 10px Arial,Sans-Serif;color:#FFF}#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {margin:0;padding:0;list-style:none}#tabbed-toc .toc-tabs {width:20%;float:left}#tabbed-toc .toc-tabs li a {display:block;font:normal bold 10px/28px Arial,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#ccc;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}#tabbed-toc .toc-tabs li a:hover {background-color:#444;color:#FFF}#tabbed-toc .toc-tabs li a.active-tab {background-color:#E96040;color:#FFF;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0/* cursor:text;*/}#tabbed-toc .toc-content,#tabbed-toc .divider-layer {width:80%;float:right;background-color:#FFF;border-left:5px solid #E96040;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#tabbed-toc .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}#tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}#tabbed-toc .panel li a {display:block;position:relative;font-weight:700;font-size:11px;color:#333;line-height:30px;height:30px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}#tabbed-toc .panel li time {display:block;font-style:italic;font-weight:400;font-size:10px;color:#666;float:right}#tabbed-toc .panel li .summary {display:block;padding:10px 12px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden}#tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}#tabbed-toc .panel li:nth-child(even) {background-color:#f1f1f1;font-size:10px;color:#fff}#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a {background-color:#333;color:#FFF;outline:none}#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time {background-color:#222}@media (max-width:700px) {#tabbed-toc {background-color:#fff;border:0 solid #888}#tabbed-toc .toc-tabs,#tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li {display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li a.active-tab {background-color:#2B2B2B;color:#ccc;-webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);-moz-box-shadow:2px 0 7px rgba(0,0,0,.4);box-shadow:2px 0 7px rgba(0,0,0,.4)}#tabbed-toc .toc-tabs li a.active-tab {background-color:#DF1010;color:#fff}#tabbed-toc .toc-content {border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time {display:none}}</style><div id="tabbed-toc"><span class="loading">Loading...</span></div><script type="text/javascript">var tabbedTOC = {blogUrl: "Your-Blog-URL", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
monthNames: [ // Array of month names
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://googledrive.com/host/0BxhAEJ5WPt2SdVZRcEZMZ3NJS2c/tabbed-toc.js" type="text/javascript"></script>

Now replace "Your-Blog-URL" with your blog url.

Navigation Menu

Go to Dashboard > Template > Edit HTML. Now search for the following below code , Change the links and title which you wish to use on Navigation Menu.

<!--/navigation -->

Comments system v1.2+

In you template layout open COMMENTS SYSTEM widget and inside it add your comments systems you need like: facebook, disqus, etc.

ShortCodes

Blockquote

To create a Blockquote simply select all text you want to be a Quote and click on Quote icon from blog post text editor panel.

Bullet and List

To create a Bullet simply select all text you want to be a Bullet and click on Bullet List icon from blog post text editor panel.
To create a Checked List simply select all text you want to be a Checked List and click on Numbred List icon from blog post text editor panel.

Buttons (Live Demo)

Add the button you want by color.


  <a href="#" class="office-button gray" target="_self"><span>Button</span></a>
  <a href="#" class="office-button blue" target="_self"><span>Button</span></a>
  <a href="#" class="office-button green" target="_self"><span>Button</span></a>
  <a href="#" class="office-button orange" target="_self"><span>Button</span></a>
  <a href="#" class="office-button black" target="_self"><span>Button</span></a>
  <a href="#" class="office-button rosy" target="_self"><span>Button</span></a>
  <a href="#" class="office-button pink" target="_self"><span>Button</span></a>
  <a href="#" class="office-button purple" target="_self"><span>Button</span></a>
  <a href="#" class="office-button brown" target="_self"><span>Button</span></a>
  <a href="#" class="office-button light-gray" target="_self"><span>Button</span></a>
  <a href="#" class="office-button red" target="_self"><span>Button</span></a>
  <a href="#" class="office-button gold" target="_self"><span>Button</span></a>
Alert Boxs (Live Demo) 

  /*----Red Alert----*/
  <div class="alert-red aligncenter"> This is an example of a red alert.</div>
  
  /*----Green Alert-----*/
  <div class="alert-green aligncenter"> This is an example of a green alert.</div>
  
  /*----Blue Alert-----*/
  <div class="alert-blue aligncenter"> This is an example of a blue alert.</div>
  
  /*----Yellow Alert-----*/
 <div class="alert-yellow aligncenter"> This is an example of a yellow alert.</div>

Columns (Live Demo)


   <!-- Two Columns -->
<div class="one-half column-">
<h4>Half Page 1/2</h4>
Add Your Text or Code Here</div>

<div class="one-half column-last">
<h4>Half Page 1/2</h4>
Add Your Text or Code Here</div>

<!-- Three Columns -->
<div class="one-third column-">
<h4>One Third 1/3</h4>
Add Your Text or Code Here</div>

<div class="one-third column-">
<h4>One Third 1/3</h4>
Add Your Text or Code Here</div>

<div class="one-third column-last">
<h4>One Third 1/3</h4>
Add Your Text or Code Here</div>

<!-- Four Columns -->
<div class="one-fourth column-">
<h4>One Fourth 1/4</h4>
Add Your Text or Code Here</div>

<div class="one-fourth column-">
<h4>One Fourth 1/4</h4>
Add Your Text or Code Here</div>

<div class="one-fourth column-">
<h4>One Fourth 1/4</h4>
Add Your Text or Code Here</div>

<div class="one-fourth column-last">
<h4>One Fifth 1/4</h4>
Add Your Text or Code Here</div>

<!-- Five Columns -->
<div class="one-fifth column-">
<h4>One Fifth 1/5</h4>
Add Your Text or Code Here</div>

<div class="one-fifth column-">
<h4>One Fifth 1/5</h4>
Add Your Text or Code Here</div>

<div class="one-fifth column-">
<h4>One Fifth 1/5</h4>
Add Your Text or Code Here</div>

<div class="one-fifth column-">
<h4>One Fifth 1/5</h4>
Add Your Text or Code Here</div>

<div class="one-fifth column-last">
<h4>One Fifth 1/5</h4>
Add Your Text or Code Here</div>

Do you encounter a problem during the installation of the template? So, you do not hesitate to seek help through free support here

© 2014 ThemePoint

شادي الزمر

شادي الزمر

مدونة تختص بمجال التقنية والمعلومات ونشر اخبار وشروحات مصورة ونشر مواضيع حصرية. انشائة المدونه في عام 2016م، مديرها شادي الزمر يقيم في اليمن محافظة تعز. درس في جامعة تعز دبلوم هندسة تقنية المعلومات عام 2014م ومن ثم درس بكلوريوس تسويق في كلية العلوم الادارية في جامعة تعز.

إرسال تعليق

0 تعليقات
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
إرسال تعليق (0)
يستخدم موقعنا ملفات تعريف الارتباط لتحسين تجربتك.معرفة المزيز
Accept !