.jpg)
Simple Ticker merupakan sebuah ticker yang dibangun menggunakan jquery/1.3.2/jquery.min.js dan sedikit CSS serta javascript. Penggunaan jQuery.1.3.2.min.js menjadikan ticker ini layak dipertimbangkan untuk dibuat sebagai salah satu pelengkap blog karena jQuery.1.3.2.min.js mempunyai kompabilitas tinggi dan sangat umum digunakan pada web ataupun blog.
Silahkan KLIK DEMO untuk melihat Simple Ticker.
Gunakan xHTML di bagian body di antara tag <body> dan tag </body>
Update » January, 09, 2012
Silahkan KLIK DEMO untuk melihat Simple Ticker.
D E M O
D E M OD E M OCara membuat Simple Ticker :
Copy dan simpan KODE CSS dan Javscript berikut di bagian head di antara tag <head> dan tag </head>(CSS di atas KODE ]]></b:skin> Javascript di bawah KODE kode ]]></b:skin>) kemudian simpan KODE HTML di bagian body di antara tag <body> dan tag </body> .Kode CSS Simple Ticker
#ticker{
background:#999;
width:190px;
height:300px;
padding:3px;
border:20px solid #ddd;
border-left-width:2px;
border-right-width:2px;
border-radius:8px;
box-shadow:0 0 8px #000;
overflow:auto;
}
#ticker dt{
font:bold 16px Times;
color:#FF9900;
text-shadow:1px 1px 1px #000;
padding:0 10px 5px 10px;
background:rgba(0,0,0,0.4);
padding-top:10px;
position:relative;
}
#ticker dt:hover{
background:#aaa;
color:red;
}
#ticker dd{
margin-left:0;
font-weight:normal;
font:12px Arial;
color:#eee;
text-shadow:1px 1px 1px #000;
padding:10px 5px 10px 5px;
background:rgba(0,0,0,0.1);
border:2px solid #aaa;
position:relative;
}
#ticker dd.last{
border-bottom:1px solid #fff;
}
#ticker div{margin-top:0;}
dd.text .GR_effect, dd.text a .GR_effect{
float:left;
margin:0 10px 3px 0;
border:1px solid #eee;
border-radius:4px;
background:#888;
box-shadow:2px 2px 2px #000;
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
dd.text .GR_effect:hover, dd.text a .GR_effect:hover{
transform:scale(1.6) translate(15px,0);
-o-transform:scale(1.6) translate(15px,0);
-moz-transform:scale(1.6) translate(15px,0);
-webkit-transform:scale(1.6) translate(15px,0);
}Javascript Simple Ticker
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {var ticker = $("#ticker");ticker.children().filter("dt").each(function() {var dt = $(this),container = $("<div>");dt.next().appendTo(container);dt.prependTo(container);container.appendTo(ticker);});ticker.css("overflow", "hidden");function animator(currentItem) {var distance = currentItem.height();duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;currentItem.animate({ marginTop: -distance }, duration, "linear", function() {currentItem.appendTo(currentItem.parent()).css("marginTop", 0);animator(currentItem.parent().children(":first"));}); };animator(ticker.children(":first"));ticker.mouseenter(function() {ticker.children().stop();});ticker.mouseleave(function() {animator(ticker.children(":first"));});});
//]]>
</script>xHTML Simple Ticker
Gunakan xHTML di bagian body di antara tag <body> dan tag </body>
<div id="tickerContainer">
<dl id="ticker" style="text-align:left;">
<dt class="heading">Image Gallery</dt><dd class="text"><a href="http://gubhugreyot.blogdetik.com" target="_blank" title="Penasaran? Eit.... 'ntar dulu! Udah sunat blom? Klo blom mending jangan dulu, dah!"><img class="GR_effect" src="https://sites.google.com/site/gubhugreyotprojects/jan-2010/images/gadisku-001-gubhugreyot.jpg" width="100" height="194" /></a>Kami sediakan berbagai bentuk image gallery di sini dari bentuk gallery yang paling sederhana dengan hanya menggunakan CSS hingga berbagai bentuk yang lain yang lebih kompleks dengan berbagai effect untuk semakin mempercantik penampilan image gallery. Kami sediakan demo di setiap image gallery sehingga anda tidak akan kesulitan untuk melihat dan membandingkan setiap image gallery.</dd>
<dt class="heading">Cars</dt><dd class="text"><div align="justify"><img class="GR_effect" src="https://sites.google.com/site/gubhugreyotprojects/jan-2010/images/ferrari_gubhugreyot.jpg" width="100" height="78" />Membeli mobil bukanlah sesuatu yang mudah untuk dilakukan. Berbagai hal sangat diperlukan sebagai bahan pertimbangan sebelum mobil nongkrong di garasi rumah kita. Bila Anda menginginkan berbagai pertimbangan dan referensi tentang mobil yang ingin anda beli (baru ataupun bekas), kami menyediakan secara lengkap berbagai referensi dan spesifikasi mobil yang anda kehendaki lengkap dengan gambar dalam ukuran besar ....</div></dd>
<dt class="heading">Ruang Iklan !</dt><dd class="text"><div align="justify">Jika anda membutuhkan produk anda dengan cepat dikenal, baik di dalam negeri ataupun hingga ke seluruh penjuru dunia, di sinilah tempat yang paling tepat untuk anda. Hanya dengan Rp. 5.000,- produk anda akan kami tayangkan selama 5 tahun dengan durasi tayang 10 jam dalam sehari! Saya jamin anda akan puas melebihi rasa puas ketika anda berdua dengan istri anda !!!!!</div></dd>
<dt class="heading">Title di sini!</dt><dd class="text"><img class="GR_effect" src="https://sites.google.com/site/gubhugreyotprojects/jan-2010/images/gadisku-002-gubhugreyot.jpg" style="width:100px; height:73;"/>Tuliskan teks di sini! Berbagai hal bisa anda simpan dalam box ini. Jika anda punya kambing atau onta dari pada harus buat kandang lebih baik masukkan saja sekalian di sini juga. Yah ... sekarang khan intinya efisiensi segalanya. Ya... uang ... ya... kandang...</dd>
<dt class="heading">Wanita dan Usia!!!</dt><dd class="text"><img class="GR_effect" width="100" height="132" src="https://sites.google.com/site/gubhugreyotprojects/jan-2010/images/old-woman-gubhugreyot.jpg" />Semakin sering mata anda melihat wanita cantik, maka umur anda akan bertambah setiap kalinya. Berdasarkan hasil riset di Kenya, saat tanpa berkedip anda menatap gambar wanita cantik selama 10 menit, maka umur anda akan bertambah selama 10 tahun. Ayo segera lakukan dan habiskan air mata anda demi umur yang semakin panjang. Capailah umur hingga seribu tahun untuk kepuasan hidup anda!!!! Setelahnya silahkan anda menikah sebanyak anda suka setelah istri atau suami anda meninggal.</dd>
</dl>
</div>Catatan/Keterangan:
- Rubah nilai width dan height pada syntax #ticker{ (KODE CSS) untuk merubah lebar dan tinggi ticker.
- Ganti bacground image untuk merubah tampilan ticker.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » January, 09, 2012» Happy Blogging - gubhugreyot «
tolong donk di infokan kalo ada tips terbaru lagi!!!
BalasHapusmas bro ! demo nya kok gak bisa di buka ya
BalasHapus