Components

Componentst

I've set up some reusable bootstrap components built to provide navigation, alerts, pop-ups, and more.

In this section we will show you which bootstrap components we use for this template blogger Faryfinit.

→ Alerts:

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Bootstrap Alerts documentation

To activate this alert option, go to the "Alert Section" and add the required gadgets depending on what you want to display.

To customize the section your way, go to blogger "Template Design" and select comps and the options they say alerts.

→ Gadges:

Documentation and examples for badges, our small count and labeling component.

Bootstrap Alerts documentation

How to use this tag, add an "Gadget HTML/JavaScript or Gadget Text" and add the following code, with the information you want.

To customize the label in your own way, go to Blogger "Template Design" and select comps and the options that say gadges.

You can also place "Font Awesome icons" inside this tag. we will show how to place it.

Get in page Font Awesome

Enter the page, find and choose the icon you want to place, then click on the icon, at the top you will find a bar like this.

Click on the part that is underlined and it will copy itself and place it before or after the text.

→ Iconsbox:

Documentation and examples for "Iconsbox", our icon component. You can use this line of code to place numbers and "Font Awesome" icons anywhere on the page.

Get in page Font Awesome

How to use this tag, add an "Gadget HTML/JavaScript or Gadget Text" and add the following code, with the information you want.

To customize the label in your own way, go to Blogger "Template Design" and select comps and the options that say Iconsbox.

→ Buttons:

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap Buttons documentation

Although the "Gadget PageList" can add the buttons more comfortably, you can also customize them, placing them manually in a "Gadget HTML/JavaScript or Gadget Text".

To customize the buttons your way, go to Blogger "Template Design" and select comps and the options that say primary buttons and secondary buttons.

<a class="btn btn-primary" href="#" role="button"> Primary </a>

<a class="btn btn-secondary" href="#" role="button"> Secondary </a>

→ Progress Bar:

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.

Bootstrap Progress documentation

To add the "Progress bar" to the blog, we place and personalize the information in the relevant code and add it through an "Gadget HTML/JavaScript or Gadget Text".

To customize the "Progress bars". Go to Blogger "Template Design" and select comps and the options that say progress bar.

You can add several progress bars, repeating the code one below the other, and changing the parameters > "wight: 25%; / aria-valuenow =" 25"/ 25%" at the end that you can add name if you want.

</div>

New → Countdown:

Documentation and examples for using the custom 'countdown' with support for the alert section.

To add the "countdown" to the blog, we place and customize the information in the corresponding code and add it through an "HTML / JavaScript Gadget or Text Gadget".

To customize the "countdown". Go to Blogger "Template Design" and select comps and countdown options.

How does it work

1. Year 2. Month 3. Day 4. Time

→ Social Media Icons:

Documentation and examples for using custom social icons with support throughout the blog.

To add the "Social icons" to the blog, we place and personalize the information in the relevant code and add it through an "Gadget HTML/JavaScript".

To customize the "Social Icons". Go to Blogger "Template Design" and select comps and the options that say Social.

Select the icons you want to place on the page where you want to put it, and then just change in > href = " # ".

Note: This information applies in the same way to sections ( Top Bar, Footer Bar ).

→ Tabs:

Documentation and examples on how to use Bootstrap navigation components, in this case the tabs.

To add the "Tabs" to the blog, we place and personalize the information in the relevant code and add it through an "Gadget HTML/JavaScript".

To customize the "Tabs". Go to Blogger "Template Design" and select comps and the options that say Tabs.

Add he code in a "HTML / JavaScript" gadget and add the amount of tabs you want to place, place the title of each tabs and the content you want to place.

Note: The tabs can be placed as many times as you like anywhere on the "Faryfinit" template.

<div data-tab=" Your Title Here 1 "> Your Content Here 1 </div>

<div data-tab=" Your Title Here 2 "> Your Content Here 2 </div>

<div data-tab=" Your Title Here 3 "> Your Content Here 3 </div>

</div>

→ Preloaders ( Spinners ):

Documentation and examples for using custom "preloader spinners" with support throughout the blog.

Bootstrap Progress documentation

To customize the "preloader" of the blog, you can go to blogger theme designer > select components > and look for the ones that say preloader, you can change the color of "spinners" and change the background color "overlay".

→ Scroll Indicators

The "Scroll Indicator" is to show and indicate how much a page has scrolled. Scroll down to see the effect. It also works when scrolling up.

To customize the "Scroll indicator" of the blog, you can go to blogger theme designer > select components > and look for the option that says scroll indicator, to change the background color and the background color of the scrolling indicator.

→ Grid:

Documentation and examples on how to use Bootstrap components, in this case the "Grid System" for advertising articles.

To add "Grids" to the article text editor area, we go to blogger and click on > posts > it opens directly in the HTML editor. Then copy the code and save and add your content.

This allows you to get a better organization in the articles.

Note: This can be used anywhere in the template.

</div>

</div>

</div>

→ Go Top:

The "scroll up" button is when you scroll down the page that button appears to return to the top of the page.

To customize the "Go Top" of the blog, you can go to the blogger theme designer > select components > and look for the option that says "Go Top", to change the icon color and the background color of the button.

→ Pagination:

Show pagination is to indicate that there is a series of related content on multiple pages.

To customize the "pagination" of the blog, you can go to the blogger theme designer > select components > and look for the option that says "pagination", to change the font, size and color of the text "newer posts" and "older posts".

There is also the one to change the color of the icon that accompanies the text, change the color of the icon and the background color of the button.

→ Modal:

Bootstrap's modal plugin is for adding dialog boxes to your site for lightboxes, user notifications, or fully custom content.

In this plugin we will use the "Embedding YouTube videos" appropriately.

Bootstrap Modal documentation

To place the video we must change the url of youtube in this way choosing only the code, of the video that we want to insert.

Example: We will copy the following code of the video that we want to insert.

And we copy the code and paste it where it says "YouTube code" and you can put a title or text where it says "text or title here".

Final example of how it should look

<button type="button" class="video-player" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/lQAUq_zs-XU">How it works</button>

Nota: The button can be used anywhere on the blog.

In these examples we see the button and the video in modal. By clicking the button the video is shown.

→ Subscribe Popup ( Header ):

In the "Header" is the button to subscribe to the blog, to receive notifications of any article that is published on the blog. We will show you how it works.

You can add various gadgets like text, image, page list (buttons shown), etc. Ideal for displaying promotional content.

To add gadgets to the sections click on "Add a gadget" and add the necessary gadgets for what you want to do.

To upload the background image, Section "Header" > "Header - Subscription Img 1/2" > "Upload Background" > Edit > Choose File > Save.

This is the subscription form section and you can also add gadgets in this section.

After adding the gadgets and uploading the image you want to put in the background, everything is shown in this way.

The first section "subscribe image" to place the information you want to show and upload the background image, and customize it to give it that touch of modernity.

At the bottom there is a button that says "Get email notifications" when you click the button, the subscribe form is displayed.

To customize the "subscribe img and subscribe" of the blog, you can go to the blogger theme designer > select components > and look for the option that says "subscribe img popup and subscribe popup", to change the font, size and color of the text.

Each section has its separate options.