◄ Min  Size Fonts: + | - | ± Color: Max ►

Quovolver - jQuery plugin for Revolving Quotes

Blockquote, atau catatan yang bisa ditampilkan secara indah dan gaya :D apabila kita telah memberikan sentuhan² keindahan CSS didalam template blog kita :P Ternyata dengan sentuhan Plug-in jQuery, blockquote ini dapat ditampilkan secara slide (bergantian) dengan menuliskan beberapa syntax blockquote :-? Dengan begitu kita akan memiliki pesan dalam bentuk blockquote jika kita tanam dalam Add a Gadget akan bisa rubah-rubah gitooo... MANTAP!!! GAYA!!! MODERN!!! ayeee \m/ b-) Pada blog ini blockquotenya seperti ini sob ;)) :">
Aku sedang ingin bercinta, karena!!! Karena ada kamu disiniii... Aku ingin (nabok)Dewa 19
Ekstrak file yg sudah di download dan cari jquery.quovolver.js Hostingkan terlebih dahulu script itu di Google Code ;) Jika sudah letakan dibawah jQuery inti atau dibawah kode <head><script type="text/javascript" src="jquery.quovolver.js"></script>Jika sudah letakan script plugin berikut di atas/sebelum kode </body>
<script type="text/javascript">
$(document).ready(function() {
$('blockquote').quovolver();
});
</script>
Kalau sobat sudah ada kode² CSS blockquote didalam template sobat, maka tambahkanlah kode² CSS yg belum ada jadi sbb:
blockquote p {
margin-bottom: 10px;
font-style: italic;
}
blockquote cite {
font-style: normal;
display: block;
text-align: right;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
font-family: Arial, Helvetica, sans-serif;
}
blockquote {
font-family: Georgia, Times, serif;
width: 300px; /* required */
margin: 0 auto;
}
Untuk pemakaiannya (kode HTML) bisa dalam postingan atau juga Add a Gadget ;))
<blockquote>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<cite>&ndash; Quote Author (Quote #1)</cite>
</blockquote>
<blockquote>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<cite>&ndash; Quote Author (Quote #2)</cite>
</blockquote>
<blockquote>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<cite>&ndash; Quote Author (Quote #3)</cite>
</blockquote>
<blockquote>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<cite>&ndash; Quote Author (Quote #4)</cite>
</blockquote>
<blockquote>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<cite>&ndash; Quote Author (Quote #5)</cite>
</blockquote>
<blockquote>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<cite>&ndash; Quote Author (Quote #6)</cite>
</blockquote>

Quote Rotator

Setali tiga uang, ini trik lainnya guna menampilkan blockquote dengan jQuery tapi dengan metode pemanggian unordered list.
Kode CSS
#testimonials {
width: 100%;
height: 100px;
list-style-type: none;
margin:0;
padding:0
}
#testimonials .slide { }
blockquote {
font-size: 15px;
font-family: Georgia, "Times New Roman", Times, serif;color: #333;
font-style: italic
}
jQuery Script
<script type='text/javascript'>
$(document).ready(function(){
$('#testimonials .slide');
setInterval(function(){
$('#testimonials .slide').filter(':visible').fadeOut(2000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(3000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(3000);
}
});
},3000);
});
</script>
Kode HTML
<ul id="testimonials">
<li class="slide">
<blockquote>"Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non, anglese moderne secundo da web. Non message linguistas al, non nomine capital primarimente su. Effortio."</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te.</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem.</blockquote>
</li>
</ul>
demo
Wassalam :)
Loading...
XQuovolver - jQuery plugin for Revolving Quotes

Subscribe my posts Register For Free!

6 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE