Cara Membuat Headlines News di blog - Sharing Ilmu Pengetahuan | Ianhacks
Headlines News :
Home » , » Cara Membuat Headlines News di blog

Cara Membuat Headlines News di blog

Written By Rian on 10.22.2015 | Thursday, October 22, 2015

Untuk mengisi dan terus mengupdate blog tercinta saya, saya akan menulis tentang tips dan trik java script.
Javascript sangat berguna untuk meningkatkan atau mempercantik blog.

Jika Anda mengunjungi blog atau situs lain, mungkin pernah melihat Tab bar, yang berisi berita terbaru dari blog, Popular Post, dan daftar berita di bar tersebut tampil dengan slideshow seperti Tampilan di atas judul blog ini, sehingga membuatnya menarik perhatian.

pada artikel atau tips trick sebelumnya saya telah menulis Bagaimana membuat Index atau daftar isi otomatis dan Cara membuat headline news berjalan di footer, maka kali ini saya akan menulis tips dan trick dengan style slideshow.

Setelah Membaca sedikit pengantar di atas kita akan langsung mulai bagaimana cara membuatnya.

Salin script ini dan masukan ke dalam blog Anda atau website:
Keterangan teks yang bertuliskan Tebal silahkan rubah dengan URL dan Title Blog anda.

Cara pasangnya hanya tinggal copy paste ke gajet dengan cara masuk ke Rancangan--Elemen-elemen-- add gadjet--dan pilih Javascript/HTML seperti memasang widget pada umumnya.

Sekian Tutorial kali ini semoga bermanfaat untuk sobat semuanya





<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 15px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 17px;
font-weight : bold;
color : #FFFFFF;
background-color: #000000;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 17px;
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 : 90%;
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 : 20px;
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: 17px;
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><a href="http://www.ianhack.blogspot.com" target="_blank">Blog Humakajang</a></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.ianhacks.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "Trik Popular"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://www.ianhacks.blogspot.com" target="_blank">Blog Humakajang</a></noscript>
<div id="feedGadget">Masih Proses, Mohon Sabar :D</div>
<div id="feedGadget"><a href="http://www.ianhacks.blogspot.com" target="_blank"></a>Sponsored By :<a href="http://www.ianhacks.blogspot.com" target="_blank">Blog Humakajang</a>.</div>
Share this article :

0 comments:

Speak up your mind

Tell us what you're thinking... !

 
Support : Proudly powered by Blogger
Copyright © 2011. Sharing Ilmu Pengetahuan | Ianhacks - All Rights Reserved
Original Design by Creating Website Modified by IanBlack