بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
BREAKING News pada blog. Tutorial kita kali ini adalah membuat Breaking News Responsive dapat Berjalan Lancar di Blog. Cara membuat Breaking News dapat berjalan di segala perangkat ini bisa terbilang lumayan mudah. Oh iya Breaking News adalah sepenggal berita pilihan yang tampil dalam sesi pembacaan berita utuh pada sebuah media komunikasi. Kehadirannya membuat para penonton tahu akan berita yang sedang hangat atau viral baik di media sosial, media elektronik atau media lainnya. Keberadaan Breaking News ini sangat penting untuk ditampilkan di segala media komunikasi atau berita.
Fungsi Breaking News pada Blog adalah sebagai pemberi info artikel yang sedang trending atau trending news di blog tersebut. Dengan adanya Breaking News, para visitor blog dapat segera tahu apa saja artikel yang menjadi populer di blog yang sedang dibacanya. Sehingga ketika berselancar, paling tidak para visitor sudah tahu inti dari berita yang disampaikan lewat Breaking News. Hingga mereka tidak merasa kerepotan lagi.
Widget Breaking News ini biasanya tampil pada blog yang berisikan dengan tema berita, seperti berita daerah, berita nasional maupun berita mancanegara. Kehadirannya sangat membantu sekali dalam memberikan info sekilas, dan sepertinya widget Breaking News pada blog dengan niche berita memang sangat vital keberadaannya.
Baca Juga :
Sudah banyak blog yang menyisipkan widget ini, dari segi penampilan berbeda dari yang lainnya, penempatan juga berbeda dan bisa dimodifikasi tergantung kreasi dari si pemilik blog itu sendiri. Dan disini, saya akan memberikan sedikit tutorial penempatan breaking news di blog supaya tampil memikat dan bisa memberikan info sebanyak mungkin dan bermanfaat bagi pengguna.
Breaking News Responsive dengan CSS3
1. Masuk ke Tema
2. Kemudian pilih Sesuaikan : Edit HTML dan masuk kita ke template
3. Cari kode </head> dan tempelkan kode dibawah ini diatas dari kode </head> tersebut. Jangan sampai salah taruh sekali lagi ya, saya mengingatkan. Soalnya ini vital, sekali salah taruh tidak dapat muncul nanti breaking newsnya.
<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:#008B8B;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 #008B8B;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999);margin-left:9px;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://alifacode.com";
var jumlah_post = 10;
var marquee_speed = "5";
var close_button = false;
var info_text = true;
</script> 4. Setelah itu dilakukan saatnya kita taruh kode berikut ini diatas kode </body>, kodenya dibawah ini ya
<script src='https://rawcdn.githack.com/Alifacode/backupmaster/f600d04db923a9da3f164584a8493e9e8bc488af/breakingnews.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews"));
//]]>
</script>5. Baru kemudian save ya pekerjaan kamu. Dan untuk menampilkan widget breaking news, maka kita menambahkan kode berikut ini di blog kita di Tata Letak dan taruh di konten kosong disitu.
<div id='breaking-newsticker'/>Save lagi untuk terakhir kalinya dan sudah tampil itu di blog kamu.
Catatan :
Kata yang dibackground merah muda : https://alifacode.com diganti dengan URL blog kamu
Jumlah post = 10, diganti dengan berapa jumlah post yang kamu suka
Marquee Speed = 5, diganti dengan kecepatan jalan breaking newsnya
Itulah yang dapat saya sampaikan pada tutorial Breaking News Responsive dengan CSS3 kali ini. Semoga berkenan dan dapat berjalan tanpa hambatan breaking newsnya di blog kamu ya. Sekian dan terima kasih. Yesterday is a history, tomorrow is a mistery and today is a gift.
Label Postingan :
CSS
,
Search Console
,
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Memasang Breaking News Responsive di Blog . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
