Kamis, 13 Desember 2012

Cara membuat Headline



Halo bertemu lagi di Ketawa Ketiwi. Sekarang saya berbagi tips saja. Langsung saja Capcus, Cara membuat Headline. Nah mari kita buat

Langkah - Langkah:



1. Login ke blogger
2. Masuk kehalaman Edit HTML dengan cara pada bagian Dashboard Pilih Template --> Edit HTML --> Proses atau Lanjutkan
3. Jangan lupa Download Template Lengkap terlebih dahulu untuk mengantisipasi kesalahan edit html (yang belum paham baca Cara Upload dan Back-Up template Blog) Sekarang
4. Cari Kode

 ]]></b:skin> (gunakan tombol CTRL + F dan F3 untuk memudahkan pencarian kode) Copas Kode berikut Diatas kode ]]></b:skin>
/* Headline News -------------------*/ .newspic {background:#000 url(http://dc613.4shared.com/img/l-tg12y-/s3/0.9498870404974213/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;}


Keterangan :
Warna merah dan warna biru adalah Ukuran panjang dan tinggi headline news. Warna Hijau adalah tampilan headline, bisa anda ganti

5. Sekrangan Cari kode </head>
6. Sudah ketemu, copas kode berikut dan letakan diatas kode

<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>

7. Sekarang cari kode <div id='header-wrapper'> atau   <div id='header-outer'>
8. pilih salah satunya Jika sudah ketemu Copas kode berikut diatas salah satu kode tersebut
<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://ketawaketiwiblog.blogspot.com/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>
 Ganti Kode yang berwarna hijau dengan URL atau Alamat blog milik anda sendiri
9. Ganti URL yang saya beri warna merah dengan URL blog anda dan jika blog anda masih baru newsticker ini biasanya tidak mau jalan karena google belum mengenal feed di blog Anda. Solusinya gampang Anda mesti buat API key sendiri di googlecode, atau langsung saja disini. Masukkan URL blog anda, kemudian ganti kode javascript paling atas pada langkah nomer 5 dengan kode yang barusan dapet dari googlecode.
10. Sekarang Simpan Template
11. Selesai dan lihat hasilnya.

Bila ada yang salah silahkan hubungi saya. Baik di Chatbox maupun Komentar. Wabillahi Taufik wal Hidayah. Wassalamu'alaikum WR WB

0 komentar:

Posting Komentar

Translate

Entri Populer

Followers

Statisik Blog

free counters
GET UPDATE VIA EMAIL
Dapatkan kiriman artikel terbaru langsung ke email anda!

Download

Get our toolbar!

Follow Me

Twitter Icon
Baca Info Naruto Terlengkap