Membuat Slide Show Postingan Terbaru
Yang saya maksud dengan judul di atas adalah gambar di bawah ini, atau kalau kurang jelas, bisa di lihat demonya disini
Bismillah... Proses pembuatannya agak RIBET (Ringan-ringan berat), tapi dengan sedikit kesungguhan Insya Allah semua orang mampu. Bagaimana caranya?
Pertama:
Seperti biasa, login dulu ke blogspot > Rancangan > Edit HTML. Terus jangan lupa download templatemu, agar kalau ada kesalahan bisa dikembalikan seperti semula. Kemudian centang Expand Template Widget.
Kedua:
Masukan kode di bawah ini di atas kode ]]></b:skin>
Kodenya:
body {margin:0; background:#fff; padding:5px; font:13px calibri,Arial}
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:0px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #000000; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlFe7yBy3QcTM88huoE4i262jP7hk2xLwxvGBIeYYjHKBi0owt3bzB_BOGGQxdxj1Rvk4FKC30D4e24R6FH1-oNfNKRwelFwg7Ijr_w1mel7KvuZEYG3u_rlO6n6T0Cv8W3ydR5uFz2U/s48/left.gif) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUnieblVNRF_86zyldy6aEDin3Fu3UD_1piXve-eL932ph9AA-J5pWlqLZWl93KJMA1w-SPnnq-W9yDWiTNF-1xVcMNSdieMpSlIu-lWS2brsM7DcKFQexPPLNqineJX1T0NUaSU-M3A/s48/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LRe25LhESXr017gPCCIfvbkeyP1Mh-u4BaXjSJ0rqeeaBQfPwth9iX-41Apyla9VINCS2bS2AheJc67bI-VjV1j0gtZCcJKeq011gvcx5cx-9IUy6OsobXo2tAmtvM9HCP8HJu8Tt04/s48/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9g1gg-lZoDyi0rIOPYF9TGjMybWdS9QgX7-18RJj4VpstbFg7yBXavGwXry5xWr3zgV7zLVZUyfuMMMGAViF6emeGU5cQqgT1ZjTWMx32WeZVQR12JZyO1_p9XX4Ekuxy1DanoL7FKV0/s25/scroll-left.gif) center center no-repeat; background-color:#000000}
#slideleft:hover {background-color:#e68787}
#slideright {float:right; width:20px; height:81px; background:#969393 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZvGyj-I2HpadaRoz1FRE_sZva4aUT-t-GUiWpDwuPA3yuZgoEznk6D_78UccbR-oopAEIvWZ3p_I1bxAWNmGbWWvLVEJGsTxZfkDdOk2KkJBbHvzPaidLfgApeLwTX3L9dh7t-jWHC4w/s25/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#e68787}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #000000; padding:2px}
Ketiga:
Simpan template lalu menuju elemen halaman.
Keempat:
Tambahkan kode HTML/Javascript di bawah ini:
Kodenya:
<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>gambar besarnya disini.jpg
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg
" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image Three</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image four</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image five</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image six</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image seven</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script type="text/javascript" src="http://yourjavascript.com/12131025111/ruperslide.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
Ganti tulisan biru, image one, two three, dan seterusnya dengan judul, dan tulisan yang orange dengan ringkasan berita. Gambar besar adalah gambar yang di dalam bingkai slide itu sendiri, adapun gambar kecil adalah gambar thumbnails yang ada di bawah gambar besar. Untuk mengecilkan dan membesarkan gambar, edit di microsoft picture manager. Usahakan ukuran gambar besar 500x300 px, agar seluruh frame slide terisi, tapi jika tidak tak apa-apa, yang penting 300 px dipertahankan, misalkan 200x300 px, 403x300 px dst. Untuk ukuran gambar thumbnails/gambar kecil, kasih 125x75 px, usahakan 75 px nya dipertahankan! Memang awalnya rada ribet, tapi kalau sudah terbiasa, insya Allah jadi gampang.
Simpan, dan lihatlah blog kawan…. Selamat mencoba! Semoga berhasil! Hati-hati di jalan! Owh ya jangan lupa tinggalkan pesan… bye.. bye.. Salam Rumah Peradabanku. Kalau belum berhasil, berarti ada yang janggal, silahkan tanya kepada yang lebih master.. "Wa fauqo kullu dzii 'ilmin 'aliim" (di atas orang yang berilmu ada yang lebih berilmu).
 |
| Slide Show Postingan Terbaru |
Pertama:
Seperti biasa, login dulu ke blogspot > Rancangan > Edit HTML. Terus jangan lupa download templatemu, agar kalau ada kesalahan bisa dikembalikan seperti semula. Kemudian centang Expand Template Widget.
Kedua:
Masukan kode di bawah ini di atas kode ]]></b:skin>
Kodenya:
body {margin:0; background:#fff; padding:5px; font:13px calibri,Arial}
#slideshow {list-style:none; color:#fff}
#slideshow span {display:none}
#wrapper {width:506px; margin:0px auto; display:none}
#wrapper * {margin:0; padding:0}
#fullsize {position:relative; width:500px; height:300px; padding:2px; border:1px solid #000000; background:#000}
#information {position:absolute; bottom:0; width:500px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)}
#information h3 {padding:4px 8px 3px; font-size:14px}
#information p {padding:0 8px 8px}
#image {width:500px}
#image img {position:absolute; z-index:25; width:auto}
.imgnav {position:absolute; width:25%; height:306px; cursor:pointer; z-index:150}
#imgprev {left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxlFe7yBy3QcTM88huoE4i262jP7hk2xLwxvGBIeYYjHKBi0owt3bzB_BOGGQxdxj1Rvk4FKC30D4e24R6FH1-oNfNKRwelFwg7Ijr_w1mel7KvuZEYG3u_rlO6n6T0Cv8W3ydR5uFz2U/s48/left.gif) left center no-repeat}
#imgnext {right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAUnieblVNRF_86zyldy6aEDin3Fu3UD_1piXve-eL932ph9AA-J5pWlqLZWl93KJMA1w-SPnnq-W9yDWiTNF-1xVcMNSdieMpSlIu-lWS2brsM7DcKFQexPPLNqineJX1T0NUaSU-M3A/s48/right.gif) right center no-repeat}
#imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
.linkhover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5LRe25LhESXr017gPCCIfvbkeyP1Mh-u4BaXjSJ0rqeeaBQfPwth9iX-41Apyla9VINCS2bS2AheJc67bI-VjV1j0gtZCcJKeq011gvcx5cx-9IUy6OsobXo2tAmtvM9HCP8HJu8Tt04/s48/link.gif) center center no-repeat}
#thumbnails {margin-top:15px}
#slideleft {float:left; width:20px; height:81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9g1gg-lZoDyi0rIOPYF9TGjMybWdS9QgX7-18RJj4VpstbFg7yBXavGwXry5xWr3zgV7zLVZUyfuMMMGAViF6emeGU5cQqgT1ZjTWMx32WeZVQR12JZyO1_p9XX4Ekuxy1DanoL7FKV0/s25/scroll-left.gif) center center no-repeat; background-color:#000000}
#slideleft:hover {background-color:#e68787}
#slideright {float:right; width:20px; height:81px; background:#969393 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZvGyj-I2HpadaRoz1FRE_sZva4aUT-t-GUiWpDwuPA3yuZgoEznk6D_78UccbR-oopAEIvWZ3p_I1bxAWNmGbWWvLVEJGsTxZfkDdOk2KkJBbHvzPaidLfgApeLwTX3L9dh7t-jWHC4w/s25/scroll-right.gif) center center no-repeat}
#slideright:hover {background-color:#e68787}
#slidearea {float:left; position:relative; width:456px; margin-left:5px; height:81px; overflow:hidden}
#slider {position:absolute; left:0; height:81px}
#slider img {cursor:pointer; border:1px solid #000000; padding:2px}
Ketiga:
Simpan template lalu menuju elemen halaman.
Keempat:
Tambahkan kode HTML/Javascript di bawah ini:
Kodenya:
<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>gambar besarnya disini.jpg
</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg
" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image Three</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image four</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image five</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image six</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
<li>
<h3>Image seven</h3>
<span>gambar besarnya disini.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="LINK GAMBAR"><img src="Gambar kecilnya disini.jpg" alt="Image Two" /></a>
</li>
</ul>
<div id="wrapper">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Previous Image"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Next Image"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Slide Left"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Slide Right"></div>
</div>
</div>
<script type="text/javascript" src="http://yourjavascript.com/12131025111/ruperslide.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
Ganti tulisan biru, image one, two three, dan seterusnya dengan judul, dan tulisan yang orange dengan ringkasan berita. Gambar besar adalah gambar yang di dalam bingkai slide itu sendiri, adapun gambar kecil adalah gambar thumbnails yang ada di bawah gambar besar. Untuk mengecilkan dan membesarkan gambar, edit di microsoft picture manager. Usahakan ukuran gambar besar 500x300 px, agar seluruh frame slide terisi, tapi jika tidak tak apa-apa, yang penting 300 px dipertahankan, misalkan 200x300 px, 403x300 px dst. Untuk ukuran gambar thumbnails/gambar kecil, kasih 125x75 px, usahakan 75 px nya dipertahankan! Memang awalnya rada ribet, tapi kalau sudah terbiasa, insya Allah jadi gampang.
Simpan, dan lihatlah blog kawan…. Selamat mencoba! Semoga berhasil! Hati-hati di jalan! Owh ya jangan lupa tinggalkan pesan… bye.. bye.. Salam Rumah Peradabanku. Kalau belum berhasil, berarti ada yang janggal, silahkan tanya kepada yang lebih master.. "Wa fauqo kullu dzii 'ilmin 'aliim" (di atas orang yang berilmu ada yang lebih berilmu).
4 Comments 
Syukron infonya brader......sangat bermanfaat...lanjutkan..!
ReplyDeleteYup, sama2 brader syadid :D
ReplyDeletemas, kalau buat populer post agar slidenya seperti horizontal (bukan Vertikal bisa gak ya? cz buat referensi ngedit widget popular post pada blog saya.
ReplyDelete~x( waduuh, saya pernah nemu linknya, tp ilang... paling saya tahu template yg pakai slide seperti itu, di http://btemplates.com/2010/blogger-template-magduo/demo/
ReplyDeleteklo mas bisa ngotak-atiknya mungkin mas bisa copotin slidenya itu :D