Cara Memasang Widget Newsticker di Blogger dengan Mudah

7 Jan 2021 - - 1

Anda pasti pernah melihat ada beberapa judul postingan terbaru yang biasanya diberi efek animasi berjalan, baik dari kiri ke kanan atau dari kanan ke kiri, nah widget itu disebut dengan Newsticker. Sebenarnya widget ini sama recent post, namun widget Newsticker ini hanya menampilkan teks saja, tanpa ada ringkasan artikel dan thumbnail gambar pendukung artikel.

Pada umumnya widget Newsticker ini diletakan di bawah header blog, atau di atas postingan. Nah, bagaimana cara membuatnya? silahkan ikuti tutorial ini dan jangan lupa untuk dipraktekan.

1. Login di Blogger.com – klik menu Tema – dan klik Edit HTML.

2. Copy dan Pastekan kode di bawah ini, dan taruh di atas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

3. Salin kode Style CSS di bawah ini dan taruh sebelum kode ]]></b:skin> atau </style>

/*########Newsticker Styles#########*/
.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}

/*########Blogger Newsticker by MBT#########*/
.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:#DD4F43;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 #DD4F43;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:#DD4F43;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:#DD4F43;font-family:fontAwesome;position:relative;left:1.8em} .ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#DD4F43;font-family:fontAwesome;position:relative;left:0} .ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#DD4F43;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:#DD4F43;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:#DD4F43!important;font-weight:400;text-decoration:none} .ticker .mbttitle:hover{text-decoration:underline}

/*########Newsticker Styles responsive by mrmung.com#########*/
@media only screen and (max-width:480px){ .icomments{display:none;} .idate{display:none;} }

Jangan lupa klik simpan.

4. Masuk ke menu tata letak, kemudian tambahkan gadget HTML/JavaScript, salin kode di bawah ini dan letakkan di dalam gadget 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://www.mrmung.com/";
var ListCount = 5;
var TitleCount = 70;
var ListLabel = "Artikel";
//----------------------------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?alt=json-in-script&callback=mbtlist'></"+"script>");

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

Jangan lupa klik simpan.

Untuk alamat blog yang saya beri warna merah pada kode di atas, silahkan anda ganti dengan alamat blog anda.

Selamat mencoba, semoga bermanfaat.