andra's diary: 07/19/12

Cara Membuat Dan Memasang Efek Gambar Miring Di Postingan Blog

Efek gambar miring adalah Efek miring pada gambar pada saat di sentuh mouse dan miring searah jarum jam, dan bisa juga berlawanan arah jarum jam, sesuai keinginan kita.

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog anda
2. Apabila Gambar Ingin Ditempatkan Di Postingan Silahkan Anda Membuat " Entri Baru "

3. Di Posisi Anda Akan Menempatkan Gambar Yang Anda Gunakan, Sisipkan Kode Dibawah Ini.

     <style type="text/css">
    .rotreys {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    }
    .rotreys:hover {
    transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    }
    </style>
    <span class="rotreys">
    <img border="0" height="240" src="Simpan URL Gambar Anda Disini" alt="efek_miring" width="320" />
    </span>

4. Tulisan Berwarna Biru Adalah Kemiringan Gambar, Silahkan Ganti Sesuai Keinginan
5. Tulisan Berwarna Orange Adalah Lebar Dan Tinggi nya Gambar
6. Ganti Tulisan Berwarna Kuning Dengan URL Gambar Anda, Contoh URL :

sumber : http://irawanbudiarto.blogspot.com/

Cara Membuat Tombol Buka Tutup

Anda boleh coba yang satu ini
Silakan langsung aja Copas Kodenya.

<div><div style="margin-bottom: 2px;"><i><b><small></small></b></i><input value="BUKA" style="margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" type="button" /></div>
<div style="border: 0px inset ; margin: 0px; padding: 0px;"><div style="display: none;">

Tambahkan Kodenya Disini

</div></div></div>

Sumber : http://arya96.blogspot.com/

Cara Membuat Recent Post Animasi Vertikal Bergambar

Recent Post Animasi Vertikal Bergambar Adalah widget yang dibuat dengan tujuan memperlihatkan postingan terakhir di suatu blog atau website, apabila sebuah artikel yang di posting memuat suatu gambar maka widget ini pun akan menunjukan gambar yang telah di muat artikel tersebut dengan ukuran yg kecil tentunya, tidak sama dengan ukuran gambar aslinya di dalam posting. Dengan adanya Recent Post membuat tampilan blog kita menjadi menarik dan membuat pengunjung ingin melihat artikel postingan kita yang lainnya. sebagai referensi sahabat bisa lihat di beranda blog milik saya ini. Untuk Membuat Recet Post Animasi Vertikal Sahabat bisa melihat caranya dibawah.

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog Anda

2. Pilih menu Rancangan dan Pilih Elemen Laman

3. Setelah itu pilih Tambah Gadget

4. Kemudian Tambahkan HTML/JavaScript

5. Dan Copy dan kode di bawah ini :

<div style="margin-bottom: -20px;">
<style type="text/css">
#rp_plus_img{height:217px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#fff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:10px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:1px;border:solid 1px #cccccc;width:70px;height:70px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://wisnunugraha.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 250;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul></div>

6. Setelah dicopy silahkan klik simpan dan lihat hasilnya.

Keterangan :

Angka yang berwana Kuning diatas adalah ukuran untuk gambar di Recent Post.
Angka yang berwarna Biru diatas adalah kecepatan Slide gambar Recent Post
Angka yang bewarna Hjau diatas adalah 10 Jumlah posting yang akan di tampilkan di Recent Post dan 250 adalah Huruf atau deskripsi postingan yang ditampilkan di Recent Post

Sumber : http://irawanbudiarto.blogspot.com/

Cara Membuat Footer 3 Kolom

Beberapa Template Yang Anda Download, Tidak Semuanya Menyediakan Kolom Footer. Dan Fungsi Footer Cukup Banyak.. Nah, kali Ini saya akan Memposting Cara Membuat Footer dengan Jumlah Kolom 3.

Masuk pada akun blogger Anda
Pilih Rancangan >> Edit HTML
Untuk berjaga-jaga Download Template Lengkap Terlebih Dahulu
Centang Expand Template Widget
Cari :
]]></b:skin>
Copy kode berikut dan tempatkan tepat diatas kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
Cari kode berikut yang sama atau hampir sama dengan kode berikut :
Pencarian 1 :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Jika tidak ketemu ganti pencarian menjadi :
Pencarian 2 :

atau pencarian 3 :
<div id='footer'>
Jika yang kode pencarian yang ada pada blog :
- Jika yang Anda temukan adalah kode Pencarian 1 maka :
  Ganti kode <b:section class='footer' id='footer'/> dengan kode dibawah ini.
- Jika pencarian 2 atau 3 yang Anda temukan tempatkan kode dibawah initepat diatas kode tersebut.
<div id='footer-column-divide'>
<div id='footer2' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>
Lalu Simpan. Dan Lihat Hasilnya.

Selamat Mencoba & Happy Blogging.

Sumber : http://www.katakan-hey.com