https://app.box.com/s/0ch5a46f97pc4h168stm0yoknxxyojqd
https://app.box.com/s/7d08rqqf8ct373ugd3iwd029dsc2io0k
Demo
SNews Responsive Magazine Blogger Theme Features
Current Version: 1.6
100% Responsive (Desktop,Tablet,Smartphone)
10+ 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
Optimize SEO
Dropdown Menu
Tabel CSS
Recommended post [New]
Review Shortcode [New]
Post Pagination [New]
Ads ready
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
Support
First of all, Thanks so much for purchased our items :) We’re really appreciated it and hope you enjoy it! If you need support, all support will be conducted through this MARIthemes Support. We usually get back to you within 14hours. (except holiday seasons which might take longer)
Welcome to SNews!
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: 04/05/2015
Modified: 22/07/2015
Created By: MARIthemes
Contact Support: MARIthemes Contact
Version: 1.4.3
Change Log:
Current Version 1.4.3
Fixed
Review summary decimal limit
Version 1.4.2
Fixed
Widget not load because iframe.
Version 1.4.1
Fixed
Pinterest share not showing image
Version: 1.4
Added:
Review Shordcode
Post Pagination Shortcode
Table CSS
2 Style Related Post
Fixed
Schema Structure
Recent Widget by Label
Related Post if Local LTD and setup max if moretags
Contact Not work in Firefox
Change Disqus n Flickr Method
Version:1.3.1
Fixed
Recentcomment(slide)
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)
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.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
Access your blog dashboard > Template
Click Backup/Restore button (Top Right)
Click Choose File button. Find where the "SNews-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'/>
<!-- 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'/>
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 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.
Add Sub Menu Children
Now for add a Submenu Children simply on "New Site Name" field add this
_Sub menu
Add Sub Sub Menu Children
Now for add a Subsubmenu Children simply on "New Site Name" field add this
__Sub Sub menu
Add Mega Menu
a. Mega Menu (block style "-links")
mega menu
Now for add a block style "-links" simply on "New Site Name" 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 "New Site Name" field add this
-menutab/Label_1,Label_2,Label_3,Label_4
c. Mega Menu (Grip style)
mega menu
Now for add a Mega Menu grip style simply on "New Site Name" field add this
-grip/LabelName or recent or random
d. Mega Menu (First Big Style)
mega menu
Now for add a Mega Menu First Big Style simply on "New Site Name" field add this
-menubig/LabelName or recent or random
Complete Menu will look like this
complete menu
Note Subtitle just work in Main Menu Widget
Homepage Setup
Home Layout
post by label
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
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
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]
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
First Go to Dashboard > Layout > then click Edit in Top Featured Widget
Available Featured Type : featured1, featured2, featured3, featured4, featured5
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
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.
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
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
exemple
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/Your Labels Here
exemple
tabsrecent/Fashion,Foods,Tech
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
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
/*---------Exemple---------*/
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. Exemple : 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".
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 :
Go to your dashboard, and click on Layout
Click edit in Ads Inside Post widget and add your ads code inside the box content
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
First Go to Dashboard > Layout > then add New HTML Gadget in Author Profile Area
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
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.
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
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]
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
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
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
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
RTL Support
Theme Support RTL/LTR so simply you can change Direction by change your Language from your Dashboard > Setting > Language and formatting > Language
Post A Comment:
0 comments: