صندوق الاقتباس للمدونه باشكال رائعة

 مرحبا بك في  موقعنا

إذا كنت تبحث عن Quote Box For Blogger، فهذه التدوينة مخصصة لك فقط.

صندوق الاقتباس للمدون

الخطوة 1: انتقل إلى 

لوحة تحكم Blogger.

الخطوة 2: في لوحة معلومات Blogger، انقر فوق "تخطيط".

الخطوة 3: إضافة مربع HTML/Javascript في الأداة الجانبية.

الخطوة 4: قم بكتابة الكود التالي والصقه في المربع.

ملاحضه انقر مرتين لنسخ الكود 

<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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/teckyaaryan/Motivational-Quote-Box@main/Motivational-Quote-Box.css">

الخطوة 5: الآن قم بحفظ مربع التخطيط.

خاتمة

أتمنى أن تكون قد نجحت في الإضافة. إذا واجهتك أي مشكلة في أي قسم أو كان لديك أي سؤال فاسألنا في مربع التعليقات. 

حقوق الطبع والنشر: 

موقع اديب القربعي كنز المعلومات 

الانتقال إلى الرابط المطلوب

معلومات الكاتب

مصمم

اديب القربعي كنز المعلومات

اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر