Cara Membuat Breaking News Blog

AA Sciences, Aldi Andreansyah - Breaking News Blog, Headline blog, Cara Membuat Breaking News Blog.

Cara Membuat Headline Breaking News Blog

Sudah tidak asing lagi jika membahas sebuah breaking news di telinga kita khususnya itu yang paling utama membahas istilah breaking news yakni seperti acara stasiun televisi yang dimana hal tersebut di jelaskan mengenai sebuah informasi seperti hal nya informasi yang ada di sekeliling kita untuk diinformasikan terhadap kita khususnya para penonton.

Membahas mengenai breaking news, breaking news sering sekali kita jumpai yakni breaking news memilki arti yaitu Breaking yang berarti terkini dan News nya yakni Berita, sehingga arti dari sebuah breaking news yakni berita terkini, nah jika membahas mengenai apa itu berita terkini, berita terkini yaitu sebuah informasi/berita yang dimana menjadi bahan pembicaraan di waktu ini (hari ini) atau istilah berita terkini pun dapat diartikan sebagi berita yang sedang trend (populer) pada masa kini khusnya hari² ini.

Sebuah breaking news sering kita jumpai dalam stasiun televisi maupun sebuah acara streaming video dan bahkan sebuah tautan berjenis artikel dan breaking news lainnya. Salah satu ciri breaking news yakni terdapat fitur yang dimana layaknya terdapat sebuah informasi yang tertera pada tampilan baik itu televisi, video, artikel dan website. Yang biasanya informasi tersebut ber efek berjalan layak nya berita pada stasiun televisi dan lainnya.

Nah jika mengenai pembahasan mengenai pemasangan breaking news pada sebuah tampilan website maka tampilan sebuah website pun tak kalah dengan televisi dan Video, melainkan sebuah website pun dapat memasang nya sebuah breaking news, baik breaking news berjalan, breaking news naik turun dan masih banyak efek breaking news lainnya.

Nah di kali ini AA Sciences akan membahas mengenai breaking news yakni yang dimana breaking news tersebut memilki fitur bergerak dari atas ke bawah yang dimana pula sebuah breaking news ini secara otomatis menampilkan keseluruhan semua postingan baik dari yang awal dan akhir postingan, keren bukan ??? Hehe.

Ya sudah jika kalian sudah penasaran mengenai Pembuatan Breaking News di Blog, maka langsung saja mengenai pembuatan nya di bawah ini.

Cara Membuat Breaking News Blog

Berikut tutorial nya membuat breaking news di blog nya, cekidot :

Pembuatan CSS nya terlebih dahulu :

• Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.
• Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode b:skin atau <style>.
• Jika sudah ditemukan kode b:skin atau <style> tadi, langsung saja kalian Copy Paste kan Script CSS/Breaking news nya di bawah ini, tepat pada bagian dalam nya kode b:skin atau <style> nya tadi, berikut script CSS nya :

/* CSS Breaking News */

#breakingnews {margin:15px 0 0 0;margin-right:15px;height:42px;line-height:29px;overflow:hidden;background:#fff;border:1px solid #e3e3e3;}

#breakingnews .breakhead {position:absolute;background:none repeat scroll 0 0 #374760;color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6px 20px;}

#adbreakingnews li a {font-family:inherit;font-weight:350;color:#666;margin-top:5px;transition:all 0.3s ease-in-out;}

#adbreakingnews li a:hover {color:#30cc91;}

#adbreakingnews {float:left;margin-left:50px;margin-top:5px;}

#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}

Catatan :

Kalian dapat menyesuaikan kemauan untuk pewarnaan nya, dengan Kode Warna HTML sesuka kalian.

Pembuatan Jquery nya :

• Masih dalam mode template -> maka langsung saja kalian CTRL+F untuk mencari cari kode </body> atau pada umumnya kode ini terletak pada bagian paling bawah pada sebuah templatenya berikut Script Jquery nya :

<script type='text/javascript'>

//<![CDATA[

// Breaking News

$(document).ready(function(){var e="https://aldiandreansyah.blogspot.co.id",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});

//]]>

</script>

Catatan :

Ubah teks berwarna Merah/URL AA Sciences ganti dengan URL kalian.

Pembuatan HTML nya agar widget Breaking News nya muncul.

• Masih dalam mode template - > CTRL+F (untuk memudahkan pencarian) - > Cari kode </head> atau </header> atau tepatnya dimana kode tersebut terletak pada bawah atau atas sebuah header, jika sudah di temukan langsung saja pasang script pemanggil (HTML) lalu pasang tepat pada bagian sesudah </head> atau </header> atau Widget atas/bawah header, berikut script HTML nya :

<div id='breakingnews'><span class='breakhead'><i class='fa fa-sitemap'/></i></span>

<div id='adbreakingnews'> Sebentar...</div></div>

• Terakhir, langsung saja Simpan Template dan lihat hasilnya

Catatan :

Jika kalian tidak menemui atau tidak dapat terpasang widget nya tepat pada bagian header (atas/bawah, maka kalian dapat mengikuti langkah lainnya dengan cara di bawah ini :

• Login Blogger - > Tata Letak - > Tambah Gadget (Usahakan Gadget tersebut terletak pada atas/bawah header) - > HTML Javascript - > lalu langsung saja salin Script HTML nya di bawah ini tepat pada Subjek nya, bukan judul nya, untuk judul kosongkan saja, berikut script HTML nya :

<div id='breakingnews'><span class='breakhead'><i class='fa fa-sitemap'/></i></span>

<div id='adbreakingnews'> Sebentar...</div></div>

• Langkah terakhir, langsung saja simpan dan lihat hasilnya pada bagian header kalian.

Nah mungkin hanya cukup sekian saja mengenai pembahasan pembuatan Headline Breaking News di Blog yang dapat AA Sciences sampaikan tentunya, Semoga bermanfaat dan sekaligus menambah wawasan kalian, Amin.

Share this post