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 <body> 7. Masukkan script dibawah ini tepat dibawah kode <body>
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
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.
Kali ini Dhecun Blog akan mencoba share tentang Cara Membuat Efek Banjir di halaman blog anda , bukan hanya daerah kita saja yang banjir tapi kita juga bisa membuat blog kita banjir hahahaha :D Bagi anda yang ingin blognya tampil lebih cantik , silahkan pakai efek banjir ini. 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
Kali ini saya akan membahas bagaimana cara membuat bubble tooltip diblog. Salah satu kegunaannya adalah kita dapat menghemat ruang blog kita dengan memasang bubble tooltip tersebut , kita tidak perlu menampilkan segala informasi yang ingin kita tampilkan kepada para pengunjung / pembaca blog kita , cukup mengarahkan cursor pada gambar atau text karena kita sudah mengarahkan pada link atau laman yang ingin kita tunjukkan.
Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini : 1. Login ke akun Blogger anda 2. Pilih Template 3. Pilih Edit HTML 4. Tekan tombol Ctrl+F 5. Cari kode ]]></b:skin> 6. Masukkan script dibawah ini tepat diatas kode ]]></b:skin> 7. Klik simpan template
Keterangan : 1. Link warna merah bisa anda gunakan untuk membuat link ke arah artikel lain , bisa juga di kosongkan jika tidak diperlukan. 2. Link warna biru adalah teks yang akan di buat bubbletip , bila disorot oleh kursor mouse maka akan muncul keterangan tambahan yang telah anda buat. 3. Link warna pink adalah keterangan tambahan yang ingin anda tambahkan. Hasilnya seperti gambar dibawah ini : Semoga bermanfaat...!!!
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();'><!-- Loading with Image --> <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> <!-- Ends Loading with Image -->
7. Kemudian cari kode </body> , hapus dan ganti dengan script dibawah ini :
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...!!!
Script Tanggal Otomatis : Terdapat 2 script yang dapat anda gunakan , yaitu bahasa inggris dan bahasa indonesia , dan tampilan ke 2 script berikut seperti dibawah ini : 1. Versi Inggris Monday, 18 April, 2011 2. Versi Indonesia Senin, 18 April, 2011
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 1. Versi Inggris
Script Tombol Panah Back To Top bermanfaat untuk memudahkan pengunjung blog anda kembali ke navigasi atas khususnya sangat berperan dalam memanjakan pengunjung untuk artikel-artikel kita yang panjang-panjang sehingga pembaca blog tidak perlu memutar atau menarik scroll ke atas. 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 sasuai keinginan anda 5. Klik simpan
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="kembali ke atas"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUF9aZIuRPfdcArdKJeukD0jrXi2e16QnQET69tbImGxbQXRhmVbXEbiKK6p00TMe4uoTLudBGSIOZ2AJ-Xi23Si_Fq5LXW5Gx4xHA8AJVZu_nK-whQU1L1mycuPK-tnMyNBtMcfl4Wxf8/s1600/back-to-top.png" border="0" alt="back to top" /></a></div>
Catatan : Tulisan warna merah bisa anda ganti dengan URL gambar sesuai keinginan anda , tulisan warna biru bisa anda ganti dengan tulisan sesuai keinginan anda. Semoga bermanfaat...!!!
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
Saya rasa type slideshow area ini sudah tidak asing lagi untuk anda , tapi siapa tau juga anda belum tau type ini silahkan saja anda ikuti langkah dibawah 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 ]]></b:skin> 7. Masukkan script dibawah ini dan simpan diatas kode ]]></b:skin>
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 Semoga bermanfaat...!!!
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. Ganti tulisan yang berwarna merah dan biru sesuai keinginan anda 5. Klik simpan
<script language="JavaScript1.2"> var scroller_width='400px' var scroller_height='30px' var bgcolor='#E0EFD1' var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) var scrollercontent=new Array() //Define scroller contents. Extend or contract array as needed scrollercontent[0]='Kunjungi <a href="http://alamatlinkanda.com">Teks anda 1</a>' scrollercontent[1]='Kunjungi <a href="http://alamatlinkanda.com">Teks anda 2</a>' scrollercontent[2]='Kunjungi <a href="http://alamatlinkanda.com">Teks anda 3</a>' scrollercontent[3]='Kunjungi <a href="http://alamatlinkanda.com">Teks anda 4</a>' scrollercontent[4]='Kunjungi <a href="http://dhecun.blogspot.com">Teks anda 5</a>' scrollercontent[5]='Kunjungi <a href="http://alamatlinkanda.com">Teks anda 6</a>' ////NO need to edit beyond here///////////// var ie4=document.all var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1 if (ie4||dom) document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>') else if (document.layers){ document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>') } var curpos=scroller_height*(1) var degree=10 var curcanvas="canvas0" var curindex=0 var nextindex=1 function moveslide(){ if (curpos>0){ curpos=Math.max(curpos-degree,0) tempobj.style.top=curpos+"px" } else{ clearInterval(dropslide) if (crossobj.filters) crossobj.filters.alpha.opacity=100 else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=1 nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML=scrollercontent[curindex] nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0 setTimeout("rotateslide()",pause) } } function rotateslide(){ if (ie4||dom){ resetit(curcanvas) crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ if (crossobj.filters) document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20 else if (crossobj.style.MozOpacity) document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2 var temp='setInterval("moveslide()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else if (document.layers){ crossobj.document.write(scrollercontent[curindex]) crossobj.document.close() } curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0 } function resetit(what){ curpos=parseInt(scroller_height)*(1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.top=curpos+"px" } function startit(){ crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub if (ie4||dom){ crossobj.innerHTML=scrollercontent[curindex] rotateslide() } else{ document.tickernsmain.visibility='show' curindex++ setInterval("rotateslide()",pause) } } if (ie4||dom||document.layers) window.onload=startit </script> <div style="text-align: right;"> <a href="http://dhecun.blogspot.com/2012/11/script-slide-terbaru-3.html" target="_blank" title="Script Slide Terbaru"><span style="font-size: small;">[ Get Widget ]</span></a></div>
Saya sendiri tidak begitu paham mengenai script slide ini , tetapi jika anda penasaran 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 tulisan warna merah dengan URL gambar sesuai keinginan anda. 5. Klik simpan
<style type="text/css"> /*Default CSS for pan containers*/ .pancontainer{ position:relative; /*keep this intact*/ overflow:hidden; /*keep this intact*/ width:300px; height:300px; border:1px solid black; } </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="imagepanner.js"> </script> <script> // v1.1 (March 25th, 10): Updated with ability to zoom in/out of image jQuery.noConflict() var ddimagepanner={ magnifyicons: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png', 24,23], //set path to zoom in/out images, plus their dimensions maxzoom: 4, //set maximum zoom level (from 1x) init:function($, $img, options){ var s=options s.imagesize=[$img.width(), $img.height()] s.oimagesize=[$img.width(), $img.height()] //always remember image's original size s.pos=(s.pos=="center")? [-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] : [0, 0] //initial coords of image s.pos=[Math.floor(s.pos[0]), Math.floor(s.pos[1])] $img.css({position:'absolute', left:s.pos[0], top:s.pos[1]}) if (s.canzoom=="yes"){ //enable image zooming? s.dragcheck={h: (s.wrappersize[0]>s.imagesize[0])? false:true, v:(s.wrappersize[1]>s.imagesize[1])? false:true} //check if image should be draggable horizon and vertically s.$statusdiv=$('<div style="position:absolute;color:white;background:#353535;padding:2px 10px;font-size:12px;visibility:hidden"> 1x Magnify</div> ').appendTo(s.$pancontainer) //create DIV to show current magnify level s.$statusdiv.css({left:0, top:s.wrappersize[1]-s.$statusdiv.outerHeight(), display:'none', visibility:'visible'}) this.zoomfunct($, $img, s) } this.dragimage($, $img, s) }, dragimage:function($, $img, s){ $img.mousedown(function(e){ s.pos=[parseInt($img.css('left')), parseInt($img.css('top'))] var xypos=[e.clientX, e.clientY] $img.bind('mousemove.dragstart', function(e){ var pos=s.pos, imagesize=s.imagesize, wrappersize=s.wrappersize var dx=e.clientX-xypos[0] //distance to move horizontally var dy=e.clientY-xypos[1] //vertically s.dragcheck={h: (wrappersize[0]>imagesize[0])? false:true, v:(wrappersize[1]>imagesize[1])? false:true} if (s.dragcheck.h==true) //allow dragging horizontally? var newx=(dx>0)? Math.min(0, pos[0]+dx) : Math.max(-imagesize[0]+wrappersize[0], pos[0]+dx) //Set horizonal bonds. dx>0 indicates drag right versus left if (s.dragcheck.v==true) //allow dragging vertically? var newy=(dy>0)? Math.min(0, s.pos[1]+dy) : Math.max(-imagesize[1]+wrappersize[1], pos[1]+dy) //Set vertical bonds. dy>0 indicates drag downwards versus up $img.css({left:(typeof newx!="undefined")? newx : pos[0], top:(typeof newy!="undefined")? newy : pos[1]}) return false //cancel default drag action }) return false //cancel default drag action }) $(document).bind('mouseup', function(e){ $img.unbind('mousemove.dragstart') }) }, zoomfunct:function($, $img, s){ var magnifyicons=this.magnifyicons var $zoomimages=$('<img src="'+magnifyicons[0]+'" /><img src="'+magnifyicons[1]+'" />') .css({width:magnifyicons[2], height:magnifyicons[3], cursor:'pointer', zIndex:1000, position:'absolute', top:s.wrappersize[1]-magnifyicons[3]-1, left:s.wrappersize[0]-magnifyicons[2]-3, opacity:0.7 }) .attr("title", "Zoom Out") .appendTo(s.$pancontainer) $zoomimages.eq(0).css({left:parseInt($zoomimages.eq(0).css('left'))-magnifyicons[2]-3, opacity:1}) //position "zoom in" image .attr("title", "Zoom In") $zoomimages.click(function(e){ //assign click behavior to zoom images var $zimg=$(this) //reference image clicked on var curzoom=s.curzoom //get current zoom level var zoomtype=($zimg.attr("title").indexOf("In")!=-1)? "in" : "out" if (zoomtype=="in" && s.curzoom==ddimagepanner.maxzoom || zoomtype=="out" && s.curzoom==1) //exit if user at either ends of magnify levels return var basepos=[s.pos[0]/curzoom, s.pos[1]/curzoom] var newzoom=(zoomtype=="out")? Math.max(1, curzoom-1) : Math.min(ddimagepanner.maxzoom, curzoom+1) //get new zoom level $zoomimages.css("opacity", 1) if (newzoom==1) //if zoom level is 1x, dim "zoom out" image $zoomimages.eq(1).css("opacity", 0.7) else if (newzoom==ddimagepanner.maxzoom) //if zoom level is max level, dim "zoom in" image $zoomimages.eq(0).css("opacity", 0.7) clearTimeout(s.statustimer) s.$statusdiv.html(newzoom+"x Magnify").show() //show current zoom status/level var nd=[s.oimagesize[0]*newzoom, s.oimagesize[1]*newzoom] var newpos=[basepos[0]*newzoom, basepos[1]*newzoom] newpos=[(zoomtype=="in" && s.wrappersize[0]>s.imagesize[0] || zoomtype=="out" && s.wrappersize[0]>nd[0])? s.wrappersize[0]/2-nd[0]/2 : Math.max(-nd[0]+s.wrappersize[0], newpos[0]), (zoomtype=="in" && s.wrappersize[1]>s.imagesize[1] || zoomtype=="out" && s.wrappersize[1]>nd[1])? s.wrappersize[1]/2-nd[1]/2 : Math.max(-nd[1]+s.wrappersize[1], newpos[1])] $img.animate({width:nd[0], height:nd[1], left:newpos[0], top:newpos[1]}, function(){ s.statustimer=setTimeout(function(){s.$statusdiv.hide()}, 500) }) s.imagesize=nd s.curzoom=newzoom s.pos=[newpos[0], newpos[1]] }) } } jQuery.fn.imgmover=function(options){ var $=jQuery return this.each(function(){ //return jQuery obj if (this.tagName!="IMG") return true //skip to next matched element var $imgref=$(this) if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined ddimagepanner.init($, $imgref, options) else if (this.complete){ //account for IE not firing image.onload ddimagepanner.init($, $imgref, options) } else{ $imgref.bind('load', function(){ ddimagepanner.init($, $imgref, options) }) } }) } jQuery(document).ready(function($){ //By default look for DIVs with class="pancontainer" var $pancontainer=$('div.pancontainer') $pancontainer.each(function(){ var $this=$(this).css({position:'relative', overflow:'hidden', cursor:'move'}) var $img=$this.find('img:eq(0)') //image to pan var options={$pancontainer:$this, pos:$this.attr('data-orient'), curzoom:1, canzoom:$this.attr('data-canzoom'), wrappersize:[$this.width(), $this.height()]} $img.imgmover(options) }) }) </script> <div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:400px; height:400px;"> <img src="http://4.bp.blogspot.com/-kzyW32gw1_4/T1zZLUfNyHI/AAAAAAAAA2M/8ZljabDLYes/s1600/a211.jpg" /></div> <div style="text-align: right;"> <a href="http://dhecun.blogspot.com/2012/11/script-slide-terbaru-1.html" target="_blank" title="Script Slide Terbaru"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>
My Facebook
Kirim SMS Gratis
Download Gratis
Contact on Email
Follow this blog
RSS