Kumpulan Tutorial,Tips dan Trick: Membuat HeadLine News di Blog ( Headline News Berjalan )

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

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>&lt;a href="http://www.6laskar-pelangi.blogspot.com" target="_blank"&gt;6Laskar Pelangi&lt;/a&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://www.6laskar-pelangi.blogspot.com/feeds/posts/default'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "6Laskar Pelangi"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript>&lt;a href="http://www.6laskar-pelangi.blogspot.com" target="_blank"&gt;6Laskar Pelangi&lt;/a&gt;</noscript>
<div id="feedGadget">
Loading Headline News</div>
<div style="font-size: 8px; text-align: right;">
<a href="http://www.6laskar-pelangi.blogspot.com/" target="_blank">Widget by 6Laskar Pelangi</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.

Ditulis Oleh : Unknown ~ Hidup Terasa Indah Bila Saling Berbagi

Sobat sedang membaca artikel tentang Membuat HeadLine News di Blog ( Headline News Berjalan ) . Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya, TERIMA KASIH Karena sudah bersedia Memberikan Komentar untuk Blog ini... !!!

                                          <a href="
                                          http://6laskar-pelangi.blogspot.com/2012/07/membuat-headline-news-di-blog-headline.html
                                          " target="_blank">
                                          Membuat HeadLine News di Blog ( Headline News Berjalan )
                                          </a>

:: Effendi Dalimunthe ! ::