ZapMag post writing styles and common features

We have created a very beautiful and modern Blogger template for you. Many people look for themes for Blogger that support plugins like WordPress. For them, we have created the most modern and powerful plugin-supported template.

Our templates feature more attractive designs and superior features compared to other Blogger template developers, which will appeal to everyone. You can easily get our templates and use them on your Blogger website.

Our templates include many plugins developed by us, which you can easily control. You can turn them on or off anytime or customize them according to your preferences.

Below are some general features of the templates we have created:

Plugins

• Single Page Application
• Progressive Web App
• Live Search
• SafeLink Plugin
• Disable Copy/Paste
• Bookmark Plugin
• Split Post Plugin
• Table of Contents Plugin
• Network Status Plugin
• Font Plugin
• Adsense Plugin
• Anti Adblock
• Contact Form
• Sitemap Plugin
• Pagination
• Dynamic Shortcode

Common Typography

In this section contains content writing styles to show how looks your post.

Paragraph Default

Bangladesh is a South Asian country known for its rich culture and natural beauty. It is bordered by India, Myanmar, and the Bay of Bengal. Famous for the Sundarbans and its Bengal tigers, Bangladesh gained independence in 1971 after a war with Pakistan. Its capital, Dhaka, is a bustling city with vibrant markets and historic landmarks.

Paragraph Indent

Bangladesh is a South Asian country known for its rich culture and natural beauty. It is bordered by India, Myanmar, and the Bay of Bengal. Famous for the Sundarbans and its Bengal tigers, Bangladesh gained independence in 1971 after a war with Pakistan. Its capital, Dhaka, is a bustling city with vibrant markets and historic landmarks.

Paragraph Drop Cap

Bangladesh is a South Asian country known for its rich culture and natural beauty. It is bordered by India, Myanmar, and the Bay of Bengal. Famous for the Sundarbans and its Bengal tigers, Bangladesh gained independence in 1971 after a war with Pakistan. Its capital, Dhaka, is a bustling city with vibrant markets and historic landmarks.

Blockquote

Bangladesh played a key role in the establishment of International Mother Language Day. On February 21, 1952, in Dhaka, students protested to recognize Bengali as an official language, opposing the imposition of Urdu in Pakistan. Several protesters lost their lives, and this event became a symbol of linguistic rights. In 1999, UNESCO declared February 21 as International Mother Language Day to honor this struggle and promote linguistic diversity.

Text Styling

Press Ctrl + C to copy text

Example of Link text

Example of Link new tab text

Example of abbr text

Example of highlight text

Example of deleted text

Example of bold text

Example of italic text

Example of underlined text

Example of _subscripted text

Example of ^{superscripted} text

Button Style

Alert box

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Box designs

Box design contains “Download Card” “Post Card” and Auto Safelink. You can easily add them to your post manually or by shortcode.

Download Card

Add Download Card manually just by some tag code

You can also add Download Card by Dynamic Shortcode. But It's requited to turn on dynamic shortcode plugin. Dynamic shortcode plugin are enabled by default.

Post Card

You can create Post Card design easily just by adding post-card="" attribute to post link. Post Card only applicable for your blog's posts only

Auto Safelink

Auto Safelink can generate link to protect direct download files. you can add auto safelink just by adding data-safe="" attribute. but it's required Safelink Plugin. Safelink plugin are enabled by default.

List items

User can add list items to there blog post. Currently user can add 2 style lists.

List Symbol

• List 1
• List 2
  • Sub List 2.1
  • Sub List 2.2
  • Sub List 2.3
• List 3
• List 4

List Number

1. List 1
2. List 2
   1. Sub List 2.1
   2. Sub List 2.2
   3. Sub List 2.3
3. List 3
4. List 4

List step

• Bangladesh is known for its rich cultural heritage and vibrant traditions.
• The country has made significant strides in economic growth and development over the years.
• Bangladesh is home to the world’s largest mangrove forest, the Sundarbans, which is a UNESCO World Heritage Site.

Table

There are several table styles that you can apply.

Table default

Table wrap

Post Tab

Post Tab are same as the Accordion section but those have several difference in design.

Default Post Tab

Open Post Tab

Accordion

Used to create content that can be closed and opened, there are several accordion functions that you can apply.

Accordion default

Accordion open

Codebox Highlighter

Used to create a syntax highlighter, with the addition of numbered features and copy code.Your code must be parsed before being applied with Syntax Highlighter.

Support wide range of programming language to highlight syntax. See the list below that language currently supported highlighting.

html ssml mathml svg rss xml css javascript json sql php python bash cyamlymlkotlingo

Single codebox

  
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Example HTML Document</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <header>
  <h1>Welcome to My Website</h1>
  <nav>
   <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <section id="home">
   <h2>Home Section</h2>
   <p>This is the home section of the website.</p>
  </section>
  <section id="about">
   <h2>About Section</h2>
   <p>This section contains information about the website.</p>
  </section>
  <section id="contact">
   <h2>Contact Section</h2>
   <p>Here you can find contact information.</p>
  </section>
 </main>
 <footer>
  <p>© 2024 My Website</p>
 </footer>
 <script src="script.js"></script>
</body>
</html>
  

Multi language tab

  
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Example HTML Document</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <header>
  <h1>Welcome to My Website</h1>
  <nav>
   <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <section id="home">
   <h2>Home Section</h2>
   <p>This is the home section of the website.</p>
  </section>
  <section id="about">
   <h2>About Section</h2>
   <p>This section contains information about the website.</p>
  </section>
  <section id="contact">
   <h2>Contact Section</h2>
   <p>Here you can find contact information.</p>
  </section>
 </main>
 <footer>
  <p>© 2024 My Website</p>
 </footer>
 <script src="script.js"></script>
</body>
</html>
  
  
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}
header {
  background-color: #f8f8f8;
  padding: 10px;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
nav ul li {
  display: inline;
  margin-right: 15px;
}
main {
  padding: 20px;
}
footer {
  text-align: center;
  padding: 10px;
  background-color: #f8f8f8;
  position: relative;
  bottom: 0;
  width: 100%;
}
  
  
document.addEventListener("DOMContentLoaded", function() {
  console.log("Document loaded and ready!");
  const navLinks = document.querySelectorAll("nav a");
  navLinks.forEach(link => {
    link.addEventListener("click", function(event) {
      event.preventDefault();
      const sectionId = link.getAttribute("href");
      const section = document.querySelector(sectionId);
      section.scrollIntoView({ behavior: "smooth" });
    });
  });
});
  
  
{
  "title": "My Website",
  "sections": [
    {
      "id": "home",
      "heading": "Home Section",
      "content": "This is the home section of the website."
    },
    {
      "id": "about",
      "heading": "About Section",
      "content": "This section contains information about the website."
    },
    {
      "id": "contact",
      "heading": "Contact Section",
      "content": "Here you can find contact information."
    }
  ]
}