Tips Cara Membuat Headline Latest Post Di Blog

Sudah lama saya tidak update lagi, kali ini saya akan berbagi kepada kalian sebuah tutorial blogger tentang bagaimana cara membuat headline latest post (Breaking News) di blog. Kalian pasti sudah tahu apa yang saya maksud dengan headline latest post ini. Jika belum, headline yang saya maksud ini adalah widget yang akan menampilkan postingan terbaru blog kalian. Fungsinya sama seperti recent post, namun headline ini berbentuk horisontal dan biasanya diletakkan di header blog. Jika masih bingung, kalian bisa melihat demonya di link di bawah ini :

Demo

Bagaimana? Kalian tertarik? Tenang saja, cara membuatnya sangat mudah dan headline ini tidak akan terlalu memperlambat blog kalian atau bisa disebut ringan. Oke, langsung saja. Berikut ini adalah cara membuatnya :

• Seperti biasa, masuk ke dasboard blog kalian.
• Masuk ke pilihan Tata Letak (Layout).
• Kemudian klik Tambah Gadget (Add a Gadget). Jika ada banyak, klik salah satu. Yang mana saja tidak masalah. Namun saya sarankan untuk meletakannya di paling atas, supaya lebih cepat diload.
• Pilih yang  HTML/JavaScript.
• Kosongkan saja judulnya dan masukkan kode di bawah ini pada konten :

<style type='text/css' scoped="scoped">
#news { background:#2980b9; border-bottom: 5px solid #2c3e50; border-top: 5px solid #2c3e50; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 100%; position: fixed; top: 0px; left: 0px; }
.titlenews { background:#2c3e50; color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 9px; margin-top: -10px; position: absolute; }
#ltsposts { float: left; margin-left: 120px; }
#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0;}
#ltsposts li a { background: none !important; #2c3e50 !important; font: bold 12px/22px Tahoma; text-decoration: none; }
ul.shsocial { background:#2c3e50; 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/AVvXsEgUPXUBxRcAnWgr3ifwmmyE-oro_wEq73nWLKRL6ORJLKRv7A70tBstWSpCILrv06acxhlkPxK-BnptB7whXFlWtDIK0N01uSnssOovxgOyVMuLtjKiPnUUmChXPi4VJ1IlOHHK_nt15nM0/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'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/yondarkness.blog' rel='dofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/118163047156925704991' rel='dofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/yondarkness' rel='dofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='LINK RSS FEED DISINI' rel='dofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.yondarkness.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>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

• Jika sudah, sekarang tinggal tinggal disimpan.

Keterangan :
Kode berwarna PINK adalah kode warna, kalian bisa mengganti dan menyesuaikannya sesuai keinginan kalian.
Ganti kode berwarna BIRU dengan link url Facebook kalian.

Ganti kode berwarna MERAH dengan link url G+ kalian.
Ganti kode berwarna CYAN dengan link url Twitter kalian.
Ganti kode berwarna ORANGE dengan link url Rss blog kalian,
Ganti kode berwarna UNGU dengan link url blog kalian.

Bagaimana? Bisa bukan? Jika ada kesalahan atau error, mungkin karena ada langkah atau kode ukuran yang kurang pas dikarenakan template blog yang berbeda beda. Jika itu terjadi, silakan kalian tanyakan di komentar, jika saya sempat akan saya bantu sebisanya. Sekian artikel kali ini. Semoga bermanfaat. Jangan lupa untuk mampir kembali ke blog sederhana saya ini, tinggalkan komentar, dan klik tombol like di bawah ini.