Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Selasa, 19 Februari 2013
Cara Mudah Membuat Slide Gambar di Blog Dengan JQuery
Kadang kita ingin membuat gambar tampilan slide pada halaman depan blog kita, tapi mungkin sulit untuk membuatnya, dan udah coba banayk trick, tetapi tidak berhasil. Kamu bisa gunakan tutorial ini, yang sudah saya coba, di blog Desaign ku yang lain.Cara Mudah Membuat Slide Gambar di Blog Dengan JQuery Silahkan Sahabat Coba dibawah header ada slide show gambar dengan animasi transisi yang berubah-ubah, dan hasilnya sangat baik.
Ikuti Langkah - langkah berikut:
1. Silahkan login dulu ke halaman admin blog anda melalui http://blogger.com/home
2. Langsung tuju ke halaman layout atau tata letak, dan klik edit html -template
3. Beri centang pada expand Template widget4. Letakkan kode berikut di atas kode ]]></b: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-size: 0px; padding: 10px; float: left; } .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: 563px; padding: 10px; background-color: #000000; color: #FFFFFF; } .cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
5. Letakkan kode dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://vittoproject.googlecode.com/files/coin-slider.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $('#coin-slider').coinslider({ width: 563, high:300, navigation: true, delay: 5000 }); }); </script>
Width: 563 : high : 300 silahkan anda sesuaikan dengan lebar tampilan gambar yang anda inginkan, usahakan gambar sudah di atur ke ukuran yang sesuai, biar tampak manis dilihat.
6. Simpan, kemudian Pergi ke tata letak
7. Tambahkan gadget html/java script kemudian copas kode berikut:
<div id='coin-slider'>
<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>
<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>
<a href="imgN_url" target="_blank">
<img src="link letak gambar" />
<span>
Deskripsi gambar......
</span>
</a>
</div>
Silahkan ganti Yang saya beri warna kuning dengan selera dan kebutuhan blog anda,Link adalah letak gambar dengan lokasi penyimpanan gambar anda.
Jika semuanya benar, kamu akan mendapatkan Slide gambar yang keren di blog anda.
Selamat mencoba...!!!Semoga Artikel ini bermanfaat............
Tag :// Tutorial Blog
Senin, 11 Februari 2013
Kali
ini aku akan membahas tentang Cara Membuat Effect Sliding Door With CS3. Tapi
sebelum mulai tau kan apa arti Sliding Door ? Pasti tau kan dan contohnya kayak
gimana ? contoh kayak kita sedang membuka gorden dan menutup gorden kembali !
Nah tau kan sekarang?
Tapi menurut kalian pasti keren kalo
gambar atau semacamnya dengan effect seperti itu?
Nah gimana caranya ?
Ini Dia
1. Pertama Login Blogger
2. Lalu pilih Rancangan,pilih EDIT
HTML, Lalu Cari kode ]]></b:skin>
3.
Lalu taruh kode CSS ini diatasnya ..
.covermbs {
position: relative;
width: 200px;
height: 200px;
margin: 20px auto;
background-color: #eee;
z-index: 1;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.covermbs p {color:black;
text-align:center;
margin: 0;
}
.left_gate {
position: absolute;
background: #41B5F0;
bottom: 0; right: 50%; left: 0; top: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.covermbs:hover .left_gate {
right: 100%; left: -50%;
}
.right_gate {
position:absolute;
background:#0C5CA3;
bottom: 0;
left: 50%;
right:0;top:0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.covermbs:hover .right_gate {
left: 100%; right: -50%;
}
.slide_in {
overflow:hidden;
}
.slide_in .left_gate {
background: #0C5CA3;
}
.slide_in .right_gate {
background: #41B5F0;
}
4. Ganti kode yang berwarna Merah dengan Ukuran anda inginkan .
5. Lalu pasang Kode ini di HTML anda , Pilih Add a gadget dan taruh kode HTML dibawah ini kedalamnya.
<div class="covermbs">
<div class="left_gate"></div>
<div class="right_gate"></div>
<p>Isi Content ato Teks Anda Disini</p>
</div>
<div class="covermbs slide_in">
<div class="left_gate"></div>
<div class="right_gate"></div>
<p>Isi Content ato Teks Anda Disini</p>
</div>
Tag :// Tutorial Blog
