davidews
Embedded Files
All Categories
Browse the different available categories in the knowledge base.
Davidews - Video Blogger Theme.
New modern Responsive Video Blogger theme developed for video websites.
Theme Settings Categories
◉ Setting Started
◉ Introduction
Thanks! for purchasing the template. First of all, thank you for purchasing this theme. To make your experience a pleasant one, we have added all the necessary information in this documentation. If you have any problems, consult the support service.
This document contains general information and step-by-step guidelines on how to configure the theme.
Davidews is the newest Responsive Video Blogger theme developed specifically for video websites. Davidews brings you the latest trending video website design with beautiful full width and fixed page templates that exude elegance and charm, you will have an innovative and fully functional video website within minutes of purchase.
Davidews has more unique features that help you create any type of video website. Whether it's about games, movies, news, entertainment, reviews, science, etc.
Davidews is fully customizable - its appearance is impressive on tablets and mobile devices. to create any page. no coding skills required. it is very easy to customize. Support element "Gadget or Widget" of blogger. Just choose a "Gadget or Widget" item and drag and drop it on the specific section. done!
Build the great online video website with stylish full page sliders and advanced features, Davidews is the answer to your questions to create a future-proof and safe online marketplace. You can embed videos from the video websites like YouTube, DailyMotion, and Vimeo.
Please don't forget to give a 5-star rating and leave a good review for Davidews. Your rating and review help us get a good sale. To do so, simply log into your Themeforest, go to the Downloads section and click on 5 stars next to Davidews - Video Blogger Theme.
◉ Need Help ?
Please do not hesitate to get in touch with us if you need help. We also welcome your feedback and suggestions. Please contact us through our support tab and we are happy to help.
We usually respond to all queries within 24 hours during weekdays. We are mostly not available during weekends and public holidays. We live across different timezones and have different people for answering different queries. So if we find us online responding to other comments and not yours please be patient with us.
◉ Installation
1. Downloading theme file
To install Davidews Blogger theme, first you should download the .zip file from your envato account after purchasing the theme.
You can download the .zip file from The Downloads Pages in your account by clicking on the green download button then choose “All files & documentation”.
2. Manual it Installation
Step 1/4
Before starting your purchase file, unzip it.
- Unzip the file "Main_template_file.zip".
- Select one of the three "XML" theme.
- Right click and open it with a text editor (Notepad or something like that).
Step 2/4
- Right click on "Select All".
- Right click and "Copy".
Step 3/4
Go to Dashboard
- click on "Theme".
- click next to customize "▾".
- click "Edit HTML".
Step 4/4
- In the "Edit HTML" window
- Select all the old code,
- "Paste" the code that I copied from the "Theme".
- Then click "Save".
3. Automation Installation
Step 1/4
Go to Dashboard
- click on "Theme".
- click next to customize "▾".
- click "Restore".
Step 2/4
- click in "Upload".
Step 3/4
In the shopping folder
- click and select the "Theme" what you want to load.
- click "Open".
Auto load theme.
◉ Demo Content
Here's a quick explanation of how demo content can be imported.
Importing demo content allows you to have the same demo content as the themes in the preview.
This step is only for testing blog (if you want test this template before apply to your main blog). Don't apply this step to your main blog.
1. Import Demo Content
Step 1/4
Access your blog dashboard.
- click "Settings".
- in Manage Blog click "Import Content".
- click in "I am not a robot".
- click in "Import from computer".
Step 2/4
In your shopping folder.
- Unzip the file "Document".
- There is a folder named "Demo Blog Data".
- click > "demo-blog-data".
- Select the document XML.
- and click in "Open".
Content starts loading automatically
◉ Updating the Theme
The themes will be updated with news and new user experience, a new email will arrive informing you of a new update of the Davidews themes.
To update your page with the new theme we do not recommend that you load it automatically, or manually, because you would automatically lose many custom options in the blog and never do it manually because your default and custom template would be deleted.
We recommend that before proceeding to update to the new theme update, you make a backup copy of your template.
Please note that updating a theme will override any custom changes you make to the main theme. Therefore, we recommend using a secondary blog. A child blog is not meant to be updated and should contain only custom changes.
◉ Changelog
❑ Version 1.0 { September 10, 2021 }
+ Initial release.
◉ Setting Blog
◉ Setting Blog Posts
Documentation and examples to configure some options of blog posts that come by default in blogger and you can enable and disable.
The options that will be displayed come in blogger by default and allow the page to be more instinctive, showing the time, comments, tags, etc.
Step 1/4
Go to Dashboard
click "Layout" in to section > "Main Page Body" > "Page Body" > "Blog Posts" > click "Edit".
Step 2/2
To keep the configured order, you must enable and order it as follows.
Post Title
In the "Post Title" the post widgets are arranged in rows.
Row 1: Label
Row 2: Post Body - It is default not used
Row 3: Comments
Row 4: Author Name + Share
Row 5: Is left empty
◉ Setting Meta Tag
- On Blogger Dashbord Click Template.
- Click "Edit HTML".
- Scroll down and Find this Code:
- Change Facebook App ID here with yours
- Change Facebook Admin ID here with yours.
- Change @username with yours twitter ID/Website twitter ID and change @username with yours twitter ID too.
Note: Before your cards show on Twitter, you must first have your domain approved. Fortunately, it's a super-easy process. After you implement your cards, simply enter your sample URL into the validation tool. After checking your markup, select the "Submit for Approval" button. Go Here : Validator Twitter for testing and approval.
◉ Optimize SEO
Activate Custom Description Each Post
- In the Dashboard, click "Settings".
- Enable "Enable search description".
- Click on "Search description".
- Write your search description.
- Click on "Save".
◉ Main Colors
◉ Main Fonts
◉ Layout Dashboard
Coming Soon
We are working on this section, it is enabled very soon.
◉ Setting Header
› Brading/Logo
Documentation and examples to upload your brand or logo, from the page navigation header.
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Brading/Logo".
- Click on "Edit" and apply the settings below:
Select image by:
◉ Upload image from computer.
Clic: "Choose File"
Image Placement
◉ Instead of title and description
Show this widget: Enable or disable
Clic "Save".
› Header Banners
The banner "Header Banner" is good to link a page of some relevant news with some topic or something specific. Here is the documentation and examples to upload images and texts to display this banner.
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Header Banners".
- Click on "Edit" and apply the settings below:
Title: Add you Title
Caption: Add you Caption
Link: Add you Enlace
Select image by:
◉ Upload image from computer.
Clic: "Choose File"
Show this widget: Enable or disable
Clic "Save".
› Search Box - Main
With the following documentation the "Main Search Bar" of the page content is configured.
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Search Box - Main".
- Click on "Edit" and apply the settings below:
Show this widget: Enable or disable
Clic "Save".
› Search Box - Mobile
The following documentation configures the "Search Box - Mobile" of the page content for the phone and tablet version. When browsing the page on mobile phones and tablets, this search bar is displayed by clicking on a button in the right header.
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Search Box - Mobile".
- Click on "Edit" and apply the settings below:
Show this widget: Enable or disable
Clic "Save".
› Bar Right
The "Bar Right" section is used to add components of interest that are shown in the right part of the header, such as a button, icons of social networks, etc.
This section contains "Two Main Widgets" that make up a main part of the page, such as the floating menu icon and the icon to show the search bar in the mobile and tablet versions.
In your blogger dashboard
- Go to "Layout".
- Section "Header"
- Widget "Search Button - Mobile".
- Widget "Navigation Menu Right - Avatar".
- Click on "Edit" and apply the settings below:
Show this widget: Enable or disable
Clic "Save".
› Navigation Menu Right
In this section you can add any widget you want, but we recommend adding the list widget, the translator widget, ect. So maintain the order of the page properly. How to add link lists in the right floating navigation menu of the header.
In your blogger dashboard
- Go to "Layout".
- Section "Header"
- Widget "Navigation Menu Right".
- Click on "Edit" and apply the settings below:
Add a Gadget: Pages + Link LIst
+ Add a new item
- Add you: Name
- Add you: URL
Add a Gadget: Translate
Style
◉ Horizontal
Show this widget: Enable or disable
Clic "Save".
› Header Labels List
In the header at the bottom is the "Header Labels List" section with the "Label" widget which shows the labels created in the posts. We are going to show you how the "Label" widget should be configured to show it as we have configured it.
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Header Labels List".
- Click on "Edit" and apply the settings below:
Label sorting
◉ Alphabetically
Display
◉ List
Show number of posts per label: Enable or disable
◉ All Labels
Clic "Save".
◉ Getting Announcement Banner
› Add & edit Announcement banners
Announcement banners let you highlight important information in a clear and customizable way. Add & edit Announcement banners has never been easier to customize.
Add a banner
- In your blogger dashboard.
- Go to "Layout".
- Go to "Announcement banners" > "Banner Content".
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "Text" To add the text.
+ Widget "HTML/JavaScript" To add component codes.
- Click Components →
Customize banner color
- In your blogger dashboard.
- Go to "Theme" > "Customize ▾".
- Or. Go to "Layout" > "Theme Designer".
- Click Tab "Advanced" > Select the option "◑ Announcement Banners".
◉ Getting Side Navigation
› Brading/Logo
Documentation and examples to upload your brand or logo, from the page navigation header.
Add a Brading/Logo
- In your blogger dashboard.
- Go to "Layout".
- Section "Side Navigation" > "Brading/Logo".
- Click on "Edit" and apply the settings below:
Select image by:
◉ Upload image from computer.
Clic: "Choose File"
Image Placement
◉ Instead of title and description
› Side Section
This section is created so that you can add any "Gadget" you want before the "Navigation Menu".
› Navigation Menu
In this section you can add navigation lists as shown in the view. In the documentation we will tell you how to add link lists in the left navigation menu of the header.
Add a Navigation List
- In your blogger dashboard.
- Go to "Layout".
- Section "Side Navigation" > "Navigation Menu"
- Click Edit Widget "Side Nav".
- Click on "Edit" and apply the settings below:
Add a Link LIst
+ Add a new item
- Add you: Name
- Add you: URL
Show this widget: Enable or disable
Clic "Save".
› Subscribe Section
In this section you can add subscriber lists as shown in the view. In the documentation we will tell you how to add subscriber lists.
Add a Subscribe
- In your blogger dashboard.
- Go to "Layout".
- Section "Side Navigation" > "Subscribe Section"
- Click "Add a Gadget".
- Add Widget "Image" and apply the settings below:
Setting Image
- Add you: Caption
- Add you: Link
Select image by:
◉ Upload image from computer.
Clic: "Choose File"
Show this widget: Enable or disable
Clic "Save".
◉ Getting Advertisements Banner
› Add & edit Advertisements banners
Advertisements banners let you highlight important information in a clear and customizable way. Add & edit Advertisements banners has never been easier to customize.
Theme Option
The "Theme Option" you can see how it works in the "Theme Options" section.
Add a banner
- In your blogger dashboard.
- Go to "Layout".
- Go to "Advertisements banners".
Col - Full Wide
Full width column.
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "Text" To add the text.
+ Widget "HTML/JavaScript" To add component codes.
+ Widget "Image" To add the Image.
- Click Components →
Col
Columns of two continuous.
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "Text" To add the text.
+ Widget "HTML/JavaScript" To add component codes.
+ Widget "Image" To add the Image.
- Click Components →
◉ Setting Module
› Module
Display your posts in fancy way with Hero and block element. There are Multiple hero and block styles to choose from and can be customized.
With the "Hero" and "Block" modules, the most important publications can be highlighted on the home page, so that they are the first thing that is displayed on the web page.
These modules can be used anywhere on the page, but we have created sections where they are "Named" with the name of each module where they should be added. The next "Module Sections" to be added are the "Full Wide - ( Hero, Block )" and "Wide - ( Hero, Block )" in an "HTML/JavaScript" widget.
› Steps to add the modules
The modules are placed through a short code line where the name of the module you want to add must be placed.
1. Copy the line of code
2. Change the type "Module Name" to the "Module name".
3. Change the label "Tag Name" to the label of the publications you want to display.
4. Enter the number "Number of posts" of the post that you want to display.
Now go blogger
5. Click on "Layout".
6. Locate the section "Module Section" > "Full Wide" and "Wide".
7. Add a "HTML/JavaScript" gadget.
8. Paste the "Line of Code" and "Save".
Module Hero Name:
- Name: hero01
- Name: hero02 - Two Column
- Name: hero03 - Three Column
- Module Section: Full Wide, Wide
Module BLock Name:
- Name: block01 - Four Column
- Name: block02 - Five Column
- Name: block03 - Six Column
- Module Section: Wide, Full Wide
Line of code
<span type="Module name" label="Tag name" number="Number of posts"/>
◉ Setting Side Post
› Side Section
This section is created so that you can add any "gadgets" you want before and after any other sections that exist.
› Side Blog Post
This is the section that shows the posts related to the tags you have attached to that post. This section cannot, nor! must be! edited. For this reason we have eliminated the edit button so as not to deconfigure this widget.
◉ Setting Theme Option
› General
Like any theme, they all have options that help a better user experience on the page, we have added several options that you can enable or disable according to your interest. To see how these options are enabled and disabled, show us how to do it.
This report works for all the "Theme Option" that were set in the blogger "Layout" dashboard for the theme.
Go to "Dashboard" > "Layout" > "Theme Option", it contains some general configuration options for the following template components.
› Full Boxed:
This option makes the web page "Full boxed" by reducing the entire page to a predetermined size.
To enable "Full Boxed", set this option to "Yes", if you want to disable "No", or simply leave the box empty.
› Preloader:
To disable or enable the "Preloader", go to the "Theme Options - General" and in the preloader click > Edit > enable or disable the box > show; and give to save.
› Scroll Indicator:
To disable or enable the "Scroll Idicator", go to the "Theme Options - General" and in the scroll indicator click > Edit > enable or disable the box > show; and give to save.
› Button Scroll Up:
With this option "show or hide" the button which I can click and return to the top of the page.
To enable this option "Button Scroll Up" place "Yes", if you want to disable Place "No", or simply leave the box empty.
› User Select:
The user select property specifies whether the text of an element can be selected.
In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.
To activate "User select", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
› Module Avatar Profile:
This option "shows or hides" your blogger profile avatar in the templates created for the modules.
› No Thumbnail:
This option "Add, Show or Hide", when the image of the modules is not loaded or is damaged, this image is shown instead, which says that your image does not load, damaged, etc.
To disable or enable the "No Thumbnail", go to the "Theme Options - General" and in the No Thumbnail click > Edit > enable or disable the box > show; and give to save.
› Other
› BGD Upload:
Load the image that will be set as background in that section.
- Go to the "Upload Background".
- Your link.
- click on "choose file", and choose the image you want to upload.
- click "Save".
› BGD Position:
The background-position property sets the starting position of a background image.
Go to Theme Option > "BGD position" > click "Edit" > and set the following properties to the one that suits you best.
Normal: Top | left | right | bottom
Combinations: left top | left center | left bottom | right top | right center | right bottom | center top | center center | center bottom | initial | inherit
Sample of properties working →
Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
› BGD Repeat:
The background-repeat property sets whether / how a background image will be repeated.
By default, a background image is repeated both vertically and horizontally.
Go to Section Options > "BGD Repeat" > click "Edit" > and set the following properties to the one that suits you best.
repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit
Sample of properties working →
Tip: The background image is positioned according to the background position property. If a background position is not specified, the image is always placed in the top left corner of the item.
› BGD Size:
The background-size property specifies the size of the background images.
Go to Section Options > "BGD Size" > click "Edit" > and set the following properties to the one that suits you best.
auto | cover | contain | initial | inherit | length | percentage
Sample of properties working →
› BGD Remove Image:
What this option does is remove the background image of that section that is established by effect. For example: the title box of static Blogger pages, use the first background image that you upload in the post.
› Hide:
This option will hide the section completely from the home page.
To activate "Hide", this option, put "Yes", if you want to deactivate "No", or simply leave the box empty.
› Overlay Opacity:
The "opacity" property sets the opacity level for an element.
The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Go to Theme Option > "Overlay Opacity" > click "Edit" > and set the following properties to the one that suits you best.
0 , 0.0 , 0.1 , 0.2 , 0.3 , ..... to 1.0 or 1 | initial | inherit
› Justify Content Start:
The items are packed flush to each other toward the start edge of the alignment container in the main axis..
Sample of properties working →
› Justify Content Center:
The items are packed flush to each other toward the center of the alignment container along the main axis..
Sample of properties working →
› Justify Content Between:
The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge..
◉ Setting Posts
› Add Video
To insert videos in blogger posts is very easy, since blogger allows you to "Upload Video" or "Insert Video" from youtube. In the following documentation we will show how to do this and how to configure to insert a video from another platform such as Youtube, vimeo, dailymotion, etc.
› Upload Video: 🎞️ Tutorial video →
In your blogger dashboard
- Go to "+ New posts".
- Click "Insert Video" > "Upload from Computer".
- Drag video here
- Or, click on "Choose a video to upload".
- Click the button "Insert".
› Insert Video Youtube: 🎞️ Tutorial video →
In your blogger dashboard
- Go to "+ New posts".
- Click "Insert Video" > "Youtube".
- Click Tab "Seach".
- Search and "Select Video".
- Click the button "Insert".
› Choose a layout.
Size: ◉ X-Large
Alignment: ◉ None
› Add Video External
Inserting videos from external pages like vimeo, dailymotion and positioning it at the top of the post is super easy to do. In the following documentation we will show how to do this and how to configure it to embed a video from another platform in your posts.
› Add Video:
- Go to Video Page "Vimeo, dailymotion, etc".
- Click Share and "Copy Link".
- Replace " <! - You Link Video -> " with your "Link".
- Copy and Paste the "Code Iframe" in the Post.
Vimeo, dailymotion
<iframe src=" <! - You Link Video -> " class="BLOG_video_class" width="100%" height="100%" frameborder="0" allowfullscreen />
› Add Thumbnail Image
Video thumbnail images allow viewers to see a quick snapshot of your video while browsing. Once you've finished uploading or embedding your video, upload a thumbnail image.
In your blogger dashboard
- Go to "+ New posts".
- Click "Insert image" > "Upload from Computer".
- Or, click on "Choose files".
- Click the button "Select".
Thumbnail Image dimension
- Have a resolution of 1280x720 (with minimum width of 640 pixels).
- Be uploaded in image formats such as JPG, GIF, or PNG.
- Remain under the 2MB limit.
- Try to use a 16:9 aspect ratio as it's the most used in YouTube players and previews.
› Post Label Icons
Tags are very important because they help group posts that have to do with that tag on a page "X". On this occasion we have carried out one more function and through specific labels that generates an icon that indicates what type of category it belongs to; Example: video, music, travel, technology, etc.
Use these tags we've created to specify your posts so that the visitor can quickly identify what type of post or category it is.
We will leave all the labels created in alphabetical order, it only remains to copy and paste or write in the label bar of your publication.
Post Label Icons
Android
Animal
Animals
Apple
Applepay
Beer
Bitcoin
Bitcoin
Blogger
Bootstrap
Buildings
Camping
Car
Charity
Chrome
Clothing
Code
Coffee
Communication
Computer
Computers
Construction
Cpanel
Css3
Currency
Deezer
Design
Dj
Djs
Dollar
Dropbox
Edge
Education
Elementor
Ethereum
Euro
Facebook
Finance
Firefox
Fitness
Fontawesome
Game
Gamer
Gamers
Gaming
Gamings
Github
Globe
Google
GooglePlay
Gpay
Health
History
Holiday
Home
Html5
Instagram
Js
Lira
Logistics
Maritime
Marketing
Martini
Mathematics
Medical
Microsoft
Mix
MixDj
Mixs
MixsDjs
Motorcycle
Movie
Movies
Music
Nodejs
Payments
Paypal
Paypal
Playstation
Podcast
Podcasts
Pound
Ruble
Rupee
Security
Shekel
Shopify
Shopping
Sketch
Snapchat
Social
Sound
Soundcloud
Sounds
Sport
Sports
Spotify
Squarespace
Summer
Technology
Telegram
TikTok
Travel
TruckMonster
TruckPickup
Twitter
Video
Whatsapp
Windows
Wix
Won
Wordpress
Xbox
Yen
◉ Setting Pages
› Header Pages Static
This section contains the "Navigation Menu" that is only displayed on "Static Pages", to which you can "Add Link Lists". To add lists as shown on the sample page, follow the instructions below.
Navigation Menu
In your blogger dashboard
- Go to "Layout".
- Section "Header"
- Widget "Navigation Menu".
- Click on "Edit" and apply the settings below:
Add a Gadget: Pages + Link LIst
+ Add a new item
- Add you: Name
- Add you: URL
Show this widget: Enable and disable
Clic "Save".
› Toggle Caption
Editing or add an image in the new Blogger editor now really fun. With the new modern minimalist UI. Changing the image size add a caption, etc.
In this case we have taken "Toggle Caption" and we have made it to use as services, as we have shown. "Click Page". In the following documentation we will show you how to create it and it is quite easy to do it.
Step 1/2
In your blogger dashboard
- Go to"Posts".
- Click Button "+ New Post".
- Click "Insert Image" > "Upload from Computer".
- Click on "Choose files".
- Click the button "Select".
› Choose a layout.
Size ◉ X-Large
Alignment ◉ None
Step 2/2
- Select "Image".
- Click Button "Toggler Caption".
+ Write your text, we recommend keeping it short.
- Select the Image and click the button "Text Background Color".
- Select the Caption and:
+ click the button "Font Text" and apply "Heading".
+ click the button "Text Background Color" and apply color.
+ click the button "Text Color" and apply color.
Add "Discover More" Bellow:
- Go to the end of the "Caption" and write "Discover More".
+ Note: you must be sure that you are typing within four and that the background color of the text lengthens as you type.
- Select text "Discover More".
+ click the button "Font Text" and apply "Large".
+ click the button "Insert or Edit Link" and apply "Link".
◉ Setting Components
› Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
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".
Add a button
- In your blogger dashboard.
- Go to "Layout".
- Locate the section "Header" > "Header Bar".
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "HTML/JavaScript" To add component codes.
- Select Code
Code
<a class="btn btn-primary" href="#" role="button"> Primary </a>
<a class="btn btn-secondary" href="#" role="button"> Secondary </a>
› 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".
Add a Countdown
- In your blogger dashboard.
- Go to "Layout".
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "HTML/JavaScript" To add component codes.
- Select Code
Code
<div class='countdown' data-date="2022-02-22" data-time="19:00"/>
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".
Add a Social Media Icons
- In your blogger dashboard.
- Go to "Layout".
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "HTML/JavaScript" To add component codes.
- Select Code quantity.
- Select "#" and paste you link.
Code
<!-- Add font awesome icons -->
<a href="#" class="fab fa-facebook"/>
<a href="#" class="fab fa-facebook-messenger"/>
<a href="#" class="fab fa-whatsapp"/>
<a href="#" class="fab fa-twitter"/>
<a href="#" class="fab fa-google"/>
<a href="#" class="fab fa-linkedin"/>
<a href="#" class="fab fa-youtube"/>
<a href="#" class="fab fa-instagram"/>
<a href="#" class="fab fa-pinterest"/>
<a href="#" class="fab fa-snapchat-ghost"/>
<a href="#" class="fab fa-skype"/>
<a href="#" class="fab fa-android"/>
<a href="#" class="fab fa-dribbble"/>
<a href="#" class="fab fa-vimeo"/>
<a href="#" class="fab fa-tumblr"/>
<a href="#" class="fab fa-vine"/>
<a href="#" class="fab fa-foursquare"/>
<a href="#" class="fab fa-stumbleupon"/>
<a href="#" class="fab fa-flickr"/>
<a href="#" class="fab fa-yahoo"/>
<a href="#" class="fab fa-reddit"/>
<a href="#" class="fab fa-apple"/>
<a href="#" class="fab fa-behance"/>
<a href="#" class="fab fa-blogger"/>
<a href="#" class="fab fa-bootstrap"/>
<a href="#" class="fab fa-mailchimp"/>
<a href="#" class="fab fa-telegram-plane"/>
› 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".
Add a Tabs
- In your blogger dashboard.
- Go to "Posts" > "Pages".
- Select Code quantity.
- Select "Your Title Here 1" and add a title.
- Select "Your Content Here 1" and add a content.
Code
<!-- Add Tabs -->
<div class='tabs-wrap'>
<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>
› 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.
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.
Add a Video Modal Youtube
- Go to the video on Youtube.
- Click button "Share".
- link the Youtube "https://youtu.be/d7KaOk0v9YQ".
- Copy "d7KaOk0v9YQ".
- Copy Code and add en "Posts or Pages".
Code
<button type="button" class="video-player" data-bs-toggle="modal" data-bs-target="#videoModal" data-video="https://www.youtube.com/embed/ <!-- youtube code. --> "> <!-- text or title here --> </button>
◉ Setting Footer
› Add & Footer
This section of the footer where we will break down the options contained for each of the sections of the footer. Setting up and adding "Gadget" at the bottom of the page is easy. The footer contains a series of continuous columns which orders its content as best suits you and appropriate to the type of page.
Here are two types of samples of how you can sort your content in these columns.
Add a "Gadget"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer"
- Click on "Add a Gadget" in each section.
Show this widget: Enable and disable
Clic "Save".
Col - Wide
Full width column.
You can add "Gadget" you want, it is ordered from "Left to Right" automatically.
Footer Box 01
Continuous Four Column Section.
You can add any "Gadget" you want, it is sorted "next to each other" automatically.
Footer Box 02
Continuous Five Column Section.
You can add any "Gadget" you want, it is sorted "next to each other" automatically.
› Footer Bar
The "Footer Bar" is the bottom bar within the footer which can add "Gadget" of logo, list of links, Copyright, etc., this helps the user to find list of important links, credits, help, copyright, policies , etc.
Theme Option
The "Theme Option" you can see how it works in the "Theme Options" section.
Footer Bar Content
Add a "Gadget"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer" > "Footer Bar" > "Footer Bar Content".
- Click on "Add a Gadget" and we recommend adding these widget:
+ Widget "Text" To add the text.
+ Widget "HTML/JavaScript" To add component codes.
+ Widget "Image" To add the Image.
Show this widget: Enable and disable
Clic "Save".
› Attribution/Copyright
This section is originally from blogger, it is created to show "Attribution / Copyright" of the creators or rights of the page.
Add a "Content"
- In your blogger dashboard.
- Go to "Layout".
- Section "Footer" > "Attribution/Copyright".
- Click on "Edit"and put your description.
Show this widget: Enable and disable
Clic "Save".
◉ Credits
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 davidews.
Page updated
Google Sites
Report abuse