BMAG - User Documentation
Shared By: www.vinhlongit.net

Getting Started

Theme Info

Created: 20/09/2014
Latest Update: 22/09/2014 / v1.3
By: Sweetheme Team
Email: Sweethemecontact@gmail.com
Shared By: GuidePedia

BMAG Is a Magazine Responsive Blogger Premium Theme, With many new features and fully Customizble, Powerfull Admin Panel and more...

Features

  • Fully Responsive Design
  • PowerFull Admin Panel
  • Theme Option : Translator / Boxed Style Switcher / Image Scroll Animation
  • Unlimited Colors & Fonts
  • Fully customizable Design
  • Search Engine Optimized (SEO)
  • Post Layout Style : Full Width / Sidebar Right / Sidebar Left with shortcodes
  • 9 Home Layout Boxs Style with shortcodes
  • Support Forum
  • Support Facebook Open Graph & Twitter Cards
  • Adsense Ready
  • jQuery and CSS3 Effects
  • Social Counter
  • Multi Level Dropdown Menu
  • Drop-down menu optimized for mobile devices.
  • Cross Browser Compatible
  • Font Awesome Icons Integration
  • Support RTL Languages
  • LTR / RTL Switcher From OneClick
  • Carousel Slider : Main / Box / Related
  • Full Images Quality
  • Support 3rd-party images and youtube thumbs
  • Random Posts / Recent Posts / Recent Comments
  • Contact US Form
  • Tabs Widget
  • Custom Widgets
  • Threaded Comments
  • Error Page
  • Shortcodes
  • Flickr Widget New !!
  • Add Widgets at Home Layout New !!
  • and more..

Installation

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

  • Copy And Paste : Go to your dashboard > Template > Template HTML. By open your template by Notepad and copy the entire text and paste it into Template in your dashboard.

Click on "Edit HTML"

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

Purchase Code Verify

After Purchase your theme, themeforest give you a Purchase Code something like that : 5s1d6gd3sg164dg1s-987sdg12 Now for active your theme in your domain please follow this steps :
  1. Copy your Purchase Code.
  2. Go to this blog to get your finaly code for activate your theme.
    Note by GuidePedia: We kow you can not verify code here by going on this site. :)
  3. So you have to get code for verification on GuidePedia. Get Code Here
  1. Add your username on envato marketplace.
  2. Paste your purchase code.
  3. Copy and past your blog domain like www.example.com or example.blogspot.com but your should be delete HTTP / HTTPS.
  4. Click on Generate Code to get something like that :

  5. And Copy the final code and go to your Dashboard > Page Layout > Theme Option Area.

  1. In Purchase Code Widget click On Edit.
  2. Paste your final code.
  3. Finaly click on save and well done!! Congratulations.

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 :

Social Media Icons :

First Go to Dashboard > Layout > Edit Social Media Icons > Configure Link List

On "New Site Name" field add your social name : facebook, twitter, rss, dribble, gplus, pinterest, linkedin, youtube.

And on "New Site URL" field add your social url adress.

Settings Your Blog Posts :

In Blog Posts, Click on "Edit" and applicate all settings below :

First Go to Dashboard > Layout > Edit Main Menu > Configure Link List

On "New Site Name" field add your menu title and the subtitle like as this :

Menu Title [Subtitle]

And on "New Site URL" field add your url adress.

Exemple : 
Lastest News [Blog Layout]

Now for add a Submenu Children simply on "New Site Name" field add this

_Submenu

Home Layout

Please Note: in Home Layout areas don't add any widget only HTML one, and don't leave widget empty just follow this

Home Layout Boxs Type : slider, fbig1 , fbig2 , list , column1 , column2 , carousel , videos , gallery

To add Home Layout Boxs simply follow this method by change Boxs Type and your Label and your Color you want.

[Your Label Here][Box Type][Your Color]
Exemple : 
[Technology][slider][#fc0000]

Widgets

Random Posts 
randomposts
Recent Posts 
recentposts
Recent Comments 
recentcomments
Top Menu

Add New Gadget > Link List > add you custom link to visible your own TopMenu.

Categorys :

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

Tags :

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

Popular Posts

Recommend options :

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

Social Counter

Go to Layout > Social Counter Area > Click on Edit > and follow this steps below :

On "New Site Name" fild1 field add Social Name [Social Counter].

And on "New Site URL" fild2 field add your Social Url.

Exemple : Only this Socials Supported ! 
  facebook [2.1k]
  twitter [1k]
  gplus [250]
  rss [860]
  youtube [4.5k]
  dribble [10.2m]
  instagram [502]
  pinterest [120]
Facebook Graph

Add New Gadget > HTML/JavaScript widget > and Coy/Paste this code below :

  fbbox/Your Page Facebook Url
  /*---------Exemple---------*/
  fbbox/https://www.facebook.com/sweetheme

Flickr Widget

Add New Gadget > HTML/JavaScript widget > and Coy/Paste this code below and change your username code like 21692577@N02

 <div class="flickr_widget">
 <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=8&display=latest&size=s&layout=x&source=user&user=21692577@N02">
 </script>
 </div>

Theme Options

Post Layouts

You have 3 post layouts simply add code of post layout in post panel compose or HTML.

  /*----Full Width Post-----*/	
  [full_width]
  /*----Sidebar Left Post-----*/ 
  [sidebar_left]
  /*----Sidebar Right Post-----*/  
  [sidebar_right]
Boxed Style

Default Style is Boxed "yes" if you want to switch to Full Width Style simply replace "yes" to "no".

Image Animation Scroll

Default is active "yes" if you want to desactive this Image Animation simply replace "yes" to "no".

PageNav Posts Number v1.2+

This for number of posts per page for pagination number Default is "20" just add your number in widget content.

Home PageNav v1.2+

Default is "no" if you want to show PageNav in home page simply add "yes" or to remove it add "no".

Intro Posts

Simply Go to your Dashboard > Layout > Intro Posts Area > Add HTML/JavaScript widget > add recent or random.

News Ticker

Simply Go to your Dashboard > Layout > News Ticker Area > Add HTML/JavaScript widget > add recent or your Label Name.

Responsive Settings

To active theme to be Responsive simply go to Dashboard > Template > Mobile > and chose No. Show desktop template on mobile devices.

Adsense Ready [Ad Inside Post]

In this Template you will be able to add ads inside articles easily top or the middle or the bottom of the article as you like only follow the steps below :

Go to your dashboard, and click on layout

Click edit in Ad Inside Post widget and add your ad code inside the box content

Now just inside your post between text add [post_ad]

Comments system v1.2+

In you template layout open COMMENTS SYSTEM widget and inside it add your comments systems you need in this way

[blogger] for blogger comments

[facebook] for facebook comments

[disqus] for disqus comments

you can add one system, two or three as you like and with arrangement you need for example

[facebook]

[facebook][blogger]

[blogger][facebook]

[disqus][facebook][blogger]

Disqus Shortname v1.2+

open widget name "DISQUS SHORTNAME" inside it add your disqus shortname you can find it in your disqus account

Translation

Theme Support RTL/LTR so simply you can change Direction by change your Language from your Dashboard > Setting > Language and formatting > Language, and you well done.

Now if your language is not English, And you want to change the language to language , Only through the translator feature can be change simply through this tool

How it's Work : Go to Layout > Theme Option > in Translator tool click on edit.

On "New Site Name" fild1 field add the default language

And on "New Site URL" fild2 field add your language.

Exemple : 
  /*------ English To Arabic ------*/
  fild1 : Popular Posts
  fild2 : المقالات الشائعة

  /*------ English To French ------*/
 fild1 : Popular Posts
  fild2 : Articles populaires

  /*------ English To Allemand ------*/
  fild1 : Popular Posts
  fild2 : Beliebte Beiträge
  
  /*------ English To Espagnol ------*/
  fild1 : Popular Posts
  fild2 : Puestos Popular

ShortCodes

Drop Caps 
		
  <span class="firstcharacter">Your First Character here</span>
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

Add the button you want by size and color.

  /*----Small Buttons-----*/
  <a href='/' class="button small red">Button Text</a>
  <a href='/' class="button small pink">Button Text</a>
  <a href='/' class="button small orange">Button Text</a>
  <a href='/' class="button small yellow">Button Text</a>
  <a href='/' class="button small green">Button Text</a>
  <a href='/' class="button small turquoise">Button Text</a>
  <a href='/' class="button small blue">Button Text</a>
  <a href='/' class="button small purple">Button Text</a>
  <a href='/' class="button small midnight">Button Text</a>
  <a href='/' class="button small grey">Button Text</a>
  <a href='/' class="button small asbestos">Button Text</a>
  <a href='/' class="button small dark">Button Text</a>

  /*----Medium Buttons-----*/
  <a href='/' class="button medium red">Button Text</a>
  <a href='/' class="button medium pink">Button Text</a>
  <a href='/' class="button medium orange">Button Text</a>
  <a href='/' class="button medium yellow">Button Text</a>
  <a href='/' class="button medium green">Button Text</a>
  <a href='/' class="button medium turquoise">Button Text</a>
  <a href='/' class="button medium blue">Button Text</a>
  <a href='/' class="button medium purple">Button Text</a>
  <a href='/' class="button medium midnight">Button Text</a>
  <a href='/' class="button medium grey">Button Text</a>
  <a href='/' class="button medium asbestos">Button Text</a>
  <a href='/' class="button medium dark">Button Text</a>
  
  /*----Large Buttons-----*/
  <a href='/' class="button large red">Button Text</a>
  <a href='/' class="button large pink">Button Text</a>
  <a href='/' class="button large orange">Button Text</a>
  <a href='/' class="button large yellow">Button Text</a>
  <a href='/' class="button large green">Button Text</a>
  <a href='/' class="button large turquoise">Button Text</a>
  <a href='/' class="button large blue">Button Text</a>
  <a href='/' class="button large purple">Button Text</a>
  <a href='/' class="button large midnight">Button Text</a>
  <a href='/' class="button large grey">Button Text</a>
  <a href='/' class="button large asbestos">Button Text</a>
  <a href='/' class="button large dark">Button Text</a>
Alert Boxs 
  /*----success message----*/
  <div class="alert-message success">
  <i class="fa fa-check-circle"></i>
  success message : You successfully read this important message.
  </div>
  
  /*----Alert message-----*/
  <div class="alert-message alert">
  <i class="fa fa-info-circle"></i>
  Alert message : This alert needs your attention.
  </div>
  
  /*----Warning message-----*/
  <div class="alert-message warning">
  <i class="fa fa-exclamation-triangle"></i>
  Warning message : Warning! Best check yo self.
  </div>
  
  /*----Error message-----*/
  <div class="alert-message error">
  <i class="fa fa-exclamation-circle"></i>
  Error message : Oh snap! Change a few things up.
  </div>
Code Boxs 
		
  <pre data-codetype="HTML">You HTML Code Here</pre>

  <pre data-codetype="CSS">You CSS Code Here</pre>

  <pre data-codetype="JavaScript">You JavaScript Code Here</pre>

  <pre data-codetype="JQuery">You JQuery Code Here</pre>
Contact Form 
		
  <div class="contact-form"></div>
Two Columuns 
		
  <div class="two-column">
    <div class="column">
	Your Text Here
    <div class="column">
	Your Text Here
  </div>
Tabs Horizontal 
		
  <div class='post-tabs'>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
  </div>
Tabs Vertical 
		
  <div class='post-tabs side'>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
    <div data-tab="Your Title Here">Your Text Here</div>
  </div>

Full Installation

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