Roundabout sangat terkenal jquery plugin yangmembuat tampilan konten slider sepertipembulatan 3d. Plugin ini yang mengubahstruktur elemen HTML statis ke meja putarseperti dikustomisasi wilayah interaktif.Sekarang saya membuat gambar inimenangkap Plugin otomatis dari pos blogger untuk Slider Isi Putaran Tentang.
Anda dapat melihat slider untuk blogger dari gambar ini :
Anda dapat melihat slider untuk blogger dari gambar ini :
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
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 di depannya
/* START
--------------------------------------------------------------------
Roundabout Content Slider using jQuery for blogger
By http://www.abu-farhan.com
--------------------------------------------------------------------
Roundabout
*/
#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;
/* Resize Image*/
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;}
/* END
--------------------------------------------------------------------
Roundabout Content Slider using jQuery
By http://www.abu-farhan.com
--------------------------------------------------------------------
Roundabout
*/
Langkah 2: TerapkanJavascript
Temukan ini:
</body>
Kemudian masukkan script di depannya
<!-- 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://abu-farhan-demo.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
0 ƘǿmєиtąЯ: