Cara Membuat Breaking News Ticker untuk Blogger

By: Lindo | Dibaca: 0 kali | 25 Mei 2023

Bagaimana Cara Membuat Breaking News Ticker untuk Blogger?

Untuk menambahkan breaking News Ticker pada Blogger, silahkan ikuti langkah demi langkah di bawah ini.

Apabila mentok dan tidak bisa berfungsi, jangan sungkan-sungkan bertanya dengan cara mengisi kolom komentar di bawah ini

  • Silahkan ke Dashboard Blogger Anda,
  • Pilih Tema – Edit HTML
  • CTRL + F lalu ketik <head>
  • Jika dapat, silahkan masukkan kode JS dan CSS di bawah ini
       
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
  • Sesudah itu, cari kode ]]></b:skin> lalu copy dan pastekan kode CSS di bawah ini tepat di atas ]]></b:skin>
       

        
.ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}          
.ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}           
.ticker-title{padding-top:9px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}           
.ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}           
.ticker-content a{text-decoration:none;color:#1F527B}           
.ticker-content a:hover{text-decoration:underline;color:#0D3059}           
.ticker-swipe{padding-top:9px;position:absolute;top:0;background-color:#f8f0db;display:block;width:800px;height:23px}           
.ticker-swipe span{margin-left:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}           
.ticker-controls{padding:8px 0 0;list-style-type:none;float:left}           
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}           
.ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}           
.ticker-controls li.jnt-play-pause.over{background-position:32px 32px}           
.ticker-controls li.jnt-play-pause.down{background-position:32px 0}           
.ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}           
.ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}           
.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}           
.ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}           
.ticker-controls li.jnt-prev.over{background-position:0 32px}           
.ticker-controls li.jnt-prev.down{background-position:0 0}           
.ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}           
.ticker-controls li.jnt-next.over{background-position:16px 32px}           
.ticker-controls li.jnt-next.down{background-position:16px 0}           
.js-hidden{display:none}           
.no-js-news{padding:10px 0 0 45px;color:#F8F0DB}           
.left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}           
.left .ticker-controls{padding-left:6px}           
.right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}           
.right .ticker-controls{padding-right:6px}

        
         
.ticker-wrapper.has-js{margin:0;padding:0;width:98%;height:42px;display:block;border-radius:0;background-color:#fff;border:1px solid #eee;font-size:12px}           
.ticker{width:80%;height:42px;display:block;position:relative;overflow:hidden;background-color:#fff}           
.ticker-title{background:#71db00;padding:10px;color:#FFF;font-size:16px;font-family:oswald;text-transform:uppercase;text-shadow:1px 1px 6px #666}           
.ticker-title:after{left:76px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-left:0;margin-top:1px;border-left:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}           
.ticker-content{background-color:#fff;margin-left:15px;color:#444;margin-top:1px}           
.ticker-swipe{background-color:#fff;position:relative;top:5px;left:100px!important}           
.ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}           
.ticker-controls{padding:0!important;margin:13px 0 0 10px !important;list-style-type:none;position:relative;right:-50px}           
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}           
.ticker-controls li a{border:0!important;padding:0!important}           
.ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}           
.ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}           
.ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}           
.ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:0}           
.ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:3.6em}           
.ticker .iauthor:before,.ticker .icomments:before,.ticker .idate:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}           
.ticker .iauthorpic{width:16px!important;height:16px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}           
.ticker span{padding-right:5px;font-family:Oswald;font-weight:400}           
.ticker .icomments a{color:#71db00;font-size:11px}           
.ticker .icomments a:hover{text-decoration:underline}           
.ticker .icomments:before{content:'\f086';padding:0 3px 0 0;color:#777;position:relative;top:-1px}           
.ticker .idate{font-size:11px;padding-right:7px}           
.ticker .idate:before{content:'\f073';padding:0 5px;color:#777;position:relative;top:-1px}           
.ticker .mbttitle{font-family:oswald;font-size:14px;color:#71db00!important;font-weight:400;text-decoration:none}           
.ticker .mbttitle:hover{text-decoration:underline}

Catatan:

Agar warna tema hijau bisa kita ubah, Cukup ganti kode warna yang saya tandai warna hitam tebal garis bawah dengan warna yang Anda sukai. Gunakan Tool kode Generator untuk mendapatkan kode warna html piihan Anda

Membuat Tampilan Layout

  • Setelah itu Simpan tempalte Anda
  • Sekarang masuk ke menu Tata Letak
  • Tambahkan widget baru – pilih HTML/JavaScript
Menambahkan breaking news ticker
Membuat Breaking News Ticker
  • Lalu pastekan kode di bawah ini di HTML/JavaScript
       

        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>           
<script type="text/javascript">           
//----------------------------Defaults           
var ListBlogLink = "https://pakbonar.blogspot.com/";           
var ListCount = 5;           
var TitleCount = 70;           
var ListLabel = "Widgets";

        
//----------------------------Function Start          
function mbtlist(json) {           
document.write('<ul id="js-news" class="js-hidden">');           
for (var i = 0; i < ListCount; i++)           
{

        
//-----------------------------Variables Declared          
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";           
//----------------------------- Title URL           
for (var j = 0; j < json.feed.entry[i].link.length; j++) {           
if (json.feed.entry[i].link[j].rel == 'alternate') {           
break;           
}           
}           
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";           
//----------------------------------- Title Stirng           
if (json.feed.entry[i].title!= null)           
{           
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);           
}

        
if (json.feed.entry[i].thr$total)          
{           
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";           
}           
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");           
ListAuthor=ListAuthor.slice(0, 1).join(" ");           
AuthorPic = json.feed.entry[i].author[0].gd$image.src;

        
//################### Date Format

        
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        
ListDate= json.feed.entry[i].published.$t.substring(0,10);

        
                         Y = ListDate.substring(0, 4);          
                        m = ListDate.substring(5, 7);           
                         D = ListDate.substring(8, 10);           
                         M = ListMonth[parseInt(m - 1)];  
//----------------------------------- Printing List           
var listing = "<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"           
+ListAuthor+ "</span> <span class='icomments'>"           
+ListComments + "</span>  <span class='idate'>"           
+ D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle' href="           
+ListUrl+           
"target='_blank'>"           
+ListTitle+           
"</a></li>";           
document.write(listing);           
}           
}           
document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");

        
/*##########Breaking News Ticker Settings########*/          
    $(function () {           
        $('#js-news').ticker({           
        speed: 0.20,           
        controls: true,   
        titleText: 'Hottest',           
        displayType: 'reveal',           
        pauseOnItems: 2000,    
});           
});           
</script>

Yang perlu Anda ganti:

  • ListBlogLink : Masukkan URL Blog Anda. Misalnya: https://pakbonar.blogspot.com/
  • ListCount : Berapa banyak jumlah postingan yang ingin anda tampilkan
  • TitleCount : Tentukan jumlah karakter dalam judul postingan
  • ListLabel : Ini adalah label. Silahkan masukkan label Anda yang ingin ditampilkan. Perlu di ketahui, Label sangat sensitif. Jadi perhatikan dan sesuaikan huruf besar dan kecil. Jika widget ini tidak berfungsi, koreksi kembali bagian tulisan label.
  • Speed : Silahkan edit dengan value 0-20. Semakin besar nilainya, maka semakin cepat scrool.
  • Control :Pilih salah satu True atau false. Jika True, maka akan menampilkan tombol control seperti Play/Pause, Next dll.
  • Title Text : Ini adalah judul ticker, teman-teman bisa bikin judul seperti: “HOT”, “Breaking News”, “Berita Terbaru” dan lain-lain.
  • displayType: Ada dua jenis animasi, reveal atau fade. Piih sesuai selera Anda.
  • TitleCount: Pilihlah berapa jumlah karakter huruf yang akan kita tampilkan dalam judul artikel. Apabila tidak ingin menampilkan judul posting terbaru dari blog Anda tanpa menyebutkan label/kategori tertentu, maka cukup hapus /-/”+ListLabel+” dari kode di atas.


konfigurasi html javascript
Menambahkan breaking news ticker
  • Setelah selesai, klik tombol simpan, dan cek halaman blog Anda.



Penulis : red

Bagikan:

Twitter Facebook Google Pinterest

Media Liputan Indonesia

DIATUR OLEH UNDANG - UNDANG PERS
No. 40 Thn. 1999 Tentang Pers


HAK JAWAB- HAK KOREKSI-HAK TOLAK


Kirim via:

WhatsApps / SMS:
08170226556 / 08123636556
Email Redaksi:
NewsLiputanIndonesia@gmail.com

PT. LINDO SAHABAT MANDIRI
Tunduk & Patuh Pada UU PERS.


Komentar

Diskusi

Berita lainnya:




toko online zeirshopee

Nama

#Berita viral,2,#BeritaViral,766,#Mafiakasus,7,#MafiaMigas,5,#MafiaPupuk,1,#MafiaRokok,6,#MafiaTanah,32,#Mudik2023,20,#Mudik2024,2,#Pemilu2024,59,#UMKM,4,a Regional,1,Advertorial,427,BAIS,5,Berita Terkini,1392,Berita Utama,4092,Berita-Terkini,3886,BIN,11,BNNK,16,BNNP,10,BPBD,1,BPN,5,Capres 2024,28,Covid-19,131,deklarasi,2,Destinasi-Wisata,72,Dewan Pers,8,Dinkes,1,EkoBis,446,Ekonomi & Bisnis,16,fasilitas,3,Galeri-foto-video,183,Gaya-Hidup,124,h,1,Hak Jawab,5,Hoax / Fakta,6,Hobby,76,HuKri,1,HuKrim,2351,hukum,28,index,23,Info Haji,21,insiden,1,Internasional,387,Internet,95,islami,5,Kesehatan,554,Kicau Mania,29,kontroversi,3,Korupsi,18,KPK,24,Kuliner,19,Laporan Masyarakat,16,Laporan-Masyarakat,458,Lindo-TV,142,Liputan Haji Indonesia,7,Liputan-Investigasi,400,Lowongan Kerja,4,masyarakat,1,Melek-Hukum,88,Miras,1,Nasional,2025,Negara,1,Olahraga,126,Opini Rakyat,161,Otomotif,12,Pemerinta,4,Pemerintah,1924,Pemilu 2024,95,Pendidikan,155,penghargaan,2,Peristiwa,719,PERS,32,Pilpres 2024,32,Politik,822,politisi,4,POLR,3,POLRI,2957,Prestasi,1,Pungli,50,Regional,7930,Regional Hukrim,4,regional Nasional,2,Religi,340,Santuni Anak Yatim,1,Sejarah,66,Selebritis,80,Seni-Budaya,113,ShowBiz,109,sosial,5,STOP PRESS,1,Technology,147,Tips-Trick,123,TNI,805,TNI AU,2,TNI-Polri,56,tokoh agama,1,Tokoh masyarakat,4,UMKM,2,Upacara,1,
ltr
item
Berita Utama, Informasi Terbaru, Kabar Terkini, Indonesia dan Dunia: Cara Membuat Breaking News Ticker untuk Blogger
Cara Membuat Breaking News Ticker untuk Blogger
Cara Membuat Breaking News Ticker untuk Blogger
https://www.androkit.com/wp-content/uploads/2022/03/widget-baru-html-javascript.webp
Berita Utama, Informasi Terbaru, Kabar Terkini, Indonesia dan Dunia
https://www.liputanindonesia.co.id/2023/05/cara-membuat-breaking-news-ticker-untuk.html
https://www.liputanindonesia.co.id/
https://www.liputanindonesia.co.id/
https://www.liputanindonesia.co.id/2023/05/cara-membuat-breaking-news-ticker-untuk.html
true
2214155929705458232
UTF-8
Buka semua Berita BERITA TIDAK ADA BUKA SEMUA BACA JUGA BALAS Cancel saja HAPUS Penulis NEWS HALAMAN ARTIKEL BUKA SEMUA Penting Dibaca.. BERITA UTAMA Arsip CARI SEMUA BERITA YANG KAMU CARI TIDAK ADA BRO.. Kembali saja.. 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 to a social network STEP 2: Click the link on your social network 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 Table of Content