T
ampilan widget kutipan(quotes)sangat mempengaruhi tampailan suatu artikel dalam blog.Apalagi kalau kutipan yang berupa kata-kata inspiratif dan motivasi sangat mendukung untuk menarik suatu pengunjung blog kita dan tidak merasa bosan bila berlama-lama. Tampilan quotes ini telah dibubuhi script tertentu yaitu JavaScript untuk memperoleh kesan dinamis nan premium.
Dan database quotes ini langsung dari situs resminya. Juga, quotes ini saya bubuhi juga script untuk menampilkan "social media share" supaya lebih terlihat attractive.
Contoh tampilan widget quotes yang saya bagikan dan ada pada artikel Blogkoopedia.
BrainyQuote adalah situs kutipan terbesar di dunia. Kami mendidik dan menghibur penonton dari segala usia dengan kutipan ramah keluarga dari tokoh sejarah paling terkemuka hingga pembuat berita hari ini - selebritas terkenal, atlet, politisi, penulis, dan segala sesuatu di antaranya. Kami bersemangat tentang kutipan, dan dalam misi untuk berbagi pengetahuan kami dengan dunia.Kami percaya akses ke kata yang diucapkan memberi kami pandangan sekilas yang unik tentang sejarah, sejarah politik dan budaya dunia yang kami bagikan. Selanjutnya, kami percaya bahwa yang melekat dalam kutipan-kutipan ini terletak pada esensi dari individu-individu yang telah kami kutip; minat, sistem kepercayaan, komentar, dan ide mereka ditangkap pada waktunya untuk memberi manfaat bagi generasi kita dan generasi berikutnya.BrainyQuote menyediakan akses semua-akses ke dunia kutipan. Basis data 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 sejarah, politik, dan budaya yang relevan yang tersedia di situs kami, di umpan RSS kami, di Facebook, dan di Twitter. BrainyQuote memiliki jarinya pada denyut nadi peristiwa dunia - memilih kutipan terbaru oleh penggerak dan pelopor hari ini. Koleksi kutipan kurasi kami berisi kutipan 'terbaik dari yang terbaik' di setiap topik kami, dan halaman Quote of the Day dan RSS feed kami menyediakan bahan untuk dipikirkan dengan kutipan brainy, alam, lucu, seni, dan cinta yang unik untuk dinikmati di kami situs, situs Anda, atau blog Anda.
sumber : brainyquote
Bagaimana bro/sis, terlihat dinamis bukan?. Setiap kata kata yang ada pada tampilan widget akan berubah setiap harinya. Bila anda tertarik, silahkan ikuti langkah pemasangannya berikut ini.
Cara Memasang Widget Random Quotes
Pilih sesuaikan dan edit HTML.
Letakkan 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 #333;
padding: 5px;
border-radius: 5px;
background-color: #ccc;
}
@-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/AVvXsEiDNaZqiru3IwgR5FEj4qEs-a-pRvSSL2AwKDBy2XYDSJjqauPPgRT7hxGUEC2Z5eTE00KlasTCxdXPP3h3bejY3XB4gFtERIYv1pc7x1bQsa_jIFmFmPtyJGOK3ZQM5Xb5OoRhYtT2zrI/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/AVvXsEgcQ_sIg6PJh55mdBUF6uwLMU3eFcopyduRxvgR5s_2HUnAazj4zr03fFrZar-5VCZrszBiOyh23yr_ONI6AAMEwdqBkG6PBMYXBipBJ49qfxIDrgt_KFurHkx3eoJCG7onpg9W_X91ohI/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/AVvXsEhrAoIsIcplEcB_x_ioEur-7gP0g07GqES07l_2SGsiER7MIdTFw6aMMSMsvAi8IQ0236s1_iWC9Z3nH1Fmsci7us_k56g0_p_elxGLCYhXf35i0p24QmbBNf21E4booORoJQT_CQ-aGK8/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/AVvXsEgYzvUI4IxbWgoqOWz1lDgFIaWbGp7mgJ_GMYxkBonB5VjbKXUHm_OPavKKhxBTcF57CHB8_ZIjCXlLCuwWbM7SmPj96mwK8VQn08JorzdynkwX6nJB6oxTNXGDRAsO5PCtwYXttkWcU04/s1600/Twitter-icon.png);background-repeat:no-repeat;background-position:center center;background-color:#3b3b3b;}
</style>
KETERANGAN
Supaya widget ini berhasil muncul di artikel, kalian cukup menuliskan kode berikut <div class='add-quotes'></div> di postingan artikal anda dalam mode edit HTML.
Demikian artikel tentang Cara Membuat Kutipan Secara Otomatis dalam Artikel Blog. Bila ada kritik dan saran yang bersifat membangun, silahkan sampaikan dikolom komentar. Semoga Bermanfaat. Terimakasih dan sampai jumpa. 👌👌
Keyword
Blog, Artikel, HTML, Kutipan, Otomatis, Quotes, Brainy
.png)
3 comments:
Tulis comments