Facebook SDK

Cara membuat Slideshow Mirip Yahoo!
 Cara membuat Slideshow Mirip Yahoo! - Hallo Sobat, Kali Ini Saya Muhammad Fajar Dwi Putra Akan Meng Update Trik Dan Tips Tentang Blogger. Tentu Hari Ini Saya Akan Berbagi Tips Bagaimana Caranya Membuat SlideShow Mirip Yahoo!.

Untuk Sobat" Sekalian Yang Penasaran bagaimana Caranya membuat Sldieshow Mirip Yahoo!. Ayo Ikuti Langkah Berikut Ini.

Langkah Pertama

  1. Login Ke Blogger  Sobat Dengan Aku Sobat
  2. Kemudian klik Tata Letak > Pilih Edit HTML
  3. Untuk Menjaga Keamanan Jangan Lupa Download Dulu Template Anda
  4. Cari Kode Berikut ]]></b:skin> , Jika Sudah Ketemu Letakan Kode Berikut Diatasnya :
/* 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/AVvXsEjF8wSSu-8yK70Egsiedf9KeETWImA8_0USGb_5fM5NCPtvbuNDfxEh7UCczOKYzZ3WSux55MReDHBp056E1gAl6TK0rVx5kExyArSZhSOieIfblhmHz3JZVxIMDNYPLmG_0_OCNQ2VY50/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/AVvXsEgPThNqTiHwDufQqKfWkj_0m7gqIWSd-nlcA3IIF4gX8HkPMp2_dxeoq4aLk0I701qVkGehr2zv3Ok6Wa9BwuD8ZDOkeDJ1WIdywECY8eTKcS9-wwYlOc8Qr-pMSN0GUgtUqWCAS-7dnVI/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/AVvXsEgPThNqTiHwDufQqKfWkj_0m7gqIWSd-nlcA3IIF4gX8HkPMp2_dxeoq4aLk0I701qVkGehr2zv3Ok6Wa9BwuD8ZDOkeDJ1WIdywECY8eTKcS9-wwYlOc8Qr-pMSN0GUgtUqWCAS-7dnVI/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/AVvXsEjYFjSJQTKxxsQhc7ik_JsgwoF8YAhYDEniBUSXdFoaL4EQe9ZJfuTQAaZHpDsQQLEuuI8zQ4uRvzKEIeNguBvIMnQXEVOCUeiHUOID4efCBy3nse0D7YRUvB1FagB5Q7E3JKuoin535hM/s1600/previous.gif);}

div.jqans-wrapper.default .jqans-pagination-controls-next a 
{background-image: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIpFRF8rYRp-vvyEWVF56E1bdd_Pxvoo4fQp2rD35uxZctBvETgit-pubhelEmlri-QXenRqOBJV-EVRMoDb2xvDahKsgOTrW6d-9Gzba3nM4o3flXQ6FIF5EJoM7ha9gC78qae6QwcdI/s1600/next.gif);}

Langkah Kedua

Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>

  <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">&lt;&lt; Back</a></span><span 
class="jqans-pagination-controls-next"><a href="#" 
title="Next">Next 
&gt;&gt;</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 content

jQuery(document).ready(function() {



    jQuery(&#39;#newsslider&#39;).accessNews({

   

    });



    jQuery(&#39;#newsslider2&#39;).accessNews({

        title : &quot;BREAKING NEWS:&quot;,

        subtitle:&quot;stories from the internet&quot;,

        speed : &quot;slow&quot;,

        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>


 Ohh Iyah Sampai disini masih mudah kan? Oya jika anda ingin meletakkan hari, tanggal dan bulan serta tahun seperti yang ada di demo di bawah ini

Dan letakkan kode berikut di bawah 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>

Jangan lupa, jika anda sudah memasang kode javascript untuk waktu diatas, kode <body> pada template harus diganti dengan :

body onLoad='goforit()'>
 
Save Terlebih Dahulu 
 
Langkah Ketiga
  1. Sekarang anda harus membuat satu kolom di atas postingan untuk meletakkan kode slide nantinya. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>
    1. /* Slide Content 
    2. ----------------------------------------------- */  
    3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;  
    4. word-wrap: break-word; overflow: hidden;}   
    5. .slide {color: #666666;line-height: 1.3em;}  
    6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
    7. .slide li {margin:0;padding-top:0;  
    8. padding-right:0;padding-bottom:.25em;  
    9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
    10. .slide .widget {margin:0px 0px 6px 0px;}  
  2. Kemudian untuk memunculkannya pada template (diatas postingan), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

    1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
    2.       <div id='slide-wrapper'>  
    3. <b:section class='slide' id='slide' preferred='yes'/>  
    4.       </div>  
    5. </b:if>   
    Cara membuat Slideshow Mirip Yahoo!
  3. Setelah anda membuat satu kolom diatas postingan, klik menu Tata Letak >> Elemen Laman
  4. Klik Tambah Gadget >> pilih HTML/Javascript
  5. Copy kode di bawah dan letakkan di kotak HTML/Javascript
    Keterangan :
    -  Warna biru : URL image
    -  Warna merah : URL post
    -  Warna kuning : Ringkasan post
    -  Warna hijau : judul post
  6. Jika layout pada template Anda sudah terdapat satu kolom kosong di atas post, langkah ini tidak perlu. Langsung saja add gadget kemudian letakkan kode script diatas.
  7. Kemudian save/simpan template selesai sudah
Ribet banget ya, kalau ribet nggak usah dipasang masih banyak slider lain yang lebih gampang cara memasangnya dan tidak kalah menarik dengan slider Yahoo ini. Saya hanya memberikan alternatif lain untuk menghias blog agar tampak lebih menarik. Jika teman-teman sering meringkas kode javascript yang terlalu panjang di googlecode, sebaiknya diringkas saja selain terlalu panjang juga akan meringankan loading blog anda.  Selamat mencoba dan berpusing ria jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah. Jika ada waktu senggang Insya Allah saya jawab.
Tags

3 Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

  1. Artabez.Cam16/11/12

    bikin berat ga ini kawan?
    makasih kawan dah berbagi..

    BalasHapus
  2. TU29/12/12

    ada yang kurang

    Copy kode di bawah dan letakkan di kotak HTML/Javascript
    Keterangan :
    - Warna biru : URL image
    - Warna merah : URL post
    - Warna kuning : Ringkasan post
    - Warna hijau : judul post


    kodenya mana masbro?

    BalasHapus
  3. Timurnews.com14/1/13

    Makasih Tipsnya dengan Demikian Tampilan web saya jadi keren

    BalasHapus

Posting Komentar

Hallo sobat..Kami Senang! Apabila Anda mau meninggalkan Saran, kritik dan Opini tentang Artikel Blog Kami.

Lebih baru Lebih lama