BLOG-OONG: 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:

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:

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

Content

Computers

Civil

Slideshow Otomatis Blogger dengan Imageflow 1.3.0

Tahap 2: Meletakkan Slideshow

Comments

Post a Comment

Speaker