How To Add A Popup With Chart To Your Blogger Website.

Facebook Twitter Email Whatsapp

This popup notification is good to go if you want to make certain anouncements, redirect vistors or reveal some information to your blog visitors. 

You can choose to use it to communicate whatever you want visitors to know. This HTML file is fully responsive and fully customizable. You can add the code as blog post or create a page for it or add it as your blogger layout. Visitors upon clicking on it will have the popup message displayed before them.

Copy this code from style to script and paste it into your blogger. watch the video if you don't know how go about 

<style>

  .popup-container {

  width: 600px;

  background: #edf6f9;

  position: fixed;

  left: 50%;

  top: 50%;

  transform: translate(-50%, 0%);

  font-family: "Raleway", sans-serif;

  padding: 8px 32px;

  border-radius: 8px;

  box-shadow: 0 4px 20px -8px rgba(0, 0, 0, 0.3);

  padding-bottom: 20px;

  opacity: 0;

  pointer-events: none;

  transition: all 500ms cubic-bezier(0.07, 0.71, 0.3, 1.2);

}

.popup-container.active {

  transform: translate(-50%, -50%);

  opacity: 1;

  pointer-events: auto;

}

.popup-container .chart-container {

  width: 300px;

}

.popup-container .popup-content {

  display: flex;

}

.popup-container .close-btn {

  width: 30px;

  position: absolute;

  right: 24px;

  top: 24px;

  transition: all 100ms ease;

  cursor: pointer;

}

.popup-container .close-btn:hover {

  transform: scale(1.2);

}

.popup-container h3 {

  font-size: 30px;

  font-weight: 900;

  text-align: center;

  text-transform: uppercase;

  color: #24213d;

  margin: 16px 0;

}

.popup-container .popup-details {

  font-weight: 700;

  line-height: 2;

  color: #24213d;

  border-left: 1px solid #9f96f1;

  padding-left: 20px;

  align-self: center;

}

.stats-btn {

  padding: 12px 24px;

  background: #24213d;

  color: #fff;

  border: none;

  border-radius: 8px;

  font-size: 20px;

  cursor: pointer;

}

@media (max-width: 720px) {

  .popup-container .popup-content {

    flex-direction: column;

    align-items: center;

  }

  .popup-container {

    width: 80%;

  }

  .popup-container .close-btn {

    top: -20px;

    right: 0;

    background: #24213d;

    padding: 2px 4px;

  }

}

</style>

 CLICK HERE👇👇👇

<button class="stats-btn">🌹🌹🌹ANNOUCEMENT! ANNOUNECMENT!! ANNOUNCEMENT!!!🌹🌹</button>

    <div class="popup-container">

      <h3>Changing ghoGlobal to PauTecom Web</h3>

      <div class="popup-content">

        <div class="chart-container">

          <canvas id="myChart"></canvas>

        </div>

        <div class="popup-details">

          This blog name, ghoGlobal will be changed to PauTecom Web effective 1st of January, 2022. The content in this blog is not affected and remains intact. However, ghoGlobal will continue to run as a service as part of PauTecom Web. The url www.ghoglobal.ga will continue to redirect visitors to PauTecom Web until it is completely taken off. Thank you!

        </div>

      </div>

      <div class="close-btn">

        <svg

          xmlns="http://www.w3.org/2000/svg"

          class="h-6 w-6"

          fill="none"

          viewbox="0 0 24 24"

          stroke="#f40076"

        >

          <path

            stroke-linecap="round"

            stroke-linejoin="round"

            stroke-width="2"

            d="M6 18L18 6M6 6l12 12"

          />

        

      </path

></svg

></div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>

    <script>

      const popupContainer = document.querySelector(".popup-container");

      const statsBtn = document.querySelector(".stats-btn");

      const closeBtn = document.querySelector(".popup-container .close-btn");

      statsBtn.addEventListener("click", () => {

        popupContainer.classList.add("active");

      });

      closeBtn.addEventListener("click", () => {

        popupContainer.classList.remove("active");

      });

    </script>

    <script>

      const ctx = document.getElementById("myChart").getContext("2d");

      const myChart = new Chart(ctx, {

        type: "pie",

        data: {

          labels: ["pautecomweb", "ghoGlobal", "No change in content", "PauTecomWeb", "Name change"],

          datasets: [

            {

              label: "# of Votes",

              data: [20, 15, 13, 5, 2],

              backgroundColor: [

                "#f40076",

                "#3d348b",

                "#44ffd1",

                "#f75c03",

                "#fca311",

              ],

              borderWidth: 0,

            },

          ],

        },

      });

    </script>