Membuat HeadLine News di Blog ( Headline News Berjalan )

Salam rumah komputer.Headline news adalah salah satu widget yang baik dipasang di blog.Headline news akan menampilkan beberapa judul postingan di blog kita beserta sedikit ringkasannya.Ini sangat cocok buat para sahabt rumah komputer yang ingin membuat tampilan blognya jadi lebih rame.hihihi.Eits,sebelum saya ajarin,saya liatin dulu ya contoh headline news yang sudah rumah komputer pasang :D

Dah liatkan :) Yo wes,langsung aja ya.

1. Login ke blogger dulu.

2. Masuk ke tab Design > Page Elements
3. Selanjutnya klik add a gadget pada kolom widget yang tersedia.Pokoknya,terserah kolom widget yang mana.

4. Pilih HTML/JavaScript.Klik tanda tambahnya ya.

5. Copy paste kode berikut di dalamnya.Judul widgetnya gak usah di isi.

<style type="text/css">
.gfg-root {
width : 318px;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 10px;
border: 1px solid #BCCDF0;
}
.gfg-title {
font-size: 12px;
font-weight : bold;
color : #FFFFFF;
background-color: #666666;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 12px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 5px;
padding-right : 5px;
} .gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 12px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/
.gfg-horizontal-container {
position : relative;
}
.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-horizontal-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 500px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript>&amp;lt;a href="http://rumahkomputerku.blogspot.com" target="_blank"&amp;gt;Rumah Komputer&amp;lt;/a&amp;gt;</noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample" type="text/javascript">
</script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript">
</script>
<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://rumahkomputerku.blogspot.com/feeds/posts/default'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "Rumah Komputer"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript>&amp;lt;a href="http://rumahkomputerku.blogspot.com" target="_blank"&amp;gt;Rumah Komputer&amp;lt;/a&amp;gt;</noscript>
<div id="feedGadget">
Loading Headline News</div>
<div style="font-size: 8px; text-align: right;">
<a href="http://rumahkomputerku.blogspot.com/" target="_blank">Widget by Rumah Komputer</a></div>

Ket:

• Teks yang berwarna merah,silahkan sahabat ganti dengan alamat url blog sahabat

• Teks yang berwarna biru,bisa diganti,bisa tidak.Tapi saya saranin untuk ganti aja dengan nama blog sahabat.

6. Klik Save dan lihat hasilnya.

Gampangkan :) .Kalo masih belum jelas,silahkan tulis pertanyaan anda di bawah kotak komentar berikut.