Menyisipkan SlideShow Pada Posting Blogger ~ Daily Note

Menyisipkan SlideShow Pada Posting Blogger

Menyisipkan SlideShow Pada Posting Blogger. Setiap kali saya ingin menulis artikel seputar Blogger, saya selalu bingung untuk membahas apa. Sebab sudah banyak artikel tentang Blogger yang sliweran di Google. Niatnya saya kali ini mau memberikan cara menyisipkan Slide Show pada postingan atau artikel Blogger.

Apa Gunanya?

Bagi saya menyisipkan sebuah Slide Gambar untuk meminimalisir tempat. Biasanya setiap artikel yang membahas seputar tutorial apapun, akan mensertakan gambar-gambar screen shot untuk memudahkan pengunjung memahami langkah-langkah yang sedang diberikan. Biasanya gambar yang terlalu banyak akan banyak memakan tempat.

Bagi saya cara seperti itu bisa disiasati dengan cara mengganti dengan menyisipkan Slide bergambar. Jika sobat tertarik untuk menggunakannya, silahkan ikuti cara berikut.

Cara Menyisipkan Slide Show pada Posting

#1. Log in >> Dasbor >> New Entri >> Klik pada bagian HTML (bukan Compose). kemudian pastekan kode-kode ini didalamnya.

<style type="text/css">
#sliderFrame {position:relative;width:580px;margin: 0 auto 40px;}     
#slider {
    width:580px;height:306px;/* Make it the same size as your images */
 background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;}
#slider img {
 position:absolute;
 border:none;
 display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}

/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:240px; /* Its position is relative to the #slider */
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}

/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="Link untuk Gambar"><img alt="Tulisan (Deskripsi gambar)" src="URL Gambar" height="167" width="320" /></a>
<a href="Link untuk Gambar"><img alt="Tulisan (Deskripsi gambar)" src="URL Gambar" height="167" width="320" /></a>
<a href="Link untuk Gambar"><img alt="Tulisan (Deskripsi gambar)" src="URL Gambar" height="195" width="320" /></a>
<a href="Link untuk Gambar"><img alt="Tulisan (Deskripsi gambar)" src="URL Gambar" height="195" width="320" /></a>
<a href="Link untuk Gambar"><img alt="Tulisan (Deskripsi gambar)" src="URL Gambar" height="195" width="320" /></a>
</div></div>

#2. Selesai.
Keterangan: Untuk bagian alt="..." untuk keterangan pada setiap Slide. Sobat juga bisa mengotak atik script CSSnya untuk mengatur sesuka anda.

Cukup sekian tutorial sederhana saya, smoga bisa berguna dan membantu. Tolong bantu share, selamat mencoba!

Bookmark and Share it:

Daily Note