Cara membuat gambar dengan efek slide di blog

Berikut ini mas Hidayatd kembali akan membagikan tentang cara Membuat Image Slider di Blogger, Slider gambar dengan java script berikut ini memiliki tampilan yang keren menurut saya, Anda juga dapat menampilkan gambar-gambar yang anda inginkan di template ,header blog bisa juga didalam postingan menggunakan slider ini.

Mengenai slider sobat dapat melihat slider lain juga seperti slider dengan efek quake, slider otomatis artikel terbaru, slider transisi dan slider otomatis di blog. Ok sobat berikut ini adalah kode CSS, Jquery dan Html yang sudah digambungkan dan dapat sobat gunakan langsung, atau dipisahkan menurut tipenya jika ingin menggunakannya misalnya di slider homepage.

DEMO


Berikut ini adalah Kodenya :
silahkan copy dan pastekan tepat di atas kode ]]></b:skin>
&lt;style type=&quot;text/css&quot;&gt;
/*http://syarif-hidayatd.blogspot.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;}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- 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);
}
&lt;/style&gt;
catatan;
-ubah ukuran tinggi lebar ruang slide 700 di barisan angka 03 di atas sesukamu
-sesuaikan ukuran lebar width:700 dan tinggi height:306 gambar dengan kotak ruang slide pada baris angka 05'
-Url baris nomer 06 adalah Animasi loading saat blog dibuka jeda waktu menunggu slide gambar muncul, bisa diganti atau di hilangkan

kemudian copy script berikut dan taruh di dalam kotak widget, widgetnya mau di taruh dimana bebas..sesukamu
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="http://1.bp.blogspot.com/-iGc99v3mr50/VIxxPtvmVvI/AAAAAAAAA-k/qodY6edvC_k/s1600/barata.jpg" alt="mas Hidayatd" /></a>

<a href="#"><img src="http://4.bp.blogspot.com/-yokaSh9BudI/VIxxQlqIHSI/AAAAAAAAA-o/p2g_o78k_Mg/s1600/barata%2B2.jpg" alt="mas Hidayatd" /></a>

<a href="#"><img src="http://3.bp.blogspot.com/-IVQTh9SX0EU/VIxxRI8hLMI/AAAAAAAAA-s/hA1V_t2s99I/s1600/barata%2B3.jpg" alt="mas Hidayatd" /></a>

<a href="#"><img src="http://3.bp.blogspot.com/-jVOMHGNmeks/VIxxR5f0ESI/AAAAAAAAA-4/4Xyx_HyAw3c/s1600/barata%2B4.jpg" alt="mas Hidayatd" /></a>

<a href="#"><img src="http://4.bp.blogspot.com/-aETBHFrHXng/VIxxYHOvZLI/AAAAAAAAA_E/AsUFXFlrMHQ/s1600/barata%2B5.jpg" mas hidayatd"/></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://syarif-hidayatd.blogspot.com/" target="_blank">social media com</a>
</div>

</div>
catatan;
-ganti url baris nomer 4,6,8,10,12 dengan url gambar anda
-lakukan langkah-langkah sesuai prosedur petunjuk
kalau semua langkah sudah benar silahkan klik pratinjau terlebih dahulu untuk melihat hasilnya

terakhir: save

jika anda mengalami kegagalan ,silahkan kirim komentar dikolom komentar yang nantinya saya akan balas dengan uraian yang lebih jelas dan lengkap
oky sekian dulu tutorial saya tentang cara membuat gambar dengan efek slide diblog
Previous
Next Post »