Memasang Slideshow Foto Dengan Link Artikel di blog

Bagi sobat blogger yang gemar ngutak - atik template, kali ini saya sarankan untuk tidak melewatkan yang satu ini.

Setelah sebelumnya saya memposting bagaimana cara membuat daftar isi sitemap di blog, kali ini ane akan ngasih tahu pada sobat blogger Bagaimana Cara memasang Slideshow foto di blog dimana setiap foto tersebut mengandung link.

Maksud mengandung link yaitu ketika kita mengklik salah satu slideshow foto, kita otomatis akan ter arahkan ke posting lain di blog sobat bahkan di blog lain.


Tertarik untuk mencoba?? ikuti langkah - langkahnya :

1. Log in ke akun blog sobat.
2. Klik rancangan --> Edit HTML
3. Letakkan kode berikut di atas kode </head> ( Cari kode </head> menggunakan Ctrl + F ).

<script type='text/javascript'>

//** Featured Content Slider script- (c) Dynamic Drive DHTML code library:
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
this.turnpage(this.settingcaches[fcsid], pagenumber)

var page_request = false
if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
else if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
return false
var pageurl=setting.contentsource[1]
featuredcontentslider.ajaxpopulate(page_request, setting)
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()'GET', pageurl+bustcache, true)

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

var alldivs=document.getElementById("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
alldivs[i].style.display="none" //collapse all content DIVs to begin with

var sliderdiv=document.getElementById(
var pdiv=document.getElementById("paginate-"
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
pdivlinks[i].style.display="none" //hide this toc link
pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
featuredcontentslider.turnpage(setting, this.className)
return false
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){ //if auto rotate enabled
featuredcontentslider.cleartimer(setting, window["fcsautorun"])
sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
featuredcontentslider.cleartimer(setting, window["fcsautorun"])
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation

var RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
this.cleartimer(setting, window["fcsfade"])
if (setting.enablefade[0]==true){
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
if (this.enablepersist)
this.setCookie("fcspersist", turntopage)

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
else //IE 5.5"alpha(opacity="+value*100+")"
else if (typeof!="undefined") //Old Mozilla syntax
else if (typeof!="undefined") //Standard opacity syntax

if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass

window["fcsautorun"]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])

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 null

setCookie:function(name, value){
document.cookie = name+"="+value


var persistedpage=this.getCookie("fcspersist" || 1
var urlselectedpage=this.urlparamselect( //returns null or index from: mypage.htm?featuredcontentsliderid=index
this.settingcaches[]=setting //cache "setting" object
setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
setting.revealtype="on"+(setting.revealtype || "click")
setting.onChange=setting.onChange || function(){}
if (setting.contentsource[0]=="inline")
if (setting.contentsource[0]=="ajax")



border: 2px solid #181818;
background: #ffffff;
margin-left: 9px;
border-color: #181818;
margin-left: 9px;
margin-top: 4px;
#paginate-slider4 a img{
width: 80px;
height: 60px;
border: 2px solid #181818;
margin-top: 5px;
#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{
border: 2px solid #ffc04e;
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
width: 515px; /*width of featured content slider*/
height: 335px;
.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0; /*leave as is*/
top: 0; /*leave as is*/
padding: 5px;
background: white;
width: 515px; /*width of content DIVs within slider. Total width should equal slider&#39;s inner width */
height: 100%;
-moz-opacity: 1;
opacity: 1;
width: 515px; /*Width of pagination DIV. Total width should equal slider&#39;s outer width */
text-align: right;
background-color: #ffffff;
padding: 0px 5px;
.pagination a{
padding: 0 5px;
text-decoration: none;
color: #181818;
background: #ffffff;
.pagination a:hover, .pagination a.selected{
color: #181818;
background-color: #ffffff;

Kode berwarna biru adalah kode yang bisa di edit. Jadi, editlah sesuai kebutuhan template.

4. Klik simpan template.

5. Klik Elemen Laman --> Tambah Gadget --> HTML/Javascript
6. Masukkan kode berikut di dalam kotak.

<div style="float:left;">
<div id="slider4" class="sliderwrapper">
<div style="background: url('') center left no-repeat" class="contentdiv">
<div style="background: url('') center left no-repeat" class="contentdiv">
<div style="background: url('') center left no-repeat" class="contentdiv">
<div style="background: url('') center left no-repeat" class="contentdiv">
<div style="background: url(' URL GAMBAR SOBAT ') center left no-repeat" class="contentdiv">

<div style="background: url(' URL GAMBAR SOBAT ') center left no-repeat" class="contentdiv">


<div id="paginate-slider4">

<a href="" class="toc"><img alt="IMAGE-1" src=""/></a>

<a href="" class="toc"><img alt="IMAGE-2" src=""/></a>

<a href="" class="toc"><img alt="IMAGE-3" src=""/></a>

<a href="" class="toc"><img alt="IMAGE-4" src=""/></a>

<a href="URL POSTINGAN" class="toc"><img alt="IMAGE-5" src="URL GAMBAR THUMBNAIL"/></a>

<a href="URL POSTINGAN" class="toc"><img alt="IMAGE-5" src="URL GAMBAR THUMBNAIL"/></a>


<script type="text/javascript">
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)


Nb :
Ganti kode berwarna biru dengan URL postingan sobat.
Ganti kode berwarna ungu  ( URL GAMBAR THUMBNAIL ) dengan URL gambar sobat atau SAMAKAN saja dengan menggunakan url gambar yang di tandai dengan kode berwarna merah.)

7. Klik Save / Simpan.
8. SELESAI...!!!


Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

Christian angkouw Sobat sedang membaca artikel tentang Memasang Slideshow Foto Dengan Link Artikel di blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::


Maksudnya terarah ke posting lainnya itu maksudnya gimana ??


@Bisnis Hari Ini - Mohon maaf untuk kata yang sedikit keliru, maksudnya "menuju".. maaf ya!!

trima kasih atas koreksinya!!

nicex gan atas infonya...

terimakasih gan...


keren masbro tQ ya

Artikel yang keren gan ..


wahh sangat membantu sekali nich,trims yah atas tipsnya..

Keren mas broo....
Saya coba nanti :)


tanya gan, kalo masang 2 posisi foto slide biasa gak usah menuli ke link artikel gimana?? (dua bagian di bawah header dan sidebar) rencana yg bawah header akan saya tampilkan foto teman2, dan di sidebar akan saya tampilkan foto pribadi saya

harga notebook

ter nyata enk jga ea bisa pasang foto degan mudh?

thank's, artikelnya sobad

Your blog posts and articles are very interesting and make me become more scientific, keep your blog so I can visit again to see your blog posts and articles later .. thanks for the info

Dari demo nya saja sudah kelihatan bagus! Apalagi kalau dipasang ya.. :D

Kira-kira slideshow nya memperberat blog gak ya? :D

Makasih buat infonya

Mantap gan

Poskan Komentar

Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.