Dhecun Blog: Gambar

Showing posts with label Gambar. Show all posts

Mencegah Copy Paste Gambar

Proteksi gambar , mencegah Copy Paste merupakan hal yang sangat penting untuk mencegah Copy Paste pada gambar / image.

Dalam hal ini akan memberikan efek gambar kosong / gambar tidak muncul saat di Copy Image atau Save Image As.

Sebagai contoh , silahkan anda klik kanan gambar dibawah ini lalu pilh salin gambar atau buka gambar di tab baru.

Gunakan kode image di bawah ini jika anda ingin menambahkan Gambar / Image pada postingan blog anda.

<img style="background-image:url('URL Gambar');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP ///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="240" height="240"/>

Catatan :

Yang perlu anda ganti dan sesuaikan hanya tulisan yang berwarna merah dan usahakan lebar dan tinggi gambar sesuai dengan ukuran gambar aslinya (tulisan warna biru).

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Kumpulan Gambar Tipuan Mata Yang Akan Membuat Anda Kagum dan Pusing

Bagi anda yang mengaku punya ketelitian yang bagus , sebaiknya anda melihat gambar-gambar dibawah ini.

Jika anda dapat melihat gambar atau objek-objek tersembunyi di dalamnya berarti anda betul-betul hebat dan saya acungin 4 jempol buat anda (2 jempol tangan + 2 jempol kaki) hehehe...

Tapi jika anda puyeng melihat gambar-gambar dibawah ini , jangan salahkan saya ya hehehe :)... , peace brother...!

Gambar kapal laut atau pilar...?

Penonton atau gedung...?

Berapa banyak kuda yang bisa anda temukan...? , jika mata anda cukup tajam , anda seharusnya menemukan 7...!

Berapa banyak orang dalam gambar ini...?

Cincin yang mustahil...!

Bisakah anda menemukan 4 orang dalam gambar diatas...?

Siapakah yang tertinggi...? , percaya atau tidak , ketiganya sama tinggi...!

Karpet hidup.

Air terjun atau manusia terjun...?

Ada 5 ekor rusa yang bersembunyi di hutan , bisakah anda menemukannya...?

Berapa pilar yang ada , tiga atau dua...? , perhatikan pilar tengah , dimanakah ujungnya...?

Sebuah wajah atau sebuah kata liar...?

Apa yang anda lihat...? , bisakah anda melihat kata LIFT atau hanya sebuah gambar kotak-kotak hitam tanpa makna...?

Impossible Triangle...!

Temukanlah wajah-wajah dalam gambar ini:

Ada sebelas wajah dalam gambar , bisakah anda menemukan semuanya...? , orang normal akan menemukan empat atau lima. 
Jika anda menemukan 8 , anda memiliki tingkat ketelitian lebih dari orang normal.
Jika anda menemukan 9 , anda memiliki tingkat ketelitian diatas rata-rata.
Jika anda menemukan 10 , anda sangat teliti.
Jika anda menemukan 11 , anda luar biasa teliti sekali.

Sekedar share saja untuk menguji sampai mana tingkat ketelitian mata kita...!

Komentari artikel ini...!!!

Membuat Foto atau Gambar Dengan Efek Memutar

Silahkan sorot gambar dibawah ini dengan mouse anda.

Bagaimana menurut anda apakah cukup menarik untuk di pasang di blog anda...?

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode </head>
7. Masukkan script dibawah ini tepat diatas kode </head>

<style>#tejahtcganteng{ -o-transition: all 0.8s ease;-moz-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;}#tejahtcganteng:hover{ -o-transform: scale(1.5) rotate(720deg) translate(0px);
-moz-transform: scale(1.5) rotate(720deg) translate(0px);
-webkit-transform: scale(1.5) rotate(720deg) translate(0px);}#ganteng a:hover{transition: all 0.5s;-moz-transition: all 0.5s;}</style>
<div style="text-align: left;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-foto-atau-gambar-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Jika anda tidak mau pusing , kode diatas bisa anda masukkan dalam Gadget HTML
8. Klik simpan template

Catatan:
Anda bisa mengubah efek membesarnya dengan cara mengubah ukuran yang saya sudah tandai dengan warna merah (1.5)
Contoh :
- Mengecilkan : 0.9 , 1.0
- Membesarkannya lagi : 2.0 , 2.5 dst.

Cara pemakaiannya :
Tambahkan kode dibawah ini di setiap posting atau widget anda.

<center><div id='tejahtcganteng'>simpan tulisan / gambar anda disini</div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-foto-atau-gambar-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div></center>

Contoh :

<center><div id="tejahtcganteng"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png" width="170" /></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-foto-atau-gambar-dengan-efek.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div></center>

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Snipping Pada Gambar Komentator Blogger

Maksud dari kata "Snipping" pada posting kali ini adalah ketika kursor diarahkan ke avatar komentator / gambar komentator maka avatar komentator tersebut akan berputar sebanyak 1 putaran.Keren bukan...?

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Add Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Klik simpan

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Script Kotak Gambar Berputar 1

Photo Cube Generator Jika anda tertarik untuk membuat gambar berputar seperti gambar diatas , silahkan kunjungi alamat situsnya klik disini , tidak perlu mendaftar dan tidak perlu memasukkan alamat email , siapkan terlebih dahulu gambar dengan ukuran 200x200 pixel.
Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Membuat Gambar Berputar

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
 
  -moz-transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
 
}

8. Klik simpan template

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Cara Membuat Gambar Bergetar Otomatis Di Blog

Pada kali ini saya akan share tentang bagaimana Cara Membuat Gambar Bergetar Otomatis Di Blog , kalau anda belum tau bagaimana itu gambar bergetar silahkan lihat contohnya klik disini.
Nah sesuai dengan judulnya , trik gambar bergetar ini berfungsi terhadap setiap gambar pada setiap artikel anda sehingga anda tidak perlu lagi memasukkan kode satu persatu disetiap postingan anda , menarik bukan...?

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

/* Efek getar by dhecun.blogspot.com */
.post img {
animation-name: x-gengetar;
-moz-animation-name: x-gengetar ;
-webkit-animation-name: x-gengetar;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes x-gengetar {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes x-gengetar {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes x-gengetar {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

8. Kemudian cari kode </body>
9. Masukkan script dibawah ini tepat diatas kode </body>

<script src='http://x-gen.googlecode.com/files/x-gengetar.js' type='text/javascript'/>

10. Klik simpan template

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Script Efek Loading Gambar

Dhecun Blog sarankan script ini untuk blog yang banyak menggunakan gambar dalam postingannya.
Dhecun Blog yakin banyak yang sudah bisa membuatnya karena memang tidak sulit , tapi Dhecun Blog coba membuat postingan ini barang kali ada yang belum tau.

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda.
2. Klik Template lalu pilih Edit HTML.
3. Download Template Lengkap terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan.
4. Centang Expand Template Widget.
5. Tekan tombol Ctrl+F.
6. Cari kode <body> , jika sudah ketemu hapus , ganti dengan script dibawah ini.

<body onLoad='waitPreloadPage();'> <div id='prepage' style='display:scroll;position:fixed;top:100px;left:3px'>
<img border='0' src='http://i811.photobucket.com/albums/zz36/asksalman/loading2.gif'/></div>

7. Kemudian cari kode </body> , hapus dan ganti dengan script dibawah ini :

<script language='javascript' src='http://pageprotection.googlecode.com/files/loading.js' type='text/javascript'/></body>

8. Klik simpan template

Keterangan :
Tulisan yang berwarna merah adalah URL gambar loadingnya , bisa anda ganti dengan URL gambar sesuai keinginan anda , anda dapat mencari sendiri di google image search silakan masukan kata kunci loading.gif.

Semoga bermanfaat...!!!

Komentari artikel ini...!!!

Script marquee gambar

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Edit sesuai keinginan anda
5. Klik simpan

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://dhecun.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png" border=5></a>'
leftrightslide[1]='<a href="http://dhecun.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png" border=5></a>'
leftrightslide[2]='<a href="http://dhecun.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png" border=5></a>'
leftrightslide[3]='<a href="http://dhecun.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png" border=5></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">
')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">
')
write('<div id="test2" style="position:absolute;left:0px;top:0px">
</div>
')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px">
</div>
')
write('</div>
</div>
')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>
')
}
}
</script>

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5

////NO NEED TO EDIT BELOW THIS LINE////////////

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}

Semoga bermanfaat...!!!

Script tulisan bergantian pakai gambar

Kumpulan script untuk blogspot.

Silahkan anda cari dalam halaman ini semua pasti menarik untuk dicoba.

Berisi kumpulan script untuk mempercantik tampilan blog anda.

Saya sendiri bingung menjelaskan apa fungsi dari script ini...!!!
Tapi yang jelas tampilannya berupa slide yang disisipkan gambar.
Mungkin script ini cocok untuk mempromosikan barang atau semacamnya.
Intinya berpromosi hehehe :)

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Edit sesuai keinginan anda
5. Klik simpan

#dropcontentsubject{
width: 250px;
font-weight: bold;
}

.dropcontent{
width: 250px;
height: 200px;
border: 1px solid black;
background-color: #DFDFFF;
padding: 3px;
display:block;
}

</style>

var tickspeed=2000 //ticker speed in miliseconds (2000=2 seconds)
var enablesubject=1 //enable scroller subject? Set to 0 to hide

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

var selectedDiv=0
var totalDivs=0

function contractall(){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}

function expandone(){
var selectedDivObj=document.getElementById("dropmsg"+selectedDiv)
contractall()
document.getElementById("dropcontentsubject").innerHTML=selectedDivObj.getAttribute("subject")
selectedDivObj.style.display="block"
selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0
setTimeout("expandone()",tickspeed)
}

function startscroller(){
while (document.getElementById("dropmsg"+totalDivs)!=null)
totalDivs++
expandone()
if (!enablesubject)
document.getElementById("dropcontentsubject").style.display="none"
}

if (window.addEventListener)
window.addEventListener("load", startscroller, false)
else if (window.attachEvent)
window.attachEvent("onload", startscroller)

</script>

<div id="dropcontentsubject">
</div>
<div id="dropmsg0" class="dropcontent" subject="JUDUL POSTING">
<img align="right" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeTeZneaqTf8p4yXUb2pjKP1Kntz133whYoEtrEhZfwVEnMUTEgkTGwAGpXOny5dQBCSn8jZzDKsBRDYIliiMilWnmVnJFOA2D2c-ijnx3W9-mkHeL6qhiLfzgu1Dt4OcPEW8s7l28V-1/s1600/programmer.gif"/>
Dhecun Blog : Kumpulan script untuk blogspot
</div>
<div id="dropmsg1" class="dropcontent" subject="JUDUL POSTING">
<img align="center" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeTeZneaqTf8p4yXUb2pjKP1Kntz133whYoEtrEhZfwVEnMUTEgkTGwAGpXOny5dQBCSn8jZzDKsBRDYIliiMilWnmVnJFOA2D2c-ijnx3W9-mkHeL6qhiLfzgu1Dt4OcPEW8s7l28V-1/s1600/programmer.gif"/>
Dhecun Blog : Kumpulan script untuk blogspot
</div>
<div id="dropmsg2" class="dropcontent" subject="JUDUL POSTING">
<img align="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijeTeZneaqTf8p4yXUb2pjKP1Kntz133whYoEtrEhZfwVEnMUTEgkTGwAGpXOny5dQBCSn8jZzDKsBRDYIliiMilWnmVnJFOA2D2c-ijnx3W9-mkHeL6qhiLfzgu1Dt4OcPEW8s7l28V-1/s1600/programmer.gif"/>
Dhecun Blog : Kumpulan script untuk blogspot
</div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-tulisan-bergantian-pakai-gambar.html" target="_blank" title="Script tulisan bergantian pakai gambar"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Semoga bermanfaat...!!!

Script scroll pilihan gambar

-->

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Klik simpan

<option value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png">Pilih gambar</option>
<option value="http://2.bp.blogspot.com/-J01NLthxiV8/T1pXt3o09RI/AAAAAAAAA10/dmD9BkM6Cbs/s1600/A26.jpg">Gambar 1</option>
<option value="http://3.bp.blogspot.com/-5Z3LmrmjN4w/T1pVvPv506I/AAAAAAAAA1M/al3UoiPPtMY/s1600/A15.jpg">Gambar 2</option>
<option value="http://4.bp.blogspot.com/-clYVpxSqCAI/T1pV0ZTO8_I/AAAAAAAAA1U/i8akwtyjtxs/s1600/A21.jpg">Gambar 3</option>
<option value="http://1.bp.blogspot.com/-8fDjWClBU3U/T1pV6OeulyI/AAAAAAAAA1c/25VBt8hR5bE/s1600/A4.jpg">Gambar 4</option>
<option value="http://3.bp.blogspot.com/-qBDcPwxVFNk/T1pV9aXkJSI/AAAAAAAAA1k/SbC0JxFaN_o/s1600/10.jpg">Gambar 5</option>
<option value="http://4.bp.blogspot.com/-ZFlpAKepYUA/T1pVs5QS2qI/AAAAAAAAA1E/e1WoJjhKOAo/s1600/A7.jpg">Gambar 6</option>
</select><span style="font-family: Verdana, sans-serif;">
</span><br />
<span style="font-family: Verdana, sans-serif;"><img border="1" height="113" id="preview" name="preview" src="http://3.bp.blogspot.com/-5Z3LmrmjN4w/T1pVvPv506I/AAAAAAAAA1M/al3UoiPPtMY/s1600/A15.jpg" width="150" />
</span></form>
</center>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-scroll-pilihan-gambar.html" target="_blank"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>

Keterangan :

Script gambar bergerak di pojok blog

Ikuti langkah berikut ini :

1. Pertama-tama silahkan cari dulu icon yang cocok dengan selera anda disini atau disini
2. Setelah ketemu gambar yang anda inginkan , silahkan di copy alamat URL nya
3. Login ke akun Blogger anda
4. Klik Template lalu pilih Edit HTML
5. Centang Expand Template Widget
6. Tekan tombol Ctrl+F
6. Cari kode ]]></b:skin>
7. Masukkan script dibawah ini tepat diatas kode ]]></b:skin>

#trik_pojok_dhecun {position:fixed;_position:absolute;bottom:0px; left:0px;clip:inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth); }

Text yang berwarna merah adalah menunjukkan posisi penempatan dari gambar tersebut , silahkan anda ganti sesuai keinginan anda.
kiri=left , kanan=right , atas=top , bawah=bottom

8. Berikutnya cari kode </body>
9. Masukkan script dibawah ini tepat diatas kode </body>

<div id="trik_pojok_dhecun"><a href="http://dhecun.blogspot.com"><img src="http://www.boongan_doang.gif" border="0" /></a></div>

Catatan :

Text warna merah ganti dengan URL blog anda.

Text warna biru ganti dengan URL gambar yang telah anda copy (lihat langkah no. 2)

10. Klik simpan template

Semoga bermanfaat...!!!

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.

RSS feeds

Space Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

Follow this blog

RSS feeds

RSS
Post RSS
Comments RSS

Widget Populer

Widget Zoom Detail Gambar

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

</style>

/***********************************************
* Frame dcode

***********************************************/

</script>

jQuery(document).ready(function($){

$('#image1').addimagezoom({
  zoomrange: [3, 30],
  magnifiersize: [500,500],
  magnifierpos: 'right',
  cursorshade: true,
  largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png' //<-- No comma after last option!
 })

$('#image2').addimagezoom({
  zoomrange: [5, 5],
  magnifiersize: [400,400],
  magnifierpos: 'right',
  cursorshade: true,
  cursorshadecolor: 'pink',
  cursorshadeopacity: 0.3,
  cursorshadeborder: '1px solid red',
  largeimage: 'alamat gambar 2' //<-- No comma after last option!
 })

$('#image3').addimagezoom()

})

</script>

// feb 2 12
// modifikasi script

jQuery.noConflict()

jQuery('head').append('<style type="text/css">.featuredimagezoomerhidden {visibility: hidden!important;}</style>');

var featuredimagezoomer={
 loadinggif: 'spinningred.gif', //full path or URL to "loading" gif
 magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to original image

/////NO NEED TO EDIT BEYOND HERE////////////////
 dsetting: { //default settings
   magnifierpos: 'right',
   magnifiersize:[200, 200],
   cursorshadecolor: '#fff',
   cursorshadeopacity: 0.3,
   cursorshadeborder: '1px solid black',
   cursorshade: false,
   leftoffset: 15, //offsets here are used (added to) the width of the magnifyarea when
   rightoffset: 10 //calculating space requirements and to position it visa vis any drop shadow
  },
 isie: (function(){/*@cc_on @*//*@if(@_jscript_version >= 5)return true;@end @*/return false;})(), //is this IE?

showimage: function($, $tracker, $mag, showstatus){
  var specs=$tracker.data('specs'), d=specs.magpos, fiz=this;
  var coords=$tracker.data('specs').coords //get coords of tracker (from upper corner of document)
  specs.windimensions={w:$(window).width(), h:$(window).height()}; //remember window dimensions
  var magcoords={} //object to store coords magnifier DIV should move to
  magcoords.left = coords.left + (d === 'left'? -specs.magsize.w - specs.lo : $tracker.width() + specs.ro);
  //switch sides for magnifiers that don't have enough room to display on the right if there's room on the left:
  if(d!=='left' && magcoords.left + specs.magsize.w + specs.lo >= specs.windimensions.w && coords.left - specs.magsize.w >= specs.lo){
   magcoords.left = coords.left - specs.magsize.w - specs.lo;
  } else if(d==='left' && magcoords.left < specs.ro) { //if there's no room on the left, move to the right
   magcoords.left = coords.left + $tracker.width() + specs.ro;
  }
  $mag.css({left: magcoords.left, top:coords.top}).show(); //position magnifier DIV on page
  specs.$statusdiv.html('Current Zoom: '+specs.curpower+'<div style="font-size:100%">Use Mouse Wheel to Zoom In/Out</div>');
  if (showstatus) //show status DIV? (only when a range of zoom is defined)
   fiz.showstatusdiv(specs, 400, 2000);
 },

hideimage: function($tracker, $mag, showstatus){
  var specs=$tracker.data('specs');
  $mag.hide();
  if (showstatus)
   this.hidestatusdiv(specs);
 },

showstatusdiv: function(specs, fadedur, showdur){
  clearTimeout(specs.statustimer)
  specs.$statusdiv.fadeIn(fadedur) //show status div
  specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay
 },

hidestatusdiv: function(specs){
  specs.$statusdiv.stop(true, true).hide()
 },

getboundary: function(b, val, specs){ //function to set x and y boundaries magnified image can move to (moved outside moveimage for efficiency)
  if (b=="left"){
   var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w
   return (val>0)? 0 : (val<rb)? rb : val
  }
  else{
   var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h
   return (val>0)? 0 : (val<tb)? tb : val
  }
 },

moveimage: function($tracker, $maginner, $cursorshade, e){
  var specs=$tracker.data('specs'), csw = Math.round(specs.magsize.w/specs.curpower), csh = Math.round(specs.magsize.h/specs.curpower),
  csb = specs.csborder, fiz = this, imgcoords=specs.coords, pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey),
  x=pagex-imgcoords.left, y=pagey-imgcoords.top;
  $cursorshade.css({ // keep shaded area sized and positioned proportionately to area being magnified
   visibility: '',
   width: csw,
   height: csh,
   top: Math.min(specs.imagesize.h-csh-csb, Math.max(0, y-(csb+csh)/2)) + imgcoords.top,
   left: Math.min(specs.imagesize.w-csw-csb, Math.max(0, x-(csb+csw)/2)) + imgcoords.left
  });
  var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image
  var newy=-y*specs.curpower+specs.magsize.h/2
  $maginner.css({left:fiz.getboundary('left', newx, specs), top:fiz.getboundary('top', newy, specs)})
  specs.$statusdiv.css({left:pagex-10, top:pagey+20})
  specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for "DOMMouseScroll" event
  specs.lastpagey=pagey
 },

magnifyimage: function($tracker, e, zoomrange){
  var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
  var zoomdir=(delta<=-120)? "out" : "in"
  var specs=$tracker.data('specs')
  var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
  var newpower=(zoomdir=="in")? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power
  var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
  magnifier.$image.css({width:nd[0], height:nd[1]})
  specs.curpower=newpower //set current power to new power after magnification
  specs.$statusdiv.html('Current Zoom: '+specs.curpower)
  this.showstatusdiv(specs, 0, 500)
  $tracker.trigger('mousemove')
 },

init: function($, $img, options){
  var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
  fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
  setting.largeimage = setting.largeimage || $img.get(0).src;
  $magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
   .append('<div style="position:relative;left:0;top:0;" />')
   .appendTo(document.body) //create magnifier container
  //following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
  if(setting.cursorshade){
   $cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />')
    .css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
    .appendTo(document.body);
  } else {
   $cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
  }
  $statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />')
   .html('<img src="'+this.loadinggif+'" />')
   .appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
  $tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
   .css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})
   .appendTo(document.body);
  $(window).resize(function(){ //in case resizing the window repostions the image
    var o = $img.offset();
    $tracker.css({left: o.left, top: o.top});
   });

function getspecs($maginner, $bigimage){ //get specs function
   var magsize={w:$magnifier.width(), h:$magnifier.height()}
   var imagesize={w:w, h:h}
   var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/w).toFixed(5)
   $tracker.data('specs', {
    $statusdiv: $statusdiv,
    statustimer: null,
    magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
    magsize: magsize,
    magpos: setting.magnifierpos,
    imagesize: imagesize,
    curpower: power,
    coords: getcoords(),
    csborder: $cursorshade.outerWidth(),
    lo: setting.leftoffset,
    ro: setting.rightoffset
   })
  }

function getcoords(){ //get coords of thumb image function
   var offset=$tracker.offset() //get image's tracker div's offset from document
   return {left:offset.left, top:offset.top}
  }

$tracker.mouseover(function(e){
     $cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', false);
   }).mouseout(function(e){
     $cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
     $tracker.data('premouseout', true);
   }).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
    lastpage.pageX = e.pageX;
    lastpage.pageY = e.pageY;
   });

$tracker.one('mouseover', function(e){
   var $maginner=$magnifier.find('div:eq(0)')
   var $bigimage=$('<img src="'+setting.largeimage+'"/>').appendTo($maginner)
   var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
   $img.css({opacity:0.1}) //"dim" image while large image is loading
   var imgcoords=getcoords()
   $statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'})
   $bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
    $img.css({opacity:1}) //restore thumb image opacity
    $statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt');
    if($tracker.data('premouseout')){
     $statusdiv.addClass('featuredimagezoomerhidden');
    }
    if (setting.zoomrange){ //if set large image to a specific power
     var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image
     $bigimage.css({width:nd[0], height:nd[1]})
    }
    getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier
    $magnifier.css({display:'none', visibility:'visible'})
    $tracker.mouseover(function(e){ //image onmouseover
     $tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document)
     fiz.showimage($, $tracker, $magnifier, showstatus)
    })
    $tracker.mousemove(function(e){ //image onmousemove
     fiz.moveimage($tracker, $maginner, $cursorshade, e)
    })
    if (!$tracker.data('premouseout')){
     fiz.showimage($, $tracker, $magnifier, showstatus);
     fiz.moveimage($tracker, $maginner, $cursorshade, lastpage);
    }
    $tracker.mouseout(function(e){ //image onmouseout
     fiz.hideimage($tracker, $magnifier, showstatus)
    }).css({cursor: fiz.magnifycursor});
    if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
     $tracker.bind('DOMMouseScroll mousewheel', function(e){
      fiz.magnifyimage($tracker, e, setting.zoomrange);
      e.preventDefault();
     });
    }
   }) //end $bigimage onload
   if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so)
    $bigimage.trigger('loadevt')
   }
   else{
    $bigimage.bind('load', function(){$bigimage.trigger('loadevt')})
   }
  })
 },

iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})()
};

jQuery.fn.addimagezoom=function(options){
 var $=jQuery;
 return this.each(function(){ //return jQuery obj
  if (this.tagName !== featuredimagezoomer.iname)
   return true; //skip to next matched element
  featuredimagezoomer.init($, $(this), options);
 });
}
</script>
<p><img id="image1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjU2O8BeMy8MvPmMYlB_xUs08Ebhn8Brb2wbGfp52nkvrSLS8vPCtxu_iHbXQOSjzpn14BZ5B7F8n8TOjDClFgh2mLenlkAzGT_4AP5qrFQhNFtNaJnUjWYTpl-RCEWnmrog05W7JuHM/s1600/DhecunBlog.png" style="width:170px;height:170px" /><p></p></p> 
<center>Mainkan roda mouse anda untuk membuat tampilan lebih besar</center>
<br/>
<div style="text-align:center; font-size:0.75em">
<a href="http://dhecun.blogspot.com/2012/11/script-zoom-gambar-dengan-detail.html">[ Get Widget ]</a></div>

Widget Share Button Melayang

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html" target="blank" title="Cara Memasang Widget Share Button"><font color="blue">[Get Widget]<font></font></font></a></div></div>

Tukar Link

Traffic

Dhecun Blog Statistics summary for website

Semua Artikel

Tampilkan semua artikel

10 Artikel Terbaru

Gabungan

Ganti warna border

Ganti warna background

Ganti background dan border

Blogger templates

Pages

Friday, December 21, 2012

Thursday, December 20, 2012

Saturday, December 8, 2012

Monday, December 3, 2012

Saturday, December 1, 2012

Monday, November 26, 2012

Friday, November 23, 2012

Wednesday, November 21, 2012

Tuesday, November 20, 2012

Thursday, November 15, 2012

Pasang Widget Otomatis

Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Space Iklan

Kategori pasang iklan

Iklan Sponsor 1

About Me

Contact

Rekomendasi

Follow

RSS feeds

Widget Populer

Share

Tukar Link

Traffic

Semua Artikel

10 Artikel Terbaru

Followers

Advertiser

Pasang iklan dapat diut