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 19Ekstrak 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:$(document).ready(function() {
$('blockquote').quovolver();
});
</script>
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 ;))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;
}
<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>– 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>– 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>– 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>– 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>– 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>– 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 Scriptwidth: 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
}
<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$(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>
<ul id="testimonials">demo
<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>
Wassalam :)
Bagaimana dengan yang lainnya ;)) :D :-" Jangan kemana-mana, ambil kopi kalian dan lanjutkan membacanya karena akan menarik sob apa yang akan Beben si bloglang ganteng kalem tea ini tawarkan \m/
Yang hijau itu tuh nanti akan 
Hanya dengan menggunakan salah satu dari gambar beresolusi kurang lebih 75 x 80 tersebut sobat dapat menghasilkan seperti berikut! 
Keren kan sob :">
Itu screenshot 
Beben Koben si bloglang ganteng kalem mengucapkan:
Di pojok kiri bawah ada template² lain yg keren dan gaya punya juga loh sob ;)) ;)
Selain dari yg sudah yaitu "
