Professional Quote Box For Blogger

Adding a professional quote box to your Blogger site can enhance the visual appeal of your content and highlight key statements effectively. Whether you’re quoting famous personalities, sharing insights, or emphasizing important points, a well-designed quote box improves readability and engagement.

Why Use a Quote Box?

• Increases Readability – A dedicated space for important quotes ensures they stand out.
• Enhances Aesthetics – Stylish formatting makes your blog look more professional.
• Boosts Engagement – Readers are more likely to share well-presented quotes.

Features of a Good Quote Box

✔ Elegant design with borders, background, or subtle shadows
✔ Customizable colors & fonts to match your blog theme
✔ Copy & Share buttons for user interaction
✔ SEO-friendly markup for better ranking

Quote Box For Blogger

1. Go to Blogger Dashboard.
2. On Blogger Dashboard, click Layout.
3. Add Html/Javascript Box In Side-Widget.
4. Code The following Code & just paste in the Box.
Demo

<div class="wrapper">
        <h1>Quotes</h1>
        <div class="content">
            <div class="quote-area">
                <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 11a4 4 0 1 1 4-4c0 1.473-1.333 6.14-4 14h-2l2-10ZM7 11a4 4 0 1 1 4-4c0 1.473-1.333 6.14-4 14H5l2-10Z" stroke-width="1"></path></svg>
                <p class="quote">Myths which are believed in tend to become true.<div class="authorA"><span></span><span class="name"></span></div></p>
            </div>
        </div>
        <div class="buttons">
            <div class="features">
                <ul>
                    <li class="speech"><svg height="24" viewbox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320ZM400-606l-86 86H200v80h114l86 86v-252ZM300-480Z"></path></svg></li>
                    <li class="copy an"><svg style="height: 18px" viewbox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"></path></svg></li>
                    <li class="twitter an"><svg viewbox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M18.89,7.012c0.808-0.496,1.343-1.173,1.605-2.034c-0.786,0.417-1.569,0.703-2.351,0.861   c-0.703-0.756-1.593-1.14-2.66-1.14c-1.043,0-1.924,0.366-2.643,1.078c-0.715,0.717-1.076,1.588-1.076,2.605   c0,0.309,0.039,0.585,0.117,0.819C8.806,9.096,6.26,7.82,4.254,5.364c-0.34,0.601-0.51,1.213-0.51,1.846   c0,1.301,0.549,2.332,1.645,3.089c-0.625-0.053-1.176-0.211-1.645-0.47c0,0.929,0.273,1.705,0.82,2.388   c0.549,0.676,1.254,1.107,2.115,1.291c-0.312,0.08-0.641,0.118-0.979,0.118c-0.312,0-0.533-0.026-0.664-0.083   c0.23,0.757,0.664,1.371,1.291,1.841c0.625,0.472,1.344,0.721,2.152,0.743c-1.332,1.045-2.855,1.562-4.578,1.562   c-0.422,0-0.721-0.006-0.902-0.038c1.697,1.102,3.586,1.649,5.676,1.649c2.139,0,4.029-0.542,5.674-1.626   c1.645-1.078,2.859-2.408,3.639-3.974c0.784-1.564,1.172-3.192,1.172-4.892V8.34c0.758-0.57,1.371-1.212,1.84-1.921   C20.32,6.712,19.617,6.911,18.89,7.012z"></path></g></svg></li>
                </ul>
                <button class="an">Change Quote</button>
            </div>
        </div>
   
<script defer='defer'>
/*<![CDATA[*/
const quoteText = document.querySelector(".quote"),
      quoteBtn = document.querySelector("button.an"),
      authorName = document.querySelector(".name"),
      speechBtn = document.querySelector(".speech"),
      copyBtn = document.querySelector(".copy.an"),
      twitterBtn = document.querySelector(".twitter.an"),
      synth = speechSynthesis;

function randomQuote() {
  const e = quote[Math.floor(Math.random() * quote.length)];
  quoteText.innerHTML = e;
}

function mcK() {
  randomQuote();
}

speechBtn.addEventListener("click", () => {
  if (!quoteBtn.classList.contains("loading")) {
    let e = new SpeechSynthesisUtterance(`${quoteText.innerText}`);
    synth.speak(e);
    setInterval(() => {
      synth.speaking ? speechBtn.classList.add("active") : speechBtn.classList.remove("active");
    }, 10);
  }
});

copyBtn.addEventListener("click", () => {
  navigator.clipboard.writeText(quoteText.innerText).then(() => {
    alert("Quote copied to clipboard");
  });
});

twitterBtn.addEventListener("click", () => {
  let e = `https://twitter.com/intent/tweet?text=${encodeURIComponent(quoteText.innerText)}`;
  window.open(e, "_blank");
});

setTimeout(mcK, 0);
quoteBtn.addEventListener("click", randomQuote);

const quote = [
  'The only real valuable thing is intuition.<div class="authorA"><span>__</span><span class="name">Albert Einstein</span></div>',
  'A small piece of paper cant decide your future.<div class="authorA"><span>__</span><span class="name">AaryaN Sah</span></div>',
  'There is no great genius without some touch of madness.<div class="authorA"><span>__</span><span class="name">Seneca the Younger</span></div>',
  'History is written by the victors.<div class="authorA"><span>__</span><span class="name">Winston Churchill</span></div>',
  'It\'s so simple to be wise. Just think of something stupid to say and then don\'t say it.<div class="authorA"><span>__</span><span class="name">Sam Levenson</span></div>',
  'Myths which are believed in tend to become true.<div class="authorA"><span>__</span><span class="name">George Orwell</span></div>',
  'Life is a succession of moments. To live each one is to succeed.<div class="authorA"><span>__</span><span class="name">Corita Kent</span></div>',
  'Friends... they cherish one another\'s hopes. They are kind to one another\'s dreams.<div class="authorA"><span>__</span><span class="name">Henry David Thoreau</span></div>',
  'I have always found that mercy bears richer fruits than strict justice.<div class="authorA"><span>__</span><span class="name">Abraham Lincoln</span></div>',
  'You may say I\'m a dreamer, but I\'m not the only one, I hope someday you will join us, and the world will live as one.<div class="authorA"><span>__</span><span class="name">John Lennon</span></div>',
  'Ideas are the beginning points of all fortunes.<div class="authorA"><span>__</span><span class="name">Napoleon Hill</span></div>',
  'We never live; we are always in the expectation of living.<div class="authorA"><span>__</span><span class="name">Voltaire</span></div>',
  'Without leaps of imagination, or dreaming, we lose the excitement of possibilities. Dreaming, after all, is a form of planning.<div class="authorA"><span>__</span><span class="name">Gloria Steinem</span></div>',
  'Mediocrity knows nothing higher than itself, but talent instantly recognizes genius.<div class="authorA"><span>__</span><span class="name">Arthur Conan Doyle</span></div>',
  'The noblest worship is to make yourself as good and as just as you can.<div class="authorA"><span>__</span><span class="name">Isocrates</span></div>',
  'Life is what happens while you are making other plans.<div class="authorA"><span>__</span><span class="name">John Lennon</span></div>',
  'I cannot make my days longer, so I strive to make them better.<div class="authorA"><span>__</span><span class="name">Henry David Thoreau</span></div>',
  'A brand for a company is like a reputation for a person. You earn reputation by trying to do hard things well.<div class="authorA"><span>__</span><span class="name">Jeff Bezos</span></div>',
  'A friend is what the heart needs all the time.<div class="authorA"><span>__</span><span class="name">Henry van Dyke Jr.</span></div>',
  'Each day provides its own gifts.<div class="authorA"><span>__</span><span class="name">Marcus Aurelius</span></div>',
  'First-rate people hire first-rate people; second-rate people hire third-rate people.<div class="authorA"><span>__</span><span class="name">Leo Rosten</span></div>'
];
/*]]>*/
</script>
<style>.wrapper { background: /*linear-gradient(to top left, var(--linkB) -2500%, #0000 300%)*/var(--contentB); border-radius: 10px; padding: 10px 15px 15px; }
.wrapper h1 { font-size: 1.5rem; }
.wrapper .content { margin: 10px 0 15px; padding-bottom: 22px; position: relative; }
.wrapper .content .quote-area { display: flex; justify-content: flex-start; gap: 10px; }
.wrapper .quote-area i { font-size: 15px; }
.wrapper .quote-area svg { width: 35px; height: 38px; flex: 0 0 35px; stroke: var(--linkC); fill: none; }
.wrapper .quote-area .quote { word-break: break-all; margin: 0; line-height: 20px; }
.wrapper .authorA { position: absolute; bottom: 0; right: 0; font-size: 11px; font-style: italic; opacity: .9; }
.wrapper .authorA span:first-child { font-family: monospace; }
.drK .wrapper .buttons { border-color: rgb(65 179 117 / 10%); }
.wrapper .buttons { border-top: 1px rgb(72 45 255 / 10%) dashed; }
.wrapper .buttons .features { display: flex; margin-top: 12px; align-items: center; justify-content: space-between; }
.wrapper .features ul { display: flex; padding: 0; margin: 0; gap: 10px; }
.wrapper .features ul svg { fill: #fff; }
.wrapper ul li:is(:hover, .active) svg { fill: #fff; }
.wrapper .features ul li { height: 30px; width: 30px; display: flex; cursor: pointer; list-style: none; border-radius: 50px; align-items: center; justify-content: center; background: var(--linkB); }
.wrapper ul li:is(:hover, .active) { filter: brightness(.85); transition: filter .2s; }
.wrapper .speech.active { pointer-events: none; }
.wrapper .buttons button { border: none; color: var(--linkC); background: 0 0; outline: 0; font-size: 14px; cursor: pointer; }
.wrapper .buttons button.loading { opacity: .7; pointer-events: none; }.drK .wrapper { background:  var(--darkBa)}</style>

5. Now Save The Layout Box.

Conclusion 

 I hope you have successfully added . If you are facing any problem in any section or you have any question then ask us in the comment box. make it unique

Cadit : Tecky Aaryan