Showing posts with label news. Show all posts
Showing posts with label news. Show all posts
Saturday, November 19, 2016
Cara Membuat Headline News Di bawah Header
Cara Membuat Headline News Di bawah Header
Cara membuat Headlines News - Salah satu aksesories blog yang sangat penting adalah Headlines News, karena berfungsi menampilkan beberapa postingan terbaru blog anda sehingga pengunjung akan dengan mudah melihat apa artikel terbaru yang ada dalam blog anda.
Headlines News sama dengan Recent Post hanya saja tampilannya lebih simpel yang hanya menampilkan title atau judul dari beberapa postingan terbaru. Yang paling populer saat ini adalah menempatkan Headlines News di bagian bawah header, ada juga yang menempatkan di bagian atas dan di bawah menu (header). Namun sciptnya sama saja, untuk menempatkan di posisi mana itu terserah anda, namun pada kali ini saya akan membahas dengan cara menampilkan Headline News di bawah Header seperti yang ada pada gambar berikut.

Untuk membuatnya tidak terlalu sulih, dengan sedikit keberanin untuk mengotak atik script template blog anda kemudian menambahkan sedikit script di beberapa tag elemen Insya Allah langsung berhasil. Untuk lebih jelasnya berikut langkah langkahnya.
Pertama masuk ke akun blogger anda lalu KLIK Template => Edit HTML => Lanjutkan Kemudian CENTANG pada Expand Template Widget lalu cari kode ]]></b:skin> untuk memper cepat atau memudahkan pencarian CTRL+F kemudian copy paste kode ]]></b:skin> pada kolom yang muncul. Setelah menemukan kode di atas copy kode di bawah ini kemudian pastekan pas sebelum atau di atas kode ]]></b:skin> yang telah di cari tadi
.headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png) repeat-x;width:950px;height:30px;margin:0 auto;padding:0 auto}
.headline{width:950px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#4f4f4f;overflow:hidden;clear:both;margin:0 auto;padding:0 auto;text-shadow: 1px 1px 1px #000}
.headline a:hover{color:#eace12;text-decoration:none}
.headline{width:950px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#4f4f4f;overflow:hidden;clear:both;margin:0 auto;padding:0 auto;text-shadow: 1px 1px 1px #000}
.headline a:hover{color:#eace12;text-decoration:none}
Ganti yang berwarna biru dengan url gambar sesuai dengan background headlines news yang anda inginkan, kemudian yang berwarna pink boleh diganti dengan angka sesuai dengan lebar yang di inginkan.
Kemudian cari kode </head> untuk memudahkan gunakan kembali CTRL+F. Setelah ketemu Copy kode di bawah ini lalu pastekan sebelum atau di atas kode </head>
<script src=https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png type=text/javascript/>
<script src=http://exlorer-amran91.googlecode.com/files/HDN.js type=text/javascript/>
<style type=text/css>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#fff;font:normal 12px Arial;}
#example1{ /*Demo 1 main container*/
width: 900px;
height: 12px;
border: 0px solid #aaa;
padding: 0px;
font:bold 12px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#60BAFA;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>
<script src=http://exlorer-amran91.googlecode.com/files/HDN.js type=text/javascript/>
<style type=text/css>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#fff;font:normal 12px Arial;}
#example1{ /*Demo 1 main container*/
width: 900px;
height: 12px;
border: 0px solid #aaa;
padding: 0px;
font:bold 12px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#60BAFA;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>
Kemudian cari kode berikut ini <b:section class=header id=header . hingga kurang lebih seperti berikut ini
<b:section class=header id=header maxwidgets=1 showaddelement=no>
<b:widget id=Header1 locked=true title=Your Title (Header) type=Header>
<b:includable id=main>
<b:widget id=Header1 locked=true title=Your Title (Header) type=Header>
<b:includable id=main>
Setelah ketemu kode seperti di atas copy kode di bawah ini kemudian pastekan pas dibawahnya berikut kodenya
<div class=headline-wrapper>
<div class=headline>
<div style=float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;>
Headlines News :
</div>
<div style=float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;>
<script type=text/javascript>
var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")
cssfeed.addFeed("Latest Movies", "http://GANTI DENGAN URL BLOG ANDA/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style=clear:both;/>
</div>
<div class=headline>
<div style=float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;>
Headlines News :
</div>
<div style=float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;>
<script type=text/javascript>
var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")
cssfeed.addFeed("Latest Movies", "http://GANTI DENGAN URL BLOG ANDA/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style=clear:both;/>
</div>
Ganti tulisan yang berwarna biru dengan url Blog ANDA misanya url blog saya : www.suryafahik.blogspot.com lalu klik Simpan Template dan lihat hasilnya.
Semoga bermanfaat, dan anda juga bisa menemukan cara ini di sini. Ok demikianlah postingan kali ini, sampai jumpa lagi di lain kesempatan.
Go to link Download
Monday, October 17, 2016
Cara membuat Headline News pada Blog
Cara membuat Headline News pada Blog
| open in new tab untuk gambar yang lebih jelas |
anda bisa melihat demonya di bagian header blog ini atau jika kurang jelas anda bisa lihat live demo dibawah ini
1.buka blogger > blog anda
2.template > edit html
3.cari kode ]]></b:skin> lalu pastekan kode berikut diatasnya
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ziiGEsjBe53Fv8RWz03yLH48PkuhDdj2k3vDOQ8GAqG21pmHcyg5c6qgzkCrvcJxWjKquWOBUyLfGhT27trnSWXrZF10Bd_zF2webUPLD1fS-R80qAsc8Y2Sylt2wMTlYttTbS74ypM/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.selanjutnya cari kode </head> taruh script ini diatasnya
<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> ":"";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+" "+f+this.itemcontainer.replace("<","</")+" "}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> ":"";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+" "+a+f.replace("<","</")+" "}c+=(f=="<li>")?"</ul> ":"";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.taruh kode dibawah ini diatas <b:section class=header id=header maxwidgets=1 showaddelement=no>
<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("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://infomenarikdanbermanfaat.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style=clear:both;/>
</div>
6.pratinjau,jika sudah pas klik simpan
keterangan : jika posisi widget belum pas coba taruh kode nomor 5 dibawah kode <body>
Go to link Download
Subscribe to:
Posts (Atom)