Cara Membuat Slide Kalimat di Blogger

Slide adalah satu tampilan di layar berupa uraian, gambar atau grafik yang berubah pada waktu yang ditentukan. Di blog biasa terletak di halaman utama dan berupa gambar artikel terbaru.

Berbeda yang kita buat kali ini adalah slide kalimat yang berubah kalimat setiap 3 detik berubah ke kalimat yang lainnya. Nah hal ini akan menyebabkan pengunjung lebih betah di blog kita karena ada teks yang bertulis kata mutiara atau biasa digunakan untuk artikel terbaru.

Cara Membuat

Nah untuk menggunakannya Anda harus sudah memasang Font Awesome, jika belum, tidak berfungsi itu slide.
1. Buka www.blogger.com
2. Buka Template > Edit Template, cari kode </head> komudian simpan kode di bawah ini tepat di atas kode </head> :
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
3. Simpan template

Jika sudah pernah memasang Font Awesome tidak perlu lagi mengikuti langkah-langkah di atas, langsung saja ikuti langkah-langkah di bawah ini:

1. Buka Tata Letak

2. Tambah Widget > HTML/JavaScript, kemudian salin kode di bawah ini di HTM/JavaScript tersebut.



<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: "\f10e"; 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>Terpuruk dalam masalah merupakan peluang hebat untuk kita.<br/><cite>&ndash; Albert Einstein.</cite></blanter><blanter>Tidak ada jaminan kesuksesan namun tidak mencobanya adalah jaminan gagal.<br/><cite>&ndash; Bill Clinton.</cite></blanter><blanter>Kesuksesan datang dari memiliki yang lebih besar dari rasa takut Anda.<br/><cite>&ndash; Terry Litwiller.</cite></blanter></div>