🤗 davidews Doc
Say hello to the new video Blogger Theme. A comprehensive knowledge documentation to help find solutions.
Davidews - Video Blogger Theme.
New modern Responsive Video Blogger theme developed for video websites.
Theme Settings Categories
Detailed information about how to set up your theme. Browse the different available categories in the knowledge base.
◉ Release notes
… Changelog
Latest version! | Update v1.3 | January 16, 2023
❑ Version 1.3 { January 16, 2023 }
❑ New
+ New Module Block04
+ New effects hover, active y focus, on all page.
+ New like and dislike buttons.
+ New visitor counter.
+ The theme automatically recognizes the embed.
+ You can embed any video embed.
❑ Renewed
+ The complete design has been renewed.
+ The rounded border was applied throughout the theme.
+ Light and dark color changes.
+ Redesigned the posts page.
+ Redesign of the share box
❑ Improvements
+ Improved layout panel Blogger's.
+ Improved Side Navigation.
+ Improved Right Navigation Menu.
+ Improved Search Box.
+ Improved Header Labels List.
+ Improved Announcement Banner.
+ Improved Advertisements Banner.
+ Improvement in the module section.
+ Improvement in the "Hero and Block" modules.
+ Improved typography and size.
+ Improved Comment box, comments and reply to comments.
+ Improved metadata ordering
+ Improved side post.
+ Improved performance of cell phones, tablets and computers.
+ Improved adaptation to mobile devices.
+ Improved description show more less.
❑ Updated
+ bootstrap css - Latest "v5.2.3".
+ bootstrap icon css - Latest "v1.9.1".
+ font awesome css - Latest "v6.2.1".
+ popper js - Latest "v2.11.6".
+ bootstrap js - Latest "v5.2.3".
❑ Version 1.1 { December 01, 2021 }
❑ Fixed
+ bug with "PageLista" widget preventing theme installation.
… Update Issues
Before You Update:
We strongly recommend that you follow these few steps procedure before you update Elian theme.
1- Make backups
You should backups on a regular basis to avoid any issues while updating and avoid those situations, you’re dealing with the potential loss of all or some of your Blogger site. Updates are always tested on our end but unfortunately we are not able to guarantee that there won’t be any issues with some specific environments. Read more about backing up your site here.
Make backups the Theme
- Go to Dashboard.
- Click on "Theme".
- Click next to customize "▾".
- Click "Backup".
- Click on "Download Button".
- Click on "Save".
Make backups the Demo Content
- Go to Dashboard.
- Click on "Settting".
- Locate Manage Blog.
- Click "Back up content".
- Click on "Download Button".
- Click on "Save".
2- Read the Release Notes before updating
We strongly recommend you to read the Release Notes article before making an update to the new version. These may include instructions and information to help you decide if you should update now or wait.
3- Test updates on a staging site first
We recommend that you test the new updated versions of the theme on a temporary site to avoid problems, situations and losses on your page.
◉ Setting Started
… About theme
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.
… Blogger information
… Theme downloading
Download Theme files from ThemeForest by going to the Downloads tab and finding Davidews Theme. The main file contains everything.
1. Go to The Downloads Pages.
2. Click on the Download button.
3. All files & documentation.
Below is the full list of what files are included in the downloaded files:
1. Theme folder;
2. Support Center folder;
3. Documentation folder;
4. Others.
4.0 Layout Panel
4.1 Make backups
… Setting Blog Posts
Go to Dashboard
click "Layout" in to section > "Main Page Body" > "Page Body" > "Blog Posts" > click "Edit".
To keep the configured order, you must enable and order it.
Recommendation: for this topic it is better not to enable these options to leave it as it is in the demo. but that is up to you if you want to show some of these options.
Options
- Show author:
- Show publish time
- Show comment Count
- Show labels
- Show email post link
- Show share buttons
- Show location
- Show author profile
Post Title
In the "Post Title" the post widgets are arranged in rows.
Arrange items
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".
◉ Theme Installation
… Manual Theme Installation (Recommended)
Purchase file.
- Unzip the file "Document zip".
- Go to Localice "DavidewsTheme" > "All Theme" > "choose the theme" > Select "XML".
- Right click and open it with a text editor (Notepad or something like that).
- Right click on "Select All".
- Right click on "Copy".
Go to Dashboard
- click on "Theme".
- click next to customize "▾".
- click "Edit HTML".
- Select all the code.
- replace for the code of the chosen theme.
- click "Save".
… Automatically Theme Installation
Go to Dashboard
- click on "Theme".
- click next to customize "▾".
- click "Restore".
- click on "Upload".
In your shopping folder.
- Unzip the file "Document zip".
- Go to Localice "DavidewsTheme" > "All Theme" > "choose the theme".
- Select the document XML.
- and click on "Open".
Auto load theme.
… Demo installation
Access your blog dashboard.
- click "Settings".
- on Manage Blog click "Import Content".
- click in Active "Automatically publish all imported posts and pages.".
- click in "Import".
In your shopping folder.
- Unzip the file "Document zip".
- Go to Localice "DavidewsTheme" > "All Theme" choose the theme > "Demo Content".
- Select the document XML.
- and click on "Open".
Content starts loading automatically
… Theme updating
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.
… Theme licenses
When purchasing Davidews Theme from ThemeForest, you have two licensing options. The Regular License, and the Extended License. The billing, licensing terms and process is purely handled by Envato (the company who owns ThemeForest), and we have no control over these aspects. To learn more about what each License is for and which one to purchase, continue reading below.
There are two types of theme licenses you can purchase from Envato: Regular license and Extended license:
Regular License
A regular license allows you to use the theme to create a unique end product (unique website) for yourself or a client. A domain is considered only the top level domain, you can activate the regular license on multiple subdomains of that domain, for example if you activate the theme on this domain www.farydemo.com:
www.farydemo.com – valid
staging.farydemo.com – valid
farydemo.com/staging – valid
whatever.farydemo.com/mysite – valid
abc.com – new license is required
staging.abc.com – new license is required
123.4.0.0 – new license is required
One license is valid for one domain only. If you want to use the theme on another domain, then you have to purchase another license.
Extended License
Allows you to activate the theme on any domain and local/staging environment.
License Specifications
Further reading about license specifications on Envato market »
◉ Header
… Branding/Logo
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Branding".
- Click on "Edit" and apply the settings below:
Steps to upload
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
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
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Search Box".
- Click on "Edit" gadget "Search Blog" and apply the settings below:
Show this widget: Enable or disable
Clic "Save".
… Search Box - Mobile
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Search Box - Mobile".
- Click on "Edit" gadget "Search Blog" and apply the settings below:
Show this widget: Enable or disable
Clic "Save".
… Header Bar
In your blogger dashboard, "Edit Gadget"
- Go to "Layout".
- Section "Header" > "Header Bar".
- Widget "Search Button - Mobile": - Show or hide search button
- Widget "Author Avatar". - Shows or hides the author's avatar.
- Click on "Edit" and apply the settings below:
In your blogger dashboard, "Add Components, Gadget, Etc."
- Go to "Layout".
- Section "Header" > "Header Bar".
- Click on "Add a Gadget"
- Add Gadget "HTML/JavaScript" for "Components".
- Between! other components. The section components explains how they are added.
Show this widget: Enable or disable
Clic "Save".
… Navigation Menu - Right
In your blogger dashboard
- Go to "Layout".
- Section "Header" > "Navigation Menu - Right".
- Click on "Add Gadget":
Gadget Link LIst
+ Add a new item
- Add you: Name
- Add you: URL
Gadget Translate
Style
◉ Horizontal
Show this widget: Enable or disable
Clic "Save".
◉ Header Labels
… Header Labels List
In your blogger dashboard
- Go to "Layout".
- Section "Header Labels List" > "Labels List".
- Click on "Edit" Gadget and apply the settings below:
Label sorting
◉ Alphabetically
Display
◉ List
Show number of posts per label: Enable or disable
◉ All Labels
Clic "Save".
◉ Banners & Box
… Announcement Banner
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 →
◉ Side Navigation
… Branding/Logo
In your blogger dashboard
- Go to "Layout".
- Section "Side Navigation" > "Brading/Logo".
- Click on "Edit" and apply the settings below:
Steps to upload
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".
… Side Section
In your blogger dashboard
- Go to "Layout".
- Section "Side Navigation" > "Side Section".
- Click on "Add a Gadget".
… Navigation Menu
In your blogger dashboard
- Go to "Layout".
- Section "Side Navigation" > "Navigation Menu"
- Click on "Edit" Gadget 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".
… Subscribe Section
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".
◉ Banners & Box
… Advertisements Banner
In your blogger dashboard
- Go to "Layout".
- Section "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 →
◉ Modules Section
… Modules
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
- Name: block04 - Six Column - Nuevo
- Module Section: Wide, Full Wide
Line of code
<span type="Module name" label="Tag name" number="Number of posts"/>
---
Module Cloud Library: Go to page
◉ Aside Post
… Side Section
In your blogger dashboard
- Go to "Layout".
- Section "Side Post" > "Side Section".
- Click on "Add a Gadget".
… 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.
◉ Theme Options
… Option General
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.
Content Protection:
With this option you will prevent the user from selecting any text and image on the page.
To activate "Content Protection", 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.
… Option Setions
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 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 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.
Hide Section:
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.
… Option Latest Posts
Hide Section:
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.
… Option Page Title
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 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.
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
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.
… Option Footer
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..
◉ Video Blogger Information
… Important information
Images and Embed, the page will automatically recognize them and display them in the appropriate parts of the page. For the page to recognize where to send the image, video embed and chat embed, you must place it in the following way.
1. Image
The image must go first, because all the widgets that show it will recognize it as the first element.
2. Video
The video embed should go second, because the page will recognize that it is the element that will be displayed at the top.
3. Chat
The embed of the chat should go third, because the page will recognize that it is the element that will be displayed on the side of the posts.
… 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, PNG or WEBP - (Recommended).
- 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
◉ Add Video Blogger
… Upload 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
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
▶ HTML Video
… Video
In your blogger dashboard
- Go to "Youtube" and Search Video.
- copy .MP4 link, where it is hosted. "... html/mov_bbb.mp4".
- Paste the link on " <-- You link --> ".
Video
<video controls autoplay>
<source
src=" <-- You link --> "
type="video/mp4">
</video>
- Copy and Paste the "Code" in the Post.
- Add your description and image.
- Publish
▶ Youtube
… Video
In your blogger dashboard
- Go to "Youtube" and Search Video.
- Copy the browser link ID "... youtube.com/watch?v=evyjEgZYvK4".
- Paste the ID on " <-- You ID --> ".
Video
<iframe
class="main_video"
src="https://youtube.com/embed/ <-- You ID --> "
allowfullscreen>
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
… Video Live
In your blogger dashboard
- Go to "Youtube" and Search Video.
- Copy the browser link ID "... youtube.com/watch?v=evyjEgZYvK4".
- Paste the ID on " <-- You ID --> " and live chat.
- Copy the link to your page and pages on " <-- You page --> "
- Example: "example.com"
Video / Live
<iframe
class="main_video"
src="https://youtube.com/embed/ <-- You ID --> "
allowfullscreen>
</iframe>
Chat
<iframe
class="side_chat"
src="https://www.youtube.com/live_chat?v= <-- You ID -->
&embed_domain= <-- You page --> ">
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
… PlayList
In your blogger dashboard
- Go to "Youtube".
- If it’s your own playlist: Go to the left-hand menu. Under Library, click the playlist to get to the playlist page.
- If it’s someone else’s playlist: Go to their channel page and then Playlists tab. Click VIEW FULL PLAYLIST.
- Copy the browser link ID "... youtube.com/playlist?list=PLh4eKdF3SSxvHWL28-ZUwDx7hO19wJ18A".
- Paste the ID on " <-- You ID --> ".
Embed Playlist
<iframe
class="main_video"
src="https://www.youtube.com/embed/videoseries?list= <-- You ID --> "
allowfullscreen>
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
▶ Vimeo
… Video
In your blogger dashboard
- Go to "Vimeo" and Search Video.
- Copy the browser link ID "... vimeo.com/773140243".
- Paste the ID on " <-- You ID --> ".
Video
<iframe
class="main_video"
src="https://player.vimeo.com/video/ <-- You ID --> "
allowfullscreen>
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
▶ dailymotion
… Video
In your blogger dashboard
- Go to "dailymotion" and Search Video.
- Copy the browser link ID "... dailymotion.com/video/x8ggh2y".
- Paste the ID on " <-- You ID --> ".
Video
<iframe
class="main_video"
src="https://www.dailymotion.com/embed/video/ <-- You ID --> "
allowfullscreen>
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
▶ Twitch
… Video
In your blogger dashboard
- Go to "Twitch" and Search the video.
- Copy the browser link ID "... twitch.tv/videos/1684402453".
- Paste the ID on " <-- You ID --> ".
- Copy the link to your page and pages on " <-- You page --> "
- Example: "example.com"
Video Live
<iframe
class="main_video"
src="https://player.twitch.tv/?video= <-- You ID -->
&parent= <-- You page --> "
llowfullscreen>
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
… Video Live
In your blogger dashboard
- Go to "Twitch" and Search Channel.
- Copy channel name "... twitch.tv/callofduty".
- Paste the channel name on " <-- You Channel Name --> " and live chat.
- And if it is a live video, insert the chat, using the same code.
- Copy the link to your page and pages on " <-- You page --> "
- Example: "example.com"
Video Live
<iframe
class="main_video"
src="https://player.twitch.tv/?channel= <-- You channel name -->
&parent= <-- You page --> "
allowfullscreen>
</iframe>
Chat
<iframe
class="side_chat"
src="https://www.twitch.tv/embed/ <-- You channel name -->
/chat?parent= <-- You page --> ">
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
… Collection
In your blogger dashboard
- Go to "Twitch" and Search collection the Channel.
- Copy the browser link ID "... twitch.tv/collections/mgvbG_R9LRfeRA".
- Paste the ID on " <-- You ID --> ".
- Copy the link to your page and pages on " <-- You page --> "
- Example: "example.com"
Video Live
<iframe
class="main_video"
src="https://player.twitch.tv/?collection= <-- You ID -->
&parent= <-- You page --> "
allowfullscreen>
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
… Video
In your blogger dashboard
- Go to "Facebook" and Search the video.
- Click on video to play
- Copy link the browser" https://www.facebook.com/farycreate/videos/713473433686348 ".
- Paste the link on " <-- You LINK --> ".
Video Live
<iframe
class="main_video"
src="https://www.facebook.com/plugins/video.php?
href= <-- You LINK --> "
allowfullscreen>
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
▶ Google Drive
… Video
In your blogger dashboard
- Go to "Google Drive" and Search the video.
- Click right "Get Link or Share" or double click
- Click on the button " ⁝ " and click "open in new windows"
- Click on the button " ⁝ " and click "Embed item..."
- Copy the Iframe URL " https://drive.google.com/file/d/1Y-XwehfdImCzpug0HuQ-qDMhs1z8k3ii/preview "
- Paste the link on " <-- You LINK --> ".
Video
<iframe
class="main_video"
src=" <-- You LINK --> "
allowfullscreen>
</iframe>
- Copy and Paste the "Code Iframe" in the Post.
- Add your description and image.
- Publish
◉ Blog Pages
… Header Pages Static
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
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".
◉ Elements
… Shortcodes
› 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>
◉ Footer
… Footer
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
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".
… Attribution/Copyright
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".
◉ Others
… 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.
Free plugins (libraries):
- jQuery
Tutorials plugin / Free design resources:
- dte.web
- Freepik
- Unsplash