Menu Close Menu

Cara Lengkap dan Pas Memasang Breaking News Di Website (Blog)

Sabtu, 23 Juni 2018 | 18:32 WIB
BLOGGING - Breaking News atau headline news biasa kita lihat di televisi. Breaking news ini biasanya menayangkan berita-berita terbaru secara sekilas, namun tidak hanya di televisi saja kita bisa melihat breaking news atau headline news ini, di website berita juga selalu ada. Untuk itu pada tutorial kali ini saya akan memberikan tutorial cara membuat widget breaking news 2 style keren.

Widget breaking news ini biasanya di gunakan oleh situs atau blog dengan niche berita, namun bagi agan yang mau menggunakan widget ini selain niche berita juga di perbolehkan, karena berdampak positif bagi blog seperti menambah view dan memberitahukan kepada visitor bahwa ada artikel lainnya di dalam blog atau situs agan.

Widget breaking news yang saya bagikan ini memiliki 2 style, berikut tampilan widget breaking news 2 style :

Style 1

Widget breaking news ini memiliki cara pemasangan yang tidak rumit, dan juga tambahan icon dengan menggunakan Font Awesome. Untuk pergeserannya, widget breaking news ini bergeser keatas sehingga terlihat elegan. Berikut adalah tampilan dari widget breaking news style 1.

Style 2

Widget breaking news yang terakhir ini sama seperti yang sering kita lihat di televisi, yaitu bergeser kesamping. Berikut adalah tampilan widget breaking news style 2.

Jika agan sudah melihat beberapa style dari widget breaking news ini, sekarang tinggal memilih style yang mana yang agan ingin pakai. Untuk cara memasang widget breaking news 2 style, silahkan ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Widget Breaking News 2 Style di Blogger :

Cara Memasang Widget Breaking News Style 1 :

1.Langkah pertama silahkan agan masuk ke akun Blogger agan
2.Pilih menu Tema, pilih Edit HTML, cari kode <body> kemudian tempatkan kode dibawah ini tepat di bawahnya :

<style scoped='scoped' type='text/css'>
#news { background:#49505a; border-bottom: 4px solid #1194f2; border-top: 0px solid #333; display: block; float: left; height: 25px; line-height: 25px; overflow: hidden; padding: 8px 0 0 0px; width: 100%; }
.titlenews {color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 6px 0 0 10px;margin: -7px 0 0 0; position: absolute; }
#ltsposts {float: left;margin: -2px 0px 0px 150px;text-align: left;}
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; color:#fff !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#333; float: right; margin: -8px 0; }
ul.shsocial li {float:left;list-style: none outside none;border:none;}
ul.shsocial li a{background-color:transparent;background-image:url(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
ul.shsocial li.fb a{ background-position:0 0}
ul.shsocial li.gp a{ background-position:-96px 0}
ul.shsocial li.rs a{ background-position:-192px 0}
ul.shsocial li.tw a{ background-position:-256px 0}
ul.shsocial li.fb a:hover{ background-position:0 -32px}
ul.shsocial li.gp a:hover{ background-position:-96px -32px}
ul.shsocial li.rs a:hover{ background-position:-192px -32px}
ul.shsocial li.tw a:hover{ background-position:-256px -32px}
</style>

<div id='news'>
<span class='titlenews'><i aria-hidden='true' class='fa fa-newspaper-o fa-lg'/> BREAKING <span style='color:#ff4f4f;'>NEWS</span> :</span>
<div id='ltsposts'>
Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.metropublik.com/', // Ganti dengan URL blog agan
numpostx = 10; // Maximum berita yang akan muncul
$.ajax({
 url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
 type: 'get',
 dataType: "jsonp",
 success: function(data) {
 var posturl, posttitle, skeleton = '',
 entry = data.feed.entry;
 if (entry !== undefined) {
 skeleton = "<ul>";
 for (var i = 0; i < entry.length; i++) {
 for (var j=0; j < entry[i].link.length; j++)
 {
 if (entry[i].link[j].rel == "alternate")
 {
 posturl = entry[i].link[j].href;
 break;
 }
 }
 posttitle = entry[i].title.$t;
 skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>
';
 }
 skeleton += '</ul>
';
 $('#ltsposts').html(skeleton);
 function tick(){
 $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
 }
 setInterval(function(){ tick () }, 3000); // kecepatan yang diinginkan
 } else {
 $('#ltsposts').html('<span>No result!</span>');
 }
 },
 error: function() {
 $('#ltsposts').html('<b>Error Loading Feed!</b>');
 }
});
});
//]]>
</script>
1.Pengaturan : Ganti URL https://metropublik.com dengan URL blog agan.

2.Ganti angka 10 dengan jumlah artikel yang agan ingin tampilkan.
3.Ganti angka 3000 dengan angka yang agan inginkan, gunanya adalah mengatur durasi jeda dari widget breaking news ini.

Setelah selesai mengatur pilih Simpan tema, jika berhasil maka akan muncul widget breaking news ini tepat di atas blog agan.

Cara Memasang Widget Breaking News Style 2 Langkah pertama silahkan agan masuk  ke akun Blogger agan Pilih menu Tema, pilih Edit HTML, cari kode </head> kemudian tempatkan kode dibawah ini tepat di atasnya.


<style type="text/css">
#breaking-newsticker{margin:15px 0;position:relative}
#post_breakingnews{position:relative;z-index:9;overflow:hidden;padding:8px;width:100%!important;box-sizing:border-box;box-shadow:0 5px 5px -5px #3339}
.breakingnewstitle{float:left;background-color:#f54b4b;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase;position:relative}
.breakingnewstitle:after{height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-top:1px;border-left:13px solid #f54b4b;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999);margin-left:9px;margin-top: -3px;z-index:9}
.breakingnews marquee{width:80%;position:absolute}
@media screen and (max-width:800px){.breakingnews marquee{width:70%}}
@media screen and (max-width:500px){.breakingnews .breakingnewstitle{width:90px;font-size:11px;font-weight:normal}.breakingnews .breakingnewstitle:after{content:none}.breakingnews marquee{width:55%}}
.breakingnews marquee a{color:#1893fc;margin:0 15px;line-height:2}
#post_breakingnews .breakingnews{width:1120px;max-width:100%;margin:0 auto}
</style>

<script type='text/javascript'>
var url_breaking = "https://metropublik.com";
var jumlah_post = 10;
var marquee_speed = "6";
var close_button = false;
var info_text = true;
</script>

Pengaturan : Silahkan ganti URL https://metropublik.com dengan URL blog agan. Ganti angka 10 dengan jumlah artikel yang agan ingin tampilkan di widget
breaking news.

Ganti angka 6 dengan angka yang agan inginkan, angka ini di gunakan untuk kecepatan breaking news. Di close_button, silahkan ganti false dengan true jika agan ingin menampilkan tombol close.'

Kemudian cari kode </body> masukan kode di bawah ini tepat diatasnya tepat sesudah kode

Komentar