Cara Menambahkan Wiget Featur Post Slider Pada Blog

Fitur Post Slider adalah fitur tampilan Widget yg bisa bergeser otomatis pada artikel dari sebuah blog. Fitur post yang ditampilkan memiliki beberapa tipe,

beberapa di antaranya adalah tipe gambar yang hanya menampilkan gambar-gambar postingan sementara beberapa hanya menggeser judul posting tetapi dalam posting ini saya akan membagikan sesuatu yang mengagumkan yang belum pernah dibagikan oleh siapa pun kepada saya.

Ini adalah Slider yang menggeser seluruh postingan bersama dengan thumbnail, judul, dan deskripsi singkat. Ini memiliki gaya yang unik dan tampilan yang bagus! Anda dapat melihat demo gadget ini di HomePage blog saya. Sebelum Anda menambahkan gadget ini di blog Anda izinkan saya memberi tahu Anda satu hal yaitu Anda harus menulis deskripsi, judul, tautan pos dan tautan thumbnail sendiri, itu tidak fakan secara otomatis mendapatkan posting untuk Anda. Anda dapat memilih posting mana yang ingin Anda tampilkan.

Saya harap Anda akan menyukai gadget ini. Anda dapat menambahkan posting sebanyak yang Anda inginkan, tidak ada batasan posting. Untuk menambahkan gadget ini di blog Anda ikuti langkah-langkah berikut:

Langkah 1: Buka dasbor blogger.

Baca Juga

Langkah 2: Pilih template dan klik edit html.

Langkah 3: Cari <head> dan tepat di bawahnya tempelkan kode di bawah ini:

<script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'/>

Langkah 4: Klik pada simpan template.

Langkah 5: Pergi ke Tata Letak dan klik pada menambahkan gadget.

Langkah 6: Gulir ke bawah ke Html / javascript.

Langkah 7: Salin kode di bawah ini dan tempelkan di jendela Html / javascript.

<div class="slider">
<div><a href="url post mu"><img src="url thumbnail mu" /><h3>judul post mu</h3></a><p>deskripsi post mu</p></div>
<div><a href="link post mu"><img src="url tumbnail mu" /><h3>judul post mu</h3></a><p>deskripsi post mu</p></div>
<div><a href="url post mu"><img src="url thumbnail mu" /><h3>judul post mu</h3></a><p>descripsi post mu</p></div>
</div>
<style>
.fadein { position:relative; height:332px; width:500px; }
.slider img {width:235px;height:200px;position:absolute; left:5px; top:5px;padding:0;border:0;box-shadow:none;}
.fadelinks > *, .slider > * { position:absolute; left:0; top:0; display:block; }
.fadelinks, .slider {
position: relative;
height: 200px;
width: 615px;
background: #eee;
overflow: hidden;
padding: 5px;
}
.slider h3 {
position: relative;
left: 250px;
top: 5px;
font-size: 17px;
white-space: nowrap;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
}
.slider a { text-decoration:none; }
.slider p {
position: relative;
left: 245px;
font-size: 13px;
bottom: 5px;
padding: 0 5px;
width: 350px;
}
</style>
<script>
$(function(){
$('.slider > :gt(0)').hide();
setInterval(function(){
var rand = Math.floor(Math.random() * ($('.slider').children().length-1));
$('.slider > :first-child').appendTo('.slider').fadeOut();
$('.slider > *').eq(rand).prependTo('.slider').fadeIn();
}, 7000);
});
</script>

Ganti "url post mu" dengan url post mu. Isi "Judul post mu" dengan judul post mu. "Url thumbnail mu" dengan url gambar posting Anda dan "deskripsi post mu" dengan deskripsi singkat posting Anda.

Langkah 8: Klik simpan dan selesai.

Kustomisasi:

Untuk mengubah durasi waktu posting geser mengubah jumlah 7000 disorot oleh warna kuning di garis akhir kode.

7000 berarti 7 detik.

<script>
$(function(){
$('.slider > :gt(0)').hide();
setInterval(function(){
var rand = Math.floor(Math.random() * ($('.slider').children().length-1));
$('.slider > :first-child').appendTo('.slider').fadeOut();
$('.slider > *').eq(rand).prependTo('.slider').fadeIn();
}, 7000);
});
</script>

Saya harap Anda menyukai posting ini dan itu berhasil di terapkan di blog Anda. Jika Anda memiliki masalah, tanyakan pada saya dalam komentar, bagikan dengan orang lain melalui jejaring sosial.

Pencarian tag: Meningkatkan tampilan halaman posting gadget, "Feature Posts" Slider Untuk Blogger, gadget slider Posting untuk blogger, gadget pos Unggulan, sejurus.com untuk blogger.