Membuat recent post slideshow blogger

ikhsanudin on

Friday, June 27, 2014

Membuat recent post slideshow blogger. recent post slideshow berfungsi untuk menampilkan posting terbaru dengan animasi slide show. biasanya recent post slideshow di letakkan diatas posting, ada juga yang meletakkan pada widget sebelah kanan / kiri posting.

Berikut cara Membuat recent post slideshow blogger.
1. Login ke blogger
2. Pilih tata letak
3. Tambahkan Gadget
4. HTML/JavaScript
Masukkan kode berikut, lalu simpan :

<span style="color: red;"><br />
<link rel="stylesheet" type="text/css" href="http://goo.gl/pv78Wh"/><br />
<style type="text/css">
/* Custom CSS here... */
.slider-rotator {
width:600px;
height:170px;
padding:0 0;
background-color:white;
font:italic normal 12px/1.4 Georgia,Serif;
color:white;
border:1px solid black;
}

.slider-rotator .slider-item {
background-color:white;
height:170px; /* Same with `.slider-rotator` height */
padding:0 0;
}

.slider-rotator h4 {margin-top:0}
.slider-rotator p {margin:2px 0 0}

/* Slider details as caption */
.slider-rotator .detail-wrapper {
position:absolute;
top:auto;
right:0;
bottom:0;
left:0;
background-color:#0075fb;
background-color:rgba(0,0,0,.9);
padding:.5em 1em;
z-index:4;
}
</style><br />
<br />
<br />
<div id="slider-rotator" class="slider-rotator loading">
</div>
<br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br />
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script><br />
<script type="text/javascript">
makeSlider({
url: "http://www.ikhsanudin.com/", // Ganti dengan url blog sampeyan
thumbWidth: 600 // Thumbnail width in pixels (same with slideshow width)
});
</script></span>

Hasilnya akan seperti ini :
Membuat recent post slideshow blogger

Labels: Blogger

Thanks for reading Membuat recent post slideshow blogger. Please share...!

Membuat recent post slideshow blogger

Previous

Next