Cara Membuat News Ticker Tulis Berjalan (marquee) Di Blog (VER 2)


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 Blogger
2. 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 atas
7. 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 Template

Cara Memasang jQuery Scroll Di Bawah

1. Sebelum Ketik Cari </body> Untuk jQuery Scroll Di Bawah
2. 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 Template

Cara Membuat News Ticker Marquee Di Blog

Float

A1. Sebelum Ketik Cari </head> Untuk CSS News Ticker
A2. 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 Lebar
A3. 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-kata
Perhatikan 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 Ticker
b2. 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 <body
B4. 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-kata
Perhatikan Warna Hijau Ganti URL Gambar Logo 
B5. Selesai Klik Simpan Template
B6. Lihat Hasil Blog

Selamat Mencoba Permainan Tahu Bulat

Anime :
Facebook twitter Google

Related Post

Berlangganan update artikel terbaru via email:

0 Komentar