Ini Permainan Android Di Tahu Bulat Apakah OWN TV Ini Diatas Berita Ticker. Ini Gambar Logo Google Diatas-Kiri Apakah Ini. Cara Membuat News Ticker Marquee Di Blog Apakah Ini. Ada jQuery Marquee dan Jam Di News Ticker. Ini Versi 2 Ini News Ticker Marquee Lama Versi 1 Siapa Apakah Ini.
Lama Versi News Ticker Marquee
VER 1
Cara Memasang jQuery Marquee
1. Masuk Blogger2. Klik Template >> Edit HTML
3. Tekan Cari Ctrl + F
4. Sebelum Ketik Cari </head> Untuk Plugin jQuery Marquee
5. Letakkan kode Di bawah Untuk Plugin jQuery Marquee Ini </head> Di atas
<script src='https://cdn.rawgit.com/songketwarnetma/maharani-site-ma/master/jquery.marquee.min.js' type='text/javascript'></script>
6. Terus Cari </body> atau <div id='outer-wrapper'> atau <div id='wrapper'> Di atas7. Letakan kode Di Bawah Untuk Script jQuery Marquee Ini </body> atau <div id='outer-wrapper'> atau <div id='wrapper'> Di atas
<script type='text/javascript'>
//<![CDATA[
$('.marqueenews').marquee({
duration: 9000,
delayBeforeStart: 0,
direction: 'left',
duplicated: true,
gap: 10,
pauseOnHover: true
});
//]]>
</script>
8. Selesai Klik Simpan TemplateCara Memasang jQuery Scroll Di Bawah
1. Sebelum Ketik Cari </body> Untuk jQuery Scroll Di Bawah2. Letakkan kode Di bawah Untuk jQuery Scroll Di Bawah Ini </body> Di atas
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){$(".newstickertb").css($(this).scrollTop()>100?{top:"0px"}:{top:"-200px"})});
//]]>
</script>
3. Selesai Klik Simpan TemplateCara Membuat News Ticker Marquee Di Blog
Float
A1. Sebelum Ketik Cari </head> Untuk CSS News TickerA2. Letakan kode Di bawah Untuk CSS News Ticker Ini </head> Di atas
<style>
.newstickertb .marqueenews{overflow:hidden;width:90%;float:right}
.newstickertb{position:fixed;top:-200px;left:0;width:100%;z-index:150000;background-color:#4285F4;color:#FFF;font-family:Sans-serif;transition:all .4s ease-out}
.newstickertb .logo{float:left;background-color:#FFF}
@media only screen and (max-width:700px){.newstickertb .marqueenews{width:85%}}
@media only screen and (max-width:500px){.newstickertb .marqueenews{width:80%}}
@media only screen and (max-width:400px){.newstickertb .marqueenews{width:75%}}
@media only screen and (max-width:300px){.newstickertb .marqueenews{width:70%}}
</style>
Perhatikan Warna Merah Layar Responsif LebarA3. Ketik Cari <body
A4. Letakan kode Di bawah <body Di bawah
<div class="newstickertb">
<div class="logo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FwEm2lEEBPJ7s4_ovN_jAZ4aNSKq-JRmgeGx0MUsV7jJUXimCtudNhro1bDHqJ44AUjF4AujQPL2LP7Dx6FjTG0Qp-RBXQqb4ef95abYzccKb6625vn3tAi9pN-qlQ46aOyiFQYuqk0p/s1600/fixed-google-logo-font.png" style="height: 20px"/>
</div>
<div class="marqueenews">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
Perhatikan Warna Biru Ganti Kata-kataPerhatikan Warna Hijau Ganti URL Gambar Logo
A5. Selesai Klik Simpan Template
A6. Lihat Hasil Blog
atau Position
B1. Sebelum Ketik Cari </head> Untuk CSS News Tickerb2. Letakan kode Di bawah Untuk CSS News Ticker Ini </head> Di atas
<style>
.newstickertb .marqueenews{overflow:hidden;width:100%;}
.newstickertb{position:fixed;top:-200px;left:0;width:100%;z-index:150000;background-color:#4285F4;color:#FFF;font-family:Sans-serif;transition:all .4s ease-out}
.newstickertb .logo{position: absolute;top: 0;left: 0;background-color:#FFF}
.newstickertb .newstickertb-body {position: relative;}
</style>
B3. Ketik Cari <bodyB4. Letakan kode Di bawah <body Di bawah
<div class="newstickertb">
<div class="newstickertb-body">
<div class="logo">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FwEm2lEEBPJ7s4_ovN_jAZ4aNSKq-JRmgeGx0MUsV7jJUXimCtudNhro1bDHqJ44AUjF4AujQPL2LP7Dx6FjTG0Qp-RBXQqb4ef95abYzccKb6625vn3tAi9pN-qlQ46aOyiFQYuqk0p/s1600/fixed-google-logo-font.png" style="height: 20px"/>
</div>
<div class="marqueenews">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</div>
Perhatikan Warna Biru Ganti Kata-kataPerhatikan Warna Hijau Ganti URL Gambar Logo
B5. Selesai Klik Simpan Template
B6. Lihat Hasil Blog