Menambahkan Slide Moving Boxes pada Blogger

Posted by ikbal Tuesday, February 21, 2012 2 comments
Bagikan Artikel Ini :
 kali ini, akan dibahas tentang bagaimana cara membuat slide Moving Boxes pada Blogger. Slide Moving Boxes merupakan slidedengan menggunakan jquery dan css sebagai instrumen penyusunnya. Walaupun biasanya slide ini digunakan untuk web, kali ini saya coba mengembangkannya di Blogger.Berikut penjelasan lengkapnya :

Langkah 1
Pada bagian head, masukkan kode untuk memanggil jquery dan slider movingboxes yang akan dipakai.

<script charset='utf-8' src='http://nusacode.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
<script charset='utf-8' src='http://nusacode.googlecode.com/files/slider.js' type='text/javascript'/>
masukkan kode diatas diantara kode <head>...</head>

Langkah 2
Setelah itu kita akan memasukkan kode css yang diperlukan untuk tampilan slide MovingBoxes. Masukkan kode berikut sebelum </head>
<style type='text/css'>
{
margin: 0;
padding: 0;
}
body {
    font: 11px Helvetica, Arial, sans-serif;
}
#wrapper {
    width: 800px;
    margin: 25px auto;
}
#intro {
    padding-bottom: 10px;
}
#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
border: 10px solid #ccc;
}
.scroll {
overflow: hidden;
width: 800px;
    margin: 0 auto;
    position: relative;
}
.scrollContainer {
position: relative;
}
.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
height: 318px;
}
#left-shadow {
position: absolute;
top: 0;
left: 0;
width: 12px;
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvN-soHFHllY2DGIxMbiG4R7-9_ZkXnCaqb5vsy9SyriMyD-6m4mXRkCZr-GCRRTedrNK5xVNqPNo3tvp7cGMqH54ElCRYI5S-HIrtFB63SXSq26BT3JJgdBKSAiMMbjqNxWrklT_-y18/) repeat-y;
}
#right-shadow {
position: absolute;
top: 0;
right: 0;
width: 12px;
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEwM4mJKxLh_rUmCoyvwgLfhTDEZai_nqawRPS-EVTiPbusQRrDVdueCL04TNbWPIbgt-8jOWxGcyE9EpIgxoJftM2uzNZDSSJlKRbbPQujRL_SjL4WQJILHgBx_H6m98pzrb0tMnN1zg/) repeat-y;
}
.inside {
padding: 10px;
border: 1px solid #999;
}
.inside img {
display: block;
border: 1px solid #666;
margin: 0 0 10px 0;
width: 250px;
}
.inside h2 {
font-weight: normal;
color: #111;
font-size: 16px;
margin: 0 0 8px 0;
}
.inside p {
font-size: 11px;
color: #ccc;
}
a {
color: #999;
text-decoration: none;
border-bottom: 1px dotted #ccc;
}
a:hover {
border-bottom: 1px solid #999;
}
.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}
.scrollButtons.left {
    left: -45px;
}
.scrollButtons.right {
    right: -45px;
}
.hide {
    display: none;
}
</style>

Langkah 3
Setelah itu simpan template yang ada. Kemudian klik pada bagian Elemen Halaman, lalu klik Tambah Gadget.  Pilih HTML/JavaScript, kemudian masukkan kode berikut :
<div id="wrapper"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2yfHn0cop-z8UJUWxq3_5iKga5C5-7IFVGtAgTq-403vyl__FH1s44l9vMhZ_kHLVUFwPtt1qUceWTgRaumYXNF5fEDDav1iwBcuUgEl3lkimuYRvOy0VLIsIqdzaDqfLcCp4XAIwAm0/" alt="moving boxes" /> <div id="slider"> <img class="scrollButtons left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgziDPubarNxlG0t_ABws9eAfMYO30rRu8MbR8KsqdubHUKLQVZqIyRz7onTDdJMyF7ixAkFPeUzIwEeEsJdAFA3bKbb3oaRzz_i-iVhlG0zmZaiPz0qcTkdDxG4hfRuoPN1zdxmC84-j8/" /> <div style="overflow: hidden;" class="scroll"> <div class="scrollContainer"><div class="panel" id="panel_1"> <div class="inside"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3kT0XiDV-OaDsyQ6rd0igl6eafyJ3esoCeE_juDVioEqH1pz2OOraz-lVWfwmM6bLANO5UN0FJ7C0nwi9ebJhGjBMFwGR7F_AtXSFIegMJjFsxZ2y-bpnkjYNFDGa_-ZZkfSBqRT7AKw/s400/Untitled.png" alt="picture" /><h2>Membuat Judul Widget Berada Di Tenga</h2><p>A very shot exerpt goes here... <a href="#">more link</a></p></div></div><div class="panel" id="panel_2"> <div class="inside"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWC8HQC3RSOTYCVDjuhzTg72jigOsArl43RI9U315BvoYyR8hw6c-Ppkk-aj6qlQYexq5dIqL-6LvPLcEADuMs9nbnvArpsofZQZqKol8b1thdVhhlDJJ4SAVQKyKveIfAGHatbVEDr9hB/s1600/Garden+Of+Orchids.jpg" alt="picture" /><h2>News Heading</h2><p>A very shot exerpt goes here... <a href="#">more link</a></p></div></div> <div class="panel" id="panel_3"> <div class="inside"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLL8FNFquqkupy-VBTgfrAuDnLhKFXo-h-JcBIh5sFvGy6ScpF9K7zObL5maTgB-6DmST24_2qi9pEjJzSVEwjMdbH4sQTZW3DyF5fw6FpOHhg5hWsJNTkfvtMknoOlTCqHZR9j6S0jANX/s1600/Deep+Green.jpg" alt="picture" /><h2>News Heading</h2><p>A very shot exerpt goes here... <a href="#">more link</a></p></div></div>  <div class="panel" id="panel_4"> <div class="inside"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQI_-vvVdV4fJiidXbYj_ikHWr9-OlBQcR0X0T8YqBr3653aTEnhK9F425lA6tMmQWTpp7ys0zA9bO2d34wibTFO3qN81FyMQfGqgyncJeaOjzOOD-p6ng7OcYcSl34AB2CTP-vYiY7Ys2/s1600/Elegant+Red.jpg" alt="picture" /><h2>News Heading</h2><p>A very shot exerpt goes here... <a href="#">more link</a></p></div></div>  <div class="panel" id="panel_5"> <div class="inside"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisi2g-qwEmg3bj13vOF-gLfOSzAbbyGe0EBk_NGjgZBnmY4hwa3iQKs1t430cEu5FbiuXWuQJCIkqv3ePybaObmb5TYlQZmSWmBH445v4g_tAW9glafaAHOejUkRspfJcyecswJ3asn1VM/s1600/for+music.jpg" alt="picture" /><h2>News Heading</h2><p>A very shot exerpt goes here... <a href="#">more link</a></p></div></div>     </div><div id="left-shadow"></div> <div id="right-shadow"></div>    </div><img class="scrollButtons right" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQqtSW6EROtKZdaavPtCCqFqN3oeDTAmZ8wIBnFMvPUB-SObakckfRRWxdKfquJ7PEAyMrfafFUd5YpkYG8eDFYvAelkdNVEpRlgnwIJsooKfsqFEJPjtg-KHM-a3Bv3TX8EJfsjYCLI/" /></div></div>

Penjelasan :

Kode warna Hijau : Isi sesuai dengan link yang kalian kehendaki.
Kode Warna Merah : Judul dari bagian slide.
Kode Warna Orange : Alamat link gambar.


TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Menambahkan Slide Moving Boxes pada Blogger
Ditulis oleh ikbal
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://ilmu1994.blogspot.com/2012/02/menambahkan-slide-moving-boxes-pada.html. Terima kasih sudah singgah membaca artikel ini.

2 comments:

drooidtoday.COM said...

gan kalo teks di postingannya jadi kecil gimana ?
blog-android.blogspot.com

endro said...

mantap bos

Post a Comment

Jangan Lupa Kritik Dan Sarannya Yaaaa...........