Cara Upload File Musik Ke Google Site

Cara Upload File Musik Di Google Site

Langkah pertama yang harus anda persiapkan lagu yang ingin anda upload ke google site. Berikut adalah langkah-langkah untuk mengupload lagu ke google site :

1. Silahkan kunjungi sites.google.com/?hl=id
2. Apabila anda sudah mempunyai akun gmail, login pada form yang tersedia.
   
   
3. Alihkan perhatiah ke sebelah kiri monitor, lalu klik tombol Create
   
   
4. Ada beberapa form yang harus diisi.
   
   • Name Your Site : beri nama apa saja sesuai keinginan, misal : laguku
   • Type the code shown : tulis kode yang muncul
   • Lanjutkan dengan klik tombol Create.
     
     
5. Setelah halaman tercipta, alihkan perhatian kesebelah kanan atas monitor, kemudian klik icon untuk membuat New Page.
   
   
6. Buatlah sebuah halaman baru, isi form yang diminta.
   
   • Name your page : isi dengan apa saja. Misal : kumpulan lagu
   • Select template to use : klik dulu menu nya, setelah opsinya keluar pilih File Cabinet
   • Lanjutkan dengan klik tombol Create
     
     
     
     
7. Klik tombol Add File. Silahkan pilih file lagu yang ingin diupload dari komputer anda.
   
   
8. Setelah file berhasil diupload, akan muncul link bertuliskan download. Klik kanan link tersebut lalu pilih Copy Link Location (bila anda menggunakan firefox).
   
   
9. Paste pada notepad atau apa saja agar alamat file tersebut bisa digunakan nantinya.

Contoh alamta lagu yang anda dapatkan :

https://sites.google.com/site/gallerylagu/kumpulan-lagu/02%20-%20Sherina%20-%20Jalan%20Cinta.mp3?attredirects=0&d=1

Silahkan hapus kode ?attredirects=0&d=1 dan natinnya link musik anda akan menjadi seperti ini :

https://sites.google.com/site/gallerylagu/kumpulan-lagu/02%20-%20Sherina%20-%20Jalan%20Cinta.mp3

Sekarang anda dapat menggunakan linknya ke widget yang akan anda gunakan untuk memasang lagu di blog, silahkan lanjutkan dengan cara memasang lagu di blog.

 Ok sekian artikel yang dapat dibagikan saat ini semoga bermanfaat untuk anda.

Widget Pemutar Musik Untuk Blog

Bermaksud ingin memutar lagu di blog dengan lagu pilihan sendiri tapi tidak ketemu artikel yang cocok akhirnya saya memutuskan mencoba membuat widget pemutar music sendiri dan jadilah widget pemutar music yang sederhana ini.

Ok berikut ini adalah penampakan widget ini :

Baiklah saya akan membagikan widget ini dalam dua versi yang tidak autoplay dan yang auto play. Ok dan berikut ini adalah widget musicnya dan cara memasangnya :

1. Widget Musik Tidak AutoPlay

1. Sediakan link music anda. Anda dapat mencoba menguploadnya di file host atau tempat upload file music lainya. atau silahkan upload file music anda ke Goolge site ( baca ; cara upload file music ke google site ) Intinya anda harus memiliki link music anda.
2. Login ke blogger.com
3. Pilih Tataletak, pilih gadget, pilih HTML/Javascript
4. Copy code script lagu sesuai keinginan anda yang saya sediakan dibawah ini ke kolom kosong tersebut.

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0VOLii1bDwxs_UOB4Zb5taYJwvveQUwuVayP-wQ0ESh1eywVUEzXFham7HqV8aqvTIq7a-_TAms_gUCOhTs7czyO2ETs3hsIogCCj1CqW0NEG5cNTuRKTl698eka1CrtYzwjOjiWnrJaS/s1600/Worship-Music-Worship-Background1.jpg");color:#fff;color:#000; padding:3px; width:100%; height:auto}
.seocipsxpmusic {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPozXHBUwLYQ1NwcTZamLkv0-uh5tAk9ra6tBivCypcBfKQFfiWPYDLqvoKz1rpw-t8_RFpOb0ctvAxyYYBHk0XoTjy7X4fCOhBSWPDXaMqWuGQtVTPYXetXnfEz0S1F9EUjToh1TtxXG/s130/loading....gif") no-repeat top right;
}
</style>
<div class='seocipsmusic'>
<div class='seocipsxpmusic'>
<div style='font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;'><img alt='small rss seocips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0LXTddnSd_U2V7no1wlhJsGJNuRfD9Wzsxo5oZfpxz7RXAxhynStXLdDIkuqpom9V7kl3L5uToreRAx0BpK0S2WQSYeG1uajdUX_Zft_IcPjX2qNRgTelEQo_4l8Nbz46RsBxq-CRrpm/s20/Audio-File-icon.png' title='Music'/> Music MP3</div>
<div style='font-weight:bold; padding:10px 10px;'>Ayo bro dengerin music ini !!!</div>
<audio controls>
<source src="https://sites.google.com/site/socipshotmusic/musicdjseocips/dj%20seocips.com-%20Hotmusic3.mp3" />
</source></audio>
<div style='padding-right:5px'>Widget <a href='http://www.seocips.com' target='_blank'> by seocips.com</a></div>
</div></div>

Kode berwarnah merah silahkan ganti sesuai keinginan dan Kode berwarna biru di atas ganti dengan link music milik sobat.

2. Widget Musik Otomatis ( Autoplay )

1. Sediakan link music anda. Anda dapat mencoba menguploadnya di file host atau tempat upload file music lainya. atau silahkan upload file music anda ke Goolge site ( baca ; cara upload file music ke google site ) Intinya anda harus memiliki link music anda.
2. Login ke blogger.com
3. Pilih Tataletak, pilih gadget, pilih HTML/Javascript
4. Copy code script lagu sesuai keinginan anda yang saya sediakan dibawah ini ke kolom kosong tersebut.

<style type="text/css">
.seocipsmusic {border:2px solid#4eabff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0VOLii1bDwxs_UOB4Zb5taYJwvveQUwuVayP-wQ0ESh1eywVUEzXFham7HqV8aqvTIq7a-_TAms_gUCOhTs7czyO2ETs3hsIogCCj1CqW0NEG5cNTuRKTl698eka1CrtYzwjOjiWnrJaS/s1600/Worship-Music-Worship-Background1.jpg");color:#fff;color:#000; padding:3px; width:100%; height:auto}
.seocipsxpmusic {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPozXHBUwLYQ1NwcTZamLkv0-uh5tAk9ra6tBivCypcBfKQFfiWPYDLqvoKz1rpw-t8_RFpOb0ctvAxyYYBHk0XoTjy7X4fCOhBSWPDXaMqWuGQtVTPYXetXnfEz0S1F9EUjToh1TtxXG/s130/loading....gif") no-repeat top right;
}
</style>
<div class='seocipsmusic'>
<div class='seocipsxpmusic'>
<div style='font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;'><img alt='small rss seocips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0LXTddnSd_U2V7no1wlhJsGJNuRfD9Wzsxo5oZfpxz7RXAxhynStXLdDIkuqpom9V7kl3L5uToreRAx0BpK0S2WQSYeG1uajdUX_Zft_IcPjX2qNRgTelEQo_4l8Nbz46RsBxq-CRrpm/s20/Audio-File-icon.png' title='Music'/> Music MP3</div>
<div style='font-weight:bold; padding:10px 10px;'>Ayo bro dengerin music ini !!!</div>
<audio controls autoplay>
<source src="https://sites.google.com/site/socipshotmusic/musicdjseocips/dj%20seocips.com-%20Hotmusic3.mp3" />
</source></audio>
<div style='padding-right:5px'>Widget <a href='http://www.seocips.com' target='_blank'> by seocips.com</a></div>
</div></div>

Kode berwarnah merah silahkan ganti sesuai keinginan dan Kode berwarna biru di atas ganti dengan link music milik sobat. OK sekian mengenai widget pemutar musik blog Blogger, semoga bermanfaat.

HOT! 3 Alasan Pembantu Minta Naik Gaji!!

Suatu hari, seorang wanita pembantu rumah tangga mendatangi majikan perempuannya.
Pembantu: "nyonya, saya mau minta naik gaji.."
Nyonya: "kenapa saya harus menaikkan gaji kamu?"
Pembantu: "ada 3 alasan nyonya.. Pertama saya membersihkan rumah lebih bersih daripada nyonya."
Nyonya: "siapa yg bilang?"
Pembantu: "Tuan yg bilang nyonya".
Nyonya: "oh..."
Pembantu: "kedua, saya memasak lebih enak daripada nyonya."
Nyonya: "siapa yg bilang?"
Pembantu: "Tuan yg bilang."
Nyonya: "oh..."
Pembantu: :ketiga, saya di ranjang lebih hebat daripada nyonya."
Nyonya: "Oh!!! Apa tuan juga yang bilang !!?!!"
Pembantu: "Bukan nyonya.., tapi bang Amat supir nyonya, dia bilang kalo nyonya kurang hebat di ranjang"
Nyonya: "Ssssstt!!! Kamu minta naik brp???

Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog

Cara Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog. Ok sobat berikut ini seocips akan membagikan lagi tutorial tentang membuat atau menambahkan animasi pada gambar di blog Blogger Blogspot. Memang pada saat ini lagi populer-populernya template-template blog yang menggunakan efek-efek seperti ini. Efek gambar seperti ini juga dapat anda pasang dibagian homepage blog sobat.

Biasanya animasi seperti ini dipakai oleh blog untuk menggambarkan dan memberikan deskripsi pada barang  atau produk yang di promosikan. Sebelumnya juga mengenai memberikan efek seperti ini pada gambar tapi sedikit berbeda, yaitu tentang membuat gambar dengan panel deskripsi efek slide.

LIVE DEMO :

Animasi Hover dan Deskripsi

Animasi Hover dan Deskripsi Pada Gambar diBlog
[SUSHI]
1. Lorem
2. Ipsum
3. Dolor: This year for the event, my group and I thought to do 7 different cover art for our books. So it would be the same artbook, but with 7 different book covers to choose from XD! I tried to go for a cute look with my cover

View

Sushi Comic Book

TUTORIAL

1. Di blogger anda.
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.jm-mainpage {
 padding: 30px 0;
 max-width: 520px;
 margin: 0 auto;
}
.jm-mainpage-box {
 font-size: 13px;
 line-height: 1.5em;
 text-align: center;
}
.jm-mainpage-box > h3 {
    text-transform: uppercase;
 font-family: 'Open Sans Condensed', sans-serif;
}
.jm-item {
 padding: 10px;
 display: inline-block;
 text-align: left;
}
.jm-item-wrapper {
 position: relative;
 padding: 7px;
 background: #E8D7B6;
}
.jm-item-image {
 position: relative;
 overflow: hidden;
}
.jm-item-image img {
 display: block;
}
.jm-item-title {
 position: absolute;
 left: -10px;
 bottom: 17px;
 background: #FF6B0E;
    color: #FFFFFF;
    font-size: 1.4em;
 line-height: 1.5em;
    font-weight: normal;
    padding: 7px 9px 6px;
    text-transform: uppercase;
 font-family: 'Oswald', sans-serif;
}
.jm-item-overlay {
 background: #000;
 opacity: 0;
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 -webkit-transition: opacity 0.5s ease-in 0s;
 -moz-transition: opacity 0.5s ease-in 0s;
 -o-transition: opacity 0.5s ease-in 0s;
 transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {
 opacity: 0.3;
}
.jm-item-button {
 height: 50px;
 width: 50px;
 text-align: center;
 position: absolute;
 left: 50%;
 margin-left: -25px;
}
.jm-item-button a {
 border-radius: 50%;
 -webkit-border-radius: 50%;
 background: #FF6B0E;
    text-transform: uppercase;
 font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.2em;
 line-height: 50px;
 -webkit-transition: all 0.2s ease-in 0s;
 -moz-transition: all 0.2s ease-in 0s;
 -o-transition: all 0.2s ease-in 0s;
 transition: all 0.2s ease-in 0s;
 text-decoration: none !important;
 display: block;
}
.jm-item-button a:hover {
 background: #3b3b3b;
}
/** first **/
.first .jm-item-button {
 -webkit-transition: all 0.5s ease-in 0.5s;
 -moz-transition: all 0.5s ease-in 0.5s;
 -o-transition: all 0.5s ease-in 0.5s;
 transition: all 0.5s ease-in 0.5s;
 top: -50px;
}
.first .jm-item-wrapper:hover .jm-item-button {
 top: 20%;
}
/** second **/
.second {
 overflow: hidden;
}
.second .jm-item-wrapper .jm-item-title {
 -webkit-transition: all 0.2s ease-in 0s;
 -moz-transition: all 0.2s ease-in 0s;
 -o-transition: all 0.2s ease-in 0s;
 transition: all 0.2s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-title {
 left: -100%;
}
.second .jm-item-description {
 position: absolute;
 width: 100%;
 height: 100%;
 padding: 10px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 background: rgba(0,0,0,0.4);
 color: #fff;
 top: 100%;
 -webkit-transition: all 0.5s ease-in 0s;
 -moz-transition: all 0.5s ease-in 0s;
 -o-transition: all 0.5s ease-in 0s;
 transition: all 0.5s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-description {
 top: 0;
}

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<div class="jm-mainpage-box span6">
<h5>
DEMO 2</h5>
<div class="jm-item second">
<div class="jm-item-wrapper">
<div class="jm-item-image">
<img alt="Cofee Capucino" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcAQLsvoeqqLx-gWL8s7U8Yxq6-NnmQTbQN-ulKBh-P3SOGRHvh0_o_be9miuqt47tq4IliaiIa8L7Jwrbi9KDrtdsELgCZqGI7CFHS0oKbz0Q5O0y4VnoCm6VgTcSX_kZIewQtkaKfW5D/s1600/seocips22.jpg" />
   <br />
<div class="jm-item-description">
Lorem ipsum dolor sit amet.<br />
1. Lorem<br />
2. Ipsum<br />
3. Dolor
       <br />
<div class="jm-item-button">
<a href="https://www.blogger.com/blogger.g?blogID=1917338828994767629#">View</a></div>
</div>
</div>
<div class="jm-item-title">
Cofee Capucino</div>
</div>
</div>
</div>
</div>

Baiamana sob? apakah sobat berhasil Membuat Animasi Hover dan Deskripsi Pada Gambar diBlog sobat? nah sekian tutorial blog untuk saat ini, jangan lupa lihat tutorial blog terbaru lainnya dari seocips dan semoga bermanfaat.

Jquery Image Crousel Slider For Blogger

 Ok sobat postingan berikut ini mengenai Gambar dengan efek slider crousel di blog. Untuk sobat yang ingin mempercantik tampilan blog, atau membuat animasi slider di gambar-gambar yang ada di postingan sobat maka sobat dapat mencoba menggunakan Crousel Image slider di bawah ini.

Berbicara mengenai slider, sebelumnya juga telah dibagikan mengenai membuat image slider V6 atau jika sobat tertarik ingin memasang slider otomatis di sidebar blog, sobat dapat membaca cara memasang slider di sidebar blog.

Untuk Demo slider yang ini sobat dapat melihatnya di akhir postingan ini. Ok sob berikut ini adalah kode yang dapat sobat pasang langsung ke dalam tempate atau menempatkannya ke widget misalnya diatas postingan.

<style type="text/css">
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script src="https://seocipscrouselslide.googlecode.com/svn/seocipscrslslide" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 1,
    maxItems: 4
  });
});
});
</script>
<br />
<div class="flexslider">
<ul class="slides">
<li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzA46ZszHj3k7OwpmtES7oz-8nMQxlvO4fI0YUVO_VRBimHoG1AH2GOYAKm6RN3-s-kjaAF4q7mQQnbMLi2DiZ58c79U4s2TEBpPBxqFuPOe9XzZcK-MGNCXWzbJORuw6dlq79jZJRXMU/s1600/1b.jpg" />
    </li>
<li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKkGe4VBYvEoLckwu_skHHQDNbOd7k6g5ilWNeKvuZ17H-LAiY4B4CeZ7kiElKpC-ZtwVgYR2fzYi08aN8AocHQezqRMnBxnLMjfvTH4aEBmZMuXmJ7sm0D3xovnWOsjhnsrUZRGBzFyE/s1600/1a.png" />
    </li>
<li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKrEGU9eo_9n-Le-L-fv-pV79-DWT7qrVQFCxqCN3ZGdhnkcFJorM9U40DDP_72S9fc4cN_HThG9rvgngI_o-P-8iLBBUivC8gTDWApn2ibKK4y4Q6YPSuMS_1lAgIct0wJWEmFXZsdiI/s1600/1d.jpg" />
    </li>
<li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6D7i4dH0E-nrJq0VZlIyYr3zU-g8HbOwIuI39UYO3xJmtsKrLv_4-3HStoWCVTslJtDq4OY0jLKSJx5bFENRB8zwfzskxNAOwNfYrA89ZAiARCEJlffQkSyxE__FZsxGeKN5EQ3Rz8s/s1600/1e.jpg" />
    </li>
<li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78e7jZrCSVvhkCOp2yMvMwJtv13lUHrpfxAUm_iMe5RGr2cDvEKl1WF_9kKLeHA2mt_c7QagJ-il6JJO8ZlgjxirhLWoxLyPby3xqs38hfkTU_YkrVNQJ3j-57fcWBq_mAOOgrHpW_zw/s1600/1f.jpg" />
    </li>
<li>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZai0_vce52G82PRZKTIsFZN-3UD58J4lul4d75YQent9evexAUgnKKcbpVMH6wvDxcTWmwPlEd69zmlQpiwDWsmfyxU5wRvDXFUbroiawYjHxoupx84MOLT4bhNNTqd5e1pPOKrXzHSU/s1600/1g.jpg" />
    </li>
</ul>
</div>

Kode berwarna biru dan yang hampirsama dengan kode itu silahkan ganti dengan gambar milik sobat. Di demonya saya hanya memasang 6 gambar saja jika sobat ingin menambah gamabrnya maka lihat kode warna merah di atas dan tambahkan kode seperti itu dibawahnya, untuk berapa banyak gambar yang ingin sobat pasang itu terserah sobat.