-[Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah Salam sukses sobat blogger... Bagaimana neh kabarnya? Ingin ...
-[Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah
Salam sukses sobat blogger...
Bagaimana neh kabarnya?
Ingin menambahkan slide show pada blog nya?? Tetapi bingung caranya?
Kebetulan pada kesempatan kali ini, ana ingin berbagi mengenai [Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah, Fitur terbaru dari SLIDE show ini tidak hanya dapat menampilkan gambar tetapi juga memberikan efek Carousel atau berputar. Nah... dengan itu dapat menarik pengunjung untuk membaca artikel ataupun berita terbaru yang dipostingkan.
Tidak hanya itu juga sobat, slide show terbaru ini juga dilengkapi dengan description atau cuplikan informasi singkat untuk menerangkan postingan atau artikel yang sobat posting. Sehingga slide show terbaru ini bagus dipasang di web atau blog kita untuk menampilkan artikel terbaru sebagai sarana update web atau blog kita.
Tertarik untuk membuatnya? ikuti langkah-langkah [Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah :
Catatan :
- Lebih baik back-up terlebih dahulu Template sobat, Tidak tahu cara mem-backup template? Lihat [Tutorial] Cara mengganti dan menyimpan TEMPLATE pada tampilan baru Blogger
-Jangan lupa untuk mencentang Expand Template Widget
- Lebih baik back-up terlebih dahulu Template sobat, Tidak tahu cara mem-backup template? Lihat [Tutorial] Cara mengganti dan menyimpan TEMPLATE pada tampilan baru Blogger
-Jangan lupa untuk mencentang Expand Template Widget
4. Cari kode </head> pada template sobat.
(Untuk memudah pencarian, gunakan CTRL+F pada keyboard)
5. Setelah menemukan kode </head>, kemudian Copy kode dibawah ini dan pastekan kode tersebut diatas atau sebelum kode </head> :
<script
src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery-1.7.min.js"></script>
<script
src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.js"></script>
<script
src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.min.js"></script>
<script
type="text/javascript">
$(document).ready(function() {
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma
after last option)
// option: value,
// option: value
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
</script>
<style type='text/css'>
/********************
* FEATURE CAROUSEL *
********************/
#carousel-container {
position:relative;
padding:7px;
background-color:#CCC;
}
#carousel {
border:2px solid #fff;
height:300px;
background-color:#CCC;
position:relative;
font-size:12px;
font-family: Arial;
}
#carousel .carousel-image {
height:230px;
width:400px;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
border:0;
display:block;
}
#carousel .carousel-feature {
position:absolute;
top:-1000px;
left:-1000px;
border:2px solid #5d5d5d;
cursor:pointer;
}
#carousel .carousel-feature .carousel-caption {
position:absolute;
bottom:0;
width:100%;
background-color:#000;
}
#carousel .carousel-feature .carousel-caption p {
margin:0;
padding:5px;
font-weight:bold;
font-size:12px;
color:white;
}
#carousel .tracker-summation-container {
position:absolute;
color:white;
right:50px;
top:212px;
padding:3px;
margin:3px;
background-color:#000;
}
#carousel .tracker-individual-container {
position:absolute;
color:white;
right:95px;
top:218px;
padding:0;
margin:0;
}
#carousel .tracker-individual-container li {
list-style:none;
}
#carousel .tracker-individual-container .tracker-individual-blip {
margin:0 3px;
padding:0 3px;
color:#000;
text-align:center;
border:1px solid #5d5d5d;
background-color:#DDD;
}
#carousel .tracker-individual-container
.tracker-individual-blip-selected {
color:#FFC600;
font-weight:bold;
border:1px solid #fff;
background-color:#000;
}
#carousel-left {
position:absolute;
bottom:33px;
left:200px;
cursor:pointer;
}
#carousel-right {
position:absolute;
bottom:33px;
right:200px;
cursor:pointer;
}
</style>
6.. Setelah itu SIMPAN TEMPLATE,(Untuk memudah pencarian, gunakan CTRL+F pada keyboard)
5. Setelah menemukan kode </head>, kemudian Copy kode dibawah ini dan pastekan kode tersebut diatas atau sebelum kode </head> :
<script
src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery-1.7.min.js"></script>
<script
src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.js"></script>
<script
src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.min.js"></script>
<script
type="text/javascript">
$(document).ready(function() {
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma
after last option)
// option: value,
// option: value
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
</script>
<style type='text/css'>
/********************
* FEATURE CAROUSEL *
********************/
#carousel-container {
position:relative;
padding:7px;
background-color:#CCC;
}
#carousel {
border:2px solid #fff;
height:300px;
background-color:#CCC;
position:relative;
font-size:12px;
font-family: Arial;
}
#carousel .carousel-image {
height:230px;
width:400px;
box-shadow: 6px 6px 10px #818181;
-webkit-box-shadow: 6px 6px 10px #818181;
-moz-box-shadow: 6px 6px 10px #818181;
border:0;
display:block;
}
#carousel .carousel-feature {
position:absolute;
top:-1000px;
left:-1000px;
border:2px solid #5d5d5d;
cursor:pointer;
}
#carousel .carousel-feature .carousel-caption {
position:absolute;
bottom:0;
width:100%;
background-color:#000;
}
#carousel .carousel-feature .carousel-caption p {
margin:0;
padding:5px;
font-weight:bold;
font-size:12px;
color:white;
}
#carousel .tracker-summation-container {
position:absolute;
color:white;
right:50px;
top:212px;
padding:3px;
margin:3px;
background-color:#000;
}
#carousel .tracker-individual-container {
position:absolute;
color:white;
right:95px;
top:218px;
padding:0;
margin:0;
}
#carousel .tracker-individual-container li {
list-style:none;
}
#carousel .tracker-individual-container .tracker-individual-blip {
margin:0 3px;
padding:0 3px;
color:#000;
text-align:center;
border:1px solid #5d5d5d;
background-color:#DDD;
}
#carousel .tracker-individual-container
.tracker-individual-blip-selected {
color:#FFC600;
font-weight:bold;
border:1px solid #fff;
background-color:#000;
}
#carousel-left {
position:absolute;
bottom:33px;
left:200px;
cursor:pointer;
}
#carousel-right {
position:absolute;
bottom:33px;
right:200px;
cursor:pointer;
}
</style>
Langkah selanjutnya adalah menampilkan Slide show ini pada halaman depan dengan cara :
8. Pada jendela baru, sobat pilih gadget
HTML/JavaScript
9. Copy dan pastekan kode dibawah ini pada gadget
tersebut :
<div class="carousel-feature">
<a href=" ULR ARTIKEL ">
<img class="carousel-image" alt="Image Caption" src=" ULR GAMBAR "></a>
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
</p>
</div>
</div>
<div class="carousel-feature">
<a href=" ULR ARTIKEL ">
<img class="carousel-image" alt="Image Caption" src=" ULR GAMBAR "></a>
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
</p>
</div>
</div>
<div class="carousel-feature">
<a href=" ULR ARTIKEL ">
<img class="carousel-image" alt="Image Caption" src=" ULR GAMBAR "></a>
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
</p>
</div>
</div>
<div id="carousel-left"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div>
</div>
<div id="carousel-container">
<div id="carousel">
<div class="carousel-feature">
<a href=" ULR ARTIKEL ">
<div id="carousel">
<div class="carousel-feature">
<a href=" ULR ARTIKEL ">
<img class="carousel-image" alt="Image Caption" src=" ULR GAMBAR "></a>
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
</p>
</div>
</div>
</div>
<div class="carousel-feature">
<a href="ULR ARTIKEL">
<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src=" ULR GAMBAR "></a>
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
</p>
</div>
</div>
</div>
</div>
<a href=" ULR ARTIKEL ">
<img class="carousel-image" alt="Image Caption" src=" ULR GAMBAR "></a>
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
</p>
</div>
</div>
<a href=" ULR ARTIKEL ">
<img class="carousel-image" alt="Image Caption" src=" ULR GAMBAR "></a>
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
</p>
</div>
</div>
<a href=" ULR ARTIKEL ">
<img class="carousel-image" alt="Image Caption" src=" ULR GAMBAR "></a>
<div class="carousel-caption">
<p> DESCRIPTION GAMBAR
</p>
</div>
</div>
<div id="carousel-left"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div>
</div>
Catatan :
-ULR ARTIKEL : Ganti dengan URL artikel milik sobat.
-ULR GAMBAR : Ganti dengan ULR gambar artikel milik sobat.
- DESCRIPTION GAMBAR : Ganti dengan deskripsi artikel milik sobat.
-ULR GAMBAR : Ganti dengan ULR gambar artikel milik sobat.
- DESCRIPTION GAMBAR : Ganti dengan deskripsi artikel milik sobat.
Demikian [Tutorial] Cara membuat SLIDE show terbaru pada blog dengan mudah,
Selamat mencoba dan Semoga bermanfaat....
Special Thanks : http://www.carabuatwebgratis.com/
Jika terdapat kesalahan dalam postingan ini, mohon diberitahu kepada kami dengan berkomentar pada blog ini.
Salam sukses...
COMMENTS