30 Okt 2012

Cara Membuat Random Post Versi News Headline Animasi

tito Oktober 30, 2012 Tutor Blog

Kali ini saya akan memberikan tutorial cara membuat headline news random post dengan efek animasi seperti gambar disamping. Random post yang akan kita buat tidak hanya memuat judul posting namun ada beberapa elemen tambahan seperti judul blog, penulis, waktu penerbitan serta rincian posting (summary). Random post akan memuat artikel secara acak pada blog anda, dimana tiap judul artikel ditampilkan dengan animasi yang sangat keren. Nah jika sobat penasaran gimana dengan tampilannya mengapa tidak dicoba aja. Untuk itu langsung aja ikuti tutorialnya dibawah ini:

1. Login ke Blogger

2. Masuk ke Rancangan --> Edit Laman

3. Tambahkan Gadjet lalu pilih HTML/Javascript

4. Masukan kode dibawah ini pada gadget tersebut

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 12px;
border: 1px solid #BCCDF0;
}
 
.gfg-title {
font-size: 13px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
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 : 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: 13px;
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 : 300px;
font-size: 10px;
color: #9CADD0;
}
</style><br />
<noscript><a href="http://blogtrikdantips.blogspot.com" target="_blank">Blog Trik dan Tips</a></noscript><br />
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script><br />
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script><br />
 <br />
<script type="text/javascript">
 
function showGadget() {
var feeds = [
{title:'title',
url:'http://titosw30.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
 
];
 
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "titosw30.blogspot.com"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script><br />
<noscript><a href="www.blogtrikdantips.blogspot.com" target="_blank">Blog Trik dan Tips</a></noscript><br />
<div id="feedGadget">
Loading...</div>
<div id="feedGadget">
<a href="http://titosw30.blogspot.com" target="_blank">Click Here To Grab This Widget</a></div>


5. Untuk customize atau pengeditan widget tadi dilihat dibawah ini:

-ganti URL blog saya dengan URL blog kamu

6. Simpan gadjet lalu lihat hasilnya

Demikianlah langkah Cara Membuat Random Post Versi News Headline Animasi untuk blog anda. Untuk widget ini membutuhkan loading yang sedikit lama jadi cobalah sabar untuk menunggu loadingnya. Sekian dan salam blogging

30 Okt 2012

Cara Membuat Random Post Versi News Headline Animasi

Popular

Random

Subscribe

Labels

Translate Into Your Language