“Anartisis” Documentation by “fbtemplates”

“Anartisis - News & Magazine Blogger Theme”

Created: June 2018
By: fbtemplates

Thank you for buying my theme. If you have any questions, please ask them via contact form on my page. Thank you!

After latest Blogger Update, you may experience issues with the first image that appears in the blocks. Watch the video bellow that we prepared to avoid such problems. We hope that the problem will be temporary and will not accompany us forever.

Install Theme - top

1. Login to your Blogger Account.
2. Click on your blog name.
3. Remove from your Layout all old widgets.
4. Click on Theme.
5. Click on "Backup / Restore" button.
6. Browse your template file (XML file) and click open.
7. Finally click on "Upload" button.

NOTE 1: To avoid unnecessary widgets, open the xml file with a notepad. Copy HTML code and paste in your Blogger HTML Editor.
NOTE 2: OPTIONS PANEL is Optional. Don't do any change before installing all Layout of your Page!!!
NOTE 3: Keep your page allway as Public. Doesn't work on Private mode!!!
NOTE 4: Check your Site Feed. You need to keep this setting as Full!!!

Install Weather Location - top

1. Go to Weather Location Section.
2. Add a Gadget - HTML/JavaScript.
3. Paste the code below.
4. Set your Location. (Replace the "new york, usa" with your Location.

<script>
  //<![CDATA[ 
  $.simpleWeather({
	location: 'new york, usa',
	woeid: '',
	unit: 'c',
	success: function(weather) {
	  html = '<span>' + weather.city + ' </span><img src="' + weather.thumbnail + '"><span> ' + weather.temp + '&deg;' + weather.units.temp + '</span>';
	  $("#weather").html(html);
	},
	error: function(error) {
	  $("#weather").html('<p>' + error + '</p>');
	}
  });
  $.simpleWeather({
	location: 'new york, usa',
	woeid: '',
	unit: 'c',
	success: function(weather) {
	  for (var i = 4; i < weather.forecast.length; i++) {
		html = '<img class="weather-image" src="' + weather.image + '">' + '<span class="weather-type">' + weather.currently + '</span><span class="weather-temp"> ' + weather.temp + '&deg;' + weather.units.temp + '</span><span class="weather-date">' + weather.forecast[i].date + '</span><span class="weather-region">' + weather.city + ', ' + weather.country + '</span>';
	  }
	  html += '<span class="weather-humidity">' + weather.humidity + '%</span> ';
	  html += '<span class="weather-wind">' + weather.wind.speed + ' MPH</span>';

	  $("#weather-widget").html(html);
	},
	error: function(error) {
	  $("#weather-widget").html('<p>' + error + '</p>');
	}
  });
  //]]>
</script>

Install Page List on Header - top

1. Go to Page List Section.
2. Add a Gadget - Pages
3. Select your pages you need in header or add external link
4. Save your Widget

Install Social Links - top

1. Go to Social Links Section.
2. Click Edit on the gadget.
3. Write in New Site Name the class of your Social Link. We suport 6 Social classes:
facebook
twitter
google-plus
instagram
pinterest
linkedin

4. In New Site URL paste the link URL.

NOTE : If you want more social icons go here: https://fontawesome.com/v4.7.0/cheatsheet/
Find the class name of the icon that you want to use, copy and paste in New Site Name.
Examle: For YOUTUBE paste the class name fa-youtube

Header Wrapper - top

1. Create a png logo in your photoshop (width: 225px, height: 25px)
2. Go to Header Section.
3. Remove our logo and upload your oun.
4. Select Instead of title and description and Save.

Custom Header - top

1. You need to create a dark png logo in your photoshop (width: 230px, height: 41px)
2. Go to Custom Header Section.
3. Custom Header - Add a Gadget - HTML/JavaScript - and write {fbt_classic_header}
4. Save your widget. (Now the title of your page is on the top of navbar)
5. Go to the right side of this section.
6. Add a Gadget - HTML/JavaScript - Paste your ad code and save.
Note: You can select to have a Popular Posts widget and not ads. In this case add a Popular posts gadget. You have in your hands a three column carousel slider.

Main Menu - top

1. Click Edit to open the Main Menu widget.
2. Write in New Site Name the Name of your Category Link.
3. In New Site URL paste the link URL.
4. Press Add Link. Now you have createt the first category for your menu.
5. Add other categoriew with the same way.
6. To create Dropdown menu, in New Site Name write the name of category with underscore such _Submenu and move it with arrows below the parent category.

7. Watch the image below to create MEGAMENU.

8. Save the widget and you are done.

Newsticker - top

1. Go to NEWSTICKER Section.
2. Add a Gadget - HTML/Javascript - and write latest.
3. Save the gadget and you are done.

NOTE: If you don't want this gadget don't use it.

Contact Form - top

1. Go to CONTACT FORM Section.
2. Add a Gadget - Contact Form.
3. Save the gadget and you are done.

NOTE: This gadget is displayng only from Social links with the envelope button.

Slider Content - top

1. To use a Slider widget in your page, Go to SLIDER CONTENT Section.
2. Add a Gadget - HTML/JavaScript - and use this ShortCode : {YOURLABEL}{slider-1} Example: {Business}{slider-1}
3. Save Your Gadget and you are done.

NOTE: You can choose one of 8 versions to use a gadget in this Section. All versions are static without any animation trick.
{YOURLABEL}{slider-1}
{YOURLABEL}{slider-2}
{YOURLABEL}{slider-3}
{YOURLABEL}{slider-4}
{YOURLABEL}{slider-5}
{YOURLABEL}{slider-6}
{YOURLABEL}{slider-7}
{YOURLABEL}{slider-8}

You can display with short code a background image for your sliders. This setting concerns slider-1, slider-2, slider-3, slider-4, slider-7 and slider-8.

How to use? Simple... {YOUR LABEL}{SLIDER STYLE}{YOUR COLOR CODE}{PADDING TOP AND BOTTOM}

Example if you want to have a background for slider-1 and your label is Business:
{Business}{slider-1}{#ff9900}{50px}

For the slider-6 you can use the same code, but the color short code concers to the Title, Text and Read More and the last code concern to margin left.

NOTE: You can ignore this setting if you don't need a background to your Sliders.

Responsive Ad - top

There are 2 section with Title RESPONSIVE AD. One in Header and one other in the Bottom. Here you can paste the Adsense Google ads or other ads using HTML/JavaScript widget.

Magazine Builder - top

In this section you can use only our magazine widgets, Adsense gadget (not HTML code), Image gadgets (as banner). Not any other gadget.

Watch:
https://www.youtube.com/watch?v=14BX8qer94s
and
https://www.youtube.com/watch?v=KtyqqulEtMc

To create magazine post blocks see below short codes:
1. Add a Gadget - HTML/JavaScript - and use ShortCode: {YOURLABEL}{block-1}{5} - Name of label / style of block / number of posts / background of widget title.
2. Save Your Gadget and you are done.

You can use 9 block style in this Section like this:
Example, if your label is Business:
{Business}{block-1}{5}{#ff0000} - display maximum 5 posts
{Business}{block-2}{8}{#0099cc} - 4, 6, 8 or 10 posts
{Business}{block-3}{6}{#ff9900} - 3, 6, 9 posts
{Business}{block-4}{5}{#D03131} - 5 posts
{Business}{block-5}{5}{#b5afeb} - 4+ posts (Carousel)
{Business}{block-6}{5}{#b5afeb} - 3, 5, 7 or 9 posts
{Business}{block-7}{5}{#b5afeb} - 5 posts
{Business}{block-8}{5}{#b5afeb} - 4+ posts (Carousel)
{Business}{block-9}{7}{#b5afeb} - 3, 5, 7 or 9 posts (Carousel)

You can choose any color you want for the titles
You can ignore the last Short Code and use the same background color for all widgets.

Blog Title

1. Add a Gadget - HTML/JavaScript
2. Write your Title of your Blog. (Only for the Homepage)
3. Write the text of the button (View More).
4. Save your Gadget.
This is a optional space. Don't use it, if you keep the theme only for blog without Magazine Blocks.

Blog Posts

Social Counter

This is Optional Widget, But you can't remove. At this time we support only 5 Social pages.
1. Click Edit on this gadget.
2. In New Site Name paste this class: facebook {2340} for Facebook.
In New Site URL paste your Social Page URL and press Add Link.
3. Save the gadget and you are done.
facebook {2340}
twitter {3290}
instagram {5212}
gplus {641}
rss {3402}
delicious {214}
foursquare {732k}
behance {1.3m}
dribble {9.2k}
github {170}
youtube {32k}
linkedin {2.13k}
flickr {3.2k}
pinterest {569}

Sidebar Latest Articles

1. Add a Gadget - HTML/JavaScript and write: {latest}
2. Save your gadget and you are done.
NOTE: You can use this widget only one time on Sidebar. Not working in other Sections.

Footer Menu

1. Add a Gadget - Link List
2. Add links as in main menu but without submenus.
3. Save the gadget and you are done.

Post Options

1. Video iframes:
Insert a Youtube, Vimeo or Facebook video using only iframe without styling.
Example:
<iframe src="https://www.youtube.com/embed/svCQeRru1Mk"></iframe>
Replace only URL to use a embed video from sites before.
You can import your own Youtube video from your Post Editor WATCH THE VIDEO >
NOTE: The size of videos is 16:9.

Post Featured Image

Click on the image that you want to use as featured.
Press Properties / title text and paste [headerImage] short code / OK
NOTE: You can use any image you want for this place not only the first. (We have change this setting from Auto to Manual). Watch the video on YouTube.com

Post Short Codes

2. Full Page Posts.
Write your post. In the end of article paste: {full_page}

3. Create Contact Page with ShortCode.
Go to Pages / New Page / paste this code: {contact_form}
Publish and you are done.

4. Include all the images except the first in a Carousel Slider.
Write your post. In the end of article paste: {fbt_slider_post}
Publish and all images are included in a Carousel.

5. Include all the images except the first in a 2 Column Gallery.
Write your post. In the end of article paste: {fbt_gallery_post}
Publish and all images are included in a Gallery without getting lost the Lightbox.

6. Create dynamic buttons wit links.
Click on top of Editor (on Tools) Link:
On Text to display write your button text - space and {button_primary}
EXAMPLE: BUY NOW {button_primary}

Primary {button_primary}
Secondary {button_secondary}
Success {button_success}
Danger {button_danger}
Warning {button_warning}
Info {button_info}
Dark {button_dark}

DEMO: Short Code Buttons

RTL Direction

1. Go to Settings / Language and formating / Language
2. Select The RTL Language.
3. Save settings on top right button and you are done.

Theme Options

1. Disable Sticky Sidebar

Sticky Sidebar section.
Add a Gadget
HTML/JavaScript
Write: FALSE
Save widget

2. Hide Page Navigation on Homepage

Page Navigation section.
Add a Gadget
HTML/JavaScript
Write: HIDE
Save widget

3. Hide Post Meta

Post Meta section.
Add a Gadget
HTML/JavaScript
Write: HIDE
Save widget

4. Hide Top Headline

Top Headline section.
Add a Gadget
HTML/JavaScript
Write: HIDE
Save widget

5. Make a Grid Style Blog

Blog Style section.
Add a Gadget
HTML/JavaScript
Write: GRID_STYLE
Save widget

6. Set Number of Posts in Pagination

Blog Post Number section.
Edit
Write the number of posts that you need on Pagination
Save widget
NOTE: This is not for Homepage Posts. You can change this number from Bolg Posts Widget

7. Hide the Snippets in Blog Posts

Post Snippets section.
Add a Gadget
HTML/JavaScript
Write: FALSE
Save widget

8. Add Hover Effects in your images

Hover Effects section.
Add a Gadget
HTML/JavaScript
Write: TRUE
Save widget

9. Replace the order of Sidebar

Sidebar Left section.
Add a Gadget
HTML/JavaScript
Write: TO-LEFT
Save widget

10. Hide Blog posts from Homepage

Hide Blog section.
Add a Gadget
HTML/JavaScript
Write: HIDE_BLOG
Save widget

11. Translate Read More
Translate "Read More" in your language. Press Edit, write your text and save.

12. Translate Months
Paste this code with months in your language:

[,"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

13. With the same way as "Read More" write yor text for the other sections.

Error 404 page.

1. Settings
2. Search preferences
3. Errors and redirections / Custom Page Not Found / Edit
4. Paste this code:

<h1>Oooooh!!! <span>Error 404!!!</span></h1>
<h3>Sorry! The page you were looking for could not be found</h3>
<a class="hero_read_more" href="/">Go To Homepage</a>

5. Save canges and you are ready.

Special Classes

We started a new separate series called by Classies.
It will not be available for all basic themes. You can't made changes in anything. Some sections (as-is header and footer) will be fixed.
You can find them in the folder ByClassies.

Video Tutorials

Watch the Video and learn how to use a custom header and how to use a grid style blog

Thank you once again for choosing our theme for your page.

If you have any issue with Updates, don't worry. Remove all oldest widgets, like Popular Posts and Featured Post.
Make you shure if you don't have the same widget twice, like Classic Header and Header Ads. If yes, remove one of them.