Cara Membuat Slide Kalimat Pada Blog

Cara Membuat Slide Kalimat Pada Blog

Rio Ilham Hadi

09 November 2014

Kali ini saya akan memberikan Tutorial yang pastinya menarik, dan cocok untuk di coba / di terapkan pada Blog. Slide Kalimat ini akan berubah Kalimatnya, dalam waktu 3 detik, Agar Logo yang Lampu, itu muncul sobat membutuhkan Font Awesome, Silahkan menuju Tutorial memasang Font Awesome disini. 

Slide kalimat ini, di cocokan di Footer, jika sobat ingin memasang di Sidebar, atau Halaman, sobat bisa merubah lewat CSS.

Contoh : .footer-wrapper menjadi .sidebar-wrapper atau .post

Jika sobat ingin memasang "Slide Kalimat" pada blog, silahkan ikuti tutorial di bawah ini.

Masukan CSS dibawah ini tepat di atas ]]></b:skin> atau </style>

 .footer-wrapper .widget blanter {
  margin: 10px 20px;
}

.footer-wrapper .widget blanter:before {
  content: "\f0eb";
  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;
} 

HTML > Kode HTML sobat bisa menaruhnya di mana saja di tempat yang sobat inginkan.

 <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; .</cite></blanter>
<blanter>Jangan pernah meremehkan diri sendiri. Jika kamu tak bahagia dengan hidupmu, perbaiki apa yang salah, dan teruslah melangkah.<br/>
<cite>&ndash; .</cite></blanter>
<blanter>Jangan selalu katakan "masih ada waktu" atau "nanti saja". Lakukan segera, gunakan waktumu dengan bijak.<br/>
<cite>&ndash; .</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; .</cite></blanter>
</div> 

Javascript silahkan sobat letakan di atas </body>

 <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> 

Versi Mudahnya, Jika Ingin di Letakan pada Widget, silahkan copy semua kode di bawah ini dan letakan pada Widget > Pilih HTML/Javascript > Letakan > Lalu Simpan.

 <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: "\f0eb";
  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; .</cite></blanter>
<blanter>Jangan pernah meremehkan diri sendiri. Jika kamu tak bahagia dengan hidupmu, perbaiki apa yang salah, dan teruslah melangkah.<br/>
<cite>&ndash; .</cite></blanter>
<blanter>Jangan selalu katakan "masih ada waktu" atau "nanti saja". Lakukan segera, gunakan waktumu dengan bijak.<br/>
<cite>&ndash; .</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; .</cite></blanter>
</div> 

Mungkin Itu saja tutorial kali ini, jika sobat menyukai Tutorial ini, silahkan Share Tutorial ini.

Sumber Kode Slide Kalimat Ini : PERTAMAX! Responsive HTML5 Blogger Template

Share This