Latest update Android YouTube
Home
Blogger
BlogSpot

Lyric Blogging Template for Blogger with Formate Sample:Complete Guide with Examples

Estimated read time: 180 min
How to Create a Stunning Lyrics Blog Post with Our Custom Template

How to Create a Stunning Lyrics Blog Post with Our Custom Template

Transform your Blogger site with our professional, feature-rich lyrics blog template!

Introduction

Running a music blog on Blogger? Want your lyrics posts to stand out with a consistent, professional, and engaging format? Our custom Lyrics Blog Template is designed to make your posts visually appealing, user-friendly, and packed with features like dynamic credits, YouTube video cards, streaming platform links, and multilingual lyrics support. In this guide, we’ll walk you through the template’s features, explain how it works, and provide the complete HTML code for you to use on your Blogger site.

PostImage | IndinTechnoEra

Why Use Our Lyrics Blog Template?

This template is tailored for music bloggers who want to:

  • Present lyrics in multiple languages (e.g., Urdu, Hindi, Hinglish, English).
  • Display dynamic credits for songs, movies, or poems.
  • Embed YouTube videos for official songs and karaoke versions.
  • Link to streaming platforms with branded icons and colors.
  • Ensure a responsive, mobile-friendly design.
  • Maintain a consistent look across all posts.

Let’s dive into the components and features of this template, using an example song to demonstrate its power.

Template Components

1. HTML Structure

The HTML structure is organized into sections for easy customization:

  • Lyrics Header: Displays the song title prominently with a musical note emoji for flair.
  • Meta Section: Shows metadata (e.g., poet, music label, release date) in a grid layout.
  • Lyrics Sections: Separate sections for lyrics in different languages (Urdu, Hindi, Hinglish, English).
  • Music Player Section: Includes YouTube embeds for official songs and karaoke versions.
  • Streaming Platforms: Links to platforms like Spotify, Apple Music, etc., with dynamic icons.
  • Credits Section: Dynamically generated credits for the song or poem.
  • Additional Sections: Historical significance, musical analysis, and engagement prompts.

2. JavaScript Functionality

The template uses JavaScript to dynamically generate content, reducing manual HTML editing:

  • Dynamic Credits: A JavaScript object (`creditsData`) defines credits (e.g., Movie, Director, Duration). The `generateCredits` function populates these into a grid.
  • Video Cards: Arrays (`lyricsBlogSongs` and `lyricsBlogKaraokes`) store YouTube video IDs and titles. The `createLyricsBlogVideoCard` function generates embed cards.
  • Streaming Platforms: The `songPlatforms` array defines platform names and URLs. The `createPlatformCard` function auto-assigns icons and colors based on platform names.

Example: For credits, you only need to update the `creditsData` object, and the script handles the rest.

3. CSS Styling

The CSS ensures a modern, responsive design:

  • Header and Meta: Centered title with a clean, grid-based meta section.
  • Lyrics Sections: Bordered sections with distinct colors for titles and a readable font size.
  • Video Cards: Scrollable, hover-animated cards with YouTube iframes and captions.
  • Streaming Platforms: Cards with platform-specific colors and icons, scrollable on mobile.
  • Credits: A grid layout that adapts to screen size.
  • Responsive Design: Media queries ensure the layout looks great on desktops and mobiles.

Sample Implementation: "Lab Pe Aati Hai Dua"

Let’s see how the template works with the classic poem "Lab Pe Aati Hai Dua Banke Tamanna Meri" by Allama Iqbal. Below is a preview of how the template renders this song.

Header and Meta

The header displays the title with an emoji, followed by a meta grid showing key details like poet, release, and category.

<div class="lyrics-blog-header-container">
    <h1 class="lyrics-blog-title">🎵 Lab Pe Aati Hai Dua Banke Tamanna Meri - Inspirational Prayer</h1>
</div>
<div class="lyrics-blog-meta">
    <div class="lyrics-blog-meta-grid">
        <div><strong>Poet:</strong> Allama Iqbal</div>
        <div><strong>Release:</strong> 1924 (Bang-e-Dra Collection)</div>
        ...
    </div>
</div>

Lyrics Sections

Lyrics are organized into sections for Urdu, Hindi, Hinglish, and English, each with a unique ID and a colored border for visual distinction.

<section class="lyrics-blog-section" id="urdu">
    <h2 class="lyrics-blog-section-title">🖋️ Urdu Lyrics (نستعلیق)</h2>
    <div class="lyrics-blog-text">
        <p><strong>Chorus</strong><br />
            لب پہ آتی ہے دعا بن کے تمنا میری<br />
            زندگی شمع کی صورت ہو خدایا میری<br />
            ...
        </p>
    </div>
</section>

Music Player and Karaoke

The music player section embeds YouTube videos in scrollable cards. JavaScript dynamically generates these based on the `lyricsBlogSongs` and `lyricsBlogKaraokes` arrays.

<script>
    const lyricsBlogSongs = [
        { id: "VcNlZZ6SVk8", artist: "Various Artists", title: "Traditional Rendition" },
        ...
    ];
    const lyricsBlogKaraokes = [
        { id: "x8y9z0a1b2c", title: "Karaoke Version 1" },
        ...
    ];
</script>

Streaming Platforms

Links to streaming platforms are displayed as cards with auto-generated icons and colors. Update the `songPlatforms` array to add or modify platforms.

<script>
    const songPlatforms = [
        { name: "YouTube Music", url: "https://music.youtube.com/watch?v=VcNlZZ6SVk8" },
        { name: "Spotify", url: "https://open.spotify.com/track/4zX0k4yW2qA9zX2bZPXr6b" },
        ...
    ];
</script>

Credits

The credits section dynamically populates a grid based on the `creditsData` object, making it easy to update song details.

<script>
    const creditsData = {
        "Poem": "Lab Pe Aati Hai Dua Banke Tamanna Meri",
        "Poet": "Allama Iqbal",
        ...
    };
</script>

How to Use the Template

Follow these steps to implement the template on your Blogger site:

  1. Copy the HTML code below.
  2. In Blogger, create a new post and switch to the HTML view.
  3. Paste the code and replace the sample data (e.g., `creditsData`, `lyricsBlogSongs`, `songPlatforms`) with your song’s details.
  4. Customize the lyrics sections by adding your song’s lyrics in the desired languages.
  5. Publish the post and preview it to ensure everything renders correctly.

Complete Template Code

Below is the full HTML template, including scripts and styles. Copy this into your Blogger post and customize the data as needed.

<!-- Lyrics Blog Template -->
<!-- Lyrics Blog Script Open <LyricsBlogScript> -->
<!-- Generate Design for CreditData -->
<script>
//<![CDATA[
const creditsData = {
    "Poem": "Lab Pe Aati Hai Dua Banke Tamanna Meri",
    "Poet": "Allama Iqbal",
    "Collection": "Bang-e-Dra (1924)",
    "Music": "Traditional (Various Artists)",
    "Music Label": "Various",
    "Duration": "Varies (3:00 to 5:00 minutes)"
};

function generateCredits(data) {
    const container = document.getElementById('credits-container');
    container.innerHTML = '';
    for (const [label, value] of Object.entries(data)) {
        const creditItem = document.createElement('div');
        creditItem.className = 'lyrics-blog-credit-item';
        const creditLabel = document.createElement('span');
        creditLabel.className = 'lyrics-blog-credit-label';
        creditLabel.textContent = label + ':';
        const creditValue = document.createElement('span');
        creditValue.className = 'lyrics-blog-credit-value';
        creditValue.textContent = value;
        creditItem.appendChild(creditLabel);
        creditItem.appendChild(creditValue);
        container.appendChild(creditItem);
    }
}

window.addEventListener('DOMContentLoaded', () => {
    generateCredits(creditsData);
});
//]]>
</script>

<!-- Generate Song and Karaokes Video Cards and Platforms -->
<script>
//<![CDATA[
const lyricsBlogSongs = [
    { id: "VcNlZZ6SVk8", artist: "Various Artists", title: "Traditional Rendition" },
    { id: "k3m4n5p6q7r", artist: "School Choir", title: "School Assembly Version" }
];

const lyricsBlogKaraokes = [
    { id: "x8y9z0a1b2c", title: "Karaoke Version 1" }
];

function createLyricsBlogVideoCard(videoId, titleText) {
    return `
        <div class="lyrics-blog-video-card">
            <iframe
                class="lyrics-blog-video-iframe"
                width="280"
                height="185"
                src="https://www.youtube.com/embed/${videoId}?modestbranding=1"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
                title="${titleText}"
            ></iframe>
            <p class="lyrics-blog-video-caption">${titleText}</p>
        </div>
    `;
}

const songsWrapper = document.getElementById('lyrics-blog-songs-wrapper');
lyricsBlogSongs.forEach(song => {
    songsWrapper.innerHTML += createLyricsBlogVideoCard(
        song.id,
        `${song.title}<br><span class="lyrics-blog-artist-name">${song.artist}</span>`
    );
});

const karaokeWrapper = document.getElementById('lyrics-blog-karaoke-wrapper');
lyricsBlogKaraokes.forEach(karaoke => {
    karaokeWrapper.innerHTML += createLyricsBlogVideoCard(karaoke.id, karaoke.title);
});
//]]>
</script>

<script>
//<![CDATA[
const songPlatforms = [
    { name: "YouTube Music", url: "https://music.youtube.com/watch?v=VcNlZZ6SVk8" },
    { name: "Spotify", url: "https://open.spotify.com/track/4zX0k4yW2qA9zX2bZPXr6b" },
    { name: "JioSaavn", url: "https://www.jiosaavn.com/song/lab-pe-aati-hai-dua/Qw4ADwUAXwA" }
];

function getPlatformStyle(platformName) {
    let style = {
        icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/link.svg",
        color: "#666666"
    };
    const platform = platformName.toLowerCase();
    if (platform.includes("apple")) {
        style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/applemusic.svg", color: "#FC3C44" };
    } else if (platform.includes("spotify")) {
        style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/spotify.svg", color: "#1DB954" };
    } else if (platform.includes("youtube")) {
        style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/youtubemusic.svg", color: "#FF0000" };
    } else if (platform.includes("jio") || platform.includes("saavn")) {
        style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/jiosaavn.svg", color: "#0AB463" };
    }
    return style;
}

function createPlatformCard(platform) {
    const style = getPlatformStyle(platform.name);
    return `
        <a href="${platform.url}" 
            target="_blank" 
            rel="noopener noreferrer"
            class="lyrics-blog-platform-card"
            style="--platform-color: ${style.color}">
            <img src="${style.icon}" 
                alt="${platform.name} icon" 
                class="lyrics-blog-platform-icon">
            <span class="lyrics-blog-platform-name">${platform.name}</span>
        </a>
    `;
}

const wrapper = document.getElementById('lyrics-blog-platforms-wrapper');
songPlatforms.forEach(platform => {
    wrapper.innerHTML += createPlatformCard(platform);
});
//]]>
</script>

<!-- Lyrics Blog Style Open <LyricsBlogStyle> -->
<style>
.lyrics-blog-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #eee;
}
.lyrics-blog-title {
    color: #2c3e50;
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.lyrics-blog-meta {
    background-color: #f8f9fa;
    padding: 1.2rem;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 800px;
    color: black;
}
.lyrics-blog-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 0.8rem;
}
.lyrics-blog-meta-grid div {
    padding: 0.3rem 0;
}
.lyrics-blog-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}
#urdu, #hindi, #hinglish, #english {
    border-left: 4px solid blue;
}
.lyrics-blog-section {
    margin: 3rem 0;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.lyrics-blog-section-title {
    color: #e74c3c;
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #ddd;
}
.lyrics-blog-text {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #333;
}
.lyrics-blog-text p {
    margin-bottom: 1.5rem;
}
.lyrics-blog-music-player {
    font-family: Arial, sans-serif;
    max-width: 100%;
    margin: 20px 0;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.lyrics-blog-scroll-container {
    overflow-x: auto;
    padding-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}
.lyrics-blog-items-wrapper {
    display: inline-flex;
    gap: 20px;
    padding: 5px 10px;
}
.lyrics-blog-video-card {
    display: inline-block;
    width: 280px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}
.lyrics-blog-video-card:hover {
    transform: translateY(-3px);
}
.lyrics-blog-video-iframe {
    border: none;
    display: block;
}
.lyrics-blog-video-caption {
    padding: 12px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #444;
    white-space: normal;
    text-align: center;
}
.lyrics-blog-artist-name {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-top: 5px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar {
    height: 6px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}
.lyrics-blog-credits {
    margin: 2.5rem 0;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 10px;
}
.lyrics-blog-credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1.2rem;
}
.lyrics-blog-credit-item {
    display: flex;
    padding: 0.5rem 0;
}
.lyrics-blog-credit-label {
    font-weight: 600;
    color: #2c3e50;
    margin-right: 0.5rem;
    min-width: 100px;
}
.lyrics-blog-credit-value {
    color: #333;
}
.lyrics-blog-platforms {
    margin: 3rem 0;
}
.lyrics-blog-platforms-wrapper {
    display: inline-flex;
    gap: 1.2rem;
    padding: 5px 10px;
}
.lyrics-blog-platform-card {
    display: inline-flex;
    align-items: center;
    min-width: 160px;
    padding: 0.8rem 1.2rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    border-left: 4px solid var(--platform-color);
}
.lyrics-blog-platform-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    color: var(--platform-color);
}
.lyrics-blog-platform-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    object-fit: contain;
}
.lyrics-blog-platform-name {
    white-space: nowrap;
}
@media (max-width: 768px) {
    .lyrics-blog-title {
        font-size: 1.8rem;
    }
    .lyrics-blog-meta-grid {
        grid-template-columns: 1fr;
    }
    .lyrics-blog-section {
        padding: 1rem;
    }
    .lyrics-blog-credits-grid {
        grid-template-columns: 1fr;
    }
    .lyrics-blog-platform-card {
        min-width: 140px;
        padding: 0.7rem 1rem;
    }
    .lyrics-blog-platform-icon {
        width: 20px;
        height: 20px;
    }
}
</style>
<!-- Lyrics Blog Style Close </LyricsBlogStyle> -->

<!-- Lyrics Title -->
<div class="lyrics-blog-header-container">
    <h1 class="lyrics-blog-title">🎵 Lab Pe Aati Hai Dua Banke Tamanna Meri - Inspirational Prayer</h1>
</div>

<!-- Lyrics Meta -->
<div class="lyrics-blog-meta">
    <div class="lyrics-blog-meta-grid">
        <div><strong>Poet:</strong> Allama Iqbal</div>
        <div><strong>Music:</strong> Traditional (Various Artists)</div>
        <div><strong>Release:</strong> 1924 (Bang-e-Dra Collection)</div>
        <div><strong>Music Label:</strong> Various</div>
        <div><strong>Category:</strong> Inspirational | Spiritual | Patriotic</div>
        <div><strong>Language:</strong> Urdu | Hindi | Hinglish | English</div>
        <div><strong>Theme:</strong> Prayer for Enlightenment | Service to Humanity | Righteous Path</div>
        <div><strong>Duration:</strong> Varies (3:00–5:00 minutes)</div>
    </div>
</div>

<!-- Main Lyrics Content -->
<main class="lyrics-blog-main">
    <!-- Urdu Lyrics -->
    <section class="lyrics-blog-section" id="urdu">
        <h2 class="lyrics-blog-section-title">🖋️ Urdu Lyrics (نستعلیق)</h2>
        <div class="lyrics-blog-text">
            <p><strong>Chorus</strong><br />
                لب پہ آتی ہے دعا بن کے تمنا میری<br />
                زندگی شمع کی صورت ہو خدایا میری<br />
                لب پہ آتی ہے دعا بن کے تمنا میری
            </p>
            <p>
                دور دنیا کا مرے دم سے اندھیرا ہو جاے<br />
                ہر جگہ میری چمکتی ہوئی شمع روشنی کرے<br />
                زندگی شمع کی صورت ہو خدایا میری
            </p>
            <p class="lyric-note">Note: This poem is part of Allama Iqbal's "Bang-e-Dra" collection (1924).</p>
        </div>
    </section>

    <!-- Hindi Lyrics -->
    <section class="lyrics-blog-section" id="hindi">
        <h2 class="lyrics-blog-section-title">📜 Hindi Lyrics (देवनागरी)</h2>
        <div class="lyrics-blog-text">
            <p><strong>Chorus</strong><br />
                लब पे आती है दुआ बनके तमन्ना मेरी<br />
                ज़िंदगी शम्मा की सूरत हो खुदाया मेरी<br />
                लब पे आती है दुआ बनके तमन्ना मेरी
            </p>
            <p>
                दूर दुनिया का मेरे दम से अंधेरा हो जाए<br />
                हर जगह मेरी चमकती हुई शम्मा रौशनी करे<br />
                ज़िंदगी शम्मा की सूरत हो खुदाया मेरी
            </p>
        </div>
    </section>

    <!-- Hinglish Lyrics -->
    <section class="lyrics-blog-section" id="hinglish">
        <h2 class="lyrics-blog-section-title">✍️ Hinglish (Romanized)</h2>
        <div class="lyrics-blog-text">
            <p><strong>Chorus</strong><br />
                Lab pe aati hai dua banke tamanna meri<br />
                Zindagi shamma ki surat ho khudaya meri<br />
                Lab pe aati hai dua banke tamanna meri
            </p>
            <p>
                Door duniya ka mere dam se andhera ho jaaye<br />
                Har jagah meri chamakti hui shamma roshni kare<br />
                Zindagi shamma ki surat ho khudaya meri
            </p>
        </div>
    </section>

    <!-- English Translation -->
    <section class="lyrics-blog-section" id="english">
        <h2 class="lyrics-blog-section-title">🌍 English Translation</h2>
        <div class="lyrics-blog-text">
            <p><strong>Chorus</strong><br />
                A prayer rises to my lips as my heart’s desire<br />
                May my life shine like a candle, O my Lord<br />
                A prayer rises to my lips as my heart’s desire
            </p>
            <p>
                May the world’s darkness fade by my breath<br />
                Let my shining candle light up every place<br />
                May my life shine like a candle, O my Lord
            </p>
            <p class="lyric-note">Translation note: This is a poetic interpretation preserving the spiritual essence.</p>
        </div>
    </section>

    <!-- Music Player Section -->
    <section class="lyrics-blog-section" id="lyrics-blog-music-player">
        <section class="lyrics-blog-songs-section">
            <h2 class="lyrics-blog-section-title">🎵 Official Song Versions</h2>
            <div class="lyrics-blog-scroll-container">
                <div class="lyrics-blog-items-wrapper" id="lyrics-blog-songs-wrapper"></div>
            </div>
        </section>
        <section class="lyrics-blog-karaoke-section">
            <h2 class="lyrics-blog-section-title">🎤 Karaoke Versions</h2>
            <div class="lyrics-blog-scroll-container">
                <div class="lyrics-blog-items-wrapper" id="lyrics-blog-karaoke-wrapper"></div>
            </div>
        </section>
    </section>

    <!-- Dynamic Streaming Platforms Section -->
    <section class="lyrics-blog-section" id="lyrics-blog-platforms">
        <h2 class="lyrics-blog-section-title">🎧 Available On</h2>
        <div class="lyrics-blog-scroll-container">
            <div class="lyrics-blog-platforms-wrapper" id="lyrics-blog-platforms-wrapper"></div>
        </div>
    </section>

    <!-- Historical Significance -->
    <section class="lyrics-blog-section">
        <h2 class="lyrics-blog-section-title">📜 Historical Significance</h2>
        <div class="lyrics-blog-text">
            <p>Written by Allama Iqbal in pre-partition India, this poem reflects:</p>
            <ul>
                <li>Iqbal’s vision for youth enlightenment and self-realization ("Khudi")</li>
                <li>A universal prayer for wisdom, compassion, and righteousness</li>
                <li>Balance between spiritual growth and social service</li>
                <li>Patriotism fostering unity and moral strength</li>
            </ul>
            <p><strong>Frequently recited in:</strong></p>
            <ul>
                <li>Pakistan’s Independence Day ceremonies</li>
                <li>Indian school morning assemblies</li>
                <li>Sufi and spiritual gatherings worldwide</li>
                <li>Cultural events celebrating Iqbal’s legacy</li>
            </ul>
        </div>
    </section>

    <!-- Musical Analysis -->
    <section class="lyrics-blog-section">
        <h2 class="lyrics-blog-section-title">🎶 Musical Breakdown</h2>
        <div class="lyrics-blog-text">
            <p><strong>Melody:</strong> Traditional, varies by rendition</p>
            <p><strong>Taal:</strong> Keherwa (8-beat cycle, often used in devotional music)</p>
            <p><strong>Notable Elements:</strong></p>
            <ul>
                <li>Minimalist harmonium or choral accompaniment</li>
                <li>Soft, reverent vocal delivery</li>
                <li>Repetitive structure enhancing meditative quality</li>
                <li>Emotional resonance suited for group recitations</li>
            </ul>
        </div>
    </section>

    <!-- Engagement Section -->
    <section class="lyrics-blog-section">
        <h2 class="lyrics-blog-section-title">💬 Share Your Reflections</h2>
        <div class="lyrics-blog-text">
            <p>Which version resonates most with you? Share your thoughts:</p>
            <ul>
                <li>Do you remember first hearing this in school?</li>
                <li>Which line speaks to your heart?</li>
                <li>How do you interpret Iqbal’s message today?</li>
            </ul>
            <p><em>Suggestions for our next lyrical feature? Comment below!</em></p>
        </div>
    </section>

    <!-- Dynamic Credit Section -->
    <section class="lyrics-blog-section" id="credits-section">
        <h2 class="lyrics-blog-section-title">🎬 Official Credits</h2>
        <div class="lyrics-blog-credits-grid" id="credits-container"></div>
    </section>
</main>

Gist

👉 How to Use?
<!-- Lyrics Title -->
<div class="lyrics-blog-header-container">
<h1 class="lyrics-blog-title">🎵 Aaoge Jab Tum - Romantic Classic</h1>
</div>
<!-- Lyrics Meta -->
<div class="lyrics-blog-meta">
<div class="lyrics-blog-meta-grid">
<div><strong>Movie:</strong> Jab We Met (2007)</div>
<div><strong>Singer:</strong> Kailash Kher</div>
<div><strong>Music:</strong> Pritam</div>
</div>
</div>
<!-- Main Lyrics Content -->
<main class="lyrics-blog-main">
<!-- Thumbnail -->
<section class="lyrics-blog-thumbnail">
<div class="lyrics-blog-thumbnail-container">
<img class="lyrics-blog-thumbnail-img"
alt="Aaoge Jab Tum - Kailash Kher | Romantic Lyrics | Monsoon Song"
src="aaoge-jab-tum-song-cover.jpg" />
</div>
</section>
<!-- Hindi Lyrics -->
<section class="lyrics-blog-section" id="hindi">
<h2 class="lyrics-blog-section-title">📜 Hindi Lyrics (देवनागरी)</h2>
<div class="lyrics-blog-text">
<p><strong>Chorus</strong><br />
अंगना फूल खिलेंगे</p>
</div>
<p class="lyric-note">Note: The sargam portions are typically sung instrumentally in performances</p>
</section>
<!-- Urdu Lyrics -->
<section class="lyrics-blog-section" id="urdu">
<h2 class="lyrics-blog-section-title">🖋️ Urdu Lyrics (اردو)</h2>
<div class="lyrics-blog-text">
<p><strong>Chorus</strong><br />
آؤ گے جب تم، او ساجنا<br />
آنگن پھول کھلیں گے</p>
</div>
</section>
<!-- Hinglish Lyrics -->
<section class="lyrics-blog-section" id="hinglish">
<h2 class="lyrics-blog-section-title">✍️ Hinglish (Romanized)</h2>
<div class="lyrics-blog-text">
<p><strong>Chorus</strong><br />
Angana phool khilenge</p>
</div>
</section>
<!-- English Translation -->
<section class="lyrics-blog-section" id="english">
<h2 class="lyrics-blog-section-title">🌍 English Translation</h2>
<div class="lyrics-blog-text">
<p><strong>Chorus</strong><br />
Flowers will bloom in the courtyard</p>
</div>
<p class="lyric-note">Translation note: Maintains the poetic meter while conveying emotional essence</p>
</section>
<!-- Music Player Section -->
<section class="lyrics-blog-section" id="lyrics-blog-music-player">
<!-- Songs Section -->
<section class="lyrics-blog-songs-section">
<h2 class="lyrics-blog-section-title">🎵 Official Song Versions</h2>
<div class="lyrics-blog-scroll-container">
<div class="lyrics-blog-items-wrapper" id="lyrics-blog-songs-wrapper">
<script>
// Embedded YouTube video IDs, artists, and titles for dynamic generation
const lyricsBlogSongs = [
{ id: "CNZMIhckaA0", artist: "Kailash Kher", title: "Jab We Met Movie Version" },
{ id: "z9X7hS3H4hM", artist: "Kailash Kher", title: "Original Album Version" },
{ id: "9x1c7qX5rE0", artist: "Various Artists", title: "Coke Studio Cover" }
];
</script>
</div>
</div>
</section>
<!-- Karaoke Section -->
<section class="lyrics-blog-karaoke-section">
<h2 class="lyrics-blog-section-title">🎤 Karaoke Versions</h2>
<div class="lyrics-blog-scroll-container">
<div class="lyrics-blog-items-wrapper" id="lyrics-blog-karaoke-wrapper">
<script>
// Embedded YouTube video IDs and titles for karaoke versions
const lyricsBlogKaraokes = [
{ id: "k5f1Z1rV0kY", title: "Karaoke Version 1" },
{ id: "m8n2Z1qX2rU", title: "Karaoke Version 2" }
];
</script>
</div>
</div>
</section>
</section>
<!-- Dynamic Streaming Platforms Section -->
<section class="lyrics-blog-section" id="lyrics-blog-platforms">
<h2 class="lyrics-blog-section-title">🎧 Available On</h2>
<div class="lyrics-blog-scroll-container">
<div class="lyrics-blog-platforms-wrapper" id="lyrics-blog-platforms-wrapper">
<script>
// Music platform name and URLs for dynamic generation
const songPlatforms = [
{ name: "Apple Music", url: "https://music.apple.com/in/album/aaoge-jab-tum/1134725343?i=1134725384" },
{ name: "Spotify", url: "https://open.spotify.com/track/5zX0k4yW2qA9zX2bZPXr6b" },
{ name: "YouTube Music", url: "https://music.youtube.com/watch?v=CNZMIhckaA0" },
{ name: "JioSaavn", url: "https://www.jiosaavn.com/song/aaoge-jab-tum/QQgADwUAXwA" },
{ name: "Amazon Music", url: "https://music.amazon.in/albums/B01I6J7W2Q" }
];
</script>
</div>
</div>
</section>
<!-- Cultural Significance -->
<section class="lyrics-blog-section">
<h2 class="lyrics-blog-section-title">🌧️ Cultural Significance</h2>
<div class="lyrics-blog-text">
<p>This song beautifully captures:</p>
<ul>
<li>The Indian tradition of associating romance with monsoon (sawan)</li>
<li>Sufi elements in contemporary Bollywood music</li>
<li>Classical raga influences in the composition</li>
<li>The anticipation metaphor in Indian love poetry</li>
</ul>
<p><strong>Iconic Performances:</strong></p>
<ul>
<li>Original by Kailash Kher (2005)</li>
<li>Jab We Met movie version (2007)</li>
<li>Live Coke Studio renditions</li>
<li>Frequently covered on singing reality shows</li>
</ul>
</div>
</section>
<!-- Musical Analysis -->
<section class="lyrics-blog-section">
<h2 class="lyrics-blog-section-title">🎶 Musical Breakdown</h2>
<div class="lyrics-blog-text">
<p><strong>Raga:</strong> Based on Raag Desh (monsoon raga)</p>
<p><strong>Taal:</strong> Kaherava (8-beat cycle)</p>
<p><strong>Notable Elements:</strong></p>
<ul>
<li>Harmonium-driven melody</li>
<li>Subtle tabla patterns</li>
<li>Call-and-response sargam sections</li>
<li>Kailash Kher's distinctive vibrato</li>
</ul>
</div>
</section>
<!-- Engagement Section -->
<section class="lyrics-blog-section">
<h2 class="lyrics-blog-section-title">💬 Share Your Memories</h2>
<div class="lyrics-blog-text">
<p>This song evokes:</p>
<ul>
<li>Which version do you prefer - original or movie?</li>
<li>Do you associate this with any personal monsoon memories?</li>
<li>Have you tried singing the sargam portions?</li>
</ul>
<p><em>Which classic Bollywood song should we feature next?</em></p>
</div>
</section>
<!-- Dynamic Credit Section -->
<section class="lyrics-blog-section" id="credits-section">
<h2 class="lyrics-blog-section-title">🎬 Official Credits</h2>
<div class="lyrics-blog-credits-grid" id="credits-container">
<script>
// Credits data for dynamic generation
const creditsData = {
"Movie": "Jab We Met (2007)",
"Release Date": "26 October 2007",
"Music Label": "T-Series",
"Starring": "Shahid Kapoor, Kareena Kapoor",
"Director": "Imtiaz Ali",
"Duration": "4:58 minutes"
};
</script>
</div>
</section>
</main>
view raw LyricsBlogTemplateFinalFormate.html hosted with ❤ by GitHub
<!-- Generate Design for CreditData -->
<script>
//<![CDATA[
function generateCredits(data) {
const container = document.getElementById('credits-container');
// Clear any existing content
container.innerHTML = '';
// Loop through the data and create HTML elements
for (const [label, value] of Object.entries(data)) {
const creditItem = document.createElement('div');
creditItem.className = 'lyrics-blog-credit-item';
const creditLabel = document.createElement('span');
creditLabel.className = 'lyrics-blog-credit-label';
creditLabel.textContent = label + ':';
const creditValue = document.createElement('span');
creditValue.className = 'lyrics-blog-credit-value';
creditValue.textContent = value;
creditItem.appendChild(creditLabel);
creditItem.appendChild(creditValue);
container.appendChild(creditItem);
}
}
// Call the function when the page loads
window.addEventListener('DOMContentLoaded', () => {
generateCredits(creditsData);
});
//]]>
</script>
<!-- Generate Song and Karaokes Video Cards and Platforms -->
<script>
//<![CDATA[
function createLyricsBlogVideoCard(videoId, titleText) {
return `
<div class="lyrics-blog-video-card">
<iframe
class="lyrics-blog-video-iframe"
width="280"
height="185"
src="https://www.youtube.com/embed/${videoId}?modestbranding=1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="${titleText}"
></iframe>
<p class="lyrics-blog-video-caption">${titleText}</p>
</div>
`;
}
// Populate the song section
const songsWrapper = document.getElementById('lyrics-blog-songs-wrapper');
lyricsBlogSongs.forEach(song => {
songsWrapper.innerHTML += createLyricsBlogVideoCard(
song.id,
`${song.title}<br><span class="lyrics-blog-artist-name">${song.artist}</span>`
);
});
// Populate the karaoke section
const karaokeWrapper = document.getElementById('lyrics-blog-karaoke-wrapper');
lyricsBlogKaraokes.forEach(karaoke => {
karaokeWrapper.innerHTML += createLyricsBlogVideoCard(karaoke.id, karaoke.title);
});
//]]>
</script>
<script>
//<![CDATA[
// Auto-generated platform styling (no manual icon/color mapping needed)
function getPlatformStyle(platformName) {
// Default fallback style
let style = {
icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/link.svg",
color: "#666666"
};
const platform = platformName.toLowerCase();
if (platform.includes("apple")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/applemusic.svg", color: "#FC3C44" };
}
else if (platform.includes("spotify")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/spotify.svg", color: "#1DB954" };
}
else if (platform.includes("youtube")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/youtubemusic.svg", color: "#FF0000" };
}
else if (platform.includes("jio") || platform.includes("saavn")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/jiosaavn.svg", color: "#0AB463" };
}
else if (platform.includes("amazon")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/amazonmusic.svg", color: "#00A2ED" };
}
else if (platform.includes("tidal")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/tidal.svg", color: "#000000" };
}
else if (platform.includes("pandora")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/pandora.svg", color: "#005483" };
}
else if (platform.includes("deezer")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/deezer.svg", color: "#FEAA2D" };
}
else if (platform.includes("napster")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/napster.svg", color: "#2D2DFF" };
}
else if (platform.includes("beatport")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/beatport.svg", color: "#A6CE39" };
}
else if (platform.includes("last.fm") || platform.includes("lastfm")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/lastfm.svg", color: "#D51007" };
}
else if (platform.includes("itunes")) {
style = { icon: "https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/itunes.svg", color: "#FB5BC5" };
}
// Add more automatic detection rules as needed
return style;
}
function createPlatformCard(platform) {
const style = getPlatformStyle(platform.name);
return `
<a href="${platform.url}"
target="_blank"
rel="noopener noreferrer"
class="lyrics-blog-platform-card"
style="--platform-color: ${style.color}">
<img src="${style.icon}"
alt="${platform.name} icon"
class="lyrics-blog-platform-icon">
<span class="lyrics-blog-platform-name">${platform.name}</span>
</a>
`;
}
// Insert platforms into DOM
const wrapper = document.getElementById('lyrics-blog-platforms-wrapper');
songPlatforms.forEach(platform => {
wrapper.innerHTML += createPlatformCard(platform);
});
//]]>
</script>
<!-- Lyrics Blog Script Close </LyricsBlogScript> -->
<!-- Stype for lyrics blog headers and main -->
<style>
/* Header Styles */
.lyrics-blog-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #eee;
}
.lyrics-blog-title {
color: #2c3e50;
font-size: 2.2rem;
margin-bottom: 1.5rem;
text-align: center;
}
.lyrics-blog-meta {
background-color: #f8f9fa;
padding: 1.2rem;
border-radius: 8px;
margin: 0 auto;
max-width: 800px;
color: black;
}
.lyrics-blog-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 0.8rem;
}
.lyrics-blog-meta-grid div {
padding: 0.3rem 0;
}
/* Main Content Styles */
.lyrics-blog-main {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
#urdu, #hindi, #hinglish, #english {
border-left: 4px solid blue;
}
/* Thumbnail Styles */
.lyrics-blog-thumbnail {
margin: 2rem 0;
text-align: center;
}
.lyrics-blog-thumbnail-container {
display: inline-block;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.lyrics-blog-thumbnail-img {
max-width: 100%;
height: auto;
display: block;
}
/* Section Styles */
.lyrics-blog-section {
margin: 3rem 0;
padding: 1.5rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.lyrics-blog-section h2, .lyrics-blog-music-player {
color: #2c3e50;
}
.lyrics-blog-section-title {
color: #e74c3c;
font-size: 1.6rem;
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px dashed #ddd;
}
/* Text Styles */
.lyrics-blog-text {
line-height: 1.8;
font-size: 1.1rem;
color: #333;
}
.lyrics-blog-text p {
margin-bottom: 1.5rem;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.lyrics-blog-title {
font-size: 1.8rem;
}
.lyrics-blog-meta-grid {
grid-template-columns: 1fr;
}
.lyrics-blog-section {
padding: 1rem;
}
}
</style>
<!-- Style lyrics-blog-music-player -->
<style>
/* Main Container */
.lyrics-blog-music-player {
font-family: Arial, sans-serif;
max-width: 100%;
margin: 20px 0;
padding: 15px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Section Titles */
.lyrics-blog-section-title {
color: #333;
font-size: 1.4rem;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 2px solid #e1e1e1;
}
/* Scrollable Containers */
.lyrics-blog-scroll-container {
overflow-x: auto;
padding-bottom: 15px;
scrollbar-width: thin;
scrollbar-color: #888 #f1f1f1;
}
/* Items Wrapper */
.lyrics-blog-items-wrapper {
display: inline-flex;
gap: 20px;
padding: 5px 10px;
}
/* Video Cards */
.lyrics-blog-video-card {
display: inline-block;
width: 280px;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.lyrics-blog-video-card:hover {
transform: translateY(-3px);
}
/* Video Iframes */
.lyrics-blog-video-iframe {
border: none;
display: block;
}
/* Video Captions */
.lyrics-blog-video-caption {
padding: 12px;
margin: 0;
font-size: 0.95rem;
line-height: 1.4;
color: #444;
white-space: normal;
text-align: center;
}
.lyrics-blog-artist-name {
display: block;
font-size: 0.85rem;
color: #666;
margin-top: 5px;
}
/* Custom Scrollbars */
.lyrics-blog-scroll-container::-webkit-scrollbar {
height: 6px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
<!-- Style for Credits Section -->
<style>
/* Credits Section */
.lyrics-blog-credits {
margin: 2.5rem 0;
padding: 1.5rem;
background-color: #f8f9fa;
border-radius: 10px;
}
.lyrics-blog-credits-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
margin-top: 1.2rem;
}
.lyrics-blog-credit-item {
display: flex;
padding: 0.5rem 0;
}
.lyrics-blog-credit-label {
font-weight: 600;
color: #2c3e50;
margin-right: 0.5rem;
min-width: 100px;
}
.lyrics-blog-credit-value {
color: #333;
}
/* Responsive Adjustments */
@media (max-width: 600px) {
.lyrics-blog-credits-grid {
grid-template-columns: 1fr;
}
}
</style>
<!-- Style for Platforms Section -->
<style>
/* Platforms Section */
.lyrics-blog-platforms {
margin: 3rem 0;
}
/* Scroll Container */
.lyrics-blog-scroll-container {
overflow-x: auto;
padding-bottom: 15px;
scrollbar-width: thin;
}
/* Platforms Wrapper */
.lyrics-blog-platforms-wrapper {
display: inline-flex;
gap: 1.2rem;
padding: 5px 10px;
}
/* Platform Cards */
.lyrics-blog-platform-card {
display: inline-flex;
align-items: center;
min-width: 160px;
padding: 0.8rem 1.2rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-decoration: none;
color: #333;
font-weight: 500;
transition: all 0.3s ease;
border-left: 4px solid var(--platform-color);
}
.lyrics-blog-platform-card:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
color: var(--platform-color);
}
/* Platform Icon */
.lyrics-blog-platform-icon {
width: 24px;
height: 24px;
margin-right: 10px;
object-fit: contain;
}
/* Platform Name */
.lyrics-blog-platform-name {
white-space: nowrap;
}
/* Custom Scrollbar */
.lyrics-blog-scroll-container::-webkit-scrollbar {
height: 6px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.lyrics-blog-scroll-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.lyrics-blog-platform-card {
min-width: 140px;
padding: 0.7rem 1rem;
}
.lyrics-blog-platform-icon {
width: 20px;
height: 20px;
}
}
</style>
<!-- Lyrics Blog Style Close </LyricsBlogStyle> -->
view raw LyricsBlogTemplateFinalScriptStyle.html hosted with ❤ by GitHub

Conclusion

Our Lyrics Blog Template is a powerful tool for music bloggers on Blogger. It combines a clean design, dynamic functionality, and multilingual support to create engaging, professional lyrics posts. Try it out, customize it for your favorite songs, and let us know how it works for you in the comments!

Happy blogging!

#Blogger #BlogSpot #FormateBlogspot

Post a Comment

Feel free to ask your query...
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.