Cara Membuat Breaking News di Blog
Breaking News atau Headline News yaitu widget blog berisi posting terbaru yang tampil di bagian header, di atas logo atau di bawah menu. Desainnya seperti running text (teks berjalan).
Breaking News ini biasanya dipasang di template blog magazine style atau blog berita. CB sih tidak menganjurkan pasang. Soalnya, selain hanya bikin loding blog jadi berat, juga kayaknya gak penting dipasang.
Namun, masih aja ada blogger yang mau pasang, seperti klien layanan premium CB. Maka, jaga-jaga ada yang mau pasang lagi, CB simpan kodenya berikut ini plus cara memasangnya.
Cara Membuat Breaking News di Blog
Kode CSS:
Dipasang di atas kode ]]></b:skin>
#breakingnews {
float: left;
height: 40px;
line-height: 42px;
overflow: hidden;
width: 100%;
background: #eee;
box-shadow: 0 2px 7px -3px #000;
-ms-box-shadow: 0 2px 7px -3px #000;
-moz-box-shadow: 0 2px 7px -3px #000;
-o-box-shadow: 0 2px 7px -3px #000;
}
#recentpostbreaking li a {
color:#949494;
font-family: sans-serif;
font-weight: bold;
}
#recentpostbreaking li a:hover {
color:#e91b23;
}
#breakingnews .tulisbreaking {
background:#e91b23;
}
#breakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}
#breakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: left;
font-family: sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPxY6bR9Bl7_NInNCEsubmuCPj70sQ91DLi5s7BLpjmxlR6o-ooyFJQ2Z7d8Jb8BEwcSphHbI85mLVbSnc2D3-ltfTfm4R9T9ynRrIyi5mVcVbLDTApsYHFdyCBTJ3_z9UKHIGPkuzF0Oo/s1600/ticker-bg.png) no-repeat right center;
color: #fff;
float: left;
font: 700 20px/20px 'Oswald',sans-serif;
max-width: 155px;
height: 20px;
padding: 10px 25px 10px 20px;
text-transform: uppercase;
}
#recentpostbreaking {
float: left;
margin-left: 155px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
div#fontoo {
width: 100%;
display: block;
line-height: 0;
overflow: hidden;
border-bottom: 1px solid #dfdfdf;
}
div#fontoo p {
margin: 0px 30px;
font-size: 16px;
text-shadow: 0 1px 0 #fff;
color: #333;
font-family: 'Ubuntu', Arial, Lucida, sans-serif;
}
Kode HTML:
Pasang di posisi di mana breakingnews ini mau ditampilkan, misalnya di bawah kode menu navigasi.
<b:if cond='data:blog.pageType == "index"'>
<div class='fontoo section' id='fontoo'>
<div id='breakingnews'>
<span class='tulisbreaking'>
DON'T MISS
</span>
<div id='recentpostbreaking'>
Loading...
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://contohblognih.blogspot.com/', // Replace With your Blog Url
numpostx = 20; // Maximum Post
$.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>';
$('#recentpostbreaking').html(skeleton);
// kode untuk efek pada breaking news
function tick(){
$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);
} else {
$('#recentpostbreaking').html('<span>No result!</span>');
}
},
error: function() {
$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
}
});
});
//]]>
</script>
</div>
</b:if>
3. Ganti alamat blognya.
4. Save Template!
Demikian Cara Membuat Breaking News di Blog.
Good Luck & Happy Blogging!
Posted by , Published at Maret 31, 2019 and have
0
komentar
