الصفحة الرئيسية
Code

How to Add Template Information to Your Blogger Post

SSR-TECH

If you're sharing or selling templates on Blogger, adding a "Template Information" section can make your post look professional and informative. Here's how you can do it.

Example Template Information Section

Below is an example of a "Template Information" section. You can customize it according to your needs.

Steps to Add the Section to Blogger

  1. Open Blogger Editor: Log in to your Blogger account and open the post editor for the post you want to add the template information to.
  2. Switch to HTML View: In the Blogger editor, switch to "HTML" mode.
  3. Paste the Code: Copy and paste the above HTML code where you'd like the "Template Information" section to appear.
  4. Customize: Replace the example text (e.g., "DragaManga," "v1.0," etc.) with your actual template details.
  5. Preview and Publish: Preview your post to ensure everything looks correct, then publish it.
 
        <div style="max-width: 400px; margin: 20px auto; font-family: 'Poppins', sans-serif; border: 1px solid #e0e0e0; border-radius: 12px; box-shadow: 0 4px 10px rgba(137, 10, 251, 0.4); overflow: hidden; background: #fff;">
  <div style="background: linear-gradient(90deg, #3912ff, #8c12ff, #3912ff, #8c12ff); text-align: center; padding: 15px; border-radius: 12px 12px 0 0;">
    <h2 style="color: #fff; font-size: 18px; font-weight: bold; margin: 0;">TEMPLATE INFORMATION</h2>
  </div>
  <table style="width: 100%; border-collapse: collapse; text-align: left;">
    <tr>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; font-weight: 500; color: #555;">Template Name</td>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; color: #000;">DragaManga</td>
    </tr>
    <tr>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; font-weight: 500; color: #555;">Version</td>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; color: #000;">v1.0</td>
    </tr>
    <tr>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; font-weight: 500; color: #555;">Price</td>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; color: #000;">0$</td>
    </tr>
    <tr>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; font-weight: 500; color: #555;">Created on</td>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; color: #000;">Aug 2024</td>
    </tr>
    <tr>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; font-weight: 500; color: #555;">Last updated on</td>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; color: #000;">Dec 28</td>
    </tr>
    <tr>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; font-weight: 500; color: #555;">Platform/CMS</td>
      <td style="padding: 12px 15px; border-bottom: 1px solid #e0e0e0; color: #000;">Blogger</td>
    </tr>
    <tr>
      <td style="padding: 12px 15px; font-weight: 500; color: #555;">Developer</td>
      <td style="padding: 12px 15px; color: #000;">SSR TECH</td>
    </tr>
  </table>
</div>

Why Add Template Information?

  • Transparency: Helps users understand what the template offers.
  • Professionalism: Makes your blog posts look polished and well-organized.
  • Trust Building: Users are more likely to download or purchase a template if they see clear details.

Conclusion

Adding a "Template Information" section to your Blogger posts is simple and effective. Use the provided HTML code to enhance your post design and attract more users to your templates.

إرسال تعليق

Code Copied!