Cara Membuat Slide Show Blogspot 02

Edisi Revisi

Slide Show yang ini lebih menarik. Sekilas memang mirip dengan Slide Show sebelumnya. Skrip yang digunakan tidak terlalu banyak sehingga tak terlalu mempengaruhi loading. Instalasinya juga cukup sederhana. Yang berbeda adalah efek transisinya. Yang ini menggunakan gaya random square. Jadi, pergantian gambarnya berkotak-kotak, gitu!

Demo Slider Show

TITLE POST
Bayangan selalu lebih besar dari aslinya, apapun itu! Gagal maupun sukses. TITLE POST
I've always taken risks, and never worried what the world might really think of me. Cher TITLE POST
Tak seorang pun dapat membuat Anda sakit hati, kecuali Anda menghendakinya. TITLE POST
Apapun yang Anda pikirkan, gagal atau sukses adalah benar.

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. Kemudian, paste-kan sebelum kode ]]> </skin>

/* Coin Slider jQuery plugin CSS styles http://workshop.rs/projects/coin-slider */ .coin-slider {overflow: hidden; zoom: 1; position: relative; } .coin-slider a{text-decoration: none; outline: none; border: none; } .cs-buttons {font: 10pt Arial,Tahoma;padding: 10px; float: left;}/*--untuk mengubah font--*/ .cs-buttons a {margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px;} .cs-active {background-color: #B8C4CF; color: #FFFFFF; } .cs-title {width: 100%; padding: 10px; background-color: #000000; color: #FFFFFF; } /*----End Coin CSS--*/

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

<!--Coin Slider Scirpt--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></script> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/></script> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider') .coinslider({ width: 570, height: 300, navigation: false, delay: 5000 }); }); </script> <!--End Coin Slider Scirpt-->

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

<!--Coin Slider widget--> <div id='coin-slider'> <a href="ALAMAT POSTING" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh588_uYK4B8j6zSD03spmpLQ1ya35fyq3B6FuaK2FQwnXAkBozqPIVUOlFIn5RAGO6d0MLS1ppgmM_bl_rp8gYBl02JjsChUtzBBu3TqX08_aPbcVrLJ4PuTlFh1vfKhMyQKKD2P9SArQ/s1600/nature01.jpg" /> <span> <b>TITLE POST</b><br/> Bayangan selalu lebih besar dari aslinya, apapun itu! Gagal maupun sukses. </span> </a> <a href="ALAMAT POSTING" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUPW_Zjzq5KjDcWu7xhiq5M38kZdDiG6sD_g5hOyMq69JerMJD9I7J3syeL5sywaNCve6LJu6GpIZEkgcfFPRa0J7YTEiMEZO4lLgB3-Mvr-90pTAQDEfnS-ZSEwsIUfR7NemE2nHuAs/s1600/nature02.jpg" /> <span><b>TITLE POST</b><br/> I've always taken risks, and never worried what the world might really think of me. Cher </span> </a> <a href="ALAMAT POSTING" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgH2Jw9I1s9wwv-pGT5LuGVDwUZnhuXk00-xQwv1TUAOchE09NfPMCJolWZyyOCPYfS1L0AU2YLiDUepT4Pbt55U6_hJkFttgvjz5R_HIGGoR7a12XmY9qI80YCpjpoVpsX1pSndXKhA/s1600/nature03.jpg" /> <span><b>TITLE POST</b><br/> Tak seorang pun dapat membuat Anda sakit hati, kecuali Anda menghendakinya. </span> </a> <a href="ALAMAT POSTING" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjywz7LWxVppIoeAu3y2fzr7Jkifu40BbFKWNXoSvS2sMzID-NyHeBs-yzxJ5jORdVqehhe1XP650cFxfewWCHFHCsTB3MPrqIcXqR5top2oN2xMuGvgDYSHPn5JZ8Ujw7SKz47VygSC5M/s1600/nature04.jpg" /> <span><b>TITLE POST</b><br/> Apapun yang Anda pikirkan, gagal atau sukses adalah benar. </span> </a> </div><!--End Coin Slider-->

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, seperti contoh.
2. Alamat URL gambar/image, img src" http..." dsb, seperti contoh.
3. Slider ini auto-size. Mungkin, hanya perlu mengubah font.

Semoga dengan edisi revisi ini Anda makin banyak memperoleh kemudahan. Succes4U.

Artikel Terkait: