Menambahkan Slide Moving Boxes pada Blogger

Pada artikel 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. Bagi yang merasa penasaran, langsung bisa melihat contoh aplikasi slide Moving Boxes di Blogger atau tinggal langsung download kumpulan kode dan tutor nya.

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/AVvXsEiDojCY0a_4zMR0pZDOYU-S5easiAOBUaMMq_FeJOwgM16KVNG-kqzwYZd0W8MNTRdsy3_xKn2AQCUOVuhgci0kIIiY7X521U80rl_KA-BDPRy7jTcihgkTg92w14PA_IwLIVNJpcZLOvE/) repeat-y;
}
#right-shadow {
position: absolute;
top: 0;
right: 0;
width: 12px;
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4C1xSJ8wOi-MrPtXmuIF1n4QoAFNQ6GCDANe-OcWCBG9NLyjjx5iHRteIvWeQBcYxVr6HmGUowDKm-T843WFpfK1kQrHcMl8y5Ge1j-kHBl_5Dv1h_hoIfNMhTL53KHA98nZzCISSJ6w/) 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/AVvXsEiRTS6qPnrb2qvapfSf4Guq75fBO9a3No_VDNDzFz4vepTae6zaPIZAs22fUAIbRlof2RelTsLsEJ5X_iE9G4kBmB_z4aqwuRvT7qfTnNFykXoqPhB73ktJggwgIzuLZ44xGLsVQe4St9k/" alt="moving boxes" /> <div id="slider"> <img class="scrollButtons left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Q8WwG5GijwpovaAypvV7X4MtxhYitNNigWTOBPoO1bWfkVAiwBcspj2alrO95r-asYip-mFpIsKqRjV0vMNqKph5Nx3Fwop9EXhpM0zyEvxxps726-rYh7tsK6XLOWm6DOsP50O1u-E/" /> <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/AVvXsEjHQnzTXeFH4Kgz9Y40ANwnMWFt7KYrV11fAeYrt5rMSykJ8A4ut3ICDObKt5CZdj13m7ehfkEmX3Ycnl8R0dHYGrbzlhMqutkUI0AVF0X_HBXCA3ZdzM4V7PnoL28XlaDDoXxsfkwaYLr7/s1600/imusic.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_2"> <div class="inside"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidVXAvqUJ2B9EGtleyX-BEhOY13AZsmh5wwF2ZAF4-04CYm0UKmBVFS8evG8Zo0I2dmaLHMhsG1wlm82zVv0UOLixXaGsbFfFbjNhcezDUWqvtqiVedlBk96_M64T8iRDfFlxQ_amBGLtT/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/AVvXsEgP2DSgT1RYU5UXaXse9Ee5BhC-MZNMmDAEnbzokWGoLYOGcZj0T-GUqNhPtnsaOU924BGmkUeNHBr8_YqbOEMjO1XjxRg8mMtO3nvoy5cnniS7L2wFy8VDp5TSgq1Rm06qxxowF1AnJeYK/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/AVvXsEjbz9GFi2kH4UBPRdK4V0bCaM4h6oHmLhY6nYRd5tptjYhu6lMpx3fEoMdQWaLJVHNAYvvTuLoH6R3l5jbV7UkwehRNQsAv86a0F1HELq5GTxBltML9nnQDdcTRjt04tmQ2wpbEJqmdZ-70/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/AVvXsEhuV-I0SB0rddmZlekaHqcjWOtgrvRjcP3gLURdwukgjDzV_UBsJhyphenhyphenaofQ-elBb6xGvhAkqgLVopmgonjhn5Lznh4DnpdvA7PAaAtnVUUYMtYRd678MibH0DVRGroG72OpjxGLW3yX4Frm3/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/AVvXsEg65gwWpouWXZ-X3lsijbQS79Gumi0obwhEAvHwudGRCJRRMavp79WNMLbqHHVvgRnucC7BH9bhk4phPcx_vV3gq0ojnhpoy-CF-10_bl_0XDvKvi0gJi_fy5LNaKJscaxNDKSZyW4U8K4/" /></div></div>