Cara Memasang Widget Kutipan Motivasi Keren Dengan Efek Slide Di Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu cara memasang widget kutipan motivasi keren dengan efek slide di blog, widget ini akan menampilkan beberapa motivasi yang dapat diisi dan ditambahkan sesuai selera dan akan tampil pada widget blog dengan berganti-ganti motivasi setiap beberapa detik, nah untuk menerapkannya di blog silakan ikuti beberapa langkah di bawah ini;

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard blog pilih menu tata letak,

3. Setelah itu pilih menu tambahkan gadget,

4. Lalu pilih menu HTML / Javascript,

5. Copy script di bawah ini,

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".kutipan blanter").kutipan()});(function(e){e.fn.kutipan=function(t,n){if(!t)t=500;if(!n)n=6500;var r=t*4;if(r>n)n=r;var i=e(this),s=e(this).filter(":first"),o=e(this).filter(":last"),u='<div id="quote_wrap"></div>';e(this).wrapAll(u);e(this).hide();e(s).show();e(this).parent().css({height:e(s).height()});setInterval(function(){if(e(o).is(":visible")){var n=e(s);var r=e(n).height()}else{var n=e(i).filter(":visible").next();var r=e(n).height()}e(i).filter(":visible").fadeOut(t);setTimeout(function(){e(i).parent().animate({height:r},t)},t);if(e(o).is(":visible")){setTimeout(function(){e(s).fadeIn(t*2)},t*2)}else{setTimeout(function(){e(n).fadeIn(t)},t*2)}},n)}})(jQuery)
//]]>
</script>

<style type='text/css'>
.footer-wrapper .widget blanter {
  margin: 10px 20px;
}

.footer-wrapper .widget blanter:before {
  content: "\f10d";
  text-decoration: inherit;
  margin: 0 10px 10px 0;
  float: left;
  font: 400 40px FontAwesome;
}

#quote_wrap {
  padding: 5px;
  padding-bottom: 15px;
  background:none;
  color:#e5e5e5;
}
blanter {
background:none;
border:none;
color:#e5e5e5;
}
</style>

<div class='kutipan'>
<blanter>Kadang masalah adalah sahabat terbaikmu. Mereka buatmu jadi lebih kuat, dan buatmu menempatkan Tuhan di sisimu yang paling dekat.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Jangan pernah meremehkan diri sendiri. Jika kamu tak bahagia dengan hidupmu, perbaiki apa yang salah, dan teruslah melangkah.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Jangan selalu katakan "masih ada waktu" atau "nanti saja". Lakukan segera, gunakan waktumu dengan bijak.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Hargai apa yang kamu miliki saat ini. Kebahagiaan tak akan pernah datang kepada mereka yang tak menghargai apa yang telah dimiliki.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Terkadang karena terlalu ingin mendapat apa yang kamu inginkan kamu lupa apa yang kamu butuhkan.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Jangan pernah merasa benar dengan diri kita karena yang menilai diri kita bukan kita, tapi orang di sekeliling kita.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Berpikirlah hari ini dan berbuatlah hari esok.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Kegagalan terbesar adalah apabila kita tidak pernah mencoba.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Jangan berdiri di belakangku karena aku tidak bisa memimpinmu, janganlah juga berdiri di depanku karena aku tidak bisa mengikutimu, berdirilah di sampingku dan menjadi pasangan hidupku.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Hidup terlalu singkat untuk mengeluh<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Jangan berhenti berharap karena Allah lebih tahu saat yang tepat mengabulkan permintaanmu.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Bahagia itu pilihan.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
<blanter>Kesalahan yang paling besar bukanlah kegagalan, tetapi adalah berhenti dan menyerah sebelum merasakan keberhasilan.<br/>
<cite>&ndash; Renaldy Ramadani.</cite></blanter>
</div> 

Jangan lupa untuk mengganti nama saya dan silakan jika anda ingin mengubah atau menambah motivasi!

6. Paste script pada kolom HTML / Javascript,

7. Simpan dan lihat hasilnya.

Nah, itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Referensi script www.idblanter.com

Share this