Cara Menciptakan Recent Post Slider Responsive Di Blog

Recent Post Slider Responsive merupakan widget yang menampilan postingan terbaru yang dilengkapi fitur rotasi secara otomatis. Pada bab atas pada widget ini akan menampilkan single post beramaan dengan judul, admin, tanggal dan ringkasan.

Selain itu, postingan pada widget tersebut akan berputar secara otomatis sesuai dengan daftar yang telah ditentukan. Recent post yang akan saya share ini responsive loh sobat, jadi widget ini tetap akan berkerja walaupun di divice mobile.

Demo

Okey sobat, kita pribadi saja. untuk memasangnya, kau dapat ikuti panduannya di bawah ini:

1. Log-in keakun Blogger
2. Pilih Layout/Tata Letak
3. Lalu klik tombol add gadget
4. Akan muncuul jendela popup, pilih HTML/Javascript
5. Kemudian Anda copy pastekan instruksi dibawah ini pada kolom yang tersedia;

<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://www.aak-share.com/feeds/posts/default?redirect=false&start-index=1&max-results=10'},];
new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>

Note :

• Silahkan ganti URL http://www.aak-share.com/ dengan alamat Blog kamu.
• start-index=1 untuk mengambarkan jumlah artikel yang muncul pertama pada daftar.
• max-results=10 pengaturan untuk mengambarkan jumlah maksimal postingan yang akan ditayangkan.
• numResults : 10 pengaturan untuk mengambarkan jumlah postingan yang akan ditayangkan.
• displayTime : 5000 yaitu pengaturan rotasi yang dihitung dalam detik.
• hoverTime : 500 yaitu pengaturan waktu maksimal itema yang ditampilkan pada daftar diatas.

Jika kau ingin menyembunyikan daftar dan hanya ingin menampilkan deskripsi, ubah instruksi CSS di bawah ini : 

.gfg-list {
position: relative;
overflow: hidden;
text-align: left;
}

Menjadi:

.gfg-list {
display: none;
}

Dan bila hanya ingin menampilkan daftar, ubah instruksi ini :

.gfg-entry {
background-color: #FFFFFF;
width: 100%;
height: 9.2em;
position: relative;
overflow: hidden;
text-align: left;
margin-top: 3px;
}

Menjadi :

.gfg-entry {
display: none; }

6. Simpan

Sekarang kau lihat hasilnya, keren buka. Selamat mencoba!
Sumber http://www.websiteedukasi.com/