Buat Slide Show Seperti Yahoo – Hallo sobat Refreshing. Kali ini kita akan belajar tentang trik blog yaitu membuat Slide Show. Slide show adalah sebuah objek yang saling bergantian satu sama lain dalam tempat yang sama. Slide show yang akan kita pelajari merupakan slide show foto yang akan menuju ke suatu artikel jika di klik. Fitur ini mempunyai keunikan tersendiri. Mengapa? Karena slide show foto ini dibuat mirip dengan situs ternama yaitu Yahoo. Fitur yang akan dipelajari ini dibuat oleh para master blogger kita yang bertujuan untuk memuaskan para blogger yang ingin membuat slide show seperti Yahoo. Oke, kita langsung saja ke cara pembuatannya pada berikut ini.
1. Login ke akun Blogger anda.
2. Kemudian pergi ke Template > Edit HTML > Lanjutkan.
3. Cari kode ]]></b:skin> (Ctrl+F) dan letakan kode berikut di atasnya.
/* Yahoo Slider Wrapper-----------------------------------------------
*/div.jqans-wrapper
{-x-system-font:none;font-family:arial,helvetica,clean,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:1.231;color:#666666;}div.jqans-wrapper
img {border: 0;}div.jqans-wrapper
ul,div.jqans-wrapper li,div.jqans-wrapper h1,div.jqans-wrapper p
{list-style:none;margin: 0;padding: 0;}div.jqans-wrapper
{list-style:none;position: relative;overflow: hidden;}div.jqans-wrapper
ul {position: relative;left: 0;width: auto;list-style-type: none;overflow:
hidden;z-index: 1;}div.jqans-wrapper
li {list-style:none;float: left;display: inline;}/* Yahoo Slider
Content-----------------------------------------------
*/div.jqans-wrapper.default
.jqans-stories ul, div.jqans-wrapper.default .jqans-stories li {height: 110px;}div.jqans-wrapper.default
.jqans-stories-selector ul, div.jqans-wrapper.default .jqans-stories-selector
li {height: 10px;}div.jqans-wrapper.default,
div.jqans-wrapper.default .jqans-container {width: 458px;background:#fff;}div.jqans-wrapper.default
li {width: 115px;}div.jqans-wrapper.default
a {text-decoration: none;font-weight: normal;color: #363636;outline: none;}div.jqans-wrapper.default
strong {color: #000;}/* wrapper */div.jqans-wrapper.default
{border: 1px solid #ccc;border-width: 1px 1px 0 1px;margin: 0 0 0.5em;}/* container */div.jqans-wrapper.default
.jqans-container {min-height: 270px;text-align: center;padding-top: 4px;}div.jqans-wrapper.default
.jqans-container a {font-weight: bold;color:#000;}div.jqans-wrapper.default
.jqans-container img {width:438px;height:210px;}/* headline */div.jqans-wrapper.default
.jqans-headline {text-align: left;margin-left:10px;margin-bottom:
4px;font:normal 13px Arial;}div.jqans-wrapper.default
.jqans-content h1 {text-align:left;color:#16387c;margin: 1px 9px;font:bold 18px
Arial;letter-spacing:-.0001em;line-height:1.1em; height:22px;overflow:hidden;}div.jqans-wrapper.default
.jqans-content p {text-align: left;color: #333;margin: 1px 9px;font:normal 12px
Arial;line-height:1.3em;height:30px;overflow:hidden;}/* stories */div.jqans-wrapper.default
.jqans-stories {background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD4u_9yPamWGpD2S7_p4hTGQqNHOK9-a-nhHFIOVAuYDIkZ5R4y81j8bLg6KCkUbYoqbD1oRFG-N6dRx7fzMXp6uykiTgS-RgXfMSDao6onqrearw2sPlzX5ZxnHK8za5FcOciIEjP_hw/s1600/bg_stories.gif);background-repeat:
repeat-x;background-position: top left;}div.jqans-wrapper.default
.jqans-stories li {overflow: hidden;text-align: center;font-size: 11px;color:
#fff;line-height:1.2em;}div.jqans-wrapper.default
.jqans-stories li.selected {background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbcW6fTkghoTi1TqA0gCb-2LdmbBD1HJpprmzZUzrpkRxlxHHy6Lf98Mvpd-QmhrVrzRZUkHjegM-UXIodOjKg76mLOrZSZqyyb3RZXfiuR39VFX-4mcUIwlBkFwGScSMT-SCAvrXgrQ/s1600/bg_selected.gif);background-repeat:
no-repeat;background-position: top center;}div.jqans-wrapper.default
.jqans-stories li.selected a {color:#fff;}div.jqans-wrapper.default
.jqans-stories li img {margin-top: 22px;width:100px;
height:52px;border-right:1px solid #fff;border-bottom:1px solid
#fff;border-left:1px solid #555;border-top:1px solid #555;}div.jqans-wrapper.default
.jqans-stories li p {display: none;}div.jqans-wrapper.default
.jqans-stories li h3 {margin:0;padding:1px 10px;color:#000;font-size:11px;font-weight:normal;font-family:Arial;height:28px;overflow:hidden;line-height:1.2em;}div.jqans-wrapper.default
.jqans-stories-selector li.selected div {background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJbcW6fTkghoTi1TqA0gCb-2LdmbBD1HJpprmzZUzrpkRxlxHHy6Lf98Mvpd-QmhrVrzRZUkHjegM-UXIodOjKg76mLOrZSZqyyb3RZXfiuR39VFX-4mcUIwlBkFwGScSMT-SCAvrXgrQ/s1600/bg_selected.gif);background-repeat:
no-repeat;background-position: top center;}/* pagination */div.jqans-wrapper.default
.jqans-pagination {border: 1px solid #ccc;border-width: 1px 0;margin:
0;padding: 4px 4px 4px 4px;background: #f2f2f2;text-align: left;clear:
both;width: 448px;overflow: hidden;}div.jqans-wrapper.default
.jqans-pagination-count {float: left;font:normal 11px Arial;color:#666;}div.jqans-wrapper.default
.jqans-pagination-controls {float: right;}div.jqans-wrapper.default
.jqans-pagination-controls a {display: inline-block;width: 22px;height:
13px;text-indent: -9999px;background: no-repeat bottom center;*float:left;}div.jqans-wrapper.default
.jqans-pagination-controls-back a {background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnuNTcpV2SliNgr327ia10TmFwePxCHD3P48UGU6cxvdnRo35giA4wmCAws3dPv-XO-BrRKff0OP2WeQWKUxkqbtwbAJPNxFA_OxJKxG8jrsYS1ATaxdLodMBnoJJhgwSwQ4OlKQ5sy8/s1600/previous.gif);}div.jqans-wrapper.default
.jqans-pagination-controls-next a {background-image:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiA6DyNShZvLsDzg3UWDhXCI9IrpEZwuEDiBKKNxftVBLHHPPyJWdsLcYozrZmqmopKzWzu2yb-VEruvTxnoANP7RqUI1hdrkM2alFZtW3PvY0oSSmVTD4A0J0tVftFsgsRsgeasa8WI8/s1600/next.gif);}
4. Masih pada kode ]]></b:skin>, sisipkan kode berikut tepat di atasnya (Ini bertujuan untuk menambah elemen baru di atas postingan. Jika sudah terdapat elemen ini di atas postingan, lewati saja.
/* Slide
Content ----------------------------------------------- */ .slide-wrapper
{padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word;
overflow: hidden;} .slide {color: #666666;line-height: 1.3em;} .slide ul
{list-style:none;margin:0 0 0;padding:0 0 0;} .slide li
{margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;} .slide .widget {margin:0px
0px 6px 0px;}
Masih kelanjutan di step 4, cari kode <div id='main-wrapper'> (Ctrl+F) dan letakan kode berikut tepat dibawahnya.
5. Selanjutnya, cari kode </head> (Ctrl+F) dan letakan kode berikut tepat di atasnya.
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'/><script
type='text/javascript'>//<![CDATA[(function(a){a.fn.accessNews=function(b){var
c={title:"HARI INI -",subtitle:"<span id='clock'/>",slideBy:4,speed:"normal",slideShowInterval:3000,slideShowDelay:3000,theme:"default",continuousPaging:true,contentTitle:"h3",contentSubTitle:"abbr",contentDescription:"p",onLoad:null,onComplete:null};return
this.each(function(){b=jQuery.extend(c,b);var k=jQuery(this);var
h=k.children();var i;var j;var f;var e={_wrapper:'<div
class="jqans-wrapper
'+b.theme+'"></div>',_container:'<div
class="jqans-container"></div>',_headline:jQuery("<div
class='jqans-headline'></div>").html(["<p><strong>",b.title,"</strong>
",b.subtitle,"</p>"].join("")),_content:jQuery("<div
class='jqans-content'></div>"),_stories:'<div
class="jqans-stories"></div>',_first:jQuery(h[0]),init:function(){if(b.onLoad){b.onLoad.call(a(this))}k.wrap(this._wrapper);k.before(this._container);var
l=(h.length*this._first.outerWidth(true));k.css("width",l);if(b.title.length){this.append(this._headline)}this.append(this._content);this.selector(l);this.set(0);d.init();g.init();k.wrap(this._stories);if(b.onComplete){b.onComplete.call(a(this))}},selector:function(n){var
m="";for(var
l=1;l<=h.length;l++){m+="<li><div/></li>"}var
p=jQuery('<div
class="jqans-stories-selector"></div>');p.append("<ul>"+m+"</ul>");j=jQuery(p.find("ul"));f=j.children();p.css("width",n);k.before(p)},append:function(l){this.get().append(l)},get:function(){return
k.parents("div.jqans-wrapper").find("div.jqans-container")},set:function(n){var
o=this.get();var r=jQuery(h[n]);var m=jQuery(f[n]);var
q=jQuery("div.jqans-content",o);var p=jQuery("<img></img>");var
l=jQuery("<div></div>");var
s=jQuery(b.contentTitle+"
a",r).attr("title")||jQuery(b.contentTitle,r).text();p.attr("src",jQuery("img",r).attr("longdesc")||jQuery("img",r).attr("src"));l.html("<h1>"+s+"</h1><p>"+jQuery(b.contentDescription,r).html()+"</p>");q.empty();q.append(p);q.append(l);h.removeClass("selected");r.addClass("selected");f.removeClass("selected");m.addClass("selected")}};var
d={loaded:false,_animating:false,_totalPages:0,_currentPage:1,_storyWidth:0,_slideByWidth:0,init:function(){if(h.length>b.slideBy){this._totalPages=Math.ceil(h.length/b.slideBy);this._storyWidth=jQuery(h[0]).outerWidth(true);this._slideByWidth=this._storyWidth*b.slideBy;this.draw();this.loaded=true}},draw:function(){var
n=jQuery('<div class="jqans-pagination"></div>').html(['<div
class="jqans-pagination-count"><span
class="jqans-pagination-count-start">1</span> - <span
class="jqans-pagination-count-end">',b.slideBy,'</span> of
<span class="jqans-pagination-count-total">',h.length,'</span>
<strong>News Pagination</strong></div><div
class="jqans-pagination-controls"><span
class="jqans-pagination-controls-back"><a href="#"
title="Back"><< Back</a></span><span
class="jqans-pagination-controls-next"><a href="#"
title="Next">Next
>></a></span></div>'].join(""));k.after(n);var
m=jQuery(".jqans-pagination-controls-next > a",n);var
l=jQuery(".jqans-pagination-controls-back >
a",n);m.click(function(){var o=d._currentPage+1;d.to(o);return
false});l.click(function(){var o=d._currentPage-1;d.to(o);return
false})},to:function(p){if(this._animating){return}this._animating=true;var
q=k.parent("div").next(".jqans-pagination");var
l=jQuery(".jqans-pagination-count-start",q);var
s=jQuery(".jqans-pagination-count-end",q);if(p>this._totalPages){p=b.continuousPaging?1:this._totalPages}if(p<1){p=b.continuousPaging?this._totalPages:1}var
r=(p*b.slideBy)-b.slideBy;var n=(p*b.slideBy);if(n>h.length){n=h.length}var
o=parseInt(k.css("left"));var
m=(p*this._slideByWidth)-this._slideByWidth;l.html(r+1);s.html(n);o=(m*-1);k.animate({left:o},b.speed);j.animate({left:o},b.speed);e.set(r);this._currentPage=p;this._animating=false}};var
g={init:function(){this.attach();this.off();i=setTimeout(function(){g.on()},b.slideShowDelay)},on:function(){this.off();i=setInterval(function(){g.slide()},b.slideShowInterval)},off:function(){clearInterval(i)},slide:function(){var
o=jQuery("li.selected",k);var m=o.next("li");var
n=0;if(!m.length){m=jQuery(h[0]);n=1}var p=h.index(m);if(d.loaded){var
l=(p)%b.slideBy;if(l===0){n=(Math.ceil(p/b.slideBy))+1}if(n>0){d.to(n)}}e.set(p)},attach:function(){var
l=jQuery(k).parent("div.jqans-wrapper");l.hover(function(){g.off()},function(){g.on()})}};e.init();h.hover(function(){e.set(h.index(this))},function(){})})}})(jQuery);//]]></script><script
type='text/javascript'>// when the DOM is
ready, convert the feed anchors into feed contentjQuery(document).ready(function()
{
jQuery('#newsslider').accessNews({
});
jQuery('#newsslider2').accessNews({
title : "BREAKING NEWS:",
subtitle:"stories from the internet",
speed : "slow",
slideBy : 4,
slideShowInterval: 100000,
slideShowDelay: 100000
});
});</script><script
type='text/javascript'>/* <![CDATA[ */jQuery.noConflict();jQuery(function(){jQuery("ul.menu-primary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(function(){jQuery("ul.menu-secondary").superfish({animation:{opacity:"show"},autoArrows:true,dropShadows:false,speed:200,delay:800})});jQuery(document).ready(function(){jQuery(".fp-slides").cycle({fx:"fade",timeout:4000,delay:0,speed:400,next:".fp-next",prev:".fp-prev",pager:".fp-pager",continuous:0,sync:1,pause:1,pauseOnPagerHover:1,cleartype:true,cleartypeNoBg:true})});/* ]]> */</script>
6. Jika anda ingin menambahkan tanggal pada widget slide, sisipkan kode berikut tepat dibawah kode diatas.
<script type='text/javascript'>//<![CDATA[var dayarray=new
Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");var
montharray=new
Array("January","February","March","April","May","June","July","August","September","October","November","December");function
getthedate(){var a=new Date();var g=a.getYear();if(g<1000){g+=1900}var
h=a.getDay();var e=a.getMonth();var
b=a.getDate();if(b<10){b="0"+b}var i=a.getHours();var
c=a.getMinutes();var j=a.getSeconds();var
d="AM";if(i>=12){d="PM"}if(i>12){i=i-12}if(i==0){i=12}if(c<=9){c="0"+c}if(j<=9){j="0"+j}var
f="<font color='666666' face='Arial'>"+dayarray[h]+",
"+montharray[e]+" "+b+", "+g+"
"+i+":"+c+":"+j+"
"+d+"</font>";if(document.all){document.all.clock.innerHTML=f}else{if(document.getElementById){document.getElementById("clock").innerHTML=f}else{document.write(f)}}}if(!document.all&&!document.getElementById){getthedate()}function
goforit(){if(document.all||document.getElementById){setInterval("getthedate()",1000)}};//]]></script>
7. Jika anda menambahkan tanggal di widget slide, cari kode <body> (Ctrl+F) dan ganti dengan kode berikut.
<body onLoad='goforit()'>
8. Lalu cari kode <div id='main-wrapper'> (Ctrl+F) dan letakan kode berikut tepat dibawahnya.
9. Berikutnya Simpan Template.
Kedua:
Setelah anda melakukan prosedur di atas, pada Page Elemen atau Tata Letak akan muncul zona widget baru, tepatnya di atas zona artikel. Lebih jelasnya seperti gambar berikut.
1. Setelah melakukan prosedur di atas, silahkan menuju ke Page Elemen atau Tata Letak > Tambah Gadget (pada posisi di atas zona artikel)> Pilih HTML/Javascript.
2. Kemudian copy paste kode berikut kedalam kolom konten.
<ul
id="newsslider">
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy_YLoUkRx1IflkF66pjgegX8NXXH31AAMLjJJjprbE0PpBvJyuYtlusgysR-hcsQ3Jb97rS6LW2qC3x4Qh1jwnfhR0gGPO89vY6GBj8y4zzB6OkOh68GQ0h4Eu95L8dKmHXcMit8_2Ms/s320/slide.PNG"/></a>
<h3><a href="http://superrefreshing.blogspot.com/2012/12/buat-slide-show-yahoo.html">Buat
Slide Show Seperti Yahoo</a></h3>
<p> Hallo sobat Refreshing. Kali ini kita akan belajar tentang trik
blog yaitu membuat Slide Show. Slide show adalah ... <a
href="#"> more » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVH_UBuWXaGX8b8397NC3DMdRalTqvEGk6g5Q8oThwqBscmNjwQNa4oaqAJCpeThiAuQLpFFy4VHcdESFpK6H5KFaCvuYBYf_eICNR3NnrVZGVIeNuJc0GIngNQQOdmY3IwEelAt6ZpEk/s1600/tidur.jpg"/></a>
<h3><a href="http://superrefreshing.blogspot.com/2012/12/tidur-tanpa-pakaian-bikin-subur.html">Tidur
Tanpa Pakaian Bikin Subur</a></h3>
<p>Tidur tanpa pakaian
memang masih dianggap tabu. Berbeda dengan budaya Barat, orang..... <a href="#">more
»</a></p>
</li>
<li>
<a class="title" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhILQWiEHx4RUOevwL1zptnGgNUuije_3YKVR3b6BEpc22xzSrPhf7mF-YQ0s_YXQKKkH1WyLK8IBc7OBZIrPu6ng6bOeE652MkjbksikC_AOEnIl8T_aLKJZnYGaTDm9gybfbfhiLsUvw/s1600/cerai.jpg"
/></a>
<h3><a href="http://superrefreshing.blogspot.com/2012/12/pertimbangan-penting-sebelum-bercerai.html">Pertimbangan
Penting Sebelum Bercerai</a></h3>
<p>Sama seperti pernikahan, perceraian juga merupakan suatu keputusan
yang harus dipertimbangkan dengan matang sebelum .... <a href="#">more
»</a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbrJxGIfzdxzxv9GRDZ0AcGRGIffjemdHifY7qVrHP9SfS8qFqz4wH06-u_qXC_DbGD0p1vFhzkNAYn82C2ZZl1eBaUGPMgbTXVOv-ZL0twgaWmEme4FI2Dox5wrneeMTqZ1Jb2CGXHGo/s1600/mata.jpg"/></a>
<h3><a href="http://superrefreshing.blogspot.com/2012/12/40menit-manusia-buta.html">40
Menit Setiap Hari Manusia Mengalami Buta</a></h3>
<p>Tahukah anda, bahwa kita ternyata akan selalu mengalami kebutaan
sekitar 40 menit setiap harinya yang.... <a
href="#">more » </a></p>
</li>
<li>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1q2RK5dREioxlV4B46JdpI6dT6-sg1ApKGd3UQj8tU_S4RoFdMEbV_m-eHJ3UkXv_tRX85XVagYEDauFv-hQ57xFgqrYOcRsLfCedxtndfXt8Wc4iBl1B8twjQnCzAu4ZuU8J6wPysE/s1600/mie+instan.jpg"/></a>
<h3><a href="http://superrefreshing.blogspot.com/2012/11/tips-sehat-bagi-penggemar-mie-instan.html">Tips
Sehat Bagi Penggemar Mie Instan</a></h3>
<p>Meski mi instan diketahui bukanlah makanan yang menyehatkan,
namun nyatanya tak sedikit orang yang menggemari makanan ini. Walau.... <a href="#">more »
</a></p>
</li>
</ul>
Keterangan:
Warna merah: Ganti dengan url gambar pada artikel anda.
Warna hijau : Ganti dengan url artikel tujuan.
Warna biru : Ganti dengan judul artikel yang tercantum.
Warna oranye: Ganti dengan penggalan isi artikel yang tercantum.
3. Terakhir, klik Simpan.
>>>Selamat Mencoba<<<
Anda telah membaca artikel tentang Buat Slide Show Seperti Yahoo dengan url http://superrefreshing.blogspot.com/2012/12/buat-slide-show-yahoo.html. Anda boleh menyebarluaskan atau mengcopy artikel Buat Slide Show Seperti Yahoo ini dengan catatan mencantumkan link sumbernya.
