Cara Membuat Breaking News Di Bawah Menu Navigasi - Hallo sahabat Anak Google, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Breaking News Di Bawah Menu Navigasi, admin mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan Artikel Blogger, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. Selamat membaca ya.

Judul : Cara Membuat Breaking News Di Bawah Menu Navigasi
link : Cara Membuat Breaking News Di Bawah Menu Navigasi

Cara Membuat Breaking News Di Bawah Menu Navigasi

Tutorial Blogger dan SEO Blogger - Cara Membuat Breaking News Di Bawah Menu Navigasi. Pada kesempatan kali ini saya akan share tutorial blog yang saya anggap menarik. Breaking news, ya benar sekali, menu ini menampilkan beberapa postingan blog anda.

Artikel seperti sudah banyak di bahas oleh blog nya para guru, tetapi kali ini kita akan menambahkan sentuhan Jquery yang tentunya akan menambah kesan indah blog anda. Saya pertama kali melihat breaking news seperti ini pada template NewsPaper Times Megazine template ini memang untuk wordpress jadi belum ada versi untuk blogger-nya. Setelah melihat template itu muncul-lah dipikiran saya pertanyaan tentang bagaimana caranya untuk membuat widget breaking newsnya di blog kita sendiri. Dan setelah menghabiskan waktu berhari-hari, akhirnya saya bisa juga untuk membuatnya tampil di blog kita, dan ternyata cara ini cukup terbilang simple lho sobat. Berikut ini tampilannya :

Nah Tertarik untuk mencobanya pada blog anda? Ikuti langkah-langkah Cara Membuat Breaking News Di Bawah Menu Navigasi berikut ini.

1.Log in ke blogger dengan akun anda.
2.Pilih rancangan » edit HTML » centang kotak Expand Template Widget. Dan jangan lupa untuk memback-up dulu template anda buat jaga-jaga bila terjadi kesalahan.
3.Letakkan kode di bawah ini tepat di atas kode ]]></b:skin> :

/* News Ticker Wrapper
---------------------------------------------*/
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibpaT-rauGulUlXDL2JIvQ4GT3SUuCrDQjApP0r77mSTH9DDgBbfbv1CmIqpJPiuA0k9cZK3ToC6DCcVbe1JtdS3N5XmmLUb3CbyV-JoWASir7NzTqonHtL8QxxQf0Gd6j8sAOt1eeYSI/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;} 

4.Letakkan kode di bawah ini tepat di atas kode </head> :

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script> <script type='text/javascript'> //<![CDATA[ var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"> </div> ');this.feedcontainer=document.getElementById(c);this.itemcontainer=" <li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer==" <li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer==" <li>")?"</ul> ":"";this.feedcontainer.innerHTML=e}; var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div> ";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f==" <li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f==" <li>")?"</ul> \n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}}; //]]> </script> <style type='text/css'> .titlefield{ /*CSS for RSS title link in general*/ text-decoration: none;} .labelfield{ /*CSS for label field in general*/ color:#aaa;font-size: 100%;} .datefield{ /*CSS for date field in general*/ color:#aaa;font:normal 14px Arial;text-transform:none;} #example1{ /*Demo 1 main container*/ width: 780px; height: 14px; border: 0px solid #aaa; padding: 0px; font:bold 16px Arial; text-transform:none; text-align:left; background-color:transparent;} code{ /*CSS for insructions*/ color: #fff;} #example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;} #example1 a:hover {color:#C8D3F2;text-decoration:none;} </style>

5.Setelah itu cari kode yang kira-kira mirip seperti ini :

<div id='nav-element'>
.....................................
</div>

Kode ini bisa berbeda dengan yang ada di blog anda, intinya letakkan saja kode nya di bawah kode navigasi sobat yang kira-kira miripnya seperti ini :

<div id='nav-element'>
<ul>
<li class='current_page_item'><a href='http://anakgoogle.xyz/' title='Home'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3my8zZIA4r_Rq1xNNvaVmlb_RYI_90lYiEt_x16PrW3osk420ZPWYtfyrw2y3RPz6sXUT8X_6Jnl04DnZG4o7Bed7Nj5V-eSwzAF4VBjOMwGKqgjfaZ7F5wWBWwh6enOMW3UzoKG9C-G_/s200/icon-home.png' style='padding: 0px;'/></a></li>
<li><a href='/2012/01/about-b-digg.html' rel='nofollow'>About</a></li>
<li><a href='/2012/02/kontak-saya.html' rel='nofollow'>Contact us</a></li>
<li><a href='/search/label/Tutorial%20Blog' rel='nofollow'>Blogger tutorial</a></li>
<li><a href='/search/label/SEO%20blogger' rel='nofollow'>SEO</a></li>
<li><a href='/2012/01/tukeran-link.html' rel='nofollow'>Link exchange</a></li>
<li><a href='/2012/01/peta-situs.html' rel='nofollow'>Site map</a></li>
</ul>
</div> 

 6.Masukkan kode di bawah ini tepat di bawah kode </div> yang ada di atas :

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://anakgoogle.xyz/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

Nb: Ganti url blog saya yag berwarna biru dengan url blog anda.

 7.Simpan template anda.

Biasanya jika url blog anda masih terbilang baru, anda mesti membuat key API nya sendiri di google code atau anda bisa klik link ini . Ketikkan alamat blog anda kemudian dapatkan kode nya dan ganti kode yang ada di paling atas pada langkah ke 4 dengan kode yang anda dapatkan tadi.

Sekian artikel saya tentang Cara Membuat Breaking News Di Bawah Menu Navigasi semoga bisa bermanfaat bagi kita semua.

Demikianlah artikel tentang Cara Membuat Breaking News Di Bawah Menu Navigasi

Sekianlah artikel Cara Membuat Breaking News Di Bawah Menu Navigasi kali ini, mudah-mudahan bisa memberi manfaat untuk pembaca semua.

Anda sekarang membaca artikel Cara Membuat Breaking News Di Bawah Menu Navigasi dengan alamat link https://anakugoogle.blogspot.com/2017/09/cara-membuat-breaking-news-di-bawah.html

Tweet

Unknown