Home
BLOGGER
CSS

How To Add Random Quote Generator in Blogger Website


Hello Everyone, Today in This Post I am going to share a tutorial on How To Add Random Quote Generator in Blogger Website. If  You want to add this random quote generator tool in blogger then you should read this post till the end. This Random Quote Generator Tool is Make with the Help of HTML, CSS And JS. I also use an API.

If you want to know about the Random Quote Generator Tool, how does it work? Then you must read this post full.

You can see that You have a code displayed over there and You also have this author and if You refresh this page You can see You have a new code displayed over there and you also have the author displayed over there and you also have this new code button and if you click on that we have a new code displayed over there. You can see these things on this video.

Watch This Video

So If you really want to add this How To Add Random Quote Generator in Blogger Website, then follow all the steps given below carefully. Let's get Started.

How To Install Random Quote Generator in Blogger

Step 1 :- First Of All. You Need To Go On Blogger.com.
Step 2 :- Then Login With Your Blogger Account.
Step 3 :- Then Select The Post or Page Menu.
Step 4 :- After That Create A New Post or Page.
Add Your Post or Page Title And Description According To You Need.{alertWarning}
Step 4 :- After That Click on Edit HTML Not Compose Mode.
Step 5 :- Now Copy The Code Given Below And Paste It in HTML View of Your Post.
<style>  
body.item-view .Blog .post-body-container {
  padding-right: 0;
  }
body.item-view .Blog .post-body-container .post-sidebar {
  display: none;
  }
.quote-container {
  height: 100vh;
  width: 100%;
  background: #001219;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  padding: 48px;
  box-sizing: border-box;
}
.quote-container .quote {
  max-width: 700px;
  position: relative;
}
.quote-container .quote-icon {
  position: absolute;
  left: -76px;
  top: -48px;
  transform: scale(1.5) rotateZ(5deg);
  opacity: 0.1;
}
.quote-container .quote-content {
  font-weight: bold;
  font-size: 30px;
  color: #fff;
}
.quote-container .quote-author {
  font-size: 18px;
  color: yellow;
  border-top: 1px solid #93e0ff;
  padding: 16px 32px;
  margin-top: 20px;
}
.quote-container .new-quote-btn {
  padding: 16px 36px;
  position: absolute;
  left: 50%;
  margin-top: 40px;
  transform: translateX(-50%);
  background: #f3f3b2;
  color: #001219;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  min-width: 200px;
  border: none;
  cursor: pointer;
  transition: all 500ms ease;
}
.quote-container .new-quote-btn:hover {
  background: #93e0ff;
}
@media (max-width: 900px) {
  .quote-container .quote-icon {
    left: -16px;
  }
}
@media (max-width: 500px) {
  .quote-container .quote-content {
    font-size: 24px;
    line-height: 1.8;
  }
}  
</style>
<div class="quote-container">
      <div class="quote">
        <div class="quote-icon">
          <svg
            width="98"
            height="75"
            viewBox="0 0 98 75"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M33.8 32.6C37.5333 34.3333 40.4 36.9333 42.4 40.4C44.5333 43.7333 45.6 47.6667 45.6 52.2C45.6 58.8667 43.4667 64.2667 39.2 68.4C34.9333 72.5333 29.4667 74.6 22.8 74.6C16.1333 74.6 10.6667 72.5333 6.4 68.4C2.13333 64.2667 0 58.8667 0 52.2C0 49.1333 0.4 46.0667 1.2 43C2 39.9333 3.8 35.4 6.6 29.4L19.4 0H43.2L33.8 32.6ZM86.2 32.6C89.9333 34.3333 92.8 36.9333 94.8 40.4C96.9333 43.7333 98 47.6667 98 52.2C98 58.8667 95.8667 64.2667 91.6 68.4C87.3333 72.5333 81.8667 74.6 75.2 74.6C68.5333 74.6 63.0667 72.5333 58.8 68.4C54.5333 64.2667 52.4 58.8667 52.4 52.2C52.4 49.1333 52.8 46.0667 53.6 43C54.4 39.9333 56.2 35.4 59 29.4L71.8 0H95.6L86.2 32.6Z"
              fill="white"
            />
          </svg>
        </div>
        <div class="quote-content">Loading quote...</div>
        <div class="quote-author"></div>
        <button class="new-quote-btn">New Quote</button>
      </div>
    </div>
<script>
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 9=5.6(".0-3 .0-7");2 10=5.6(".0-3 .0-15");2 13=5.6(".0-3 .16-0-17");2 12=(1)=>{9.8=1.7;10.8=1.15};2 4=()=>{28("25://18.26.27/24?23=19").14((11)=>11.20()).14((1)=>{12(1)})};4();13.21("22",4);',10,29,'quote|data|const|container|nextQuote|document|querySelector|content|innerHTML|quoteContent|quoteAuthor|response|updateQuote|newQuoteButton|then|author|new|btn|api|100|json|addEventListener|click|maxLength|random|https|quotable|io|fetch'.split('|'),0,{}))
</script>{codebox}

Step 6 :- Then Don't Forget To Publish Your Post or Page. Finished.

Conclusion

Well That's Great Tutorial on How To Add Random Quote Generator in Blogger Website. I Hope This Tutorial can be useful for you. If  You Have Face Any Problems And Err Then Put Your Problems in Comment Section. Don't Forget To Subscribe My YouTube Channel.

Subscribe Me

Thanks For Reading Us!

Read Also :

Post a Comment

Leave a comment according to the topic of the article, tick Notify me to get notified via email when your comment is replied to.
Put In Image URL or Code Snippet, And Quote, then click the button you want to parse. Copy the parse result and paste it into the comments field.


image quote pre code