Konten Bundar Slide

Roundabout sangat terkenal jquery plugin yang membuat tampilan konten slider seperti pembulatan 3d. Plugin ini yang mengubah struktur elemen HTML statis ke meja putar seperti dikustomisasi wilayah interaktif. Sekarang saya membuat gambar ini menangkap plugin yang otomatis dari pos blogger untuk Slider Isi Putaran Tentang.

Sekarang Ikuti semua langkah-langkah

Langkah 1: Menerapkan Style

Login ke Dashboard Blogger dan arahkan ke Layout> Edit HTML
Jangan klik kotak centang yang mengatakan 'Expand Template Widget'
menemukan ini

]]></b:skin>

Kemudian masukkan script ini depannya

#featured                            {margin:10px 0 30px 0;}
#folio_scroller_container            {margin-top:35px; margin-bottom:40px; height:auto;}
#folio_scroller_container .roundabout-holder {list-style:none; height:400px; margin:0px auto 20px auto;}
.roundabout-holder                    {list-style:none; width:400px; height:250px; margin:0px auto;}
.roundabout-moveable-item             {font-size:12px!important;
/* Gambar */
height:180px;
width:350px;
/*-------------*/
cursor:pointer; padding:5px; border:1px solid #aaaaaa; -webkit-border-radius:5px; -moz-border-radius:5px; background:#f9f9f9;}
.roundabout-moveable-item img         {height:100%; width:100%; background-color:#FFFFFF; margin:0;}
.roundabout-in-focus                 {cursor:auto;}
.roundabout-in-focus:hover            {-webkit-box-shadow:0px 0px 20px #787878; -moz-box-shadow:0px 0px 20px #787878; background:#f9f9f9;}
.roundabout-holder span                {display:none; font-size:12px;}
.roundabout-in-focus:hover span        {display:inline; position:absolute; bottom:5px; right:5px; padding:8px 20px; background:#f9f9f9; color:#000000; z-index:999; -webkit-border-top-left-radius: 5px; -moz-border-radius-topLeft: 5px; font-size : 12px;border-left:1px solid #aaaaaa; border-top:1px solid #aaaaaa; }
.roundabout a:active,
.roundabout a:focus,
.roundabout a:visited                {outline:none; text-decoration:none;}
.roundabou li                         {margin:0}
a img                                {border:none; outline:0;}

Langkah 2: Terapkan Javascript

Temukan ini:

</body>

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/jquery.roundabout-1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 jQuery(document).ready(function($) {
 var interval;
 $('#featured ul')
 .roundabout({
 duration: 600 }
 )
 .hover(
 function() {
 // oh no, it's the cops!
 clearInterval(interval);
 },
 function() {
 // false alarm: PARTY!
 interval = startAutoPlay();
 }
 );
 // let's get this party started
 interval = startAutoPlay();
 });
 function startAutoPlay() {
 return setInterval(function() {
 jQuery('#featured ul').roundabout_animateToNextChild();
 }, 5000);
 }
 </script>

Langkah 3: Terapkan Gadget

Desain -> Klik "Tambah Gadget" -> HTML / JavaScript tipe.

<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-roundabout.js"></script><script style="text/javascript">
 var numposts_gal = 6;
 var random_posts = false;
</script>
<script src="http://exyezet.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>

Artikel Terkait:

Blogger

• Cara membuat tombol minimize dan maximize
• Cara Membuat Daftar Isi Dengan Jquery
• Cara Membuat Kotak Area Dengan Efek Membesar Saat Disorot Mouse
• Cara Membuat Link Bergoyang Dengan Javascript
• Post Populer dengan Animasi
• Cara membuat Label cloud berputar di blog
• Putar Gambar dengan CSS3 tanpa Javascript
• Pasang Modus Hemat Energi di Blog
• Membuat Tombol Top Up
• Gambar Dengan Efek Zooming di Blog
• Kotak Text Area Dengan Tombol Select All
• Cara Membuat Browser Berputar
• Cara Membuat Efek Coret Pada Postingan
• Image Gallery Menggunakan Jquery 1.4.2
• Cara Menampilkan Favicon Di Semua Browser
• Cara Membuat Random Post Di Blogger
• Cara membuat Artikel Terkait Dengan Gambar/Thumbnails
• Cara Mudah Pasang Emoticon Di Kotak Komentar
• Cara Pasang Head Line News
• Membuat Artikel Terkait Dengan Fungsi Scroll
• Cara Membuat Fitur Reply Pada Kotak Komentar
• Cara Mudah Membuat Recent Post Bergambar Dengan Efek Naik Tangga
• Cara menampilkan Icon Di Judul Postingan
• Memanipulasi Tampilan Jumlah Komentar