Jet Theme Blogger Template is the most remarkable free XML template that is available legally free. You do not fall into the lure of creepy links if you want to download this free premium Blogger theme.
Actually, Jet Theme’s developer has made 2 versions of it. A more professional-looking magazine-styled theme is available upon payment- Jet Theme – NewsPaper. The one I am currently using is Jet Theme Blog (a free version).
Also Read : Free Blogger Templates
Jet Theme - NewsPaper version offers more features than the free version. For example, it offers different additional components in layouts for post listing by labels and displaying categories. It also offers various scripts, for example- (so-called) simple safelink script, script for anti boom AdSense clicks, and page view counter script.
However, for bloggers like me and you, the free version of Jet theme is sufficient.
Also Read : Premium Blogger Templates
The Free version is called Jet Theme- Blog. Besides some widgets on the homepage, there are not any compromises on coding, SEO, or user experience in the free version.
The current Free version is Jet Theme version 2.9. This was released on February 28, 2022.
Features of Jet Theme- Blog
- Regularly updated
- No encryption of codes
- Fast-loading
- SEO Friendly
- Support Group (You may read my version of support blogs for Jet Theme)
- Customization of Copyright Section in Footer (You are however expected to provide the link of the developer.)
- High score in web.dev page speed test
- Awesome header and 4-column footer
- Clean and elegant design
- Device responsive
- SVG icons (good for SEO)
- SEO Optimized
- In-post advertisements
- In-post tabulated ‘related posts’
- Custom ‘Contact Us’ page (Currently, this may not be working. However, I have a solution for this. Hence, I would suggest you read Jet theme customization guide below.)
- Custom HTML Sitemap page
- ‘Featured Post’ box on the homepage.
- Beautiful orange, black, white, and orange UI (user interface)
- Freedom of customization of theme
- Pop up of horizontal navigation bar, when scrolled up
- Sticky sidebar widget
- Automated newsletter subscription widget
- Breadcrumb, Meta Tags, Social Share in the posts
- Automatic ‘Table of Content’ in the post
- Beautiful Author Box
- Splendid Related Post Widget
- Customization of the comment system
- ‘Back to Top’ floating button
- Dark Mode
- Search Function
- Social Icons
- Number of comment in Meta Section
Suggested Blogger Template : VTrick Blogger Template.
I can design a custom Blogger-based website (using Jet Theme) for you if you need a helping hand. Otherwise, you can follow official blog, documentation and settings of Jet theme which is in Bahasa Indonesia. Scroll below (and read eagerly) to learn jettheme customization from me.
Customization of JetTheme Blogger Template
You can implement the tricks listed below. However, before proceeding to any update (HTML edit method or Customization method), please remember, to download the backup of the default Jet Theme Blogger Template.
📅 Replacing Post Published Date with Post Updated Date
- In Blogger Dashboard, click 'Theme'.
- Click the dropdown icon located by 'Customize' button.
- From the dropdown menu, click 'Edit HTML'.
- In the theme editor section click 'CTRL+F' and look for data:post.date, and replace all of these with data:post.lastUpdated except the one located within the schema script.
- Click 'Save' icon.
Recommended Article : Blogger Image Border and Shadow Effect
👉 Disabling Auto Table of Content
1. In Blogger Dashboard, click 'Theme'.
2. Load the 'HTML theme editor'.
3. Look for the following code by pressing CTRL+F, and searching the following code.
<Variable name="autoTOC" description="Table of content" type="string" value="true"/>4. Replace true from the code by false.
5. Click 'Save' icon.
Remember, if you want to enable the automatic table of content (autoTOC) again, you can again replace 'false' by 'true' in the same code line.
👉 Turning Collapsible Header to Sticky Header
1. Go to 'HTML theme editor' from Blogger Dashboard > Themes.
2. Look for the following code by pressing CTRL+F, and searching the following code.
.header-animate.header-hidden {transform: translateY(-100%);box-shadow: none !important;}3. Replace transform:translateY(-100%); from the code by transform:translateY(-.1%);.
4. Click 'Save' icon.
Contact Form ✉️
1. Go to your Blogger Dashboard to create/access a contact page.
2. Make sure that you are editing the page in 'HTML view', not 'Compose View'.
3. Copy and paste this code (Opens in new tab.) in the HTML Editor of that page. Replace [email protected] with actual email address where you want the contact form to reach.
4. Now, save and publish the page.
5. You now need to visit the actual page and test the form. You will receive a confirmation-email. Then you need to verify the email address by clicking confirmation link present in the email.
This form system is quite reliable. When someone uses the form to send you a message, they need to confirm reCaptcha. This system will help reduce the spam messages.
Statistics of Posts and Comments 📊
The following script helps you to present the statistics of posts and comments that is especially relevant to put in 'about me/us page'. You may also use this code in HTML Widget in suitable area of Blogger Layout.
1. Open HTML Widget of Blogger Layout or HTML Editor of your relevant Blogger post/page.
2. Copy the following code, paste on the desired location, and save/update the widget (and layout/theme), post or page.
📝 Script for Displaying Statistics of Posts and Comments of Blogger/Blogspot Website (Opens in new tab.)
3. Quite simple right? Now view the page/post, or website where you have kept the code.
Message/Alert Boxes 💬
I have shared CSS and HTML script that I use for displaying blue message box in my blog posts. You can directly use this code in HTML Editor section of your blog post. Please do not edit the CSS part, but put your message within the <p class='bhavananp'> .... </p> part of the script
<style>article .bhavananp{position:relative;padding:20px 30px 20px 50px;background-color:#e1f5fe;color:#01579b;font-size:1rem;font-family:var(--font-body);line-height:1.62em;border-radius:2px}article .bhavananp:before{content:'\2605';position:absolute;left:18px;font-size:20px}@media screen and (max-width: 640px){article .bhavananp {width: calc(100% + 40px);left: -20px;font-size: 1rem;border-radius: 0;}}</style><p class="bhavananp">I am thinking of writing another article on how to approve Google Adsense in blog. If you really wish me to come with that one, please <a href="#reply-title">comment below</a>.</p> Should you be interested; let me share few more HTML/CSS scripts for alert/message boxes.
Installing Multi-device Compatible Favicon 📱
The default favicon installation system in Blogger dashboard is quite limited. Your website may not show favicon in various devices. Hence, I did some research and set the favicon in my blog following the steps as suggested below.
1. Prepare the favicon (PNG file, 182x182 px) and then remove the background only if you need certain areas of the image be transparent.
2. Upload the image to Blogger using the post editor area.
3. Use HTML editing mode in the post editor and copy the link of the image.
4. Open the 'Theme Editor' of Blogger and look for <!-- Favicon -->.
5. Edit the segment as guided in the image below (Please pay attention to the texts in purple). Do not forget to save the template.
With this guide, you will be able to show your own favorite website's favicon in multiple devices. Some SEO gurus say that favicon also plays role in SEO, with visual and graphical branding dimension. Want to believe me? See the image below!
Hence, nobody wants to prevent many devices from displaying your Blogger site's favicon, right? I hope that this guide helped you to some extent even if you are not using Jet theme.
I will be updating this article with more customization tips and tricks from Jet Theme Blogger Template. You can use contact form, posts/comments statistics, and message box also in other Blogger templates like Webium and Median UI. If you have any questions, please comment using the comment section below.
Post a Comment