Cara Membuat Recent Post Slider Responsive di Blog

Recent Post Slider Responsive merupakan widget yang menampilan postingan terbaru yang dilengkapi fitur rotasi secara otomatis. Pada bagian 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 langsung saja. untuk memasangnya, kamu bisa 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 kode 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 menunjukan jumlah artikel yang muncul pertama pada daftar.
• max-results=10 pengaturan untuk menunjukan jumlah maksimal postingan yang akan ditayangkan.
• numResults : 10 pengaturan untuk menunjukan jumlah postingan yang akan ditayangkan.
• displayTime : 5000 adalah pengaturan rotasi yang dihitung dalam detik.
• hoverTime : 500 adalah pengaturan waktu maksimal itema yang ditampilkan pada daftar diatas.

Jika kamu ingin menyembunyikan daftar dan hanya ingin menampilkan deskripsi, ubah kode CSS di bawah ini : 

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

Menjadi:

.gfg-list {
display: none;
}

Dan jika hanya ingin menampilkan daftar, ubah kode 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 kamu lihat hasilnya, keren buka. Selamat mencoba!

Share this post