Documentation

Viaeli Blogger Template Documentation.
Viaeli Blogger Template Documentation

Welcome to the Viaeli Blogger Template Documentation!

We are delighted to introduce Viaeli, a theme thoughtfully designed to provide outstanding performance with lightning-fast load speeds. It is also highly optimized for search engine visibility and offers flawless display on a wide range of devices. This includes mobile, tablet, laptop, desktop, or any other device that may be used to view your web pages.

This template is versatile, suitable for personal blogs, business purposes, or any type of blogging you may wish to pursue. Additionally, Viaeli offers various customization options to meet your specific needs. It also supports Google AdSense, third-party ads, as well as your personal advertisements.

Important Notice:
Kindly ensure that you back up your existing theme and settings prior to making any modifications. Please note that I, as the developer, cannot be held accountable for any loss or damage to your previous theme or its configurations during the process.
How We Work
  1. Communication: We kindly request that all communication be conducted exclusively through Etsy Messages. Messages sent via other platforms may not be acknowledged or responded to.
  2. Working Hours: Our support and services are available from Monday to Friday, between 10:00 AM and 04:00 PM (IST – India Standard Time, GMT+5:30). Please understand that responses outside of these working hours may experience delays.
  3. Service Method: In order to proceed with support, updates, or any paid services, we kindly ask that you assign Blog Admin privileges to us (the developer). Please note that without admin access, we will not be able to provide any service.
  4. Data Sharing: To ensure that we can assist you effectively, we kindly request that the required data for support or services be shared via a draft post on your blog. We will not be able to accept any other methods of data submission.
  5. Support Requests: For the most efficient support, we kindly ask that all requests closely match the live preview of the purchased theme. Requests that differ from the preview theme are not accepted.

We're Here to Help

  • Please remember that our goal is to provide the best service possible, and we truly appreciate your cooperation in following these guidelines.
  • If you have any further questions or need clarification on any point, please feel free to reach out. We are more than happy to assist!

Theme Policies & Support

Strictly Keep in Mind
RefundWe kindly inform you that refunds are not available under any circumstances. We appreciate your understanding.
Never DoThis theme is provided solely for your personal use. Kindly refrain from sharing it on social media platforms, websites, or file-sharing services.

You purchased this theme for personal use only. Redistribution under any name, type, form, or method is strictly not allowed. If you bought it directly from our shop, you are the end user. We sincerely appreciate your respect for our original work.

We respectfully request that you do not edit or modify the theme and claim it as your original work. Breach of these terms may result in the revocation of your license and could lead to appropriate legal measures.
Documentation
TypeOnline webpage with a fully explained HTML documentation guide. This is (webpage serves as) your documentation.
Installation
ModeThe theme is designed for self-installation at your convenience.
Installation SupportComplimentary support is available. Please review what is included.
Installation Steps
Step 1Preparing Installation Data.
Step 2Back up your current theme.
Step 3Install the new theme.
Step 4Configuring the Contact Page.
Configuring Layout Widgets After Installation
Step 1Header
Step 2Main
Step 3Footer
Support
DurationSupport is valid for 6 months from the date of purchase.
ModeSupport is provided via Blog Admin access.
RequiredKindly provide your invoice and blog URL to validate your purchase.
Additional DetailsAll additional information can be found in the download package.
Update
Auto UpdateKindly note that automatic updates are currently not available.
Manual UpdateManual update is available. Please check periodically.
DurationManual update support is offered for 6 months.
Paid Installation
AvailabilityPaid installation service is available upon request.
Cost$15.00 (USD) for Standard Paid Installation.$50.00 (USD) for Complete Paid Installation.
Installation ModeInstallation will be carried out via Blog Admin access.
Data Sharing ModeRequired data should be shared through a draft post on your blog.
Required Data
For Standard Paid InstallationPlease share your text content, titles, images, and social media profile links via a draft post.
For Complete Paid InstallationOnly social media profile links are required via a draft post.
License
Price$44.99 (USD) for a single-use license.
Domain UsageThis theme is licensed for use on one domain only. Redistribution, multiple domain usage, or sharing in any form is not permitted.
Footer CreditThe original shop credit in the footer must remain intact. Removing or obscuring this credit would be a violation of the license agreement.
Remove Footer Credit$55.99 (USD)Footer Credit Removal service is available.

Installation

Please follow the installation steps carefully, one by one, without skipping any part. Each step is important and designed to prevent issues during setup. If something unexpected happens, following the complete process will make it much easier to identify and fix the problem. Your patience and attention are truly appreciated.

Installation Steps 1 of 4: Preparing Installation Data

Before you begin installing your theme, it’s a good idea to prepare all the necessary content in advance. This will help ensure a smooth, quick, and complete setup experience.

Preparing Installation Data 1 of 4: Required Images

The following images are required.

  • Three images for the Homepage Hero Section. Image dimensions: height greater than width.
  • One image for the Author Profile in the Sidebar Top. Image dimensions: width and height are the same.

Note: Use high-resolution images for image clarity.

Preparing Installation Data 2 of 4: Optional Images

Only needed if you’re using the manual Instagram.

  • Six images for Manual Instagram if you are using the Manual Instagram Widget. Image dimensions: width and height are the same.

Note: Use high-resolution images for image clarity.

Preparing Installation Data 3 of 4: Social Media Profile Links

This theme allows you to showcase both brand and personal social media profiles. Please choose which ones you’d like to display and have those links ready.

If you don’t have brand accounts, your personal profiles can be used instead.

  • 3 social media links for the top menu (typically for brand accounts)
  • 7 links for the author profile section
  • 5 links for the footer logo section

Note: Copy all the links and paste them into a text document. This will be very helpful during the installation.

Preparing Installation Data 4 of 4: Text Content

Please prepare short texts for your site’s various sections and widgets, as these texts are essential for installation.

  • Titles for sections and widgets.
  • Subtitles for widget descriptions. These may vary from widget to widget. Please refer to the live preview of the theme’s sections and widgets.

If you have everything prepared, you're all set for a smooth and enjoyable installation experience! Feel free to reach out if you need help with anything along the way.

Go back to Installation Steps

Installation Step 2 of 4:Back Up Your Current Theme

Please back up your current theme before starting the installation of the new theme. You can easily restore the previously used theme if anything goes wrong. Please watch the video guide. It's simple and very easy to follow.

Go back to Installation Steps

Installation Step 3 of 4:Install the New Theme

You may already know how to install a theme. However, this installation procedure is slightly different. In this step, we are removing the previous theme’s widget data and settings to perform a complete clean install.

Theme Reset Code

Please copy the following theme reset code if you wish to install a new theme or restore the previously installed theme.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<b:skin/>
</head>
<body>
<b:section id='id'/>
</body>
</html>

Please watch the video and strictly follow the steps shown.

Go back to Installation Steps

Installation Step 4 of 4: Configure the Contact Page

This step involves creating a dedicated standalone contact page. To ensure the page functions as intended, you need to create the contact page and paste its URL inside the template code. It’s a simple and easy process.


  1. Click on ‘Pages’ in the Layout Navigation.
  2. Click on ‘NEW PAGE’.
Configure the Contact Page Step 1

  1. In the Title field, type ‘Contact’.
  2. Click ‘Publish’.
Configure the Contact Page Step 3

After publishing, right-click on the eye icon.

Configure the Contact Page Step 4

From the menu that appears, click ‘Copy link address’. This is your contact page link.

Configure the Contact Page Step 5

  1. Click on ‘Theme’ in the Layout Navigation.
  2. Click the down arrow next to 'CUSTOMIZE'. Choose ‘Edit HTML’
Configure the Contact Page Step 6

  1. Click anywhere inside the code area.
  2. Press Ctrl + F on your keyboard. A search box will appear at the top of the code. Type Contact_Page_URL into the search box and press Enter.
  3. You will see the text Contact_Page_URL highlighted in light yellow.
Configure the Contact Page Step 7

  1. Delete the text Contact_Page_URL and paste the contact page link you copied earlier. It should look something like this: https://myblog.blogspot.com/p/contact.html
  2. Click the ‘Save’ icon.
  3. Click the left arrow icon to exit.
Configure the Contact Page Step 7

That’s it! You have now successfully added your contact page.

Go back to Installation Steps

Configuring Layout Widgets After Installation


Each pencil stands for a widget. Click the pencil to open it and make changes. Then save when you’re done. If you have any problems, just send me a message on Etsy with your invoice and blog URL. I’ll fix it for you with a one-time free installation help.


  1. Header

    1. Main Menu, Logo (Site Title), & Brand Social Links

      1. Widget: Main Menu
          1. 1. Click on ‘Layout’ in the Layout Navigation.
          2. 2. Click the main menu.

          Adding submenu step 1
          1. Click on ‘ADD A NEW ITEM’.

          Adding submenu step 2
          1. Note: Only the pages you’ve already created will appear here. To create a new page, click on 'Pages' in the Layout Navigation, then click 'NEW PAGE', just like you did when creating the Contact page.

            Add the pages one by one. Use the up and down arrows to reorder them if you are changing the order. Use the pencil icon to update the links. You have successfully set the menu.

          Adding submenu step 2.1

          Adding submenu step 3
          1. 1. Click on ‘Theme’ in the Layout Navigation.
          2. 2. Click the down arrow next to 'CUSTOMIZE'. Choose ‘Edit HTML’

          Adding submenu step 4
          1. 1. Click anywhere inside the code area.
          2. 2. Press Ctrl + F on your keyboard. A search box will appear at the top of the code. Type Labels_Page_Name into the search box and press Enter.
          3. 3. You will see the text Labels_Page_Name highlighted in light yellow.

          If you choose...

          ✶ Pages, the keyword is 'Pages_Page_Name'

          ✶ Links, the keyword is 'Links_Page_Name'

          ✶ Labels, the keyword is 'Labels_Page_Name' (Here, we are using this now).

          ✶ Archive, the keyword is 'Archives_Page_Name'.


          Adding submenu step 6
          1. 1. Delete the text Labels_Page_Name and paste the link name you copied earlier. It should look something like this: Topics
          2. 2. Click the ‘Save’ icon.
          3. 3. Click the left arrow icon to exit.

          Adding submenu step 7
          1. 1. Click on ‘Layout’ in the Layout Navigation.
          2. 2. Click the ‘Labels submenu’.

          We chose ‘Labels submenu’ to show Labels as a submenu.

          Customize the appropriate widget if you choose different widget types:

          ✶ Choose 'Pages submenu' widget for Pages.

          ✶ Choose 'Links submenu' widget for Links.

          ✶ Choose 'Labels submenu' widget for Labels (Here, we chose this).

          ✶ Choose 'Archive submenu' widget for Archive.

          Adding submenu step 8
          1. Enable the widget.

          Adding submenu step 9
          1. 1. Click the 'Selected Labels'.
          2. 2. Select the labels.
          3. 3. Click save.

          Adding submenu step 10
          You have successfully added the 'Topics' submenu.


          This is the easiest way to create a submenu using the widgets.

          3 simple steps:

          1. Add the page to your main menu.

          2. Add the page name inside the template code (the above steps).

          3. Select a widget (Pages Submenu, Links Submenu, Labels Submenu, or Archive Submenu) to add pages, links, labels, or an archive.



          If you find the steps for setting up the submenus still unclear, please don’t hesitate to reach out after your initial installation. We’ll be happy to set them up for you as part of our complimentary, completely free installation assistance.


      2. Widget: Logo (Site Title)

        • No adjustment required.

      3. Widget: Brand Social Links

        • Use the up and down arrows to move your favorite links to the top 3. Only the top 3 links will be shown. Click the pencil icon to update each link with your own or brand social media profile URL.


    2. Submenu: These widget pages or links appear as submenus under the main menu when you click or hover over it.

      1. Widget: (Submenu 01) Pages submenu

        • Please refer to the main menu's submenu tutorial.

      2. Widget: (Submenu 02) Links submenu

        • Please refer to the main menu's submenu tutorial.

      3. Widget: (Submenu 03) Labels submenu

        • Please refer to the main menu's submenu tutorial.

      4. Widget: (Submenu 04) Archive submenu

        • Please refer to the main menu's submenu tutorial.


    3. Welcome Message (Under Three Images)

      1. Widget: Quotation / Tagline / Description / Snippet

        • Enter a quotation, tagline, description or snippet in the content field.


    4. Homepage Hero Section

      1. Widget: Image 1

        • Enter a short text in the caption field and a link in the link field. Both caption and link are optional. Upload an image to enable this widget.

      2. Widget: Image 2

        • Repeat the same process.

      3. Widget: Image 3

        • Repeat the same process.


    5. AdSense Ad, & Custom Ad

      1. Widget: Custom ad

        • Paste the custom ad code in the content field, or try the sample ad code below. To display a Google AdSense ad, remove this existing widget and add the Google AdSense widget.


          Use the sample image ad code:
          Replace data-src with your own image URL.
          Replace the Your_Shop_URL_Here with your own store’s URL.
          Host the image on Blogger to allow automatic image scaling.


          <div class="etele prohi">
  <a aria-label="Store link: Buy this product!" class="ipaas ciihl athlw spiac sucwh staic siwiv ioclc sicst ibdbi ltrgr cobns bihov rcpim athlb" href="Your_Shop_URL_Here" rel="nofollow noopener noreferrer" target="_blank">
    <img alt="Product Image" data-src="https://blogger.googleusercontent.com/img/b/.../s1600/my-product.jpg" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg" width="998" /><span class="vhtel">Buy Now!</span>
  </a>
</div>

          Go back to Configuring Layout Widgets After Installation


  2. Main

    1. Page Contents

      1. Widget: Blog Posts

        • The number of posts on the main page should be 4. All other settings are optional.

    2. Author

      The three widgets are combined into one for the author profile. All of these widgets must be enabled.

      1. Widget: Author Name

        • Enter your name in the content field.

      2. Widget: About Me

        • Enter a tagline, quotation, description, or snippet in the caption field. Upload your image.

      3. Widget: @ MySocialName

        • Use the up and down arrows to arrange the links in your preferred top 7 positions. Only the top 7 will be shown. Use the pencil icon to edit the links and replace them with your actual URLs.


    3. Labels & Featured Post

      1. Widget: Topics

        • The choice is yours. The labels will be displayed based on your settings.

      2. Widget: Recommended

        • The options and choices are yours. Only one post will be visible.


    4. AdSense Ad & Custom Ad

      1. Widget: Custom Ad

        • Paste the custom ad code in the content field, or try the sample ad code below. To display a Google AdSense ad, remove this existing widget and add the Google AdSense widget.


          Use the sample image ad code:
          Replace data-src with your own image URL.
          Replace the Your_Shop_URL_Here with your own store’s URL.
          Host the image on Blogger to allow automatic image scaling.


          <a aria-label="Store link: Buy this product!" class="abibs staic siwiv ioclc sicst ibdbi ltrgr ooari rcpim athlb" href="Your_Shop_URL_Here" rel="nofollow noopener noreferrer" target="_blank">
  <img alt="Product Image" data-src="https://blogger.googleusercontent.com/img/b/.../s1600/my-product.jpg" height="1080" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg" width="1080" />
  <span class="vhtel">Buy Now!</span>
</a>

    5. Popular Post

      1. Trending

        • The 'Most Viewed' option is up to you. Select one. Only one post will be visible.

    6. Pinterest & YouTube

      1. Widget: Get Inspired

        • Enter your Pinterest username. Your latest 4 posts will be displayed.


          How to enter a Pinterest username in Pinterest widget?
      2. Widget: Stay Tuned - Subscribe!

        • Enter the title in the title field.

          Enter the YouTube Video ID in the content field.

          Example: For the link https://youtube.com/watch?v=ABC123, the ID is 'ABC123'.

    7. Instagram

      1. Enter your Instagram username. Your latest 6 Instagram posts will load along with your basic profile information. If you don't like the widget layout, you can use the manual Instagram widget below.Where your Instagram username appears?


    8. Custom Instagram

      1. Widget: Follow along

        • Enter a title in the title field.

      2. Insta Post 1

        • Go to your Instagram, right-click on any post, copy the link address.How to copy the link from Instagram Post?
          Paste it into the link field.
          How to copy the link from Instagram Post?
          Upload an image.
          How to copy the link from Instagram Post?

      3. Insta Post 2

        • Repeat the above process.

      4. Insta Post 3

        • Repeat the above process.

      5. Insta Post 4

        • Repeat the above process.

      6. Insta Post 5

        • Repeat the above process.

      7. Insta Post 6

        • Repeat the above process.

    9. Other Widgets

      1. Add a widget or drag one here from above.


        Go back to Configuring Layout Widgets After Installation


  3. Footer

    1. AdSense Ad & Custom Ad

      1. Custom ad

        • Paste the custom ad code in the content field, or try the sample ad code below. To display a Google AdSense ad, remove this existing widget and add the Google AdSense widget.


          Use the sample image ad code:
          Replace data-src with your own image URL.
          Replace the Your_Shop_URL_Here with your own store’s URL.
          Host the image on Blogger to allow automatic image scaling.


          <div class="etele prohi">
  <a aria-label="Store link: Buy this product!" class="ipaas ciihl athlw spiac sucwh staic siwiv ioclc sicst ibdbi ltrgr ctbws bihov rcpim athlb" href="Your_Shop_URL_Here" rel="nofollow noopener noreferrer" target="_blank">
    <img alt="Product Image" data-src="https://blogger.googleusercontent.com/img/b/.../s1600/my-product.jpg" height="90" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg" width="998" />
    <span class="vhtel">Buy Now!</span>
  </a>
</div>

    2. Footer Logo and Brand

      1. Widget: Header

        • No adjustment required.

      2. Widget: Brand Social Profiles

        • Use the up and down arrows to adjust their positions. Move your favorite social profiles to the top 5. Only the top 5 will be displayed. Use the pencil icon to update the links.


    3. Usage Help Newsletter & Email Subscription

      1. Widget: Usage

        • Add the usage policy pages you have created. All the pages you’ve added will be shown here.

      2. Widget: Help

        • Add the help and support pages you have created. All the pages you’ve added will be shown here.

      3. Widget: Join the movement

        • Enter an email subscription title in the title field.


          We use a contact form to handle email subscription requests.

          When a visitor subscribes, you’ll receive an email messaged: “This is an email subscription”.
          Confirm the request is legitimate.
          Choose a third-party email subscription provider to manage your list.
          While many providers require a subscription, some still offer basic free plans with limited features.

          Note: Blogger has officially discontinued built-in email subscriptions. If you choose not to use this feature, simply disable the widget or keep it for styling purposes.


          Go back to Configuring Layout Widgets After Installation