Membuat Effect Marquee dengan jQuery Marquee Plugin!

Responsive Tooltip dengan jQuery, kali ini saya ingin berbagi tentang Cara Membuat Effect Marquee agar Support di semua Browser , yaitu deng...

Responsive Tooltip dengan jQuery, kali ini saya ingin berbagi tentang Cara Membuat Effect Marquee agar Support di semua Browser, yaitu dengan menggunakan plugin jQuery Marquee yang akan saya bagikan kali ini ..

Tutorial Blogger dan Widget Blogger
Mengapa saya share plugin ini? karena ada beberapa point plus-plus yang harus sobat tau pada plugin yang 1 ini, berikut saya review dikit kelebihan Jquery Marquee Plugin ini :
  • Mudah di gunakan!
  • Support di semua browser!
  • Responsive
  • Valid HTML5
  • Cool! ^_^
  • Buktikan sendiri!
Untuk sobat yang penasaran, berikut demo-nya :

Efek Marquee pada Text :
Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Efek Marquee pada Gambar
Effect Marquee ImageEffect Marquee ImageEffect Marquee ImageEffect Marquee ImageEffect Marquee ImageEffect Marquee Image

Cara Pemasangan :

Langkah-1 : Pastikan sobat sudah memasang jQuery Library, versi berapapun itu. jika belum silahkan simpan script external dibawah ini tepat sebelum kode </head> pada halaman Edit Template:
<!-- Library jQuery --><script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Catatan : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.

Langkah-2 : Simpan Plugin Jquery Marquee external di bawah ini tepat sebelum kode </head> :
<!-- Plugin jQuery Marquee --><script src='//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js' type='text/javascript'/>
Langkah-3 : Menambahkan CSS di bawah ini sebelum kode </head> :
<style>.marquee { overflow: hidden; width:95%; /* Atur Lebar Marquee */ border:1px solid #ddd; /* Tambahan */ background:#eee; /* Tambahan */ color:#333; /* Tambahan */ padding:5px; /* Tambahan */}</style>
Langkah-4 : Menambahkan JavaScript di bawah ini sebelum kode </body> :
<script type='text/javascript'>//<![CDATA[// Settingan Default Marquee nya disini bro!$('.marquee').marquee({ //Atur kecepatan marquee ( Hitungan Milisecond ) : duration: 9000, //Atur 'Delay' Waktu Sebelum Marquee dimulai : delayBeforeStart: 0, //Atur Arah Marquee 'left' atau 'right' : direction: 'left', //Aktifkan Duplikat Marquee 'true' atau 'false' duplicated: false, //Atur Jarak Duplikat Marquee ( Hitungan Pixel ) : gap: 10, //Hentikan Marquee ketika di sentuh 'true' atau 'false' pauseOnHover: true});//]]></script>
Langkah-5 : Cara Konfigurasi Efek Marquee di HTML dengan Tambahan Atribut penting dalam Plugin Marquee ini :

1. Standar Marquee :

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="marquee">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
2. Duplikat Marquee menggunakan Atribut data-duplicated="true/false"

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="marquee" data-duplicated="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
3. Menentukan Kecepatan Marquee menggunakan Atribut data-duration="value" ( Hitungan Milisecond ) :

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="marquee" data-duration='500'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="marquee" data-duration='100'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
4. Menentukan Arah Marquee menggunakan Atribut data-direction="left/right/up/down"

- Ke Kiri ( ← ) :
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="marquee" data-direction='left'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
- Ke Kanan ( → ) :
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<div class="marquee" data-direction='right'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
- Ke Atas ( ↑ ) :
Lorem Ipsum is simply dummy text 
<div class="marquee" data-direction='up' data-duration='3000' style='width:50%;height:30px;'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
- Ke Bawah ( ↓ ) :
Lorem Ipsum is simply dummy text
<div class="marquee" data-direction='down' data-duration='3000' style='width:50%;height:30px;'>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Sekian Postingan tentang Cara Memasang Efek Marquee di Blog agar Support di semua Browser dari saya. jika ada yang ditanyakan, silahkan biasakan untuk berdiskusi melalui kotak komentar di bawah ini. terima kasih

COMMENTS

Name

Aceh,23,Adsense,8,BBM,3,Biography,1,Bitcoin,4,Blog,21,Blogger,12,Blogging,55,Business,14,Cerita,3,CPNS,1,Delicious,1,Design,1,DeviantART,1,Digg,1,Dollar,3,Dunia,13,Facebook,5,Flickr,1,Friendster,1,Gambar,2,Game,34,Gmail,1,Google+,4,Hosting,1,Inspirasi,2,Instagram,1,Internet,13,Interview,11,Kesehatan,2,LinkedIn,1,Makalah,7,Marketing,12,Meme,8,Money,3,Motivasi,2,MySpace,1,Outlook,1,Path,1,Pendidikan,10,Pengetahuan,4,Pinterest,1,Plugin,5,PNS,1,Reddit,1,Review,4,Seo,53,Smartphone,5,Social Media,38,Sukses,3,Sumatera Barat,16,Sumatera Utara,3,Templates,1,Tips,6,Toko Online,3,Top10,18,Tumblr,1,Tutorial,29,Tutorial Blog,146,Twitter,3,Umum,9,Vimeo,1,VK,1,Weebly,1,WhatsApp,1,Widget,55,Wisata,4,WordPress,14,Yahoo,1,Youtube,3,
ltr
item
Mas Da Bang: Membuat Effect Marquee dengan jQuery Marquee Plugin!
Membuat Effect Marquee dengan jQuery Marquee Plugin!
https://3.bp.blogspot.com/-zfgnG9g66d4/Wkp7yZBisxI/AAAAAAAANjA/aXqbVFFDTbcCA5WOsSeGUo8ri7YJxCzdACLcBGAs/s1600/Widget-Header.png
https://3.bp.blogspot.com/-zfgnG9g66d4/Wkp7yZBisxI/AAAAAAAANjA/aXqbVFFDTbcCA5WOsSeGUo8ri7YJxCzdACLcBGAs/s72-c/Widget-Header.png
Mas Da Bang
https://blog.itapuih.com/2018/11/membuat-effect-marquee-dengan-jquery.html
https://blog.itapuih.com/
https://blog.itapuih.com/
https://blog.itapuih.com/2018/11/membuat-effect-marquee-dengan-jquery.html
true
2732475762120586724
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy