09 November 2014

Cara Membuat Slide Kalimat Pada Blog

Membuat Slide Kalimat Pada Blog

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

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic