Mini Niche Scraper Banner 468x60
Panduan Blogspot Master
Mini Niche Scraper Banner 125x125
Google PageRank Checker Powered by  MyPagerank.Net
Tampilkan postingan dengan label Efek. Tampilkan semua postingan
Tampilkan postingan dengan label Efek. Tampilkan semua postingan

Tutorial Buat Efek Bunga Berjatuhan pada Blogger

Tutorial Buat Efek Bunga Berjatuhan pada Blogger - Pada kesempatan kali ini saya akan membahas Tutorial Buat Efek Bunga Berjatuhan pada Blogger. Buat Efek bunga berjatuhan di blog kita tentunya akan mempercantik tampilan blog kita, dengan tampilan berwarna biru dan kuning tentunya akan memperindah suasana di blog kita :D

Sebelum kita mulai Tutorialnya, sebaiknya kita lihat Demonya terlebih dahulu. Silahkan sobat KLIK Gambar dibawah ini untuk melihat demonya.


Berikut Tutorialnya :

1. Silahkan login ke Blogger anda
2. Pilih Edit HTML Lalu Centang "EXPAND TEMPLATE WIDGET"
3. Copy kode berikut diatas kode </body>


4. Klik Simpan.

01.07 | 0 komentar | Read More

Cara Membuat Efek Getar Pada Gambar Postingan

Cara Membuat Efek Getar Pada Gambar Postingan - Kali ini saya akan membahas Cara Membuat Efek Getar Pada Gambar Postingan. Efek getar ini merupakan efek yang unik untuk sebuah gambar. Berikut contoh gambar bergetar :

 

 Berikut Tutorialnya :

1. Login ke blogger tentunya
2. Rancangan >> Edit HTML >> Ceklis "Expand Template Widget"
3. Cari kode </head>
4. Copy kode berikut diatas kode tadi, Bila tidak berhasil, Parse kodenya terlebih dahulu.. (parse kode DISINI)

<style>
.shakeimage{
position:relative
}
</style>
<script language="JavaScript1.2">

/*
Shake image script (onMouseover)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/

//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector+"px"
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector+"px"
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector+"px"
}
else{
shake.style.left=parseInt(shake.style.left)-rector+"px"
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}

</script>

5. Bila sudah, Klik Simpan template.
6. Silahkan sobat buka entri baru/new post
7. Lalu copy kode dibawah ini pada mode HTML.

<img class="shakeimage" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" src="http://i.brta.in/images/2012-07/big/78f2afeb63014c18e371245f4746cb08.png" />

 

NB : ganti yang berwarna merah dengan url gambar kamu..

8. Publish postingan sobat, dan liat hasilnya ^_^


23.02 | 0 komentar | Read More

Cara Menambahkan Efek Scroll Pada Widget Bloglist

Cara Menambahkan Efek Scroll Pada Widget Bloglist  -  Hallo sobat blogger?? pada postingan kali ini saya akan berbagi kepada kalian yaitu Cara Menambahkan Efek Scroll Pada Widget Bloglist . Memang banyak orang yang menggunakan widget bloglist dari dari gadget blogger. Dengan memanfaatkan widget bloglist ini, kita bisa melihat artikel - artikel terbaru dari blog yang terdapat didalamnya, sehingga kita dapat mengetahui setiap topik bahasan dalam blog-blog tersebut.

     Sayangnya, jika isi dari widget bloglist ini terlalu banyak maka akan terlihat memanjang dan akan memenuhi halaman blog. Nah, maka dari itu fungsi scroll pada widget bloglist ini sangat berguna. Memang kelihatan sulit untuk menambahkan fungsi scroll, karena widget ini bukan merupakan HTML/JavaScript. Cara menambahkannya pun cukup mudah, hanya menambahkan perintah overflow, lalu atur tinggi dan fungsi scroll pun sudah jadi. Dan seperti yang kamu lihat, widget bloglist milik saya juga menggunakan fungsi scroll (pada sidebar yang berjudul Friend's link)


Mari kita simak Tutorialnya :

1. Langkah pertama, harus Login ke Account Blogger terlebih dahulu
2. Langkah kedua,  Bagi yang belum membuat widget bloglist, dapat lihat tutorialnya disini (bagi yang sudah punya tidak usah ikuti langkah kedua)
3. Masuk ke Template lalu Edit HTML
4. Jangan lupa untuk mencentang "Expand Template Widget"
5. Cari kode 'BlogList'
6. Perhatikan baik-baik kode dibawah ini :

<b:widget id='BlogList1' locked='false' title='Friend links' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content' Sisipkan kode>

7. Tambahkan/sisipkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru
 sehingga menjadi seperti dibawah ini.

 <b:widget id='BlogList1' locked='false' title='Friend links' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content' style='overflow:auto; height:200px'

Keterangan : Atur ukuran tinggi (height) sesuai kebutuhan

8. Sebelum Menyimpan Template, sebaiknya di pratinjau/preview terlebih dahulu untuk melihat apakah widget bloglistnya udah ditambahkan fungsi scroll atau belum
9. Bila sudah benar, Klik Simpan Template

Mudahkan ?? kita hanya perlu menambahkan perintah overflow, dan widget bloglistnya sudah mempunyai fungsi scroll. 
Kalau sobat masih tidak mengerti, sobat dapat bertanya pada kolom komentar di bawah ini.

Semoga bermanfaat :D
17.17 | 0 komentar | Read More

Cara Membuat Efek Link Pelangi di Blog

Cara Membuat Efek Link Pelangi di Blog - Kali ini saya akan membahas Cara Membuat Efek Link Pelangi di Blog. Rainbow link atau Link pelangi mempunyai efek hover dan akan mengeluarkan efek warna - warni ketika mouse di arahkan kepada link di suatu blog. Cara membuatnya pun sangat mudah hanya menggunakan javascript ringan, sehingga tidak memberatkan blog. 


Berikut Tutorialnya :

1. Masuk ke Akun Blogger sobat
2. Lalu, Pilih Rancangan > Elemen laman > Klik Tambah Gadget
3. Copy kode dibawah ini di HTML/Javascript

<script src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-rainbow-link.js" type="text/javascript"></script>

4. Kemudian, Klik Simpan. dan lihat hasilnya :D
16.10 | 0 komentar | Read More

Cara Membuat Efek Salju di Blog

Cara Membuat Efek Salju di Blog - Kali ini saya akan membahas Cara Membuat Efek Salju di Blog. Membuat Efek salju berjatuhan di blog kita, tentunya bisa membuat blog tampak rame dan menarik, sehingga pengunjung akan betah berlama-lama di blog kita. Selain itu, warna saljunya yaitu warna putih dan cocok untuk blog yang backgroundnya berwarna hitam. Contohnya sobat bisa lihat gambar dibawah ini :

 

Berikut Tutorialnya :

1. Silahkan Masuk ke Blogger sobat
2. Pilih Rancangan > Elemen laman > Tambah Gadget
3. Copy kode dibawah ini di HTML/Javascript

<script src="http://masterendi.googlecode.com/files/salju.js"></script>

4. Klik Simpan Template. dan lihat hasilnya :)


03.48 | 0 komentar | Read More

Cara Membuat Efek Hover Captions dengan Animasi Pada Gambar Blog

Cara Membuat Efek Hover Captions dengan Animasi Pada Gambar Blog  -  Dulu saya
pernah membahas tentang Cara Menambahkan Caption Pada Gambar Blog dengan CSS. Dan kali ini yang akan saya share adalah Cara Membuat Efek Hover Captions dengan Animasi Pada Gambar Blog . Maksudnya saat kursor menyentuh gambar tersebut, maka gambar tersebut secara otomatis akan muncul captions dengan animasi. Contohnya seperti gambar dibawah ini :

 

Berikut tutorialnya :

1. Masuk ke Akun Blogger sobat
2. Pilih Rancangan, Edit HTML, Centang "Expand Template Widget"
3. Cari kode ]]><b:skin>, bila sudah Copy kode dibawah ini tepat diatas kode ]]><b:skin> 

#image-hover {
}
#image-hover img{width:200px;height:200px}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}
#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}
#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
#figure:hover .caption {
margin-bottom:0px;
}
#image-hover .caption {
width:190px;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 20px;
font-size: 11px;
text-shadow: 0px 2px 0px #000;
}
#image-hover a:link,#image-hover a:visited{font-size:11px;font-weight:bold;color:#fff;text-decoration:none}
#image-hover a:hover{color:#ff9900;}
Ket: Ganti yang berwarna merah dengan lebar dan tinggi widgetnya

Dan sekarang untuk membuat gambar dengan efek captions, berikut kodenya
<div id="image-hover">
<div id='figure'>
<img src="http://3.bp.blogspot.com/-CxUTqI_uKdQ/T17CEODWddI/AAAAAAAAA9w/ik3l8RT6F7k/s320/Untitled.png"/>
<span class='caption'>
<a href="http://tutorial-blogz.blogspot.com/2012/06/cara-membuat-garis-tepi-di-setiap.html"/>Cara Membuat Garis Tepi di Setiap Postingan Blog</a> <br/>
kali ini efek nya ditambah dengan efek zoom atau membesar
</span>
</div>
</div>
Ket: Ganti yang warna biru dengan URL Gambarnya
Ganti yang warna merah dengan URL yang akan dituju
Ganti yang warna ungu dengan Judul
Ganti yang warna hijau dengan Deskripsi Gambarnya
22.00 | 0 komentar | Read More