Fiksioner is currently one of the best custom Blogger themes which is
available for completely free. It has a simple yet elegant design with
outstanding features. This theme is also considered to be quite fast even when
Google Analytic and AdSense are enabled. It is optimized for page loading
speed and SEO. Fiksioner is suitable for wide variety of niche blogging such
as personal, tech, tutorial, and many more.
Fiksioner is designed by Igniel, a talented Blogger from Indonesia. I can
guarantee the quality of the theme because I have been using Fiksioner for
over a year. Unfortunately, the template documentation is in Indonesian. A lot
of non-Indonesian visitors have hard time installing this theme, so I am going
to help you understand the process of setting up Fiksioner on your blog.
You do not need to know much about HTML in order to install the theme. Follow
the instruction:
Step 1: Download the latest Fiksioner theme from Igniel
Only
download the theme from the original theme designer's website. I do not advise you to download the theme from other websites because it
might have been hacked. You will received the theme inside a zip file. Extract
the file using WinRar or other other program.
Step 2: Open the xml file
You can open the file using Notepad. Right click the Fiksioner xml file and
select open with Notepad. The theme HTML code will be displayed on the
Notepad. If you do note have Notepad, you can open it vie other xml
editor.
Step 3: Copying the HTML code into Blogger
Go to your Blogger control panel, select Theme, click the three dots button
and select Edit HTML. Now delete all of the code in Blogger. Then, copy all of
the Fiksioner code that you have opened in Notepad and paste it on the theme
editor.
Step 4: Editing Navigation Menu
Find the following code in the HTML editor:
<div class='fiksionerMenu'>
<div class='inner'>
<div class='button'>
<svg viewBox='0 0 24 24'><path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z'></path></svg>
</div>
<ul>
<li><a href='https://fiksioner.blogspot.com' title='Download Template'>Download Template</a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 3'>Menu 3</a></li>
<li><a href='#' title='Dropdown'>Dropdown</a>
<ul>
<li><a href='#' title='Submenu 1'>Submenu 1</a></li>
<li><a href='#' title='Submenu 2'>Submenu 2</a></li>
<li><a href='#' title='Submenu 3'>Submenu 3</a></li>
</ul>
</li>Take a look at the code highlighted in yellow and see the example of how I set
up the navigation of this blog:
<ul>
<li><a href='https://sofanmax.blogspot.com' title='Home'>Home</a></li>
<li><a href='https://sofanmax.blogspot.com/search/label/Rhymes?max-results=7' title='Poetry'>Poetry</a></li>
<li><a href='https://sofanmax.blogspot.com/search/label/Technology?max-results=7' title='Technology'>Technology</a></li>
</ul>Basically replace the code highlighted in yellow into your own blog's label
urls and label name.
Step 5: Setting up Menu Link Footer
Find the following code:
<div class='menu'>
<a href='#' title='About'>About</a>
<a href='#' title='Contact'>Contact</a>
<a href='#' title='Disclaimer'>Disclaimer</a>
<a href='#' title='Privacy Policy'>Privacy Policy</a>
<a href='#' title='Sitemap'>Sitemap</a>
</div>
Edit the code highlighted in yellow just like the way you edit the navigation
menu. Replace them using your own blog's page url and page name.
Step 6: Changing Email Subscription Box Footer
<div class='fiksionerAdditional'>
<div class='inner'>
<div class='left'>
<span class='title'>Subscribe To Our Newsletter</span>
<b:comment>Change `sofanmaxs` (there are two of it) to your Feedburner username</b:comment>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open
("https://feedburner.google.com/fb/a/mailverify?uri=sofanmaxs", "popupwindow", "scrollbars=yes,width=550,height=520"); return true' target='popupwindow'>
<input autocomplete='off' name='email' placeholder='Email Address' type='email'/>
<input type='submit' value='Subscribe'/>
<input name='uri' type='hidden' value='sofanmaxs'/>
<input name='loc' type='hidden' value='id_ID'/>
</form>
</div>
Replace the highlighted code with your own FeedBurner's feed address (Step 4
of the FeedBurner tutorial).
Step 7: Editing the Social Media Footer
Find <div class='social'> which has link to Facebook, Instagram,
Twitter, Pinterest. Place your own social media links.
Step 8: Changing the number of automated related link
Fiksioner has a feature which will automatically add related links within your
article. This feature may not be desirable because sometimes it breaks
formatting. If you want to disable it, find the following code
<b:includable id='fiksionerMultiRelated' var='post'>
<script> //<![CDATA[
// Multiple Related Posts by igniel.com
(function() {
var jumlah = 4;
Replace the highlighted code into
var jumlah = ' '; You can also change it to any number that you want if you need to enable it.
Step 9: Adding AdSense code
This step is only applicable if your blog has been approved by AdSense.
Find
<!-- Ads below title / Ads above post / Iklan bawah judul / Iklan atas
artikel -->
and
<!-- Ads below article / Iklan bawah post -->
replace them with your own ads code.
Once you have finished changing all of the essential code,
press save on your Blogger HTML theme editor. Once the code has
been successfully updated, go to
Theme > Customize > Advance and you will be able to change
the color schemes. You can also go to Layout to change your blog
layout, add or remove some widgets.
It is a complicated task in order to install a custom theme in
Blogger. However, you only need to do it once. That's why I don't recommend
you to change your theme too many times because it is time consuming.
Again, always back up your theme before making changes.
Leave a comment below if you encounter difficulties. I also welcome you to send me your questions at @omudesk in Instagram, a blogging community dedicated for Blogger users.