Widget Blog Menampilkan Kutipan (Quotes) Secara Otomatis

---

Memasang widget kutipan (quotes) dapat memberikan kesan dinamis dan up-to-date pada halaman konten artikel blog anda. Widget quotes menampilkan kutipan kata-kata mutiara, inspiratif, semangat dan lain sebagainya yang dapat memberikan nuansa segar agar tidak cepat bosan ketika membaca konten artikel yang ada di blog anda.

Kutipan (Quotes) secara otomatis update perharinya tanpa perlu repot mengganti basis data quotes, jadi setiap harinya data quotes yang ditampilkan akan berubah sendirinya secara otomatis sehingga blog anda akan terlihat dinamis dan juga akan menambah daya tarik pada halaman artikel blog.

Widget quotes yang admin bagikan menggunakan basis data yang diambil langsung dari situs brainyquote.com yang kemudian diolah menggunakan javascript untuk bisa ditampilkan dengan tampilan desain premium yang atraktif. Selain itu admin tambahkan fitur sharing dan random untuk menambah daya tarik dari konten artikel yang ditampilkan.

Terdapat 5 kategori topik quotes dari situs brainyquote.com yang dapat digunakan secara gratis, yaitu Today's Quote, Art Quote, Funny Quote, Love Quote dan Nature Quote. Anda bisa menggunakan salah satu dari topik quote yang diberikan atau menggunakan semua topik quote tersebut kemudian dibuat random untuk data quote yang akan ditampilkan.

Contoh penggunaan dari widget quotes yang ada di halaman artikel blog codeflare, seperti yang terlihat di bawah ini.

Gimana mas bro / mba sis ? kerenkan tampilan dari widget quotes CodeFlare. Data quote yang ditampilkan diatas akan berbeda untuk setiap harinya dan juga akan berbeda untuk setiap halaman artikel lainnya karena sudah dibuat random. Buat yang tertarik monggo disimak cara pemasangannya.

Informasi Singkat

---

BrainyQuote adalah situs kutipan terbesar di dunia. Kami mendidik dan menghibur penonton dari segala usia dengan kutipan ramah keluarga dari tokoh-tokoh sejarah paling terkemuka hingga pembuat berita hari ini - selebriti terkenal, atlet, politisi, penulis, dan segala sesuatu di antaranya. Kami bersemangat tentang kutipan, dan memiliki misi untuk berbagi pengetahuan kami dengan dunia.

BrainyQuote memberikan akses semua-akses ke dunia kutipan. Database kutipan kami adalah yang terbesar di web, dan semakin besar setiap hari. Baik itu kutipan yang bagus untuk kartu ulang tahun, surat cinta, makalah penelitian, atau hanya untuk bersenang-senang, BrainyQuote memudahkan untuk menemukan kutipan yang bagus. Kami memiliki harta karun berupa kutipan bersejarah, politik, dan budaya relevan yang tersedia di situs kami, di RSS feed kami, di Facebook dan di Twitter. BrainyQuote memperhatikan denyut nadi peristiwa dunia - memilih kutipan terbaru dari penggerak dan pengocok hari ini. Koleksi kutipan hasil kurasi kami berisi kutipan 'terbaik dari yang terbaik' di setiap topik kami, dan halaman Kutipan Hari Ini serta umpan RSS kami menyediakan makanan untuk dipikirkan dengan kutipan cerdas, alam, lucu, seni, dan cinta untuk dinikmati di situs kami. situs, situs Anda, atau blog Anda.

---

Sumber : brainyquote

Cara Memasang Widget Quotes

Kode widget quotes di bawah ini menggunakan 5 topik yang di buat random secara otomatis sebelum ditampilkan. Jika anda hanya ingin menggunakan salah satu topik quote maka anda cukup menggunakan script quote yang akan digunakan saja. Pastikan topik quotes yang dipilih disesuaikan dengan niche blog yang anda gunakan.

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <!-- Start Quotes Form Script -->
  <script type='text/javascript'>
  //<![CDATA[
  /* Find Div Element */
  if ($(".add-quotes").length){
  var tmpFormQCode;
  var chkClassDivQ = $(".add-quotes").length;
  for(var k=0; k < chkClassDivQ; k++){
  tmpFormQCode = '';
  tmpFormQCode +='<div class="shrt-info">';
  tmpFormQCode +='<i class="fa fa-info-circle" aria-hidden="true"></i> <span class="shrt-title-info">Quotes</span>';
  tmpFormQCode +='<hr /><center><span id="txtQuotes'+k+'" class="txtQuotes">Loading...</span></center><hr />';
  tmpFormQCode +='<div style="text-align:center;display:table;margin:auto;" align="center">';
  tmpFormQCode +='<div id="imgBtnFacebook" onclick="launchFacebook('+k+')"></div>';
  tmpFormQCode +='<div id="imgBtnSms" onclick="launchSMS('+k+')"></div>';
  tmpFormQCode +='<div id="imgBtnWa" onclick="launchWhatsapp('+k+')"></div>';
  tmpFormQCode +='<div id="imgBtnTwitter" onclick="launchTweet('+k+')"></div>';
  tmpFormQCode +='</div></div>';
  document.getElementsByClassName("add-quotes")[k].innerHTML=tmpFormQCode;
  }}
  //]]>
  </script>
  <script>
  //<![CDATA[
  /* Get Quotes Text */
  if ($(".txtQuotes").length){
  document.write('<div id="extquote0" style="display:none;"><script type="text/javascript" src="https://www.brainyquote.com/link/quotebr.js"><\/script></div>');
  document.write('<div id="extquote1" style="display:none;"><script type="text/javascript" src="https://www.brainyquote.com/link/quotear.js"><\/script></div>');
  document.write('<div id="extquote2" style="display:none;"><script type="text/javascript" src="https://www.brainyquote.com/link/quotefu.js"><\/script></div>');
  document.write('<div id="extquote3" style="display:none;"><script type="text/javascript" src="https://www.brainyquote.com/link/quotelo.js"><\/script></div>');
  document.write('<div id="extquote4" style="display:none;"><script type="text/javascript" src="https://www.brainyquote.com/link/quotena.js"><\/script></div>');
  }
  //]]>
  </script>
  <script>
  //<![CDATA[
  /* Regular Expression */
  if ($(".txtQuotes").length){
  var srcQLength=5;
  var tmpSrcQuotes = new Array;var txtQRand="";var tmpNoDivQ="";var tmpQRand ="";var tmpQRand2 =""
  for (var j = 0;j < srcQLength;j++){tmpSrcQuotes[j]=$('#extquote'+j).html();}
  tmpNoDivQ = $(".txtQuotes").length;
  for(var i=0; i < tmpNoDivQ; i++){
  tmpQRand = Math.floor(Math.random() * srcQLength);
  txtQRand = tmpSrcQuotes[tmpQRand];
  txtQRand = txtQRand.replace(/<script[^>]*>(?:(?!<\/script>)[^])*<\/script>/g, "");
  txtQRand = txtQRand.replace(/<b[^>]*>(?:(?!<\/b>)[^])*<\/b>/g, "");
  txtQRand = txtQRand.replace(/(<|<)br\s*\/*(>|>)/g,' ');
  txtQRand = txtQRand.replace(/<a[^>]*>(?:(?!<\/a>)[^])*<\/a>/g, "");
  txtQRand = txtQRand.replace(/(\r\n|\n|\r)/gm, "");
  txtQRand = txtQRand.trim();
  document.getElementsByClassName("txtQuotes")[i].innerHTML=txtQRand;
  txtQRand="";
  }}
  /* Share Quotes Button */
  function launchFacebook(e){
  var addText0 = $('#txtQuotes'+e).text();
  var addText1 = window.location.href;
  var addQuotes = "https://www.facebook.com/sharer/sharer.php?u=" + escape(addText1) + "&t=*Quotes*%20%3A%0A" + escape(addText0);
  PopupCenter(addQuotes,"CodeFlare | Share Quotes",500,500);
  }
  function launchSMS(e){
  var addText0 = $('#txtQuotes'+e).text();
  var addText1 = window.location.href;
  if ($(window).width() > 600){
  var addQuotes = "mailto:someone@example.com?subject=Quotes&body=Name%20:%20CodeFlare%0D%0AMessage%20:%0A"+ escape(addText0) + "%0A%0Afrom%20%3A%0A" + escape(addText1);
  window.open(addQuotes,"blank");
  }
  else{var addQuotes = "sms:+62?body=" + "Quotes%20%3A%0A" + escape(addText0) + "%0A%0Afrom%20%3A%0A" + escape(addText1);
  PopupCenter(addQuotes,"CodeFlare | Share Quotes",300,300);}
  }
  function launchWhatsapp(e){
  var addText0 = $('#txtQuotes'+e).text();
  var addText1 = window.location.href;
  var addQuotes = "https://api.whatsapp.com/send?text=" + "*Quotes*%0A" + escape(addText0) + "%0A%0A*from*%20%3A%0A" + escape(addText1);
  PopupCenter(addQuotes,"CodeFlare | Share Quotes",300,300);
  }
  function launchTweet(e) {
  var addText0 = $('#txtQuotes'+e).text();
  var addText1 = "&via=codeflare1&related=blog&url=";
  var addText2 = window.location.href;
  var addQuotes = "https://twitter.com/share?text=" + "Quotes%20%3A%0A" + escape(addText0 + addText1 + addText2);
  PopupCenter(addQuotes,"CodeFlare | Share Quotes",600,500);
  }
  <!-- End Quotes Form Script -->
  <!-- Start Open Popup Function -->
  function PopupCenter(url, title, w, h) {
  var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : window.screenX;
  var dualScreenTop = window.screenTop != undefined ? window.screenTop : window.screenY;
  var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
  var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
  var left = ((width / 2) - (w / 2)) + dualScreenLeft;
  var top = ((height / 2) - (h / 2)) + dualScreenTop;
  if(width <= 800){window.open(url);}
  else{
  var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left + ',resizable=no,scrollbars=no,menubar=no,toolbar=no,status=no,location=no');
  if (window.focus){newWindow.focus();}
  }}
  //]]>
  </script>
  <!-- End Open Popup Function -->
  
  <style>
  .add-quotes{
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 5px;
  background-color: #333;
  color:#fff;
  }
  @-webkit-keyframes neon2{from{text-shadow:none;}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;}}@-moz-keyframes neon2{from{text-shadow:none;}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;}}@keyframes neon2{from{text-shadow:none;}to{text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228DFF,0 0 35px #228DFF,0 0 40px #228DFF,0 0 50px #228DFF,0 0 75px #228DFF;}}.shrt-info .shrt-title-info{font-size:16px;font-weight:bold;}.shrt-warning{width:100%;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.shrt-top-warning{padding:10px 5px;color:#fff;font-size:16px;font-weight:bold;text-align:center;background-color:#a87936;border-radius:4px 4px 0 0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;-webkit-animation:neon2 2s ease-in-out infinite alternate;-moz-animation:neon2 2s ease-in-out infinite alternate;animation:neon2 2s ease-in-out infinite alternate;}.shrt-content{padding:15px 10px;background-color:#f0ad4e;color:#fff;}
  /* Quotes Form */
  .btnShareQuotes{border:2px solid #fff;border-radius:4px;padding:2px 5px 2px 5px;margin:0 2px 0 2px;cursor:pointer;background:rgb(174,188,191);background:-moz-linear-gradient(top,rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);background:-webkit-linear-gradient(top,rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);background:linear-gradient(to bottom,rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',endColorstr='#0a0809',GradientType=0 );}.btnShareQuotes:hover{background:#3b3b3b;}.txtQuotes{font-family:Iceland;font-size:1.8em;line-height:120%;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s;-webkit-animation:neon2 2s ease-in-out infinite alternate;-moz-animation:neon2 2s ease-in-out infinite alternate;animation:neon2 2s ease-in-out infinite alternate;}#imgBtnFacebook,#imgBtnSms,#imgBtnWa,#imgBtnTwitter{width:32px;height:32px;float:left;border:1px solid #fff;border-radius:4px;padding:2px 5px 2px 5px;margin:0 2px 0 2px;cursor:pointer;}#imgBtnFacebook:hover{background-color:#ccc;}#imgBtnSms:hover{background-color:#ccc;}#imgBtnWa:hover{background-color:#ccc;}#imgBtnTwitter:hover{background-color:#ccc;}#imgBtnFacebook{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5onJGDBxoSbMmNUq7gCDQsFPOH7x2qNcz_XM0UuBSNIWyDu9T_TYi3Jk3JC53wu0cOHvumfsPW7d8yo2Sg9Or0OjmMZCex6Tmz-0AU68xHO1N05GpJTFodKbUov-z4-RjmM5FaQ5gcQ/s0/facebook_32px.png);background-repeat:no-repeat;background-position:center center;background-color:#3b3b3b;}#imgBtnSms{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiizVk-WSy5JIYTFsJ8eA4MBI704MspMnlGi-UKvdkZTJfkja1fI-INECN4cSbZJvj9kQbd1B4lsQp9_tE2vDDOos9kqau0Ht7c8CQEIezs-pqgQsXvpPMblg-c2zknIILIh2I1f2fBXw/s32/Mail-icon-google.png);background-repeat:no-repeat;background-position:center center;background-color:#3b3b3b;}#imgBtnWa{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibqdVFmXn7-MN88OEv5qmg1QtFo5y-eOHxbcfMlbI4mjTl7-P6IVAQhGZ8QSoEQtsf8D3pYJ3oMB2FAQLrhA6wVxBBG30KM8MHMFWjDhbbWzbgRWJzdWDTKUknsGVidLS1H41JQeydpQ/s1600/WhatsApp-icon.png);background-repeat:no-repeat;background-position:center center;background-color:#3b3b3b;}#imgBtnTwitter{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2KAWJe5zIrdBdRrkjIcz8-TIJ__5zcToLLxyBNPWtnb_u-iXAt3Cgm0hwVmTo1MUPxSilP7MM2717BkKPu_WXln9kYvVenwBQhbCeaq5E-BobHsO5ndBdoTL0mHpeesRGHNH-srcZQ/s1600/Twitter-icon.png);background-repeat:no-repeat;background-position:center center;background-color:#3b3b3b;}
  </style>
  script code here...
  
  
  KETERANGAN
  
  Cara menggunakan cukup menaruh kode html <div class="add-quotes"></div> pada mode edit HTML di halaman konten artikel blog.

Demikian artikel blog tentang Widget Blog Menampilkan Kutipan (Quotes) Secara Otomatis terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

blog, blogger, blogspot, widget, kutipan, quote, quotes, mutiara, pesan, inpirasi, kata, pesan, otomatis, auto, update

Incoming Search Term

Menambahkan kutipan (quotes) otomatis pada halaman artikel blog, cara membuat widget quotes, kata mutiara pada halaman blog, cara memasang pesan kutipan random otomatis konten artikel blogger