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

1

Ini Permainan Android Di Tahu Bulat Apakah OWN TV Ini Diatas Berita Ticker. Ini Gambar Logo Google Diatas-Kiri Apakah Ini. Ada Social Media Ini Facebook, Twitter, Google Plus, Instagram dan Lainnya. Ini Ada Dialog Social Media dan Contact Info Apakah Ini.Cara Membuat News Ticker Marquee Di Blog Apakah Ini. Ada jQuery Marquee dan Jam Di News Ticker. Ini Versi 3 Ini News Ticker Marquee Lama Versi 2 Siapa Apakah Ini.

Lama Versi News Ticker Marquee
VER 1
VER 2

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:80%;float:left}
.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:1100px){.newstickertb .marqueenews{width:78%}}
@media only screen and (max-width:1000px){.newstickertb .marqueenews{width:75%}}
@media only screen and (max-width:900px){.newstickertb .marqueenews{width:69%}}
@media only screen and (max-width:700px){.newstickertb .marqueenews{width:62%}}
@media only screen and (max-width:600px){.newstickertb .marqueenews{width:57%}}
@media only screen and (max-width:500px){.newstickertb .marqueenews{width:75%}.newstickertb .facebook{display:none}.newstickertb .twitter{display:none}.newstickertb .googleplus{display:none}.newstickertb .instagram{display:none}}
@media only screen and (max-width:400px){.newstickertb .marqueenews{width:68%}}
@media only screen and (max-width:300px){.newstickertb .marqueenews{width:65%}}
.newstickertb ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333;float:right}
.newstickertb ul li{float:right;border-right:1px solid #bbb;transition:all .4s ease-out}
.newstickertb ul li a{display:block;color:white;text-align:center;padding:2px 7px;text-decoration:none}
.newstickertb .facebook{background-color:#3B5998}
.newstickertb .twitter{background-color:#55ACEE}
.newstickertb .googleplus{background-color:#EA4335}
.newstickertb .instagram{background-color:#3F729B}
.newstickertb .more{background-color:#FBBC05}
.newstickertb .facebook:hover,.newstickertb .twitter:hover,.newstickertb .googleplus:hover,.newstickertb .instagram:hover,.newstickertb .more:hover{background-color:#EEE}
.newstickertb .facebook a:hover{color:#3B5998}
.newstickertb .twitter a:hover{color:#55ACEE}
.newstickertb .googleplus a:hover{color:#EA4335}
.newstickertb .instagram a:hover{color:#3F729B}
.newstickertb .more a:hover{color:#FBBC05}
</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>
<ul>
<li class="more"><a href="#"><i class="fa fa-plus"></i></a></li>
<li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="googleplus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>  
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
Perhatikan Warna Biru Ganti Kata-kata
Perhatikan Warna Hijau Ganti URL Gambar Logo
Perhatikan Warna Ungu Tambahkan URL Social Media
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 .ntm-socialmedia {position: absolute;top: 0;right: 0}
.newstickertb .newstickertb-body {position: relative;}
@media only screen and (max-width:500px){.newstickertb .facebook{display:none}.newstickertb .twitter{display:none}.newstickertb .googleplus{display:none}.newstickertb .instagram{display:none}}
.newstickertb ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333;float:right}
.newstickertb ul li{float:right;border-right:1px solid #bbb;transition:all .4s ease-out}
.newstickertb ul li a{display:block;color:white;text-align:center;padding:2px 7px;text-decoration:none}
.newstickertb .facebook{background-color:#3B5998}
.newstickertb .twitter{background-color:#55ACEE}
.newstickertb .googleplus{background-color:#EA4335}
.newstickertb .instagram{background-color:#3F729B}
.newstickertb .more{background-color:#FBBC05}
.newstickertb .facebook:hover,.newstickertb .twitter:hover,.newstickertb .googleplus:hover,.newstickertb .instagram:hover,.newstickertb .more:hover{background-color:#EEE}
.newstickertb .facebook a:hover{color:#3B5998}
.newstickertb .twitter a:hover{color:#55ACEE}
.newstickertb .googleplus a:hover{color:#EA4335}
.newstickertb .instagram a:hover{color:#3F729B}
.newstickertb .more a:hover{color:#FBBC05}
</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 class="ntm-socialmedia">
<ul>
<li class="more"><a href="#"><i class="fa fa-plus"></i></a></li>
<li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="googleplus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>  
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
</div>
</div>
Perhatikan Warna Biru Ganti Kata-kata
Perhatikan Warna Hijau Ganti URL Gambar Logo
Perhatikan Warna Ungu Tambahkan URL Social Media 
B5. Selesai Klik Simpan Template
B6. Lihat Hasil Blog

Cara Membuat Dialog Social Media dan Contact Info



Cara Memganti Tanpa Link Ini Lainnya

C1. Ketik Cari </head> Untuk Gaya Tanpa Link
C2. Letakkan Kode dibawah Gaya Tanpa Link ini </head> diatas
<style>
/* Tanpa Link Untuk News Ticker Marquee */
.newstickertb ul li .not-a{display:block;color:white;text-align:center;padding:2px 7px;text-decoration:none;cursor:pointer;}
</style>
C3. Sebelum Ketik Cari Dibawah a:hover Untuk Ganti Hover Lainnya
.newstickertb .more a:hover{color:#FBBC05}
C4. Sesudah Gantikan Kode dibawah .not-a:hover Untuk Ganti Hover Lainnya
.newstickertb .more .not-a:hover{color:#FBBC05}
C5. Sebelum Ketik Cari Dibawah Untuk Kode Icon Ini Sebelum Link Hilangkan #
<li class="more"><a href="#"><i class="fa fa-plus"></i></a></li>
C6. Sesudah Gantikan Kode dibawah Untuk Kode Icon Ini Tanpa # Itu tambah showdialogsocialmedia
<li class="more showdialogsocialmedia"><span class="not-a"><i class="fa fa-plus"></i></span></li>
C7. Selesai Klik Simpan Template

Cara Memasang Dialog Social Media dan Contact Info

D1. Ketik Cari </head> Untuk Gaya Dialog Social Media
D2. Letakkan Kode Dibawah Gaya Dialog Social Media ini </head> diatas
<style>
.dialogsocialmedia {position: fixed;top: 20px;right: 10px;width: 368px;    border: 2px solid #888;background-color: #222;color:#EEE;z-index:160000;display:none;}

/* Social Media Icon */

.dialogsocialmedia .dialogsocialmedia2 ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333;}
.dialogsocialmedia .dialogsocialmedia2 li{float:left}
.dialogsocialmedia .dialogsocialmedia2 li a{display:block;color:white;text-align:center;padding:8px 8px;text-decoration:none;transition:all .4s ease-out;}
.dialogsocialmedia .dialogsocialmedia2 li a:hover{background-color:#EEE;color:#222}
.dialogsocialmedia .dialogsocialmedia2  .facebook{background-color:#3B5998}
.dialogsocialmedia .dialogsocialmedia2  .twitter{background-color:#55ACEE}
.dialogsocialmedia .dialogsocialmedia2  .googleplus{background-color:#EA4335}
.dialogsocialmedia .dialogsocialmedia2  .instagram{background-color:#3F729B}
.dialogsocialmedia .dialogsocialmedia2  .facebook a:hover{color:#3B5998}
.dialogsocialmedia .dialogsocialmedia2  .twitter a:hover{color:#55ACEE}
.dialogsocialmedia .dialogsocialmedia2  .googleplus a:hover{color:#EA4335}
.dialogsocialmedia .dialogsocialmedia2  .instagram a:hover{color:#3F729B}
.dialogsocialmedia .dialogsocialmedia2  .famobi{background: linear-gradient(#0094c6, #ef7d00, #ffffff);}
.dialogsocialmedia .dialogsocialmedia2  .playbuzz{background-color:#bc49ff;}
.dialogsocialmedia .dialogsocialmedia2  .playbuzz a:hover{color:#bc49ff;}
.dialogsocialmedia .dialogsocialmedia2  .spilgames{background-color:#8f165b;}
.dialogsocialmedia .dialogsocialmedia2  .spilgames a:hover{color:#8f165b;}
    

/* Contact Info */
.contactinfo {background-color: #222;color: #FFF;height: 200px;overflow: auto;box-sizing: border-box;}
.contactinfo a{text-decoration: none;}
.contactinfo a:link{color: #EEE}
.contactinfo a:visited{color: #DDD}
.contactinfo a:hover{color: #FFF}
.contactinfo a:active{color: #888}
.contactinfo > div {border-bottom: 2px solid #DDD;}
.contactinfo .facebook {background-color: #3B5998;color: #FFF;padding: 7px;}
.contactinfo .twitter {background-color: #55ACEE;color: #FFF;padding: 7px;}
.contactinfo .googleplus {background-color: #EA4335;color: #FFF;padding: 7px;}
.contactinfo .instagram {background-color: #3F729B;color: #FFF;padding: 7px;}
.contactinfo .whaff {background-color: #4190f6;color: #FFF;padding: 7px;}
.contactinfo .call {background-color: #A4C639;color: #FFF;padding: 7px;}
.contactinfo .email {background-color: #006699;color: #FFF;padding: 7px;}
.contactinfo .linenaver {background-color: #3ace01;color: #FFF;padding: 7px;}
.contactinfo .kakaotalk {background-color: #ffe812;color: #000;padding: 7px;}
.contactinfo .wechat {background-color: #2dc100;color: #FFF;padding: 7px;}
.contactinfo .whatsapp {background-color: #02a75a;color: #FFF;padding: 7px;}
.contactinfo .bbm {background-color: #0075bc;color: #FFF;padding: 7px;}

/* Responsive Dialog Social Media */
@media only screen and (max-width: 400px) {
    .dialogsocialmedia {right: 0px;width: 100%}
}
</style>
D3. Terus Ketik Cari </body> Untuk jQuery Dialog Social Media
D4. Letakkan Kode Dibawah jQuery Dialog Social Media ini </body> diatas
<script>
$(document).ready(function(){
    $(".showdialogsocialmedia").click(function(){
        $(".dialogsocialmedia").toggle();
    });
});
</script>
D5. Lanjut Ketik Cari <div id='outer-wrapper'> atau <div id='wrapper'> Di atas Untuk Dialog Social Media
D6. Letakkan Kode Dibawah Untuk Dialog Social Media ini <div id='outer-wrapper'> atau <div id='wrapper'> Di atas
<div class="dialogsocialmedia">
<div class="dialogsocialmedia2">
<ul>
  <li class="facebook"><a href="#" title="Like us Facebook"><i class="fa fa-facebook fa-fw"></i></a></li>
  <li class="twitter"><a href="#" title="Follow us Twitter"><i class="fa fa-twitter fa-fw"></i></a></li>
  <li class="googleplus"><a href="#" title="Circle us Google Plus"><i class="fa fa-google-plus fa-fw"></i></a></li>
  <li class="instagram"><a href="#" title="Follow us Instagram"><i class="fa fa-instagram fa-fw"></i></a></li>
<li><a href="#" title="See us Change Log"><i class="fa fa-file-text-o fa-fw"></i></a></li>
<li class="famobi"><a href="#" title="Play us Famobi"><i class="fa fa-gamepad fa-fw"></i></a></li>
  <li class="playbuzz"><a href="#" title="Subscribe us Playbuzz"><i class="fa fa-gamepad fa-fw"></i></a></li>
  <li class="spilgames"><a href="#"  title="Invite us Games.co.id"><i class="fa fa-gamepad fa-fw"></i></a></li>
<li><a href="#" title="Invite us Kogama"><i class="fa fa-simplybuilt fa-fw"></i></a></li>
  <li><a href="#" title="Follow us Github"><i class="fa fa-github fa-fw"></i></a></li>
  <li><a href="#" title="Codepen"><i class="fa fa-codepen fa-fw"></i></a></li>
<li><a href="#" title="Foursquare"><i class="fa fa-foursquare fa-fw"></i></a></li>
  <li><a href="#" title="Linkedin"><i class="fa fa-linkedin fa-fw"></i></a></li>
  <li><a href="#" title="Donate us Paypal"><i class="fa fa-paypal fa-fw"></i></a></li>
  <li><a href="#" title="Pinterest"><i class="fa fa-pinterest-p fa-fw"></i></a></li>
  <li><a href="#" title="Tumblr"><i class="fa fa-tumblr fa-fw"></i></a></li>
  <li><a href="#" title="Vine"><i class="fa fa-vine fa-fw"></i></a></li>
  <li><a href="#" title="Subscribe us Youtube"><i class="fa fa-youtube-play fa-fw"></i></a></li>
  <li><a href="#" title="Stumbleupon"><i class="fa fa-stumbleupon fa-fw"></i></a></li>
  <li><a href="#" title="Delicious"><i class="fa fa-delicious fa-fw"></i></a></li>
  <li><a href="#" title="Dribbble"><i class="fa fa-dribbble fa-fw"></i></a></li>
  <li><a href="#" title="Dropbox"><i class="fa fa-dropbox fa-fw"></i></a></li>
  <li><a href="#" title="Reddit"><i class="fa fa-reddit fa-fw"></i></a></li>
  <li><a href="#" title="Twitch"><i class="fa fa-twitch fa-fw"></i></a></li>
  <li><a href="#" title="Flickr"><i class="fa fa-flickr fa-fw"></i></a></li>
  <li><a href="#" title="Slideshare"><i class="fa fa-slideshare fa-fw"></i></a></li>
  <li><a href="#" title="Spotify"><i class="fa fa-spotify fa-fw"></i></a></li>
  <li><a href="#" title="Scribd"><i class="fa fa-scribd fa-fw"></i></a></li>
  <li><a href="#" title="JS Fiddle"><i class="fa fa-jsfiddle fa-fw"></i></a></li>
  <li><a href="#" title="DIGG"><i class="fa fa-digg fa-fw"></i></a></li>
  

  
</ul>
</div>
<div class="contactinfo">

---- LETAKKAN KONTAK INFORMASI ----

</div>
</div>
Perhatikan Warna Merah Ini Hapus Kode Salah Satu Link Social Media
Perhatikan Warna Biru Ini Tambahkan Daftar Kontak Infomasi Ini Blog Disini
D7. Selesai Klik Simpan Template
D8. Lihat Hasil Blog

Selamat Mencoba Permainan Tahu Bulat dan Sosial Media

Anime :
Facebook twitter Google

Related Post

Berlangganan update artikel terbaru via email:

1 Komentar

  1. Giri Diwa Adam5 June 2017 at 22:06

    Keren Sis Lanjtkan Terus ya..

    Silahkan Mampir Ke Blog Saya

    http://infoanime88.blogspot.com/
    http://darkerosenin1.blogspot.com/
    http://lyricslagua-b-c.blogspot.com/

    ReplyDelete