Recent Posts Efek Rotasi

Oleh Unknown

Thursday, May 14, 2015

Recent Posts Efek Rotasi - Sinahu coding kali ini akan berbagi tutorial keren nih. Cara memasang widget Recent posts atau latest posts atau entri terbaru dengan efek rotasi. Jadi daftar postingan terakhir yang kamu buat nanti akan muncul bergantian secara otomatis sesuai urutan. Masing-masing akan muncul dengan link judul, nama author, dan sedikit deskripsi dari artikel. Fitur ini menggunakan kode javascript yang pemasangannya sangat mudah. Seperti di bawah ini :

Loading...

Cara Membuat Recent Posts Efek Rotasi pada Blog

1. Login ke Blogger
2. Buka opsi Tata Letak
3. Tambahkan gadget mode HTML/Javascript
4. Copy paste semua kode di bawah ini :

<style>
.gfg-root {
width: 100%;
height : auto;
position : relative;
overflow : hidden;
margin: 0 auto;
text-align : center;
font-size: 12px;
border: 1px solid #DBDBDB;
}
.gfg-title {
font-size: 16px;
font-weight : bold;
color : #6B6B6B;
background:#F3F3F3;
background-repeat: repeat;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
text-shadow: 0px 2px #fff;
}
.gfg-entry {
background-color: #FFFFFF;
width : 100%;
height : 9.2em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}
.gf-title a {
text-transform: capitalize;
color: #0000ff;
font-size: 14px;
}
.gfg-subtitle {
display: none;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
}
.gfg-listentry-odd {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-even {
background-color : #F3F3F3;
border-bottom : 1px dotted #CCCCCC;
padding: 5px;
}
.gfg-listentry-odd a{
color: #595959;
padding: 0 0px 0 10px;
}
.gfg-listentry-even a{
color: #242424;
padding: 0 0px 0 10px;
}
.gfg-listentry-highlight {
background: #FFFFFF;
}
.gfg-listentry-highlight:before {
position: absolute;
left: 0;
content: '25BA ';
font-size: 14px;
color: #DBDBDB;
}
.gfg-listentry-highlight a {
color: #242424;
}
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color: #ffffff;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 14px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
margin-bottom : 2px;
margin-top: 5px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
.clearFloat {
clear : both;}</style>
<script src="http://www.google.com/jsapi" 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:'List',url:'http://sinahu-coding.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Artikel Terbaru', numResults : 10, 

displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Keterangan :

• url yang berwarna merah http://sinahu-coding.blogspot.com silahkan ganti dengan alamat blog kamu.
• start-index=1, mulai dari artikel mana yang akan ditampilkan sebagai artikel terbaru. Secara default akan menampilkan yang paling terbaru. Jika ingin mengubahnya cukup mengganti angkanya.
• max-results=10, jumlah artikel terbaru sesuai feed yang akan tampil. Disesuaikan dengan settingan pada start-index=1.
• title: 'Artikel Terbaru', Judul widget yang akan tampil. 
• numResults : 10, Jumlah artikel terbaru yang ingin ditampilkan pada list widget ini. 
• displayTime : 5000, Waktu delay atau pergantian antara satu artikel ke artikel berikutnya (dalam milliseconds)
• hoverTime : 500, Waktu minimal untuk masing-masing artikel yang tampil rotasi.

Keseluruhan kode tersebut akan menampilkan rotasi artikel terbaru dilengkapi dengan daftar list artikel di bawahnya, seperti terlihat pada bagian atas postingan tadi.

Jika kamu hanya ingin menampilkan rotasi recent posts tanpa list di bawahnya, silahkan ganti kode yang saya blog dengan warna kuning dengan kode di bawah ini :

.gfg-list {
display:none;
}

Sebaliknya, jika kamu hanya ingin menampilkan list recent posts silahkan ganti kode yang saya blog dengan warna hijau menjadi seperti ini :

.gfg-entry {
display:none;
}

Itulah tutorial blog tentang membuat rotasi recent posts yang sinahu coding share kali ini. Sampai jumpa pada tutorial blog yang lain.

---