Monday, April 29, 2019

Cara Buat Headline News Dengan Mudah di Blog

Monday, April 29, 2019

Tips Cara Buat Headline News Dengan Mudah di Blog


Cara buat headline responsive di blog seperti di halaman utama pada blog iyaseo.id ini di buat dengan sangat mudah karena sudah tersedia awal mula di install template nya,mungkin di blog sahabat belum memasang headline news ? ok kalau belum saya akan share ke anda semua cara ini sangatlah simple dan mudah karena tinggal sahabat semua bisa menyedot {COPY PASTE} nya di blog ini dan terus meletakan nya di blog sahabat di bagian atas postingan terbarunya {Latest Posts}. Tapi yang akan di share dibawah ini berbeda dengan tampilan yang terdapat di halaman depan blog ini, dan Berikut Cara Buat Headline News Dengan Mudah di Blog Dengan tampilan Breaking News TEXT berjalan di blog;

#. Login pada akun blogger.

#. Masuk ke Layout → Add a Widget.

#. Copy kode dibawah ini, lalu masukan kedalam widget HTML/Javascript.



<!-- breaking news kangibay.net -->

<style scoped='scoped' type='text/css'>

#news { background:#49505a; border-bottom: 4px solid #E6A816; border-top: 0px solid #333; display: block; float: left; height: 30px; 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: -3px 0px 0px 137px;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-bookmark'/> BREAKING <span style='color:#E6A816;'>NEWS</span> :</span>
<div id='ltsposts'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://namablogkamu.blogspot.co.id/', // Ganti dengan URL blog sobat
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 dengan URL blog yang berwarna merah dengan url blognya
  // Maximum berita yang akan muncul
  // Kecepatan yang diinginkan


#. Setelah semua sudah di ganti dengan benar langkah terakhir tinggal klik Simpan.



Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog sobat dengan mengubah beberapa value kode html widget tersebut.


TAMBAHAN :

Selain menggunakan Add a Wigdet, sobat bisa langsung memasukan kode tersebut dibawah kode html menu pada pengaturan "Edit HTML" blog sobat, biasnya struktur kode menu setelah </header>





Show comments
Hide comments