Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Headline Breaking News di Blog

Headline Breaking News Blogger Cara Membuat Headline Breaking News di Blog – sebenarnya ini sama seperti widget recent post atau latest post namun hanya saja pada widget headline breaking news ini berbentuk horisontal seperti navigasi yang biasanya di pasang diatas header atau di bawah navigasi menu atau bisa juga di atas footer blog. Pada widget headline breaking news ini nantinya akan memunculkan setiap artikel terbaru pada sebelah kiri dan disebelah kanannya terdapat widget jejaring social media. Untuk memasang widget headline breaking news ke dalam blog caranya cukup mudah, anda hanya perlu menambah widget dan bisa mengaturnya untuk bisa ditaruh dimana tempat yang anda sukai dengan menggeser bagian elemen tata letak layout blog. Untuk melihat seperti apa memasangnya ke dalam blog, berikut langkah-langkahnya untuk Cara Membuat Headline Breaking News di Blog.

Demo

1. Login pada akun blogger.
2. Masuk ke Tata Letak blog dan tambahkan widget.
3. Copy kode berikut ini lalu masukan kedalam widget HTML/Javascript.
<style type='text/css' scoped="scoped">
#news { background:#52e052; border-bottom: 5px solid #333; border-top: 5px solid #333; display: block; float: left; height: 20px; line-height: 20px; overflow: hidden; padding: 5px 30px; width: 835px; }
.titlenews { background:#333; 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; color:#333 !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'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='http://www.facebook.com/andestyle' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='gp'>
<a href='https://plus.google.com/104093787575230359634' rel='nofollow' target='_blank' title='googleplus'>
</a></li>
<li class='tw'>
<a href='http://twitter.com/rizkyandes' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/masandes' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://mas-andes.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>';
            $('#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>
Keterangan:
Tulisan warna biru ganti dengan lebar blog anda.
Ganti http://mas-andes.blogspot.com dengan URL alamat blog anda.
Tulisan yang berwarna merah ganti dengan ID masing-masing.

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

Untuk menentukan dimana letak widget breaking news tersebut bisa sesuaikan dengan blog anda dengan menggeser elemen tata letak.

Berlangganan artikel via email

144 Response to "Cara Membuat Headline Breaking News di Blog"

bisa bikin blog kita mkin lambat gak ini gan ?/

Balas

Mantap mas artikel-nya

Balas

owh...sama seperti recent post ya mas, kebetulan di blog saya kolom recent post nya masih kosong, bisa dipertimbangkan nih :)

Balas

Salam Mas Andes. ijin simak di artikel terbarunya Mas Andes ini
Ilmu dan pengetahuan baru lagi buat saya. ijin belajar buat nambahin
Pengetahuan, tentang Headline news di blog. keren artikelnya Mas

Balas

Mas Zacky, kalau script dari Mas Andes sudah di uji
gak bakalan begitu memakan beban load kaya nya mah
Ya Mas Andes..?

Balas

Selamat pagi dan met beraktivitas aja smoga sukses slalu..btw breaking newnya keren tuh mas

Balas

headline keren sekali karena ada tombol media socialnya. kalau dulu aku sempat pasang yang model beginian tapi tidak ada tombol sharingnya. terimakasih.

Balas

blog apapun jika ditambahan widget atau kode script pasti akan mengurangi daya kecepatan, itu pendapatku lo.

Balas

keren mas andes, apalagi ada penambahan tombol media sosialnya

Balas

wah seperti di film2 aja ya ada breaking nyus nya :D
belum pernah pasang yang beginian jadi pengen, tapi loading blog WS uda berat ni :(

Balas

kayanya begitu kang karris hehe...
coba dulu baru tahu lambat atau nggk nya :D

Balas

bisa di buat eksperimen dengan blog masing-masing, ini lambat atau tidak dengan kode yang begitu banyak.

Balas

bagus banget widget nya jadi terlihat kayak surat kabar online ya mas ada breaking news. Sepertinya cocok untuk dipasang di blog nich :)

Balas

sama seperti yang di blog sy, cuman blog sy emang udh dari templatenya

Balas

Bagus banget nich mas! Boleh juga kalo diterapin. tapi loadingnya berat gak mas??

Balas

Bagus widget nya, Ada sosial media nya

Balas

seep keren bin mantap mas ....

Balas

emm kira-kira berapa ons y ???

Balas

Lumayan nih mas, buat tambah2 desain blog.
comeback

Balas

mencoba itu penting juga yah untuk pengalaman hehe...

Balas

wah kayaknya mbak Ririn tertarik juga nih hehe...

Balas

keren mas jadi blognya lebih hidup, ada yang bergerak-gerak gitu yah hehe...

Balas

Makasih mas Karysta, sama-sama semoga bermanfaat :)

Balas

gak perlu pikir-pikir lagi kang, tancap aja breaking newsnya hehe...

Balas

mas andes kok gak muncul demonya .. aku pake mozila terbaru ni mas..

Balas

saya akan terapkan nanti :) thanks master

Balas

Biasanya sich lebih dari satu kilo. Udah harus diet Kang Rul soalnya udah kebanyakan JS.

Balas

Tengkiu sharingnya om...ijin bukmak dulu.
Salam kenal dan jalau sempat mampir ya :)

Balas

pengen niru
itulah ke inginan ku
ketika aku datang padamu

hehehe

keren ....

Balas

Jangan kayaknya dong mbak...langsung dijajal aja hehehe ane juga mau nyobain di blog saya yg lain

Balas

coba sekali mas Nucky, mungkin sebelumnya belum beruntung, kalo beruntung dapet mangkuk :D

Balas

wah mantap nih mas Virlyz, selalu mengikuti perkembangan :)

Balas

biasa mas Anthonie, saya pasangnya belakangan aja, nunggu mas Anthonie dulu :D

Balas

sepertix gk terlalu berat ni.., kapan2 aq coba ya.., makasih *smile

Balas

izin coba sob , , ,
mampir di http://nawayhac.blogspot.com

Balas

wow keren Nih gan Ilmunyaa hmmm .. saya Save Dulu dah Buat kapan" tak Coba :D

Balas

lebih baik pasang bareng-bareng mas biar adil hehe :)

Balas

Saya bukan tertarik sama widget nya mas, tapi sama admin nya hehehe ^^

Balas

Apanya yang bergerak-gerak hayo? hehe :)

Balas

Bener juga Mas Intan, alangkah baiknya di coba dulu
Berapa kbps beban script ini, kalau di rasa sangat memebebani
Load yah jangan makasain deh,. Maaf Sobat semua kaya nya
Mas Andes nya Sibuk Ruar biasa deh.? :)

Balas

Makasih juga atas sambutanya yah Mas Anthonie
Yang mewakili Mas Andes, salam aja buat semua sobat

Balas

Kayanya script nya Mas Andes deh yang bergerak-gerak Mbak Rin

Balas

Silahkan Mbak Ainun semoga Bermanfaat

Balas

ya udah bareng-bareng sama mbak Ririn juga yah

Balas

wah saya nggak ikut-ikut deh hehe...

Balas

biar sehat kan kalau banyak gerak hehe...

Balas

Keren mas Andes...kayaknya cocok buat di bungkus dan dibawa pula ng..hehe :)

Balas

Hmmmm... maaf baru mampir... semangat ya sharenya Mas...

Balas

kalau udah buatan mas Andes mantep2 deh pokok'nya.. hehehe.. :D

Balas

makin lama makin kagum aja saya sama blognya Mas Andes ini.. udah keren ringan lagi.. hehehe.. :D

Balas

udah bang langsung aja bungkus.. hehe..

Balas

saya yang jadi wasitnya :) hehe

Balas

terimakasih kang karrysta ama mas anthoni :) hehe.. semoga bermanfaat

Balas

selamat pagi kembali mas virlyz :) met aktivitas juga tentunya..

Balas

haturnuwun kunjungana pak bumi :)

Balas

iya mas ada sosial medianya :) tengkyu kunjunganya..

Balas

yoi mas agus buat eksperimen :)

Balas

kalo yang ini di kedipin sebelah mata :) hoho.. ting

Balas

bisa di ukur sendiri mas :)

Balas

haturnuhun kunjungana :)

Balas

haturnuwun kunjungana mas :)

Balas

yang gerak2 jempol saya :) sipp buat mas anthoni, mbak ririn dan kang karrysta

Balas

monggo master.. silahkan :)

Balas

sipp om hatur tengkyu kunjungana :)

Balas

Kalau tubuh sering gerak kan bisa sehat ya mas hehe :)

Balas

binggung demonya yg mna gan!!

maksudnya di bagian yg mna?

Balas

saya pasang di footer mas

Balas

Terima kasih juga Mas Andes, atas sambutanya yah?

Balas

Bener Mas Andy kaya nya begitu deh, script Mas Andes pasti azib

Balas

Pagi-pagi sambil nunggu subuh datang lagi di artikel
Nya Mas Andes, yang tempo hari belum terbaca semua,
lanjut lagi di pelajari nih? kayanya demonya agak lambat loadnya Mas?

Balas

keren banged gan...
thanks...
kunbal a gan...
http://ryusukesyn.blogspot.com/

Balas

saya sudah mencoba. hehe

Balas

Kalo pasangnya langsung di template gimana mas???

Balas

begitu juga boleh mas, seperti biasa.. CSS taruh di atas ]]></b:skin> atau </style> dan untuk js taruh di atas </head> atau </body> sedangkan HTML bebas mau ditaruh mana aja widget tersebut mau di tempatkan letaknya

Balas

Ini yang saya cari terima kasih

Balas

komentar ke-80 tetapi tidak apalah..
Berhasil mas andes, sudah terpasang di blog saya
Terimakasih tipsnya

Balas

gimana cara mengecikan widget tersebut

Balas

Mantap bro sekarang website gw udah ada headlinenya
visit juga www.macrokom.meximas.com/home.html

Balas

makasi.. mas andes informasinya..
salam kenal.

Balas

sudah saya pasang mas cuma feed na terlalu jauh dari latest post na,, biar lebih deket gmna yah,hehe

Balas

ubah value CSS margin mas#ltsposts { float: left; margin-left: 120px; }

Balas

Saya coba dulu... Salam Kenal >> http://android-apkdata.blogspot.com

Balas

cara untuk me resizenya gimana kang

terima kasih sebelumnya :D

Balas

Ko gak jalan ya mas.........

Balas

ubah pada bagian CSSnya, width tinggal di sesuaikan

Balas

pastikan sudah terpasang satu jquery di dalam template<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

Balas

agan bisa bantu gue gak kan ada tuh yang blognya dia tuh kalo buka beranda stiap postnya tersusun dengan rapi berdasarkan label nah cara ngasih begitu gimana yah

Balas

Thanks gan bermnfaat bgt

Balas

update terus artikel nya .. makasih sharing nya mas..!

http://trikmastercyber.blogspot.com/

Balas

makasih banyak ya mas andes :D
dh ku coba dan kereen bngeet
syukron
http://link-santriaktif.blogspot.com/

Balas

mas aku mau tanya kalo mau ganti warnanya itu gimana ya

Balas

Makasi atas tutorialnya Mas

Balas

terimakasih infonya sangat bermanfaat bagi saya..

Balas

kalau bikin latest post gmna bos,,,,

Balas

itu url fotonya ga di ganti bos....

Balas

mas andes tolong klo ngasih info sekalian yg jelas ya,, spy aorg cepet mudah nerapkan nya mngingat komentar kan blm tentu sebulan di bls ya bos... ( jadi klo blm terpasang yg kode untuk html nya , lalu masangg nya tepatnya dimana gtu bos di bawah apa atau di atas apa.... knp ga skalian di kasih tau dr awal ,, makasih

Balas

cara ngatasi error loading feednya gmn ya mas...btw thanks sebelumnya

Balas

jadi berat y loading pagenya..?

Balas

wahh sangat membantu,,makasih gan,bisa liat hasilnya di blog aku http://awesome-fa.blogspot.com

Balas

Terima kasih atas tutorialnya :) saya coba dulu ya gan !!

Balas

Terima kasih. Bermanfaat sekali. Mampir ya teman-teman di blog aku --> DP BBM ANIMASI

Balas

mampir di blog saya juga ya blog saya sepi kaya hutan

Balas

Nanti tak cobanya mas. Modal untuk mempermak blogku yang masih amburadul

Balas

wah keren tuh sob
www.idcheat.com

Balas

makasih infonya..

Balas

makasi tips nya mas :)

Balas

janang lupa kunjungi nawantips.blogspot.com

Balas

Mantap Bro.........!

Balas

mantab broo.... silahkan mampirr

Balas

Mantep mas, tapi kok kadang loading terus kalau saya pakai akun lain.. Di blog ke1 bisa, dicoba ke blog2 loading terus.. Itu kenapa ya mas? Mampir mas : Www.Yondarkness.Com

Balas

hoo mas punyaku tuh mlai terasa tuh.mungkin karna aku sering menambah script/widget kaliya.. kira2 solusinya gmana ni? ada yang bisa bantu?


atau mungkin dari #mas-andes mungkin bisa membantu memberi masukan buat saya??
terimakasih sebelumnya.salam

Balas

izin sedot mas dari blog tetangga. http://www.codjember.com

Balas

ternyata codingnya banyak juga yah,,, bikin puyeng juga, mas

Balas

loadingnya kok jadi berat ya setelah di pasang kodenya

Balas

Boleh di coba nih.... soalnya baru punya blog di blogspot hehehe....

Balas

thank's buat infonya mas andes. saya udah nyoba di blog saya.
Mampir ya di blog saya WWW.APAKABAR1.CO.VU

Balas

oke deh nanti saya coba breaking news nya

Balas

sungguh keren bro...mksh ilmunya...hehe wisata hati mas ke http://judinpenulis.blogspot.com/

Balas

Sepertinya keren ni mas bro, tampilannya apa yang berjalan itu ya???

Balas

kunjungan balik donk

Balas

punya saya error loading feed terus mas , itu kenapa ya ?

Balas

bermanfaat banget artikel ini.. mau saya coba di blog saya...
cuma, kok eror waktu sudah saya pasang.. kenapa mas...? tolonng dibantu mas...

ini mas, cek di blog saya...

http://r-oren.blogspot.com

Balas

Terima kasih sekali petunjuknya mas. Tapi kok punya aku loading terus, mohon lagi petunjuknya ya. Salam hormat master.

Balas

Menarik nih sob...
izin sedot..

Balas

mantap gan scriptnya, sudah saya pasang di blog saya,tks...

Balas

punya saya kok ngga jalan ya,

Balas

keren, mau ganti warna gmna ya biar sesuai sama blog nya

Balas

Cuma tampil loading saja mas, gimana mohon koreksi...

Balas

Terima kasih mas infonya, thx bgt , http://www.informan-technology.com/

Balas

thank you gan..

Balas

Makasih infonya....

Balas

Makasih ya mas
Mau internet gratis silahkan kunjungi berbagicaranews.blogspot.com

Balas

terima kasih mas atas informasinya, sudah saya pasang di website saya dan berhasil meskipun saya ilangin logo sosmednya
monggo mampir" ke website saya yang sederhana www.pergipedia.com

Balas

cuma tampil loading... mas, bagaimana ya ? trms

Balas

di dasbor blogger pilih menu Setelan > Umpan situs > Izinkan Umpan Blog > Penuh.
pastikan juga pada setelan dasar, Pembaca Blog > Umum

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Headline Breaking News di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode