Posted by :
Arief Hilman Nugraha
Tuesday, January 15, 2013
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 gadjet tersebut
- kode berwarna biru adalah ukuran font
- kode berwarna merah adalah ukuran kotak widget
- kode berwarna hijau adalah judul blog dan url blog, ubah bagian tersebut sesuai blog anda
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
1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukan kode dibawah ini pada gadjet tersebut
<style type="text/css">5. Untuk customize atau pengeditan widget tadi dilihat dibawah ini:
.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>
<noscript><a href="http://ariefhunterz.blogspot.com" target="_blank">Ariefhunterz</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://ariefhunterz.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "Ariefhunterz"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="www.ariefhunterz.blogspot.com" target="_blank">Ariefhunterz</a></noscript>
<div id="feedGadget">Loading...</div>
<div id="feedGadget"><a href="http://www.ariefhunterz.blogspot.com" target="_blank">Click Here To Grab This Widget</a></div>
- kode berwarna biru adalah ukuran font
- kode berwarna merah adalah ukuran kotak widget
- kode berwarna hijau adalah judul blog dan url blog, ubah bagian tersebut sesuai blog anda
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
Related Posts :
- Back to Home »
- Tips Blogging »
- Cara Membuat Random Post Versi News Headline Animasi
Wahhh.. padahal saya mau nya yang model headline dengan thumbnail gitu..
ReplyDeleteWahhh.. padahal saya mau nya yang model headline dengan thumbnail gitu..
ReplyDeleteada gan kalo mau nanti saya posting lagi :)
Delete