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://www.blogdoctor.me" target="_blank">The Blog Doctor</a> and <a href="http://pisbon.blogspot.com" target="_blank">Fishbone</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.
No comments:
Post a Comment