Cara Membuat Widget Breaking News Super Keren di Blog
Cara membuat Breaking News Di Blog - Membuat Widget Head Line / Breaking Nes Pada Sebuah blog Akan membuat tampilan Blog menjadi lebih profesional.
Breaking News yang 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. Maka dari itu pada pada kesempatan kali ini saya akan memberikan tutorial tentang Cara membuat widget breaking news 2 style di blogger
Pada umumnya Widget breaking news ini di gunakan oleh situs atau blog dengan niche blog berita, namun jika anda ingin 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 anda.
Style 1.
Widget breaking news ini memiliki cara pemasangan yang cukup mudah dan tidak ribet, dan juga menggunakan tambahan icon
dengan menggunakan Font Awesome. Untuk pergeserannya, widget breaking
news ini bergeser keatas sehingga terlihat lebih elegan.
Berikut adalah tampilan dari widget breaking News Style 1:
Cara Memasang Widget Breaking News Style 1
Keterangan:
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:
Cara Memasang Widget Stye 2 Adalah Sebagai Berikut:
Pengaturan :
Kemudian cari kode </body> masukan kode di bawah ini tepat diatasnya
Selanjutnya masukan kode HTML di bawah ini tepat sesudah kode <body>
Setelah selesai memasukan semua kode di atas, silahkan klik Simpan tema, jika berhasil maka widget akan muncul di blog di Bagian Atas.
Demikian adalah cara membuat widget Breaking News pada Blog Semoga bermanfaat, jika ada pertanyaan atau ada yang mau menambahkan silahkan diskusikan bersama melalui kolom komentar.
Breaking News yang 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. Maka dari itu pada pada kesempatan kali ini saya akan memberikan tutorial tentang Cara membuat widget breaking news 2 style di blogger
Pada umumnya Widget breaking news ini di gunakan oleh situs atau blog dengan niche blog berita, namun jika anda ingin 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 anda.
Cara Membuat Widget Breaking News Super Keren di Blog
Widget breaking news ini memiliki cara pemasangan yang cukup mudah dan tidak ribet, dan juga menggunakan tambahan icon
dengan menggunakan Font Awesome. Untuk pergeserannya, widget breaking
news ini bergeser keatas sehingga terlihat lebih elegan.
Berikut adalah tampilan dari widget breaking News Style 1:
Cara Memasang Widget Breaking News Style 1
- Langkah pertama silahkan agan masuk ke akun Blogger agan
- 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Ss88WtGUkGxWtHNDCs4S1eHrJMyuBH194UuJj1bg42bAMsQhF9zw5lII6SfegoKwtfIC7K8n8bgP8_wdV2zKPyxlZSS1aGCIbHc5ouGO9Hn6__Ifnf-G_XRcEWOWujKdYXPPhbjr5zb9/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.adsenstock.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('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
Keterangan:
- Ganti angka 10 dengan jumlah artikel yang anda ingin tampilkan.
- Ganti angka 3000 dengan angka yang anda inginkan, gunanya adalah mengatur durasi jeda dari widget breaking news ini.
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:
Cara Memasang Widget Stye 2 Adalah Sebagai Berikut:
- 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 = "http://www.adsenstock.com";
var jumlah_post = 10;
var marquee_speed = "6";
var close_button = false;
var info_text = true;
</script>
#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 = "http://www.adsenstock.com";
var jumlah_post = 10;
var marquee_speed = "6";
var close_button = false;
var info_text = true;
</script>
- Silahkan ganti URL http://www.adsenstock.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.
<script src='https://rawgit.com/mastamvan/backup/master/breakingnews.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews"));
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews"));
//]]>
</script>
<div id='breaking-newsticker'/>
Setelah selesai memasukan semua kode di atas, silahkan klik Simpan tema, jika berhasil maka widget akan muncul di blog di Bagian Atas.
Demikian adalah cara membuat widget Breaking News pada Blog Semoga bermanfaat, jika ada pertanyaan atau ada yang mau menambahkan silahkan diskusikan bersama melalui kolom komentar.
0 Response to "Cara Membuat Widget Breaking News Super Keren di Blog"
Post a Comment
Silahkan Berkomentar Sesuai Dengan Topik Pembahasan,Komentar Spam Tidak Akan Muncul Sorry..!!!!