Wellcome TeraPost

Thanks for Buying

First of all, thank you for buying this theme. To make your experience pleasant, we’ve added as much info as needed in this documentation. If you’re stuck with anything, please refer to support forums.

Change Log:

Current Version 1.5

Version:1.5
Fixed
Disable Autoplay
Show Iframe
Post Featured Content

Version 1.4
Added:
Review Shordcode
Table CSS
Increase Page Speed 

Fixed:
Schema Structure
Recent Widget by Label
Translator

Version 1.3
Added:
WhatApps Share (Support Android and IOS)
Option to change twitter share author
Option to change "Share","Like","Tweet" text
Option to hide Main Recent Post

Fixed:
Google Plus Comments
Improve Speed

Version: 1.2.2
Fixed:
Translator (Now work with Follow By Email Widget)

Added:
More Options (Change Related Post Title,Text Inside Search Box, Change Facebook Apps ID and Language)
Improve Page Speed 

Version: 1.2.1
Fixed:
Email Button
Previous Button Error

Added:
Option to change: More, Next, Previous text
Textarea Method (inside Textarea method Folder)
					
Version: 1.2.0
Fixed :
Translator
Optimize SEO
Layout (because blogger update main CSS)
Author profile

Change:
Theme Options (more simple)
Facebook like box to facebook page plugin

Added 
Tabs Recent Widget
Support Google CSE
Support Change Summary Length
More Shortcode (youtube,daiymotion,soundcloud,maps,carusel,slider and etc.)
Support auto Post Type
Sharrre plugin (Share button will count)
highlightjs (Code box will hightlight)

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

a. Upload File

  1. Open your purchase folder, you will see a folder with name ***-template-xml. Open it, and find the newest version with name ***-version-X-X.xml.theme files
  2. Open the XML file with a text editor (Notepad or something like that). Then select all text and copy (Ctrl+A, Ctrl+C in Window).Select code
  3. Return to your blog dashboard, access your Template menu, click Edit HTMLTemplate editor
  4. In Editor HTML window, select all old code and paste the new code that you copied from the release file into code field. Then, click Save template.Paste code

b. Update Theme (Version 1.2 above)

If you are already use Version 1.2.0 and want to update it to version 1.2.x or 1.x.x. Just Follow This step

  1. Access your blog dashboard > Template
  2. Click Backup/Restore button (Top Right)
  3. Click Choose File button. Find where the “SNews-version-x.x.x.xml” file location
  4. Then Click Upload

blogsetting

c. Blog Setting (Activate Blog Post Type)

This step to make blog post type enable.

  1. Access your blog dashboard > Settings > Other. In Site feedAllow Blog Feed choose Full.
  2. then Enable Title Links and Enclosure Links change to Yesblogsetting
  3. Then Click Save settings.

d. Upload Blog Data (optional)

This step is only for testing blog (if you want test this template before apply to your main blog). Don’t apply this step to your main blog.

  1. Access your blog dashboard > Settings > Other. In Blog tools, click Import Blog.data blog1
  2. Now, target to your blog data in your purchase folder / ***-demo-blog-data / blog-mm-dd-yyyy.xmldata blog1
  3. After upload, input captcha, check Automatically publish all imported posts and click Import Blog.

e. Setting Meta Tag

  1. On Blogger Dashbord Click Template
  2. Click Edit HTML
  3. Scroll down and Find this Code :
    <meta content='YOUR KEYWORDS HERE' name='keywords'/>
    <!-- Metadata Facebook -->
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta content='100002549773049' property='fb:admins'/>
    <!-- Metadata Twitter -->
    <meta name='twitter:card' value='summary'/>
    <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
    <meta content='@publisher_handle' name='twitter:site'/>
    <meta content='@author_handle' name='twitter:creator'/>
  4. Change YOUR KEYWORDS HERE with yours website keywords. Note: meta tag keywords no more use to improve the SEO. because now meta tag keywords just support for bing search engine.
  5. Change 100002549773049 with yours Facebook Admin ID
  6. Change @publisher_handle with yours twitter ID/Website twitter ID and change @author_handle with yours twitter ID too.
    Note: Before your cards show on Twitter, you must first have your domain approved. Fortunately, it’s a super-easy process. After you implement your cards, simply enter your sample URL into the validation tool. After checking your markup, select the “Submit for Approval” button. Go Here : https://dev.twitter.com/docs/cards/validation/validator for testing and approval

f. Optimize SEO

Activate Custom Description Each Post

  1. On Dashbord Click Settings
  2. Choose Search preferences
  3. on Meta Tags Description click Edit and Fill yours Website Descriptions
  4. Now you can see Custom Meta tags Area on Post Editor sidebar

Remove Quick Edit widget

This to remove //img1.blogblog.com/img/icon18_wrench_allbkg.png

  1. On Dashbord Click Template
  2. Click Edit HTML
  3. then click HTML Editor window and Press Ctrl+F
  4. Now Find and Remove All this code
    <b:include name='quickedit'/>
  5. After Remove all thats code. Then Click Save template

Add Title and Alt on Image

When added Image or Picture in yours blog post. You must add title and alt to each Image

Use Shortcode to load embedded

If you want load Iframe element. Ex: Youtube Video, Dailymotion, Soundcloud or Maps. Use Shortcode to load it. because Iframe not good for improve website SEO

Header Logo

  1. Access your blog Layout > click Edit link on Header widgetheader widget
  2. In Configure Header window, input you Blog Title and Blog Description. If you want to upload your image logo, make sure checked Instead of title and description, then click Choose File and locate your logo file. And click Save button to finishheader widget

Top Social Media Icons

social header

  1. First Go to Dashboard > Layout > Edit Social Link > Configure Link List
  2. On “New Site Name” field add your social name : facebook, twitter, rss, dribbble, google, pinterest, linkedin, youtube, vimeo, skype, deviantart, flickr, stumbleupon, tumblr, delicious, digg, lastfm, wordpress, instagram, apple, dropbox, behance, reddit.
  3. And on “New Site URL” field add your social url adress.
  4. Then click Save.

social link

Settings Your Blog Posts

In Dashboard > Layout > Blog Posts, Click on “Edit” and applicate all settings below :

layout-blogpost

blogpost

Home Layout

post by label

  1. First Go to Dashboard > Layout > then Add new HTML Gadget in Magazine Widget Area (Top/Bottom)Available Boxs Type : slider1, slider2, fbig1 , fbig2 , fbig2 animated, column1 , column2 , column1 animated, column2 animated, carousel1 , carousel2, video , gallery1, gallery2, gallery3, list, timeline
  2. Add code like this
    [Your Label Here/recent/random][Box Type][Your Color]

    Exemple (Show Post from “Mucic” label with fbig1 Box Type and Widget Title Color #e74c3c)

    [Music][fbig1][#e74c3c]

    Exemple (Show Recent Post with column1 Box Type and Widget Title Color #1abc9c)

    [recent][column1][#1abc9c]

    Exemple (Show Random Post with column2 Box Type and Widget Title Color #8e44ad)

    [random][column2][#8e44ad]

    Exemple (Show Post From Multiple Labels “Music,Technology,Fashion” with carousel Box Type and Widget Title Color #f39c12)

    [Music,Technology,Fashion][carousel1][#f39c12]

    Note You can go in this Website to get HEX color code

    Note Maximun Labels Support for Multiple Labels is 4

    Note Random and Multiple Labels need more time to load

    Note Don’t use Multiple Labels on fbig1,fbig2 and column2

Breaking News

breaking news

  1. First Go to Dashboard > Layout > then click Edit in Breaking News Widget
  2. Add code like this
    [Your Label Here/recent/random][newsticker]

    Exemple (Show Breaking News from “Trends” label)

    [Trends][newsticker]

    Exemple (Show Breaking News from Recent Post)

    [recent][newsticker]

    Exemple (Show Breaking News from Random Post)

    [random][newsticker]

    Exemple (Show Breaking News from Multiple Labels “Music,Technology,Fashion”)

    [Music,Technology,Fashion][newsticker]

    Note Maximun Labels Support for Multiple Labels is 4

    Note Random and Multiple Labels need more time to load

Top Featured

featured

  1. First Go to Dashboard > Layout > then click Edit in Top Featured WidgetAvailable Featured Type : featured1, featured2, featured3, featured4, featured5
  2. Add code like this
    [Your Labels Here][featured1]

    Exemple (Show Featured Post from Multiple Labels “Music,Technology,Fashion,Trends”

    [Music,Technology,Fashion,Trends][featured1]

    Exemple (Show Featured Post from Recent Post)

    [recent][featured2]

    Exemple (Show Featured Post from Random Post)

    [random][featured2]

    Note Maximun Labels Support for Multiple Labels is 4

    Note Random and Multiple Labels need more time to load

Social Counter

social counter

  1. First Go to Dashboard > Layout > then click Edit in Social Counter Widget
  2. On “New Site Name” fild1 field add Social Name (Social Counter)
  3. And on “New Site URL” fild2 field add your Social Url.

Exemple : Note Only this Socials Supported !

facebook [1.1k]
twitter [2k]
google [250]
rss [590]
youtube [3.5k]
dribbble [8.2m]
instagram [732]
pinterest [210]
linkedin [2.56k]
vimeo [300]
skype [568]
deviantart [6.4k]
flickr [900]
stumbleupon [561]
tumblr [5.4m]
delicious [86]
digg [789]
lastfm [652]
wordpress [1.5k]
apple [60]
dropbox [980]
behance [366]
reddit [10]

Recent Posts

recent post

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
  2. Add code like this
    recentpost

Random Posts

random post

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
  2. Add code like this
    randompost

Featured Posts

featured post

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
  2. Add code like this
    featuredpost/Your Labels Here

    exemple

    featuredpost/Music,Technology,Fashion

Note Recommended just 3 Labels name

Recent Post Tabs

featured post

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
  2. Add code like this
    tabsrecent/Your Labels Here

    exemple

    tabsrecent/Fashion,Foods,Tech

Recent Comments

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
  2. Add code like this
    recentcomment

Recent Comments Slide

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Content bottom Area
  2. Add code like this
    recentcommentslide

Disqus Recent Comments

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
  2. Add code like this
    disquscomment

Notemake sure yours disqus username already added in Disqus Shortname widget

Categorys

First Go to Dashboard > Layout > then add New Gadget > Labels > select List Option, and you can select custom labels you want to show as categorys.

Tags

First Go to Dashboard > Layout > then add New Gadget > Labels > select Cloud Option, and you can select custom labels you want to show as Tags.

Popular Posts

Recommend options :
First Go to Dashboard > Layout > then add New Gadget > Popular Posts > select Summary, Thumbnails and Number of Posts only 5

Note Popular Post just show image from blogspot or picasa. Not support third party image host

Facebook Like Box

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
  2. Add code like this
    FBbox/Your Page Facebook Url
    /*---------Exemple---------*/
    FBbox/https://www.facebook.com/envato

Flickr Widget

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
  2. Add code like this
    flickrbadge

Notemake sure yours Flickr User ID already added in Flickr User ID widget. Exemple : 38150381@N04

help-flickr-id

post types

Text Style

This default post type style.

Quote Style

in Post setting click Links then on Enclosure Links. add yours website url or other url in Add link (1). then add quote in Add mime type (2)

Or if you have blockquote in first line on your post/article

Music Style

in Post setting click Links then on Enclosure Links. add yours website url or other url in Add link (1). then add music in Add mime type (2)

Note if you have link from soundcloud in yours post this page type automatically work on post by label widget and main Recent Post

Video Style

in Post setting click Links then on Enclosure Links. add yours website url or other url in Add link (1). then add video in Add mime type (2)

Note if you have video from youtube in yours post this page type automatically work

Note if you have video from youtube, vimeo and dailymotion in yours post this page type automatically work on post by label widget and main Recent Post

Gallery Style

in Post setting click Links then on Enclosure Links. add yours website url or other url in Add link (1). then add gallery in Add mime type (2)

Note if you use “gallery Shortcode” in yours post this page type automatically work on post by label widget and main Recent Post

Post Layouts

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

 /*----Full Width Post-----*/	
[full-post]
/*----Left Main Post-----*/ 
[left-post]
/*----Right Main Post-----*/  
[right-post]
/*----Post with Left Side Only-----*/ 
[left-side]
/*----Post with Right Side Only-----*/  
[right-side]

post types

Boxed Style

Default Style is Boxed “y” if you want switch to Full Width Style simply replace “y” to “n”.

Loading Effect

Default is deactive “n” if you want to active this Image Animation simply replace “n” to “y”.

Change Default Setting

if you want change default setting like: sticky sidebar effect, Slider Speed Page Navigation, maximun item each Widget by Labels and etc. You can follow this:

Go to Layout > Theme Options > in Change Default Setting click on edit.

On “New Site Name” fild1 field add the property. ex: sumlength

And on “New Site URL” fild2 field add the value.

Property Description Default
sumlength this to Summary Length in Main Recent Post Widget 100
fixmenu this to change menu effect. Support value : n to disable and y to enable it again y
stickymenu this to change menu effect. Support value : n to disable and y to enable it again y
sliderspeed to change default slide speed just fill with number like 5000. Note this in milisecond 5000
navipostpage if you want to change default page navigation post per page just fill with number like 10 or 8. 20
adminblog Fill this with yours admin name to hide admin comment on “recentcomment” widget. Ex: “MARIthemes” Recent comment will hide all MARIthemes comments
hideauthor if you want to hide Author name on Widget by Labels widget. Support value y or n n
cseid If you want to add Google Custom Search Engine (Google CSE) effect to menu search. Just add yours Google CSE code like this:

013487895970210376374:11mzjaatn8s
mtext If you want to change More text More
ptext if you want to change Previous text Previous
ntext If you want to change Next text Next
reltext If you want to change “Related Post” text in Related Post Widget Related Post
rectext If you want to change “Recent Post” text in Related Post Widget Recent Post
srctext If you want to change text inside the Menu Search box Type and hit enter to search…
tweettext If you want to change text “Tweet” text in Social button Tweet
liketext If you want to change text “Like” text in Social button Like
sharetext If you want to change text “Share” text in Social button Share
twitterauthor If you want to change twitter author when click Tweet button MARIthemes
hmainpost If you want to hide Main “Recent Post” in Home Page. Support value y or n n
fbappsid this to change Facebook Apps ID 218168578325095
fblang this to change Facebook Language en_US
hreview this to hide all Review value in Recent post widget. Support value y or n n
relstyle this to change Related Post Style. Support value “carousel”, “simple” and “fbig” carousel
recentpost this to change max item show in recentpost widget 4
randompost this to change max item show in randompost widget. 4
featuredpost this to change max item show in featuredpost widget. 4
recentcomment this to change max item show in recentcomment widget. 4
fbig1 this to change max item show in fbig1 widget. 5
fbig2 this to change max item show in fbig2 widget. 5
fbig2animated this to change max item show in fbig2animated widget. 8
gallery1 this to change max item show in gallery1 widget. 6
gallery2 this to change max item show in gallery2 widget. 5
gallery3 this to change max item show in gallery3 widget. 3
column1 this to change max item show in column1 widget. 5
column2 this to change max item show in column2 widget. 5
column1animated this to change max item show in column1animated widget. 9
column2animated this to change max item show in column2animated widget. 8
newsticker this to change max item show in newsticker widget. 9
slider this to change max item show in slider widget. this for all slider. (slider1 and slider2) 5
carousel1 this to change max item show in carousel1 widget 9
carousel2 this to change max item show in carousel2 widget. 9
related this to change max item show in related widget. 9
video this to change max item show in video widget. 6
featured1 this to change max item show in featured1 widget. 8
featured2 this to change max item show in featured2 widget. 10
featured3 this to change max item show in featured3 widget. 10
featured4 this to change max item show in featured4 widget. 5
featured5 this to change max item show in featured5 widget. 7
list this to change max item show in list widget. 6
timeline this to change max item show in timeline widget. 5
tabsrecent this to change max item show in tabsrecent widget. 5
disquscomment this to change max item show in disquscomment widget. 4
flickrbadge this to change max item show in flickrbadge widget. 8

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 :

  1. Go to your dashboard, and click on Layout
  2. Click edit in Ads Inside Post widget and add your ads code inside the box content
  3. Now just inside your post between text add [ads-post]

Comments system

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

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

shortname

shortname2

Translation

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 Options > 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

Background Image

backimage

if you want add background image in Top Featured, Middle Widget Area Top and Bottom just click Edit and choose yours Image from yours computer

if you want disable it just add “n” in Caption

Author Profile

authorprofile2

  1. First Go to Dashboard > Layout > then add New HTML Gadget in Author Profile Area
  2. Add code like this
    {picture#YOUR_PROFILE_PICTURE_URL}
    
    YOUR_PROFILE_DESCRIPTION 
    
    {facebook#YOUR_SOCIAL_PROFILE_URL}
    {twitter#YOUR_SOCIAL_PROFILE_URL}
    {google#YOUR_SOCIAL_PROFILE_URL}
    {pinterest#YOUR_SOCIAL_PROFILE_URL}
    {youtube#YOUR_SOCIAL_PROFILE_URL}
    {instagram#YOUR_SOCIAL_PROFILE_URL}

    authorprofile2

    Note This Case sensitive you must write profile Name in HTML widget title same with yours blogger profile name

    Note If you have multiple author in your blog you must need another HTML widget

Drop Caps

Add this code below when create new post. and you must be on HTML mode

<span class="first-character">Your First Character here</span>

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

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.

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>

Note Make sure you are in HTML mode when create new post

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>

Note Make sure you are in HTML mode when create new post

Or you can use this Short code:

/*----Alert message-----*/
[alert title="Alert message" icon="info-circle"]
This alert needs your attention
[/alert]

/*----Success message-----*/
[success title="Success message" icon="check-circle"]
You successfully read this important message.
[/success]

/*----Warning message-----*/
[warning title="Warning message" icon="exclamation-triangle"]
Warning! Best check yo self.
[/warning]

/*----Update message-----*/
[update title="Update message" icon="info-circle"]
You successfully to update your content.
[/update]

/*----Info message-----*/
[info title="Info message" icon="info-circle"]
This a simple info for you.
[/info]

/*----Error message-----*/
[error title="Error message" icon="exclamation-circle"]
Oh snap! Change a few things up
[/error]

Note: You can see Icon name from fontawesome.

Code Boxs

[code type="HTML"]Yours HTML Code Here[/code]

[code type="CSS"]You CSS Code Here[/code]

[code type="JavaScript"]You JavaScript Code Here[/code]

[code type="JQuery"]You JQuery Code Here[/code]

Contact Form

[contact/]
/*----or-----*/
[contact][/contact]

Two Columuns

[2column]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
[/2column]

Three Columuns

[3column]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
[/3column]

Fours Columuns

[4column]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
  [content]Your Text Here[/content]
[/4column]

Tabs Horizontal

[tab]
  [content title="Your Title Here"]Your Text Here[/content]
  [content title="Your Title Here"]Your Text Here[/content]
  [content title="Your Title Here"]Your Text Here[/content]
[/tab]

If you want to add some icon you can add icon property like this

[tab]
  [content icon="facebook" title="Your Title Here"]Your Text Here[/content]
  [content icon="pinterest" title="Your Title Here"]Your Text Here[/content]
  [content icon="twitter" title="Your Title Here"]Your Text Here[/content]
[/tab]

Note Yo can get icon name here fontawesome

Tabs Vertical

[vtab]
  [content title="Your Title Here"]Your Text Here[/content]
  [content title="Your Title Here"]Your Text Here[/content]
  [content title="Your Title Here"]Your Text Here[/content]
[/vtab]

If you want to add some icon you can add icon property like this

[vtab]
  [content icon="facebook" title="Your Title Here"]Your Text Here[/content]
  [content icon="pinterest" title="Your Title Here"]Your Text Here[/content]
  [content icon="twitter" title="Your Title Here"]Your Text Here[/content]
[/vtab]

Note Yo can get icon name here fontawesome

Accordion

To create a accordion just create code like below.

[accordion]
  [item title="Accordion 1"]Your Text Here[/item]
  [item title="Accordion 2"]Your Text Here[/item]
  [item title="Accordion 3"]Your Text Here[/item]
  [item title="Accordion 4"]Your Text Here[/item]
[/accordion]

If you want to add some icon you can add icon property like this

[accordion]
  [item icon="facebook" title="Accordion 1"]Your Text Here[/item]
  [item icon="twitter" title="Accordion 2"]Your Text Here[/item]
  [item icon="pinterest" title="Accordion 3"]Your Text Here[/item]
  [item icon="diamond" title="Accordion 4"]Your Text Here[/item]
[/accordion]

Note Yo can get icon name here fontawesome

Image

to create image u can use this shortcode method

[img src="Image_URL_1"/]
/*------- or -------*/
[img src="Image_URL_1"][/img]

/*------- complete code ------*/
[img url="URL_link" width="Image_width" height="Image_height" rel="Image_rel" src="Image_URL_1"/]

Gallery Image

<div class="glpost">
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
  <img alt="IMAGE_TITLE" src="IMAGE_URL"/>
</div>

Or if you want image with some link you can create like this

<div class="glpost">
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
  <a href="IMAGE_URL"><img alt="IMAGE_TITLE" src="SMALL_IMAGE_URL"/></a>
</div>

Note Make sure you are in HTML mode when create new post

Or you can use this Short code:

[gallery]
  [img src="Image_URL_1"][/img]
  [img src="Image_URL_2"][/img]
  [img src="Image_URL_3"][/img]
  [img src="Image_URL_4"][/img]
  [img src="Image_URL_5"][/img]
  [img src="Image_URL_6"][/img]	
[/gallery]

First Big Gallery

To create First Big Gallery just create code like below..

[bgallery]
  [img src="Image_URL_1"][/img]
  [img src="Image_URL_2"][/img]
  [img src="Image_URL_3"][/img]
  [img src="Image_URL_4"][/img]
  [img src="Image_URL_5"][/img]
[/bgallery]>

Youtube

To create youtube player just create code like below.

[youtube src="youtube_video_ID"/]
/*------- or -------*/
[youtube src="youtube_video_ID"][/youtube]

You can add more property like: width, height, info, control, playlist, and related.

Property Description Default
src Youtube Video ID. http://www.youtube.com/embed/VIDEO_ID
width Player width 100%
height Player Height 400
info this to change max item show in recentcomment widget. 5
control This parameter indicates whether the video player controls are displayed. For IFrame embeds that load a Flash player, it also defines when the controls display in the player as well as when the player will load. Supported values are:

  • 0 – Player controls do not display in the player. For IFrame embeds, the Flash player loads immediately.
  • 1 (default) – Player controls display in the player. For IFrame embeds, the controls display immediately and the Flash player also loads immediately.
  • 2 – Player controls display in the player. For IFrame embeds, the controls display and the Flash player loads after the user initiates the video playback.
1
playlist This parameter specifies a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO_ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter.
related This parameter indicates whether the player should show related videos when playback of the initial video ends. Supported values are 0 and 1. 0

Dailymotion

To create dailymotion player just create code like below..

[dailymotion src="Dailymotion_video_ID"/]
/*------- or -------*/
[dailymotion src="Dailymotion_video_ID"][/dailymotion]

You can add more property like: width, height, highlight, background, color, info, and logo.

Property Description Default
src Dailymotion Video ID. http://www.dailymotion.com/embed/video/VIDEO_ID?PARAMS
width Player width 100%
height Player Height 270
highlight HTML color of the controls elements’ highlights. 29b7ff
background HTML color of the background of controls elements 000000
color HTML color of the text. ffffff
info Shows videos information (title/author) on the start screen. Supported values are 0 and 1. 1
logo Allows to hide or show the Dailymotion logo. Supported values are 0 and 1. 1

Soundcloud

To create soundcloud player just create code like below..

[soundcloud src="Soundcloud_ID"/]
/*------- or -------*/
[soundcloud src="Soundcloud_ID"][/soundcloud]

You can add more property like: width, height, auto, color, visual, comments, user, and playlist

Property Description Default
src Soundcloud ID.
width Player width 100%
height Player Height 130
auto Whether to start playing the widget after it’s loaded. Supported values are false and true. false
color HTML color of the background of controls elements ff5500
visual To make it show player show visual. Supported values are false and true false
comments Show/hide comments. Supported values are false and true false
user Show/hide the uploader name. Supported values are false and true. true
playlist If you want show it playlist or not. isert playlist ID

Maps

To create google maps just create code like below.

[map src="Google_Maps_ID"/]
/*------- or -------*/
[map src="Google_Maps_ID"][/map]
/*------- complete code -------*/
[map width="Map_Width" height="Map_Height" src="Google_Maps_ID"/]

Exemple:

[map src="Google_Maps_ID"/]

To get Google Maps ID you can use this method

  1. Went Search Location in Google Maps. https://www.google.com/maps
  2. Click Gear Icon (bottom right) and Choose Share or embed map
  3. and click Embed map and Copy code after the : https://www.google.com/maps/embed?pb= like below:
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31733.083318326!2d106.82385317410909!3d-6.179531026100637!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf0fdad786a2!2sJakarta%2C+Special+Capital+Region+of+Jakarta!5e0!3m2!1sen!2sid!4v1433961860989" width="600" height="450" frameborder="0" style="border:0"></iframe>
  4. Shortcode will look like this:
    [map src="!1m18!1m12!1m3!1d31733.083318326!2d106.82385317410909!3d-6.179531026100637!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f3e945e34b9d%3A0x5371bf0fdad786a2!2sJakarta%2C+Special+Capital+Region+of+Jakarta!5e0!3m2!1sen!2sid!4v1433961860989"/]

Other Media

To create other media load using iframe just add code like below.

[media]Your Link Here[/media]
/*------- complete code -------*/
[media width="Media_Width" height="Media_Height"]Your Link Here[/media]

Tooltip

To create Tooltip just create code like below.

[tooltip url="Tooltip_URL" title="Tooltip_title"]Text/Element went mouse hover or enter the tooltip[/tooltip]

Exemple use:

In a few minutes there was, so far as the soldier could see, not a living thing left upon the common, and every bush and tree upon it that was not already a blackened skeleton was burning[tooltip url="http://themeforest.com/user/MARIthenes" title="MARIthenes"]The second monster followed the first, and at that the artilleryman began to crawl very cautiously across the hot heather ash towards Horsell.[/tooltip]The hussars had been on the road beyond the curvature of the ground, and he saw nothing of them. He heard the Martians rattle for a time and then become still. The giant saved Woking station and its cluster of houses until the last; then in a moment the Heat-Ray was brought to bear, and the town became a heap of fiery ruins. 

Slider

To create a Slide make code like below.

[slide]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
[/slide]

Carousel

To create a carousel make code like below.

[carousel]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
  [item url="Image_Link_URL" src="Image_URL" title="Image_title"]Content Description[/item]
[/carousel]

Note If you just use Shortcode in yours article, Populars Widget will not showing any of Image.

Table

To create a Table make code like below.

<table class='snews-table'>
  <thead>
    <tr>
      <th>Label 1</th>
      <th>Label 2</th>
      <th>Label 3</th>
      <th>Label 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Label 1">Description 1</td>
      <td data-label="Label 2">Description 2</td>
      <td data-label="Label 3">Description 3</td>
      <td data-label="Label 4">Description 4</td>
    </tr>
    <tr>
      <td data-label="Label 1">Description 1</td>
      <td data-label="Label 2">Description 2</td>
      <td data-label="Label 3">Description 3</td>
      <td data-label="Label 4">Description 4</td>
    </tr>
  </tbody>
</table>

Note This HTML tag. yours Post editor must be in HTML

Review

To create a Review make code like below.

[review]
  [content title="Description Title" label="Overall Score"]Your Summary Description Here[/content]
  [item value="Value Here"]Description Here[/item]
  [item value="Value Here"]Description Here[/item]
  [item value="Value Here"]Description Here[/item]
  [item value="Value Here"]Description Here[/item]
  [item value="Value Here"]Description Here[/item]
[/review]

Exemple:

[review]
  [content title="Summary" label="Overall Score"]My fellow Earthicans, as I have explained in my book Earth in the Balance, and the much more popular Harry Potter and the Balance of Earth, we need to defend our planet against pollution. Also dark wizards but I know you in the future back in our hands.[/content]
  [item value="7"]Gameplay[/item]
  [item value="8"]Graphics[/item]
  [item value="10"]Sound[/item]
  [item value="5"]Ease of play[/item]
  [item value="9"]Hardware[/item]
[/review]

Note If you just use Shortcode in yours article, Populars Widget will not showing any of Image.

Post Pagination

To create a carousel make code like below.

[page]
  [item]Content Description[/item]
  [item]Content Description[/item]
  [item]Content Description[/item]
  [item]Content Description[/item]
  [item]Content Description[/item]
[/page]

Note If you just use Shortcode in yours article, Populars Widget will not showing any of Image.

Combine

You can combine each Shortcode, like use Tabs, Accordion, youtube and etc, in one Exemple

[tab]
  [content title="Soundcloud"]
    [soundcloud height="400" visual="true" src="Soundcloud_ID"][/soundcloud]
  [/content]
  [content title="Youtube"]
    [youtube src="Video_ID"][/youtube]
  [/content]
  [content title="Maps"]
    [map src="Google_Maps_ID"][/map]
  [/content]
  [content title="Accordion"]
    [accordion]
      [item title="Accordion 1"]Your Text Here[/item]
      [item title="Accordion 2"]Your Text Here[/item]
      [item title="Accordion 3"]Your Text Here[/item]
    [/accordion]
  [/content]
[/tab]

Note

  1. Populars Post Widget Not Support Third Party Image and Shortcode
  2. Don’t Use Shortcode in first line on yours article. Because Summary length on Populars Post will cut. or maybe not display
  3. Don’t Use just shortcode in yours article. Because Image on Populars Post widget will not show. And maybe if you share yours blog link/article link, image thumbnail wil not show.
  4. You can use Shortcodes not just in Post Editor but you can use it to in Comment post and HTML Widget

Change Background Image

Warning Blogger Customize will work if Blogger Mobile Template Enabled before upload this Theme

It’s Easy to customize this themes. Just Go to Blogger Dashbord and Click Template then Click Customize and Click Background

change-backround

Click Background Image and choose image what you want or upload from yours computer

Adjust widths

It’s Easy to customize this themes width. Just Go to Blogger Dashbord and Click Template then Click Customize and Click Adjust widths

advanced

Note if you want to make widget content width 350px you must add 25px. you must fill 375

Advanced Editor

It’s Easy to customize this themes. Just Go to Blogger Dashbord and Click Template then Click Customize and Click Advanced

advanced

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

Other Resources Used