Rabu, 29 Mei 2013
Selasa, 28 Mei 2013
cara membuat slide show foto
Cara Mudah Membuat Slide Show Foto di Blog
Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.
Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.
Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:
<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 100%;
height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
margin:0 auto;
}
#content-slider img {
display: block;
width: 100%;
height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>
5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai.
cara membuat tampilan menu
Cara Membuat Tampilan Menu Scroll Pada Arsip Blog
Cara Membuat Tampilan Menu Scroll Pada Arsip Blog - Arsip blog merupakan
salah satu menu penting yang harus anda pasang di blog, karena dengan
adanya arsip blog tersebut akan memudahkan pengunjung menemukan semua
artikel yang ada di blog tersebut.
Tapi meskipun begitu banyak para blogger yag enggan untuk memasangnya dikarenakan ekan memakan banyak tempat apalagi jika jumlah artikelnya sudah banyak tentuk membutuhkan tempat yang luas.
Nah, kali ini ane dapat solusi untuk masalah tersebut yaitu dengan cara membuat tampilan menu scroll. Cara ini ane dapat setelah dari search di mbah google dan setelah ane coba ternyata berhasil.
Berikut langkah bagaimana cara merubah tampilan arsip blog dengan menu scroll :
Seperti biasa masuk dulu ke akun blog anda
Pilih menu design -- > Seting elemen widget arsip anda pake gaya Hierarki
Setelah selesai, pindah kemenu Edit Html -- > Centang kotak expand widget
Cari kode seperti dibawah ini (Tekan keyboard tombol Ctrl + F untuk mempermudah pencarian dengan memasukan kata yang dicari di dalamnya)
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
Sisipkan kode dibawah ini tepat diatas kode <div id='ArchiveList'>
<div style='overflow:auto; width:ancho; height:100px;'>
Tambahkan kode </div> diatas <b:include name='quickedit'/>
Tampilan keseluruhan kode menjadi
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
Terakhir klik Save. Selasai.
Keterangan :
Sebelum melakukan edit HTML template blog, selalu back up dengan cara download terlebih dahulu template blog kita untuk mengantisipasi kegagalan saat proses edit HTML berlangsung.
Pada kode yang ditambahkan berikut ini, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px pada height menunjukan tinggi dari scroll sebagai pembungkus yang kita buat. Atur sesuai selera.
Sebelum melakukan edit HTML untuk merubah tampilan arsip blog dengan model scroll, pastikan kita telah merubah model arsip blog kita menjadi model hierarki terlebih dahulu. Untuk tampilannya apakah dimuat perbulan atau perminggu tidak masalah.
Bagaimana, mudah bukan. Yang penting anda teliti pasti bisa. Semoga bermanfaat.
Anda sedang membaca artikel tentang Cara Membuat Tampilan Menu Scroll Pada Arsip Blog dan anda bisa menemukan artikel Cara Membuat Tampilan Menu Scroll Pada Arsip Blog ini dengan urlhttp://panduansederhana.blogspot.com/2012/03/cara-membuat-tampilan-menu-scroll-pada.html.
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikelCara Membuat Tampilan Menu Scroll Pada Arsip Blog ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Tampilan Menu Scroll Pada Arsip Blogsebagai sumbernya.
Tapi meskipun begitu banyak para blogger yag enggan untuk memasangnya dikarenakan ekan memakan banyak tempat apalagi jika jumlah artikelnya sudah banyak tentuk membutuhkan tempat yang luas.
Nah, kali ini ane dapat solusi untuk masalah tersebut yaitu dengan cara membuat tampilan menu scroll. Cara ini ane dapat setelah dari search di mbah google dan setelah ane coba ternyata berhasil.
Berikut langkah bagaimana cara merubah tampilan arsip blog dengan menu scroll :
Seperti biasa masuk dulu ke akun blog anda
Pilih menu design -- > Seting elemen widget arsip anda pake gaya Hierarki
Setelah selesai, pindah kemenu Edit Html -- > Centang kotak expand widget
Cari kode seperti dibawah ini (Tekan keyboard tombol Ctrl + F untuk mempermudah pencarian dengan memasukan kata yang dicari di dalamnya)
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
Sisipkan kode dibawah ini tepat diatas kode <div id='ArchiveList'>
<div style='overflow:auto; width:ancho; height:100px;'>
Tambahkan kode </div> diatas <b:include name='quickedit'/>
Tampilan keseluruhan kode menjadi
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
Terakhir klik Save. Selasai.
Keterangan :
Sebelum melakukan edit HTML template blog, selalu back up dengan cara download terlebih dahulu template blog kita untuk mengantisipasi kegagalan saat proses edit HTML berlangsung.
Pada kode yang ditambahkan berikut ini, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px pada height menunjukan tinggi dari scroll sebagai pembungkus yang kita buat. Atur sesuai selera.
Sebelum melakukan edit HTML untuk merubah tampilan arsip blog dengan model scroll, pastikan kita telah merubah model arsip blog kita menjadi model hierarki terlebih dahulu. Untuk tampilannya apakah dimuat perbulan atau perminggu tidak masalah.
Bagaimana, mudah bukan. Yang penting anda teliti pasti bisa. Semoga bermanfaat.
Anda sedang membaca artikel tentang Cara Membuat Tampilan Menu Scroll Pada Arsip Blog dan anda bisa menemukan artikel Cara Membuat Tampilan Menu Scroll Pada Arsip Blog ini dengan urlhttp://panduansederhana.blogspot.com/2012/03/cara-membuat-tampilan-menu-scroll-pada.html.
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikelCara Membuat Tampilan Menu Scroll Pada Arsip Blog ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Tampilan Menu Scroll Pada Arsip Blogsebagai sumbernya.
Langganan:
Postingan (Atom)
