How to Set Up Fiksioner Custom Blogger Theme

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 v3 is out! The best free custom Blogger theme just got even better.

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.

Read also: Tips on Getting AdSense Approval for New Blogspot Users

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

You need to set up Google FeedBurner first. Then find the following code:

 <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
             (&quot;https://feedburner.google.com/fb/a/mailverify?uri=sofanmaxs&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); 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.

Read also: How to Set Up Blogger Custom Domain in the New Interface