Blog Pribadi tempat Berbagi Ilmu dan Pengalaman

Cara Mudah Membuat Slide Show Mengandung Link Pada Blogspot


Kali ini saya memberikan cara bagaimana memasang Slide Show di blog. Saya mengusahakan tetorial ini untuk temen-temen yang masih sangat pemula, jadi saya sajikan agak bertele-tele. Gunanya Slide ini bisa membuat blog temen menjadi lebih menarik, enak di pandang dan tidak terkesan monoton, Apalagi jika template blog sobat terlalu banyak tulisan-tulisan kecil.

Saya sendiri masih berusaha memperbaiki kemampuan saya, jadi jika temen-temen merasa ada yang ada yang salah, silahkan temen-temen koreksi saya.

Berikut langkah-langkahnya :

Masuk, Log In Blogger Dashboard.



Klik Tata Letak



Klik Tambahkan Gadget





Block Semua Script di bawah ini, Kemudian Ctrl + C.

<style type="text/css">
/* http://dimpost.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
      
#slider {
    width:700px;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:280px; /* 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="#"><img src="http://1.bp.blogspot.com/-ea6n-wB3tUk/Unw_rfaO4eI/AAAAAAAAAnY/wO-nTQdMi14/s1600/gurun+2.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="http://3.bp.blogspot.com/-H6WyHU1ysf8/Unw_qcmlrYI/AAAAAAAAAnE/ixQZAeLdB4o/s1600/gurun.jpg" alt="Go UP!" /></a>
<a href="#"><img src="http://4.bp.blogspot.com/-XhkWYDRRapk/Unw_rPqCLMI/AAAAAAAAAnM/qQCegJlZUPA/s1600/hiu.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="http://3.bp.blogspot.com/-g5LWoJSaGvY/Unw_rZx3-1I/AAAAAAAAAnQ/bnc0a5d8cNA/s1600/hujan.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="http://3.bp.blogspot.com/-q7TRj-C1U_Q/Unw_r0BETNI/AAAAAAAAAng/YxtXHN06xTQ/s1600/ilustrasi.jpg" alt="Stay Connected"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Code by <a href="http://bani-fahmi.blogspot.com/" target="_blank">baniblog</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://bani-fahmi.blogspot.com/" target="_blank">CSS</a> <a href="http://bani-fahmi.blogspot.com/" target="_blank">JavaScript</a> Rocks.
</div>
</div>

Kemudian Klik Save. Untuk meng-edit silahkan ganti alamat url gambar dan ukuran gambar pada slide untuk menyesuaikan. Selesai

No comments:

Post a Comment