Home Responsive Magazine Ovation is the most efficient blogger theme for your magazine

Ovation is the most efficient blogger theme for your magazine

di November 05, 2017 Responsive Magazine,

https://app.box.com/s/yofd6hkspbrn63l13j8j18088zj8k2l9

https://app.box.com/s/irou5a4vx5b0k86yogw7z03v53riwzng

Demo

Current Version: 1.0.0

100% Responsive (Desktop,Tablet,Smartphone)

15+ Recent Post by Labels Widget

Third Party Image Support

Support 4 Comments System (Blogger,Facebook,Disqus,Spot.IM)

Recent Post Widget

Random Post Widget

Featured Post Widget

Recent Comment Widget

Disqus Recent Comment Widget

Flickr Badge Widget

News Ticker Widget

Related Post Widget

Recommended Widget

Optimize SEO

Dropdown Menu

Tabel CSS

Review Shortcode

Post Pagination

Ads ready (Top Ads, Side Ads, and Post Ads)

Top Social Icon

Social Counter Widget

Author Profile

Google CSE

Page Navigation

ShortCodes

Compatible with major browsers (IE9+,Mozilla,Chrome,Safari)

Professional admin layout, help you easy work with blog layout

Support RTL

Custom Error 404 Page

Archive Page

Support Advance Editor: upload background images, change background color, key colors, fonts

Support Print CSS and allow visitors share articles email

Welcome to Ovation!
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.

    Created: 28/12/2015
    Modified: 28/12/2015
    Created By: MARIthemes
    Contact Support: MARIthemes Contact
    Version: 1.0.0

Change Log:

Version:1.0
Initial Release

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 .
a. Upload File

    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
    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
    Return to your blog dashboard, access your Template menu, click Edit HTML

    Template editor
    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.1 above)

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

    Access your blog dashboard > Template
    Click Backup/Restore button (Top Right)
    Click Choose File button. Find where the "Ovation-version-x.x.x.xml” file location
    Then Click Upload

blogsetting
c. Blog Setting (Activate Blog Post Type)

This step to make blog post type enable.

    Access your blog dashboard > Settings > Other. In Site feed - Allow Blog Feed choose Full.

    then Enable Title Links and Enclosure Links change to Yes

    blogsetting
    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.

    Access your blog dashboard > Settings > Other. In Blog tools, click Import Blog.

    data blog1
    Now, target to your blog data in your purchase folder / ***-demo-blog-data / blog-mm-dd-yyyy.xml

    data blog1
    After upload, input captcha, check Automatically publish all imported posts and click Import Blog.

e. Setting Meta Tag

    On Blogger Dashbord Click Template
    Click Edit HTML
    Scroll down and Find this Code :

    <meta content='YOUR KEYWORDS HERE' name='keywords'/>
    
    <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'/>
    
    <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'/>

    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.
    Change 100002549773049 with yours Facebook Admin ID
    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

    On Dashbord Click Settings
    Choose Search preferences
    on Meta Tags Description click Edit and Fill yours Website Descriptions

    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

    On Dashbord Click Template
    Click Edit HTML
    then click HTML Editor window and Press Ctrl+F
    Now Find and Remove All this code

    <b:include name='quickedit'/>

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

    Access your blog Layout > click Edit link on Header widget

    header widget
    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 finish

    header widget

Top Social Media Icons

social header

    First Go to Dashboard > Layout > Edit Social Link > Configure Link List
    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.
    And on "New Site URL" field add your social url adress.
    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
Menu Setup
Main Menu

top menu

    First Go to Dashboard > Layout > Edit Main Menu > Configure Page List
    Click "Add external link" field your menu title in "Page Title" like as this :

    Menu Title [Subtitle]

    And on "Web address (URL)" field add your url address.

Add Sub Menu Children

Now for add a Submenu Children simply Click "Add external link" field your menu title in "Page Title" like as this :

_Sub menu

Add Sub Sub Menu Children

Now for add a Subsubmenu Children simply Click "Add external link" field your menu title in "Page Title" like as this :

__Sub Sub menu

Add Icon in Menu

If you want add icon before yours Menu just add text like this <i class="fa fa-facebook"></i>. Note You can get icon name Here: Fontawesome
Ex: add facebook icon in Main Menu

<i class="fa fa-facebook"></i>Menu Title

_<i class="fa fa-twitter"></i>Sub Menu

__<i class="fa fa-pinterest"></i>Sub Sub Menu

Add Mega Menu
a. Mega Menu (block style "-links")

mega menu

Now for add a block style "-links" simply on "Page Title" field add this

-links

Note This will load content from "Mega Menu Links Contents"

mega menu

If you want show recent Post like "Fashion" just add code like this inside HTML widget.

gridpost/LabelName or recent or random

b. Mega Menu (Tabs style)

mega menu

Now for add a Mega Menu tabs style simply on "Page Title" field add this

-menutab/Label_1,Label_2,Label_3,Label_4

c. Mega Menu (Grid style)

mega menu

Now for add a Mega Menu grid style simply on "Page Title" field add this

-grid/LabelName or recent or random

d. Mega Menu (First Big Style)

mega menu

Now for add a Mega Menu First Big Style simply on "Page Title" field add this

-menubig/LabelName or recent or random

Note Subtitle just work in Main Menu Widget
Homepage Setup
Home Layout

    First Go to Dashboard > Layout > then Add new HTML Gadget in Magazine Widget Area (Top/Bottom)

    Available Boxs Type : slider1, slider2, fbig1 , fbig2 , hot1, hot2, blogpost, bigpost, halfpost ,fbig1 animated, fbig2 animated, column1 , column2 , column1 animated, column2 animated, carousel1 , carousel2, video , gallery1, gallery2, gallery3, list, timeline
    Add code like this

    [Your Label Here/recent/random][Box Type]

    or if you want load from other blog like this:

    [Your Label Here/recent/random][Box Type][Other Blog URL]

    Example (Show Post from "Music" label with fbig1 Box Type)

    [Music][fbig1]

    Example (Show Recent Post with column1 Box Type)

    [recent][column1]

    Example (Show Recent Post with blogpost Box Type and with pagenumber)

    [recent][blogpost pagenumber]

    Example (Show Random Post with column2 Box Type)

    [random][column2]

    Example (Show Post From Multiple Labels "Music,Technology,Fashion" with carousel Box Type)

    [Music,Technology,Fashion][carousel1]

    Example (Show Post from "Music" label with fbig1 Box Type from my "other-blog")

    [Music][fbig1][http://other-blog.com]

    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

Widgets
Breaking News

breaking news

    First Go to Dashboard > Layout > then click Edit in Breaking News Widget
    Add code like this

    [Your Label Here/recent/random][newsticker]

    Example (Show Breaking News from "Trends" label)

    [Trends][newsticker]

    Example (Show Breaking News from Recent Post)

    [recent][newsticker]

    Example (Show Breaking News from Random Post)

    [random][newsticker]

    Example (Show Breaking News from Multiple Labels "Music,Technology,Fashion")

    [Music,Technology,Fashion][newsticker]

    Example (Show Breaking News from Recent Post and Autoplay)

    [recent][newsticker autoplay]

    Note Maximun Labels Support for Multiple Labels is 4

    Note Random and Multiple Labels need more time to load

Top Featured

featured

    First Go to Dashboard > Layout > then click Edit in Top Featured Widget

    Available Featured Type : featured1, featured2, featured3, featured4, featured5, featured6
    If you want make Featured Full Width just add "full" text.
    Add code like this

    [Your Labels Here][featured1]

    Example (Show Featured Post from Multiple Labels "Music,Technology,Fashion,Trends"

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

    Example (Show Featured Post from Recent Post)

    [recent][featured2]

    Example (Show Featured Post from Random Post)

    [random][featured2]

    Example (Show Featured Post from Music, Style 6 and Full Width)

    [Music][featured6 full]

    Example (Show Featured Post from Recent Post and Slide autoplay)

    [recent][featured5 autoplay]

    Note Maximun Labels Support for Multiple Labels is 4

    Note Random and Multiple Labels need more time to load

Social Counter

social counter

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

Example : 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

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

    recentpost

Random Posts

random post

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

    randompost

Featured Posts

featured post

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

    featuredpost/Your Labels Here

    Example

    featuredpost/Music,Technology,Fashion

Note Recommended just 3 Labels name
Recent Post Tabs

featured post

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

    tabsrecent{style}/Your Labels Here

    Example

    tabsrecent{fbig1}/Fashion,Foods,Tech

Note tabsrecent style support like Home Layout Box types : fbig1 , fbig2 , hot1, hot2, blogpost, bigpost, halfpost ,column1 , column2 , video , gallery1, gallery2, gallery3, list, timeline
Recent Comments

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

    recentcomment

Recent Comments Slide

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

    recentcommentslide

Disqus Recent Comments

    First Go to Dashboard > Layout > then add New HTML Gadget in Sidebar or Footer Area
    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
Featured Posts Blogger Widget

First Go to Dashboard > Layout > then add New Gadget > Featured Posts > select Post you want to show
Facebook Like Box

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

    FBbox/Your Page Facebook Url
    /*---------Example---------*/
    FBbox/https://www.facebook.com/envato

Flickr Widget

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

    flickrbadge

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

help-flickr-id
Post Types

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
Theme Options
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".
Left Sidebar Width

This to change Left Sidebar Width. just add value like 160. If you want to reset it add value n
Right Sidebar Width

This to change Right Sidebar Width. just add value like 300. If you want to reset it add value n
Bottom Right Sidebar Width

This to change Bottom Right Sidebar Width. just add value like 336. If you want to reset it add value n
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     250
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
socialcounter     to change default Social Counter style. Support value : 0 to circle style and 1 to list style     0
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
poptext     If you want to change "Popular Post" text in Search Widget Post     Popular Post
recotext     If you want to change "Recommended Post" text in Recommended Post Widget     Recommended 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
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
ythumb     this to change Youtube thumbnail size. available value is: mqdefault,hqdefault,default     mqdefault
showexcerpt     If you want to show/hide excerpt text below the title. Support value: "n" to hide and "y" to show     n
topbreakline     If you to show breakline below post title. Support value y or n     n
bottombreakline     If you to show breakline in end post. Support value y or n     n
autoplay     If you want to make Related Post (carousel style autoplay). Support value y or n     n
topbreaklineload     This to change top breakline load data. Support value "related", "recent" and "random"     recent
bottombreaklineload     This to change bottom breakline load data. Support value "related", "recent" and "random"     recent
relstyle     this to change Related Post Style. available style is: carousel, simple, fbig     carousel
featpost     this to disable/enable auto featured image. If yours post start with Image, this will automaticaly become featured image. Support value "y" or "n"     n
recommended     this to disable/enable Recommended Post. Support value: "y" to enable and "n" to disable     n
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
featured6     this to change max item show in featured6 widget.     6
list     this to change max item show in list widget.     6
timeline     this to change max item show in timeline widget.     5
hot1     this to change max item show in hot1 widget.     4
hot2     this to change max item show in hot2 widget.     9
blogpost     this to change max item show in blogpost widget.     6
bigpost     this to change max item show in bigpost widget.     5
halfpost     this to change max item show in halfpost widget.     6
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
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

[spotim] for spotIM 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][facebook][blogger][spotim]
Disqus Shortname

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

shortname

shortname2
Spot.IM ID

open widget name "Spot.IM ID" inside it add your Spot.IM ID. you can find it in your spot.IM account

spotimid
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.
Example :

/*------ 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

Author Profile (Social Icon)

authorprofile2

    First Go to Dashboard > Layout > then add New HTML Gadget in Author Profile Area
    Add code like this

    {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

Create Ad
Enable Google Adsense Main Javascript

To Enable Adsense Main Javascript follow this step

    Go to your dashboard, and click on Layout
    Click edit in Google ads Main JS widget and add "y" text to enable it
    Then Click Save

How to Get Yours Adsense ID and Slot ID

    Login to yours google adsense: https://www.google.com/adsense
    Choose yours Ad units. on Adsense Dashboard Click My Ads the Click New Ad Unit

Google Adsense Below Post Title

To Enable Adsense Below Post Title follow this step

    Go to your dashboard, and click on Layout
    Click edit in Ads Below Title widget and add your ads code like this

    <ins class="adsbygoogle"
         data-ad-client="YOUR_ADSENSE_ID"
         data-ad-slot="YOURS_SLOT_ID"></ins>

    example Adsense with custom Width (300x250)

    <ins class="adsbygoogle"
         style="width:300px;height:250px"
         data-ad-client="YOUR_ADSENSE_ID"
         data-ad-slot="YOURS_SLOT_ID"></ins>

    Then Click Save

Note You can Hide Adsense Below Post Title in specific post by add shortcode like this: [hidetitleads]

Note to disable Adsense Below Post Title just insert "n" in Ads Below Title widget box
Google Adsense Inside the 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 Ads Inside Post widget and add your ads code like this

    <ins class="adsbygoogle"
         data-ad-client="YOUR_ADSENSE_ID"
         data-ad-slot="YOURS_SLOT_ID"></ins>

    example Adsense with custom Width (300x250)

    <ins class="adsbygoogle"
         style="width:300px;height:250px"
         data-ad-client="YOUR_ADSENSE_ID"
         data-ad-slot="YOURS_SLOT_ID"></ins>

    Now just inside your post between text add [ads-post]

Google Adsense End Post

To Enable Adsense End Post follow this step

    Go to your dashboard, and click on Layout
    Click edit in Ads End Post widget and add your ads code like this

    <ins class="adsbygoogle"
         data-ad-client="YOUR_ADSENSE_ID"
         data-ad-slot="YOURS_SLOT_ID"></ins>

    example Adsense with custom Width (300x250)

    <ins class="adsbygoogle"
         style="width:300px;height:250px"
         data-ad-client="YOUR_ADSENSE_ID"
         data-ad-slot="YOURS_SLOT_ID"></ins>

    Then Click Save

Note You can Hide Adsense End Post in specific post by add shortcode like this: [hidebottomads]

Note to disable Adsense End Post just insert "n" in Ads Below Title widget box
Google Adsense Sidebar or Footer

To add Adsense in sidebar or footer area follow this step

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

    <ins class="adsbygoogle"
         data-ad-client="YOUR_ADSENSE_ID"
         data-ad-slot="YOURS_SLOT_ID"></ins>

    example Adsense with custom Width (300x250)

    <ins class="adsbygoogle"
         style="width:300px;height:250px"
         data-ad-client="YOUR_ADSENSE_ID"
         data-ad-slot="YOURS_SLOT_ID"></ins>

Shortcodes
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.
Fancy Blockquote

To create a Fancy Blockquote just add shortcode like this.

/*----Fancy Quote-----*/
[fquote]
Your Fancy Blockquote Text here
[/fquote]

/*----Fancy Quote Float Left-----*/
[fquote style="left"]
Your Fancy Blockquote Text here
[/fquote]

/*----Fancy Quote Float Right-----*/
[fquote style="right"]
Your Fancy Blockquote Text here
[/fquote]

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
featured     If you want to make this show as featured content. Supported values are "0" not become featured and "1" will become featured content
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
featured     If you want to make this show as featured content. Supported values are "0" not become featured and "1" will become featured content
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
featured     If you want to make this show as featured content. Supported values are "0" not become featured and "1" will become featured content
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"/]

Example:

[map src="Google_Maps_ID"/]

To get Google Maps ID you can use this method

    Went Search Location in Google Maps. https://www.google.com/maps
    Click Gear Icon (bottom right) and Choose Share or embed map
    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>

    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]

Example 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.
Combine

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

[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

    Populars Post Widget Not Support Third Party Image and Shortcode
    Don't Use Shortcode in first line on yours article. Because Summary length on Populars Post will cut. or maybe not display
    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.
    You can use Shortcodes not just in Post Editor but you can use it to in Comment post and HTML Widget

Custom Title

To create a Custom Post title and Add Subtitle you can follow this step:

    Create new Heading with text same as yours Post title
    then strikethrough it
    To create Post subtitle create new Subheading then strikethrough it

Post Pagination

To create a Post Pagination you just need to add this code in post panel compose or HTML.

[next]

Exemple

Yours Paragraph Here
Yours Paragraph Here
Yours Paragraph Here
[next]
Yours Paragraph Here
Yours Paragraph Here
[next]
Yours Paragraph Here
Yours Paragraph Here
Yours Paragraph Here

Lock Content

To create a Lock Content you just need to add this code in post panel compose or HTML.

[lock]Text/Content you want to lock[/lock]

Exemple

Yours Paragraph Here
Yours Paragraph Here
Yours Paragraph Here
[lock]
Yours Paragraph Here
Yours Paragraph Here
Yours Paragraph Here
[/lock]
Yours Paragraph Here
Yours Paragraph Here

Advanced Customizations
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
Advanced Editor

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

advanced

Note If you want add other CSS code you can add it in Add CSS
RTL Support

Theme Support RTL/LTR so simply you can change Direction by change your Language from your Dashboard > Setting > Language and formatting > Language
Copyright & Credits
Other Resources Used

    OwlCarousel
    Simple Tab JQuery Plugin
    JQuery easing
    replacetext
    FontAwesome
    highlight
    sharrre
    jQuery Visible
    postscribe

Ainun Nursahid

ID Onesite
Alamat : Jalan Soekarno - Hatta, No.004, Desa. Air Mas, F. 6, Kec. Singingi, Kab. Kuantan Singingi, Pekanbaru - Riau, Kode Pos 29563
Handphone :
0812 6703 7779 - 0812 7555 5509
https://www.facebook.com/ainunesc
https://twitter.com/ainun_esc

Post A Comment:

0 comments:

Langganan: Posting Komentar (Atom)

Recent Popular Comments

Back To Top