This free Blogger template is named Fiksioner. Fiksioner is one of the best free Blogger template recommendations of the year. The display style is intentionally designed to be large and wide because it was originally designed specifically for the needs of personal blogging, alias those who like to write journals notes on personal experiences, or write fiction. You can download the Fiksioner Blogspot template for free in this article.
It is super light, responsive, simple, and clean, optimized for page speed and SEO.
But over time, it turns out that Fiksionerare is widely used by blogs with various niches. Starting from news, tutorials, health, education, recipes, and even a hodgepodge blog that discusses various things. This is because Fixation is flexible, it can be used for any need.
This is the latest and most advanced version of the Blogger template. So it’s obviously very up to date.
articles that are evenly distributed into posts. Do not pile up in one place (mostly in the middle) like related posts in general.
To change the font, color, and other appearances, it is enough to do it through the Blogger Theme Designer. No need to go through HTML code anymore.
In version 3 which was launched on September 1, 2020, Fiksioner already has a paid or premium version. The price is very affordable, which is $7 only. What’s the difference between the free and paid versions?
This article contains documentation, tutorials, and a complete explanation of the Fiksioner Blogger (Blogspot) theme. If you want to see the type of font used, how to create buttons, blockquotes, tables, syntax highlighters, and other attributes, please visit the article Fixary Styles and Typography.
1. How to Install
Here’s how to install the Fiksioner free Blogger template. There are two ways to choose:
1.1. Copy HTML (Recommended)
This method is recommended because it will instantly produce a look that is 100% the same as the demo version of Fiksioner. The risk is that all widget content such as ad code, His stats code, etc. will be lost. So make sure to save all the widget code before doing this method.
- Go to the Theme menu > Edit HTML.
- Copy all the template code in the downloaded file and paste it into the text editor that appears.
- Finally, click the Save theme button.
1.2. Upload XML
This method is safe because all previously installed widgets will not be deleted. But there is a possibility that the layout of the widget will be messy because it does not match the HTML code of the Fiksioner template. How to fix it is easy, just slide the position in the Layout menu (Layout).
- Go to the Theme menu > Backup / Restore.
- If you want to backup the template that is currently in use, click the Download theme button.
- After that, directly upload the Fixationer template by clicking the Choose File button and looking for the location of the .xml file.
- Finally, click the Upload button.
2. Meta tag
This section is quite important as part of SEO and complementary properties when the link is shared on social media. Replace the following code using your own.
2.1 Code Tracking
For Google Search Console and Bing Webmaster verification. If you don’t have one, just delete all these lines of code. If it already exists, please replace the one marked.
<!– Tracking Code –>
<meta content=’xxxxxxxxx‘ name=’google-site-verification’/>
<meta content=’xxxxxxxxx‘ name=’msvalidate.01’/>
2.2. Keywords
Replace with keywords or blog search keywords. Separate using commas.
<!– Keyword –>
<meta content=’Keyword 1, keyword 2, keyword 3, etc’ name=’keywords’/>
<meta content=’Keyword 1, keyword 2, keyword 3, etc’ property=’article:tag’/>
2.3. Author Info
<!– Facebook, Twitter, and Pinterest Meta Tag –>
<meta content=’article’ property=’og:type’/>
<meta content=’Your Name‘ name=’author’/>
<meta content=’Your Name‘ property=’article:author’/>
<meta content=’xxxxxx‘ property=’fb:admins’/>
<meta content=’https://www.facebook.com/xxxxxx‘ property=’article:author’/>
<meta content=’https://www.facebook.com/xxxxxx‘ property=’article:publisher’/>
<meta content=’@YOURusername‘ name=’twitter:site’/>
- xxxxxx: ID of Facebook account or Fanspage (Page)
- @YOURusername: Username Twitter
2.4. Blog Image
This image will appear when sharing the main link (homepage) on social media. Change the marked use the URL of the banner image or your own blog logo.
<meta content=’file:///C:/Users/Haris/Downloads/Add%20a%20heading%20(1).webp
<meta conte
3. License
Located in Layout > LICENSE. This section is only filled in if you have purchased the paid version. If using the free version, then leave it blank. The license widget should not be removed because it will make some scripts not work. So simply emptied, but not deleted.
4. Feature Settings
Located in Layout > Theme Settings. It contains the code as a set of some features.
4.1. Numbered Navigation
Marked with navigation. Numbered navigation appears only on index pages. NOT included in index pages (archive, search, labels) and posts.
- post page: the number of pages that appear on each page. The number MUST SAME as the number of pages specified in Blogger settings. Otherwise, the page division will be messy.
- num page: number of buttons that appear.
- prev: text to bookmark the previous page.
- next: text to bookmark the next page.
- total page: text to show the total page.
4.2. Related Articles Below
Marked with the related post. Is a collection of related articles that are below after the main article contents.
- image: choose to display the image or not. true means to use an image, false means NOT to use an image.
- num: number of related articles.
- no image: an image that appears as a replacement if the related article does not have an image.
If you want to delete the article related below, find this code and delete it:
<b:include cond='data:view.isPost and !data:view.isPreview' data="post" name="fiksionerRelated"/>
4.3. Related Articles Repeated in Posts
Marked with relatedpostMiddlePost. Are related articles that appear repeatedly in the main article and are distributed evenly according to the number of paragraphs.
- num: number of related articles.
- text: text as the title marker of the related article.
If you want to delete repeated related articles, set the value num to 0.
5. Changing Colors and Fonts
Can be done directly in the Blogger Theme Designer.
- Go to Theme (Theme) > Customize.
- Select Advanced.
- Arrange all the sections as desired.
- When finished, click the save icon in the lower right corner.
6. Changing No Image on Homepage
This “noimage” image appears on the main page (homepage) and index (archive, search, label). If the article does not have any images in it, then this “noimage” image will appear. To replace it, search for these URLs (all of them) and replace them with your own image URLs.
https://4.bp.blogspot.com/-fcqYJ8sOUtw/X0zEQsZWkVI/AAAAAAAAI24/hAq1jqHHAhYIZoRqkSsdlh3QBBfYcYAwgCLcBGAsYHQ/s1600/fiksioner-no-image.png
7. Ad Position
Some ads can be directly inserted through the Layout (Layout) which is marked with a blue box. Make sure to check the text show HTML/Javascript for the ad to appear.
7.1. Billboard Ads and Article Center
Look at the picture above. Both of these ads can be directly filled through the blue widget box.
There are several adpositions that must be installed via HTML. Areas follow:
7.2. Top of Article Ads (Bottom of Title)
Look for the following code and replace it with the ad code.
<!-- Ad code below title / Kode iklan bawah judul -->
7.3. Article Bottom Ads
Look for the following code and replace it with the ad code.
<!-- Ad code below article post / Kode iklan bawah post artikel -->
7.4. Iklan In-feed
Ads that appear between feeds/lists of articles on the homepage. Look for the following code:
<b:if cond='data:infeed == 3'>
This means that the ad will appear after the third article. Replace the number marked as you wish. Then look for the following code and replace it with the ad code.
<!-- Ad code InFeed / Kode iklan InFeed -->
8. Adding New CSS Code
Adding new CSS code doesn’t have to be complicated through HTML. You can directly go through the following settings to make it easier.
- Go to Theme (Theme) > Customize.
- In the dropdown menu that appears, select Add CSS.
- Enter the CSS code in the space provided. When finished, click the save icon in the lower right corner.
9. Navigation Menu in Header
Under Layout, see the section titled HEADER. Edit the widget named Menu. Change the menu as desired.
9.1. Dropdown
If you want to add a dropdown, in <li> the parent makes sure to add a class dropdown. Then at first add the code that is marked:
<a href="#" onclick='return false;' title="Dropdown">Dropdown</a>
Its function is so that the page does not jump to the top when the parent of the dropdown is clicked. So the complete dropdown-specific code is something like this:
<li class=’dropdown’>
<a href=’#’ onclick=’return false;’ title=’Dropdown’>Dropdown</a>
<ul>
<li><a href=’https://www.alamat.com’ title=’Sub 1′>Sub 1</a></li>
<li><a href=’https://www.alamat.com’ title=’Sub 2′>Sub 2</a></li>
</ul
</li
10. Menu in Footer
Under Layout, see the section titled FOOTERTOP. There are 3 widgets that can be set, which are as follows:
10.1. Widget Subscribe
Make sure you already have an account on Feedburner first. Edit the widget named Follow By Email and enter your FeedBurner URL.
10.2. Page Menu
Contains links that lead to static pages (pages) but can also be filled with external links that point to other blog addresses. Edit the widget named Page Links.
To sort the position of the link, the settings can be shifted up or down.
10.3. Social media
Edit the widget named Social Media. Replace the hash symbol #with your social media ID or username.
11. Text and Credit Link
Under Layout, see the section titled FOOTERBOTTOM. Contains two widgets, namely copyright text and link credit (link credit)
11.1. Copyright text
Edit the widget named Copyright. That’s the text for the footer on the left. Change the text as desired.
11.1. Remove igniel.com Credit Link
This section can only be changed or deleted if you have purchased the premium version. Learn about the differences between the free and paid versions in the article entitled Differences in Free and Premium Versions of Fiksioner Themes.
That’s all the contents of the official documentation and a complete tutorial of the free Blogger theme Fiksioner. If something is missing or missed, please comment below so that it can be added immediately.