Tech Journey With Gagan: Blogger

Showing posts with label Blogger. Show all posts

Saturday, January 4, 2025

How to Add Image Slider in Blogger

For images Link => just normally upload files and copy links and replace with href For Add Slider
Note: After Take Link remove that.

Add In Post

<!-- Slider Start -->
<div class="slider-container">
  <div class="slider">
    <div class="slide active">
      <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrvEOic5BEH8CA3fsaotQy38EBrrpJSkLJcKa9WWCljgt_bOWKutWlgLQYaCEfPxDwhyphenhyphend30gSyBRS8EMscVpIo2miDkgMjmyFABLkybSWGA0pXF0_2X7nchRLwCqPcTqwGNbn8ULm0b9ldh2OI4awp2HdXrio_se_kI7j0oYKuGcfUcC8F6p8_AdaQrss/s1600/favicon-16x16.png" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrvEOic5BEH8CA3fsaotQy38EBrrpJSkLJcKa9WWCljgt_bOWKutWlgLQYaCEfPxDwhyphenhyphend30gSyBRS8EMscVpIo2miDkgMjmyFABLkybSWGA0pXF0_2X7nchRLwCqPcTqwGNbn8ULm0b9ldh2OI4awp2HdXrio_se_kI7j0oYKuGcfUcC8F6p8_AdaQrss/s1600/favicon-16x16.png" alt="Slide 1">
      </a>
    </div>
    <div class="slide">
      <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51C3kv5iNoWOvqDhdub2Jf9UwdOfbYP7-VDJnOECeAlo7XHm2QMdLeBru0bGBdp6pqvvl9gcKJrVVGmKVmbY4CbcAJTW2qe9RAuvUEQOOTFlBozlbAhNinu9fnDWulA2u2zj536RRhnPrgFFagpEJraXifRVAJ222KG8JH6__S7DMiN_3wajONku79Q8/s320/DALL%C2%B7E%202025-01-04%2018.57.19%20-%20A%20highly%20professional%20and%20creative%20favicon%20design%20for%20a%20tech%20blog%20titled%20'Tech%20Journey%20with%20Gagan'.%20The%20icon%20should%20include%20futuristic,%20sleek%20design%20e.webp" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51C3kv5iNoWOvqDhdub2Jf9UwdOfbYP7-VDJnOECeAlo7XHm2QMdLeBru0bGBdp6pqvvl9gcKJrVVGmKVmbY4CbcAJTW2qe9RAuvUEQOOTFlBozlbAhNinu9fnDWulA2u2zj536RRhnPrgFFagpEJraXifRVAJ222KG8JH6__S7DMiN_3wajONku79Q8/s320/DALL%C2%B7E%202025-01-04%2018.57.19%20-%20A%20highly%20professional%20and%20creative%20favicon%20design%20for%20a%20tech%20blog%20titled%20'Tech%20Journey%20with%20Gagan'.%20The%20icon%20should%20include%20futuristic,%20sleek%20design%20e.webp" alt="Slide 2">
      </a>
    </div>
    <div class="slide">
      <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1W6midCPvNrelt7oTHMLDA8AI954egeJq3duKntN4IZbb4WMrz6wKXKvsKqkhLIgU724ZcJC6Ny0UdsUcnQDi-HOisuizP6I83zR5hZD3dee5XA4W5B_sD7SoQniBY_WB7qWq5UrSSD7MJ2jgo63yXqF1c30L4XdqKqQ7Ot6tZ_dXacbJzagHEYZ9VQE/s1600/favicon-32x32.png" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1W6midCPvNrelt7oTHMLDA8AI954egeJq3duKntN4IZbb4WMrz6wKXKvsKqkhLIgU724ZcJC6Ny0UdsUcnQDi-HOisuizP6I83zR5hZD3dee5XA4W5B_sD7SoQniBY_WB7qWq5UrSSD7MJ2jgo63yXqF1c30L4XdqKqQ7Ot6tZ_dXacbJzagHEYZ9VQE/s1600/favicon-32x32.png" alt="Slide 3">
      </a>
    </div>
  </div>
  <button class="prev" onclick="moveSlide(-1)">❮</button>
  <button class="next" onclick="moveSlide(1)">❯</button>
</div>
<!-- Slider End -->

Go To Theme ==> Click Customize Drop Down ==> Click Edit HTML ==> Add Below Code Before Body Closing Tag

CSS And JavaScript Code

  <!-- Slider Styles -->
<style>
  .slider-container {
    position: relative;
    max-width: 800px;
    margin: auto;
    overflow: hidden;
  }

  .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .slide {
    min-width: 100%;
    transition: opacity 0.5s ease-in-out;
  }

  .slide img {
    width: 100%;
    border-radius: 10px;
  }

  .prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
  }

  .prev {
    left: 10px;
  }

  .next {
    right: 10px;
  }

  .prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

  .slide:not(.active) {
    display: none;
  }
</style>

<!-- Slider Script -->
<script>
  let currentSlide = 0;
  const slides = document.querySelectorAll('.slide');

  function showSlide(index) {
    slides[currentSlide].classList.remove('active');
    currentSlide = (index + slides.length) % slides.length;
    slides[currentSlide].classList.add('active');
  }

  function moveSlide(step) {
    showSlide(currentSlide + step);
  }
</script>

Note: Some Time It is not working properly because of html parser than you need to first convert html parser code than put in textarea.

Friday, January 3, 2025

How to hide navbar and footer of blogger

navbar (showing at top):

Footer:

Here I am trying to hide using below steps:

Go To Theme ==> Click Customize Drop Down ==> Click Edit HTML ==> Add Below Css Code

Code Snippet

#Attribution1 {

    display: none !important;

    visibility: hidden !important;

}

#navbar {

    display: none !important;

    visibility: hidden !important;

}



#b-navbar {

    display: none !important;

    visibility: hidden !important;

}

Wednesday, January 1, 2025

How to add input box with copy to Clipboard Functionality in Blogger

For Title Change => Code Snippet
For Input Add Content in TextArea Tag

Add In Post

<div class="code-container">
  <div class="code-header">
    <h3>Code Snippet</h3>
    <button class="copy-button" data-target="code-content">
      Copy Code
    </button>
  </div>
  <textarea id="code-content" class="code-block" rows="10" cols="50" readonly>
<!-- Paste your HTML, CSS, or JS code here -->
<div class="example">
  <h1>Hello World</h1>
  <p>This is a sample HTML code.</p>
</div>
  </textarea>
  <div id="new-toast" class="new-toast"></div>
</div>

Go To Theme ==> Click Customize Drop Down ==> Click Edit HTML ==> Add Below Code Before Body Closing Tag

CSS And JavaScript Code

  <style>
        .code-container {
            position: relative;
            background: #ffffff;
            border: 1px solid #dcdcdc;
            border-radius: 8px;
            padding: 10px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 8px;
            border-bottom: 1px solid #eaeaea;
        }

        .code-header h3 {
            margin: 0;
            font-size: 1.2rem;
            font-family: system-ui;
            font-weight: 700;
            color: #333;
        }

        .copy-button {
            background-color: transparent;
            border: 1px solid #dcdcdc;
            border-radius: 4px;
            cursor: pointer;
            padding: 5px;
            transition: background-color 0.3s ease, border-color 0.3s ease;
            display: flex;
            align-items: center;
        }

        .copy-button:hover {
            background-color: #f9f9f9;
            border-color: #ccc;
        }

        .copy-button.copied {
            background-color: #28a745;
            border-color: #28a745;
            color: #fff;
        }

        .copy-icon {
            width: 18px;
            height: 18px;
            color: currentColor;
        }

        .code-block {
            padding: 10px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: #333;
            overflow-x: auto;
            margin-top: 10px;
        }

        .new-toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: white;
            padding: 12px 20px;
            font-size: 1rem;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0s 0.5s;
            z-index: 9999;
        }

        .new-toast.show {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.5s ease;
        }

        .new-toast.success {
            background-color: #28a745;
        }

        .new-toast.error {
            background-color: #dc3545;
        }

        .new-toast.info {
            background-color: #17a2b8;
        }
    </style>

 <script>
        document.addEventListener("DOMContentLoaded", function () {
            const copyButtons = document.querySelectorAll('.copy-button');
            
            copyButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const targetId = button.getAttribute('data-target');
                    copyCode(targetId, button);
                });
            });
        });

        function copyCode(contentId, button) {
            const content = document.getElementById(contentId);
            content.select();
            content.setSelectionRange(0, 99999); // For mobile devices

            try {
                document.execCommand("copy");
                showToast("Code copied to clipboard!", "success");
                button.classList.add("copied");
            } catch (err) {
                console.error("Failed to copy", err);
                showToast("Failed to copy the code!", "error");
            }

            setTimeout(() => button.classList.remove("copied"), 2000);
        }

        function showToast(message, type = "info") {
            const toast = document.getElementById("new-toast");
            toast.textContent = message;
            toast.classList.add("show", type);

            setTimeout(() => toast.classList.remove("show", type), 3000);
        }
    </script>

Note: Some Time It is not working properly because of html parser than you need to first convert html parser code than put in textarea.

Tech Journey With Gagan

Saturday, January 4, 2025

How to Add Image Slider in Blogger

Add In Post

CSS And JavaScript Code

Friday, January 3, 2025

How to hide navbar and footer of blogger

navbar (showing at top):

Footer:

Here I am trying to hide using below steps:

Go To Theme ==> Click Customize Drop Down ==> Click Edit HTML ==> Add Below Css Code

Code Snippet

Wednesday, January 1, 2025

How to add input box with copy to Clipboard Functionality in Blogger

Add In Post

CSS And JavaScript Code

🚀 Agentic Framework 1.0 in .NET: The Power Combo of Semantic Kernel + AutoGen

Labels

Saturday, January 4, 2025

How to Add Image Slider in Blogger

Add In Post

CSS And JavaScript Code

Friday, January 3, 2025

How to hide navbar and footer of blogger

navbar (showing at top):Footer: Here I am trying to hide using below steps:

Go To Theme ==> Click Customize Drop Down ==> Click Edit HTML ==> Add Below Css Code

Code Snippet

Wednesday, January 1, 2025

How to add input box with copy to Clipboard Functionality in Blogger

Add In Post

CSS And JavaScript Code

🚀 Agentic Framework 1.0 in .NET: The Power Combo of Semantic Kernel + AutoGen

navbar (showing at top):

Footer:

Here I am trying to hide using below steps: