Slideshow Otomatis Blogger dengan Imageflow 1.3.0

Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam Imageflow, karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri.

Mengedit HTML

 Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

@charset "utf-8"; /** * Auto Content 4 Imageflow 1.3.0 by Taufik Nurrohman * Visit: http://hompimpaalaihumgambreng.blogspot.com */ @media screen, projection { .imageflow { width:100%; overflow:hidden; position:relative; text-align:left; visibility:hidden; margin:0px auto; font:normal 12px Verdana,Arial,Sans-Serif; } .imageflow img { border:none; padding:0px 0px; margin:0px 0px; background:transparent; position:absolute; top:0px; visibility:hidden; -ms-interpolation-mode:bicubic; /* Enables bicubic image resampling for the IE7 */ -webkit-box-shadow:0px 1px 10px black; -moz-box-shadow:0px 1px 10px black; box-shadow:0px 1px 10px black; } .imageflow p { margin:0 auto; text-align:center; } .imageflow .loading { border:1px solid white; height:15px; left:50%; margin-left:-106px; padding:5px; position:relative; visibility:visible; width:200px; } .imageflow .loading_bar { background:#fff; height:15px; visibility:visible; width:1%; } .imageflow .navigation { z-index:10000; } .imageflow .caption { font-weight:bold; position:relative; text-align:center; z-index:10001; text-shadow:0px 1px 3px black; } .imageflow .caption a { text-decoration:none; color:white; } .imageflow .caption a:hover {text-decoration:underline;color:#8CD0D3;} .imageflow .scrollbar { border-bottom:1px solid #b3b3b3; position:relative; visibility:hidden; z-index:10002; height:1px; } .imageflow .slider { background:url('http://1.bp.blogspot.com/-4lzSM34zaOA/T01-W0Mb1kI/AAAAAAAACQU/5w3WsezYvRY/s1600/slider.png') no-repeat; height:14px; margin:-6px 0 0 -7px; position:absolute; width:14px; z-index:10003; } .imageflow .slideshow { cursor:pointer; height:14px; margin:20px 0 0 20px; position:absolute; width:14px; z-index:10003; } .imageflow .slideshow.pause { background:url('http://2.bp.blogspot.com/-yt4eRgtDd6I/T01wsFn-e4I/AAAAAAAACPM/pdr8ljnrM9o/s1600/button_pause.png') no-repeat center; } .imageflow .slideshow.play { background:url('http://3.bp.blogspot.com/-H5F2nAmaVBA/T01wx0hM8oI/AAAAAAAACPc/OpMSLH-WaO8/s1600/button_play.png') no-repeat center; } .imageflow .images { overflow:hidden; white-space:nowrap; } .imageflow .button { cursor:pointer; height:17px; position:relative; width:17px; } .imageflow .previous { background: url('http://4.bp.blogspot.com/-Eq4y210bsdE/T01wpORgybI/AAAAAAAACPE/AwOmlS5OrpU/s1600/button_left.png') top left no-repeat; float:left; margin: -7px 0 0 -30px; } .imageflow .next { background: url('http://2.bp.blogspot.com/-VwvDUzRpSOo/T01wuzhWf-I/AAAAAAAACPU/K4NQIxxIm7U/s1600/button_right.png') top left no-repeat; float:right; margin:-7px -30px 0 30px; } }

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://reader-download.googlecode.com/svn/trunk/imageflow-custom.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ var loadingText = "Memuat gambar", animationSpeed = 50, aspectRatio = 1.964, circular = true, imageCursor = 'default', opacity = false, opacityArray = [10,8,5,3], imagesHeight = 0.77, imageScaling = true, percentLandscape = 200, percentOther = 100, preloadImages = true, slider = true, sliderCursor = 'e-resize', sliderWidth = 14, scrollbarP = 0.7, onClick = function() {}, startID = 1, slideshow = true, slideshowSpeed = 1500, slideshowAutoplay = false, startAnimation = false, xStep = 200; //]]> </script>

Klik Simpan Template.

Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript"> showPostDate_g = false; showComm_g = false; slideOpenNewTab = true; idMode = true; slidebyLabels = false; var slideLabelName = "Mengenai", pBlank = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png", text = "Komentar", numposts_g = 10, home_page = "http://ribuan-cara.blogspot.com/"; </script> <script src="http://reader-download.googlecode.com/svn/trunk/autoContent4Imageflow.1.3.js" type="text/javascript"></script>

Ganti URL http://ribuan-cara.blogspot.com/ dengan alamat blog Anda lalu simpan.