Cara Memasang Slide Show Blogspot

 

Ini Slide Show gaya  Anda sering berkunjung ke website itu, ya? Slide show-nya maco, 'kan? Bagi situs berita yang memuat banyak nice semacam kompas.com kebutuhan slide show sangatlah penting kalau gak dibilang mutlak. Tapi, setelah mengetahui cara memasang slide show gaya kompas ini, anda bisa "bersaing" dengannya. Ayo kita coba. Tidak terlalu sulit, kok! Ada tabview-nya, lho!
Cara memasang Slide Show kompas.com ini saya peroleh dari www.pangkalanunik.com. Jaminan bahwa slide show akan berjalan baik, cukup tinggi. Benar, nih! Saya telah mencobanya, kok. Meskipun sample imagenya sudah saya ganti dari gambar di blog saya, nanti Anda bisa ganti dengan image pilihan Anda sendiri.

Jika cara memasang slide show gaya kompas.com anda ikuti dengan seksama, gak bakalan gagal, kok! Kalau gagal, ya ..biasa mungkin karena telah terjadi conflict dengan kode jquery/javascript sebelumnya. Jadi, terserah Anda, pertimbangkan mana yang lebih penting, yang kurang penting bisa dihapus.

Demo Slider Show

KATEGORI

JUDUL ARTIKEL 03
Theodore Roosevelt :Do what you can, with what you have, where you are.

1 2 3 4 5

Cara memasang Slide Show di template

1. Masuk ke Akun/dashboard Anda
2. Pilih Template, lalu Edit HTML.
3. Backup dulu untuk menjaga kemungkinan buruk.
4. Temukan kode seperti ini: ]]> </skin>
5. Copy kode text-area 01 di bawah ini. Klik "Copy-all" untuk memastikan tidak ada text yang tercecer. Kenudian, paste-kan sebelum kode ]]> </skin>

/*---start slider Kompas--*/ .img400{width:100%;height:250px;} /*--- ukuran frame slide---*/ .img400 img{ width:99%; height:250px; /*---ukuran image/gambar----*/ border:2px solid#000; z-index:80; } .cursor{cursor:pointer;} .h250{height:250px;} .min250{margin-top:-250px;} .des_4{background:#000;padding:3px 8px;filter:alpha(opacity=80);-moz-opacity:.80; opacity:.80;width:80px;color:#F60;margin-bottom:2px;z-index:990;} .des_1{background:#000;height:57px;padding:3px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75; z-index:990;} .des_1a{background:#000;height:50px;padding:10px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;margin-top:-60px;} .font16{font-size:13px;} .font16{font-size:14px;} .c_white{color:#FFF;} .c_white a{text-decoration:none;color:#FFF;} .c_white a:hover{text-decoration:underline;} .page_hl a{font:bold 12px arial;color:#FFF;text-decoration:none;padding:2px 5px;display:inline;background:#000000;filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;} .page_hl a:hover,.page_hl a.selected{ color:#fff;text-decoration:none;background:#000;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;} .page_hl span a{color:#FFF;text-decoration:none;background:#F30;filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;} .pd_5{padding:5px;} .clearit{clear:both;margin:0;padding:0;} .pb_10{padding-bottom:10px;} a:link {color: white;text-decoration:none;} a:visited {color: yellow; text-decoration:none;} a:hover {color: orange;text-decoration:underline;} /*---end CSS Slider--->

6. Silahkan copy kode di text area 02, di bawah ini, lantas letakkan di atas kode: </head>

<script type='text/javascript'> //<![CDATA[ //** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com) //** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements: // -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected // -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted // -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st) // -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container //** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically //** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0) ////NO NEED TO EDIT BELOW pangkalan-unik.blogspot.com//////////////////////// function ddtabcontent(tabinterfaceid){ this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container this.enabletabpersistence=true this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values) this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values) this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link") } ddtabcontent.getCookie=function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return "" } ddtabcontent.setCookie=function(name, value){ document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/) } ddtabcontent.prototype={ expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers this.cancelautorun() //stop auto cycling of tabs (if running) var tabref="" try{ if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr tabref=document.getElementById(tabid_or_position) else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr tabref=this.tabs[tabid_or_position] } catch(err){alert("Invalid Tab ID or position entered!")} if (tabref!="") //if a valid tab is found based on function parameter this.expandtab(tabref) //expand this tab }, cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') ) if (dir=="next"){ var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0 } else if (dir=="prev"){ var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1 } if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function this.cancelautorun() //stop auto cycling of tabs (if running) this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]]) }, setpersist:function(bool){ //PUBLIC function to toggle persistence feature this.enabletabpersistence=bool }, setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link") this.selectedClassTarget=objstr || "link" }, getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref }, urlparamselect:function(tabinterfaceid){ var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\d+)", "i")) //check for "?tabinterfaceid=2" in URL return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index }, expandtab:function(tabref){ var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/s+/, "")+"," : "" this.expandsubcontent(subcontentid) this.expandrevcontent(associatedrevids) for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected" this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : "" } if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition) this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array }, expandsubcontent:function(subcontentid){ for (var i=0; i<this.subcontentids.length; i++){ var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop) subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value } }, expandrevcontent:function(associatedrevids){ var allrevids=this.revcontentids for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none" } }, setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array) for (var i=0; i<this.hottabspositions.length; i++){ if (tabposition==this.hottabspositions[i]){ this.currentTabIndex=i break } } }, autorun:function(){ //function to auto cycle through and select tabs based on a set interval this.cycleit('next', true) }, cancelautorun:function(){ if (typeof this.autoruntimer!="undefined") clearInterval(this.autoruntimer) }, init:function(automodeperiod){ var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled) var selectedtab=-1 //Currently selected tab index (-1 meaning none) var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index this.automodeperiod=automodeperiod || 0 for (var i=0; i<this.tabs.length; i++){ this.tabs[i].tabposition=i //remember position of tab relative to its peers if (this.tabs[i].getAttribute("rel")){ var tabinstance=this this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value) this.tabs[i].onclick=function(){ tabinstance.expandtab(this) tabinstance.cancelautorun() //stop auto cycling of tabs (if running) return false } if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/s*,s*/)) } if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){ selectedtab=i //Selected tab index, if found } } } //END for loop if (selectedtab!=-1) //if a valid default selected tab index is found this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class) else //if no valid default selected index found this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){ this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod) } } //END int() function } //END Prototype assignment //]]> </script>

7. Jika sudah ... Save/Simpan.
8. Masuk ke: Tata Letak
9. Klik: tulisan Add New Widget
10. Pilih HTML/Javascript, kemudian letakkan kode berikut:

<!--dipasang di New Widget atau di atas main--> <div id="gal1" class="img400"> <div class="h250"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJffQ1LWhGyJEMOP6e90CrIWW7wcienMOtGBBRXtuGzuBzA7-ezhkXcsMT6CsqqLJr_AE1m9heHyHuicvHy9zTwQc2f7BPUk2s0ATgK55CWnfWm1xOe8iLxgfhLQiTYYH9-FMQDvZ7Uw/s1600/motor04.jpg" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"> <strong>KATEGORI</strong></div> <div class="des_1 font16 c_white"> <span class="font11 c_orange"><a href="URL ARTIKEL"><b>JUDUL ARTIKEL 01</b></a></span><br/>Elbert Hubbard: There is no failure except in no longer trying </div> </div> </div> <div id="gal2" style="display:none;" class="img400"> <div class="h250"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG0mku1BsaVpOTVjqsX27WJxgCnLZGi9G4Bd62NZtmnAXaIWzcxuOC0fj6k7P3Ye72-_RFR0GtwgtWgo6mII2Ty2JtLyW4gX2jIbS2DwWQXOvAsBuYUZmtvDGbP7RiMWfJ1MjhcnjXHfo/s1600/nature04.jpg" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"> <strong> KATEGORI </strong></div> <div class="des_1 font16 c_white"> <span class="font11 c_orange"><a href="URL ARTIKEL"><b>JUDUL ARTIKEL 02</b></a></span><br />IHarvey Mackay: Ideas without action are worthless. </div> </div> </div> <div id="gal3" style="display:none;" class="img400"> <div class="h250"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IQtU1SAMesbNKW_C5WkqoYmsRp5mocKarSzmLG_X_E56ZQazPnI0x4tN2ecRTQKqxHIAa80RfLDLIhRkoDr5-PI3pDF1sV8zmb6h763fuZh0vU5zh4v8PknzlXYgcUYxm-VH3x7RA6g/s1600/mobil04.jpg" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"> <strong> KATEGORI </strong></div> <div class="des_1 font16 c_white"> <span class="font11 c_orange"><a href="URL ARTIKEL"><b>JUDUL ARTIKEL 03</b></a></span><br />Theodore Roosevelt :Do what you can, with what you have, where you are. </div> </div> </div> <div id="gal4" style="display:none;" class="img400"> <div class="h250"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObTyv6MP4JVffhbPdE8ULs_6VYYA5uWCQH1GmjZ7Ty_zG3ntTs8c6B978CqbxWnmNr4Zqo3foDtPrQKxHzhX7NTrhbIJ4d0sYpB_sX74lgQ6wE0Tm6Dyl9QPAlkJUx4cEhHlJVW-J0vw/s1600/mobil03.jpg" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"> <strong> KATEGORI </strong></div> <div class="des_1 font16 c_white"> <span class="font11 c_orange"><a href="URL ARTIKEL"><b>JUDUL ARTIKEL 04</b></a></span><br />Paul Valery: The best way to make your dreams come true is to wake up. </div> </div> </div> <div id="gal5" style="display:none;" class="img400"> <div class="h250"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QZvlq3Qug-lrX0AgeuQRd4hFu9uaYSUKJ4cDcIGQPoiymnQPBVIHapC81Haz0rQWRm5V1GzlxBWGFjnxbL4iwcUh3U7xRaBUfy2_9ndaUn1ZDEN1YXh64IYvPKyZGKgQEQtQt88MFH0/s1600/girl03.jpg" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"> <strong> KATEGORI </strong></div> <div class="des_1 font16 c_white"> <span class="font11 c_orange"><a href="URL ARTIKEL"><b>JUDUL ARTIKEL 05</b></a></span><br />Publius Syrus: Any one can hold the helm when the sea is calm. </div> </div> </div> <div style="height:250px; margin-top:-250px;"> <div id="galtabs" class="page_hl pd_5"> <a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a> </div> </div> <div class="clearit"> </div> <div class="clearit pb_10"> </div> <script type="text/javascript"> var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(5000) </script>

Jika memasang Slider Show sudah benar, lakukan Ubah Suai

Dengan langkah-langkah ini, seharusnya Slider Anda langsung bekerja. Tinggal mengubah:
1. Alamat URL Posting Anda, a herf:"..." dsb
2. Alamat URL gambar/image, img src" http..." dsb
3. Jika perlu mengubah ukuran/dimensi slide, cukup dengan: width dan height. br/>
Untuk memberi kemudahan bagi Anda, dalam skrip slider, kusertakan keterangan pada bagian-bagian yang perlu diubah. Semoga bermanfaat. Success4U.