Membuat Random Post Slide 5 Detik Berubah/Ganti

Yah ini adalah gadget baru khusus untuk pengguna blogger. Gadget ini akan menampilkan posting blog Anda secara acak satu demi satu dengan kutipan. Anda dapat dengan mudah menginstalnya dengan 3 langkah dan dapat menempatkannya di atas posting atau di tempat lain.



Sekarang saya ceritakan tahap-tahap penerapan dari fitur-fitur ini...
1. Menunjukkan salah satu judul posting pada suatu waktu.
2. Link ke posting.
3. Menunjukkan kutipan posting juga.
4. Setiap 5 detik menunjukkan posting baru.
5. Siklus melalui semua posting dalam blog.
6. Memulai siklus baru di akhir daftar.
7. Setelah dimuat terus berotasi bahkan ketika tidak terhubung ke Internet.
8. Menggunakan teknologi AJAX Google Resmi.
9. Dapat digunakan pada platform blogging lainnya (tidak diuji).
10. Melayang dengan kursor mouse di atas judul posting perhentian rotasi sampai mouse bergerak dari gadget.

Bagaimana Cara Kerjanya?
Untuk menghemat ruang dan belum menunjukkan semua posting satu demi satu gadget ini resmi menggunakan Google AJAX Feed API teknologi dan Dynamic Feed Control. Pos itu mengambil judul dan data dari blog Anda dan menampilkannya dalam gadget.

Instalasi
Seperti yang saya katakan dalam memulai, menginstal gadget ini mungkin hanya dalam 3 langkah yang adalah sebagai berikut:
1. Pergi ke Blogger Account> Blog> Layout. Klik di tab Elemen Halaman, klik pada tambahkan gadget dan kemudian gulir ke bawah untuk mengklik Add Html / Javascript gadget.
2. Sekarang di ruang kosong isilah dengan kode berikut.
 
<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}
 
.gfg-title {
font-size: 24px;
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: 20px;
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: 24px;
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;
}
body {
background-color: white;
color: black;
font-family: Arial;
font-size: small;
margin: 0;
}
#feedGadget { 
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
</style>
<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://pisbon.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
 
];
 
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "Fishbone ~ Random Posts."});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>
<div id="feedGadget">Gadget by <a href="http://pisbon.blogspot.com/"><span class="Apple-style-span" style="font-size: xx-small;">Powered By FISHBONE</span></a>.</div>



Dalam kode berikut di atas, Anda harus terlebih dahulu mengedit hal-hal yang ditandai dengan huruf tebal Jika tidak, tidak akan bekerja untuk Anda.

Anda wajib mengganti tulisan : http://pisbon.blogspot.com/ dengan alamat blog anda dan menganti tulisan title blod : Fishbone ~ Random Posts. dengan tulisan yang anda kehendaki

Mengubah warna dan ukuran widget ini sangat sederhana. Coba lihat kode dengan tepat, dan Anda akan menjadi ahli dalam hal ini

Credits
Gadget yang bagus ini diciptakan oleh Vin dari BlogDoctor. Jadi berterima kasih kepadanya untuk membuat widget ini untuk pengguna blogspot. Pasang IKLAN dan Dapatkan Uang dari Website atau Blog anda dengan BidVertiser

Sudah ada 6 komentar, tambain donk.!

  1. terima kasih atas pembahasannya,, mantap abis

    BalasHapus
  2. Wah mantaf ni, ijin coba sob! Thnks infonya..

    BalasHapus
  3. wahh alhamdulillah makasih ya,ijin coba.please visit my blog.ok

    BalasHapus
    Balasan
    1. Silahkan TQ komen dan kunjungannya....

      Hapus
  4. info menarik bro dan aku suka, juga artikelnya menarik nie, dan tetap berkarya. sekalian bagi teman2 yg suka download film box office ampe setengah blu silakan kunjungi web nya nie, ken aku nemu di google dan makasi utk admin disini thanks dan gbu,makasi

    BalasHapus

Kalau tidak mau tambah komentar ya, tinggalin duwit ya?