Artikel ini menjelaskan cara membuat sebuah breaking news untuk blogspot yang muncul di bagian atas artikel atau postingan lengkap dengan contoh hasilnya dengan penjelasan yang sistematis.

Membuat Breaking News di Blogspot - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan cara membuat sebuah breaking news untuk blogspot yang muncul di bagian atas artikel atau postingan lengkap dengan contoh hasilnya dengan penjelasan yang sistematis.

Membuat Breaking News di Blogspot

Membuat Breaking News di Blogspot

Jika anda mengunjungi sebuah blog dengan konsep berita, breaking news menjadi hal yang sering dijumpai dan pada umumnya ditempatkan di bagian atas sebuah artikel. Seperti halnya widget artikel terkait, breaking news ini saya anggap dapat meningkatkan pageview pada sebuah blog.

Mungkin ada dari kalian mau tahu cara membuatnya. Kali ini saya akan menjelaskan sedikit bagaimana cara membuat sebuah breaking news sederhana yang muncul di bagian atas artikel.

Tahap 1

Mengenali struktur HTML dari template yang digunakan. Ini sangat penting diketahui karena akan menentukan dimana breking news ini akan disimpan.
Contoh:
<body >
<div id='outer-wrapper'> <!-- Tag pembuka untuk id outer-wrapper -->

<header id='header-wrapper'> <!-- Tag pembuka untuk header -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Demo Templates (Header)' type='Header'/>
</b:section>
</header> <!-- Tag penutup untuk header -->

<nav id='nav'> <!-- Tag Pembuka untuk navigasi -->
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Archive</a></li>
<li><a href='/'>Comments</a></li>
</ul>
</nav> <!-- tag penutup untuk navigasi -->

<div id='content-wrapper'> <!-- Tag Pembuka untuk daerah konten dan sidebar -->

<div id='main-wrapper'> <!-- Tag Pembuka untuk daerah posting dan komentar -->

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

</div> <!-- Tag Penutup untuk daerah posting dan komentar -->

<aside id='sidebar-wrapper'> <!-- Tag Pembuka untuk sidebar -->
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside> <!-- Tag Penutup untuk sidebar -->

</div> <!-- Tag penutup untuk daerah konten dan sidebar -->

<footer id='footer-wrapper'><!-- Tag pembuka untuk footer -->
<b:section class='footer' id='footer'/>
</footer><!-- Tag penutup untuk footer -->

</div> <!-- Tag penutup untuk id outer-wrapper -->

</body>
Breaking News ini bisa diletakkan di bawah tag dengan id content-wrapper (line 19) atau dapat pula setelah tag dengan id main-wrapper.
Untuk mempermudah kita akan meletakkan di bawah id main-wrapper (line 21). Ini berarti nantinya widget akan muncul di atas posting dengan lebar maksimal sama dengan area posting.
Karena id dari setiap template blogspot biasanya tidak sama untuk mempermudah cari dengan cara tekan CTRL + F lalu cari id='Blog1' lalu kode memanggil breaking Newsnya diletakkan di atas <b:section (b:section disini pada line 22).

Jika sudah mengerti pada tahap ini kita ketahap selanjutnya.

Tahap 2

Pada tahap ini yaitu memasukkan tag html yang nantinya Breakin Newsnya akan di panggil dalam tag tersebut. Tag HTMLnya seperti ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span>
<div id='recentpostbreaking'>Loading...</div>
</div>
</b:if>
Pada tag div tengan id recentpostbreaking disitulah nantinya daftar artikel breaking news akan dipanggil.

Jadi kalau seperti Contoh, maka tag kode lengkapnya jadi seperti ini:
 <body >
<div id='outer-wrapper'> <!-- Tag pembuka untuk id outer-wrapper -->

<header id='header-wrapper'> <!-- Tag pembuka untuk header -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Demo Templates (Header)' type='Header'/>
</b:section>
</header> <!-- Tag penutup untuk header -->

<nav id='nav'> <!-- Tag Pembuka untuk navigasi -->
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Archive</a></li>
<li><a href='/'>Comments</a></li>
</ul>
</nav> <!-- tag penutup untuk navigasi -->

<div id='content-wrapper'> <!-- Tag Pembuka untuk daerah konten dan sidebar -->

<div id='main-wrapper'> <!-- Tag Pembuka untuk daerah posting dan komentar -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
</b:if>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div> <!-- Tag Penutup untuk daerah posting dan komentar -->

<aside id='sidebar-wrapper'> <!-- Tag Pembuka untuk sidebar -->
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</aside> <!-- Tag Penutup untuk sidebar -->

</div> <!-- Tag penutup untuk daerah konten dan sidebar -->

<footer id='footer-wrapper'><!-- Tag pembuka untuk footer -->
<b:section class='footer' id='footer'/>
</footer><!-- Tag penutup untuk footer -->

</div> <!-- Tag penutup untuk id outer-wrapper -->

</body> 

Tahap 3

Pada tahap ini yaitu meletakkan kode jQuery breaking news sebelum </body>. Kode jQuerynya seperti berikut:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'URL_blog disini', // alamat blogmu contoh http://mkr-site.blogspot.com
	numpostx 	= 10; // Jumlah artikel yang di tampilkan
$.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>
</b:if>
Untuk melihat hasilnya silahkan klik tombol di bawah:

Itu merupakan contoh tanpa CSS. Untuk Tahapan Selanjutnya yaitu pemberian code CSS.

Tahap 4

Pada tahapan ini Breaking News tadi di tambahkan kode CSS agar terlihat lebih menarik. Kode ini nantinya diletakkan sebelum </head>
kodenya seperti berikut ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#beakingnews{line-height:25px;height:25px;background:#F7F7F7;overflow:hidden}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#008D17}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>
</b:if>
Hasil akhir setelah penambahan CSS silahkan klik tombol di bawah.

NB: Untuk mengganti warna background pada tulisan Breaking News ganti kode #008D17, warna tulisan Breaking News ganti kode #FCFCFC dan warna background judul yang muncul ganti kode #F7F7F7. Mengganti warna bisa menggunakan Hex Color Tools.

Nah begitulah cara membuat breaking news yang saya ketahui.
Semua kode dibungkus mengunakan kondisional tag hanya pada bagian posting (<b:if cond='data:blog.pageType == &quot;item&quot;'>). Tag kondisonal ini bisa diganti sesuai yang anda mau.

Sumber kode efek: workshop.rs
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

17 comments:

  1. oiya kang,, sorry kalo pertanyaan saya menyimpang dari pembahasan..
    cara menyembunyikan sebagian kode pada view page source kode gimana caranya..??
    contoh kaya blog mas ini.. kode CSS dari bagian post-comment tidak tampil pada view page source.. ada yg bilang pake HTML encoder tapi ga bisa... tetep ajah.. ada yg pake code ini
    <body oncontextmenu=’return false;’ onkeydown=’return false;’ onmousedown=’return false;’>
    sama ajaha... malah ga bisa di klik kanan ctrl+C.. repot..
    tQ b4

    BalasHapus
    Balasan
    1. http://mkr.googlecode.com/svn/CSS/cssitemnya.css

      Hapus
  2. ass mas ,
    klok menganti efekslidenya gimana mas ,
    N Contoh" Efek" Slide Yang ADa apa" aja mas.?

    ass wr wb , :)

    BalasHapus
  3. mantab bro keren thank's sudah share

    BalasHapus
  4. Permisi Mas Satank ,
    bisa Gak kira" widget ini tampilannya diset Seperti ini :
    http://zewbz.blogspot.com/2013/02/marquee-with-css3-animation.html ,

    Kira" apa yang harus di ubah ,

    BalasHapus
    Balasan
    1. bisa..
      struktur html pada JS pada tahap3 disamakan dengan yang ditutorial..
      dan juga CSS yang dipake..

      Hapus
    2. oh , oke mas , (o)
      akan saya coba ,

      ntar kalo kira" sulit bagi saya bntu yh mas...? :d

      Hapus
  5. (h)mantap sob informasi nya,,,,
    mampir yah di blog sederhana ane http://dhanicyx.blogspot.com

    BalasHapus
  6. Kok Breaking Newsnya cuman tampil d bagian Post doang Bang? knapa bgian Home Ga ada ??

    BalasHapus
  7. Gagal terus. Coba Cek di blog-ku http://www.oke-reload.blogspot.com untuk memberikan bantuan.

    BalasHapus
  8. mohon pakei ya mas :)
    makasih ya..

    BalasHapus
  9. Keren mas ...tinggal tunggu eksekusi..... aja...

    BalasHapus
  10. numpang duduk mas bangku paling blakang :-? :)

    BalasHapus
  11. Gan...
    Kenapa breaking News yang di template agan ( JPStation ) hanya loading... Terus ga nampil Post nya ?
    apa ad yang salah ? atau ad sesuatu yang kehapus ?
    coba bantu saya gan..
    Cek di blog ane http://fr-nime.blogspot.com
    Tolong di bantu yh gan ..
    Lagi butuh ^^

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP