Three Great News from Dynamic Drive

Lama tidak mengunjungi web script berikut ternyata sudah update lumayan banyak. Tiga kabar (three news) sekaligus menggebrak dunia perscriptan dihadirkan kali ini bersama Beben Koben si bloglang anu ganteng kalem tea b-) Pertama-tama bagi sobat suka dengan menu bergaya lava website Dynamic Drive mengeluarkan . Menu full stylish oke punya kan. Kita comot satu dari Dynamic Drive Help Forums mengenai jQuery marquee banner. Bisa bolak balik marquee disini jika kita mengarahkan cursor mouse kekiri/kekanan :D Trik disini metode yg dipakai adalah Add a Gadget ► HTML/Javascript ;)) Biar cepet, mudah, kalau mau delete tinggal remove kan bos :))

jQuery Banner Marquee

<script type="text/javascript" src="https://sites.google.com/site/jquery9/crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>

<script type="text/javascript">
marqueeInit({
 uniqueid: 'mymarquee',
 style: {
  'padding': '2px',
  'width': '100%',
  'height': 'auto'
 },
 inc: 9, //speed - pixel increment for each iteration of this marquee's movement
 mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)

 moveatleast: 4,
 neutral: 150,
 savedirection: false
});
</script>

<div class="marquee" id="mymarquee">

<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>

<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>

<a href="http://URL-BLOG.blogspot.com/">
<img border="0" src="URL-IMAGE.jpg" alt="" />
</a>

<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" />
</a>

<a href="http://URL-BLOG.blogspot.com/" title="your-title">
<img border="0" src="http://URL-IMAGE.jpg" alt="" />
</a>

</div>

Jika mau memakai langsung beserta script crawler.js monggo. Kalau mau menghosting sendiri, berikut scriptnya yg sudah dipress
Terdapat settingan didalam script pemanggil, silahkan atur² menurut kebutuhan. Seperti 3 opsi gerakan mouse itu tuh ;)

Terakhir yg ketiga nih mengenai HTML5 Notepad. Global fungsinya yaitu menuliskan sebuah pesan diboard dengan menggunakan hard disk pengguna sebagai metode penyimpanan. Isi tidak akan berakhir (hilang) sampai dihapus secara eksplisit oleh kita. Cocok buat private messages gitoooh sob, kalo urgent ;)) :D

Note: In IE8+ and FF3+, the script only works when viewed online (http web address)

HTML5 Notepad

Download first right click, and select "Save As":

Jika sobat mendownload murni bawaan dynamic drive web css maka full CSS3 atribut yg digunakan. Sama Beben si bloglang ganteng kalem tea direset menjadi CSS standar yg mana nanti sobat dapat mengkreasikannya sendiri. Okay :-bd

<style>
.notepad {
border:1px solid gray;
background:#ffe;
width:280px;
padding:7px 10px;
position:absolute;
cursor:move;
}
.notepad  h3 {
margin:5px 0;
}
.notepad .close {
float:right;
font-weight:bold;
text-align:center;
display:block;
cursor:pointer;
}
.notepad form {
margin:0;
padding:0;
}
.notepad form fieldset {
margin-top:1em;
}
.notepad form legend {
font-weight:bold;
}
.notepad form input[type=text] {
width:98%;
}
.notepad  form textarea {
width:98%;
height:150px;
}
.notepad form a.control {
text-decoration: none;
padding: 2px 20px;
text-align:center;
margin:5px 0;
display:block;
margin-top:5px;
font:bold 13px Verdana;
border: 1px solid #778;
color: #fff;
border:1px solid gray;
background: #006600;
}
.notepad form a.delete {
background: #444;
}
.notepad:before { /*top left tape effect*/
content: '';
position:absolute;
width: 120px;
height: 25px;
}
</style>

<script language='javascript'>

/***********************************************
* HTML5 Notepad- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var notepad={padHTML:'<div class="notepad"><span class="close" title="Close Notepad">X</span><h3 class="title">Note Pad</h3>'
+'<p>Use the below to save snippets of commonly entered text for quick reuse later. The contents are saved perpetually until deleted by you.</p>'
+'<form><!--noteHTML goes here--></form>'
+'</div>',noteHTML:'<fieldset><legend>Note Title (optional):</legend>'
+'<input type="text" /><br />'
+'<b>Note content:</b><br />'
+'<textarea></textarea>'
+'</fieldset>'
+'<a href="#" class="control save">Save</a>',zIndex:10,loadpad:function(id,position){var $=jQuery
function loadnote(){var notevalue=largestorage["notepad_"+id]
if(notevalue){notevalue=notevalue.split("|||")
$pad.find('.title').text(notevalue[0])
formfields.$subject.val(notevalue[0])
formfields.$content.val(notevalue[1])}}
function savenote(){$pad.find('.title').text(formfields.$subject.val())
largestorage["notepad_"+id]=formfields.$subject.val()+"|||"+formfields.$content.val()}
function positionpad(x,y){var windowmeasure={w:$(window).width(),h:$(window).height(),left:$(document).scrollLeft(),top:$(document).scrollTop()}
var paddimensions={w:$pad.outerWidth(),h:$pad.outerHeight()}
var xpos=(x=="center")?windowmeasure.w/2-paddimensions.w/2:(x=="left")?10:(x=="right")?windowmeasure.w-paddimensions.w-25:parseInt(x)
var ypos=(y=="center")?windowmeasure.h/2-paddimensions.h/2:(y=="top")?10:(y=="bottom")?windowmeasure.h-paddimensions.h-25:parseInt(y)
xpos=xpos+windowmeasure.left
ypos=ypos+windowmeasure.top
$pad.css({left:xpos,top:ypos})}
if($('div#'+id).length==1||!window.localStorage&&!window.globalStorage){$('div#'+id).css({display:'block',visibility:'visible'})
return}
var $pad=$(this.padHTML).appendTo(document.body).attr('id',id).css({zIndex:this.zIndex})
var pad=$pad.get(0)
$(this.noteHTML).appendTo($pad.find('form:eq(0)'))
var padpos=position||['right','center']
positionpad(padpos[0],padpos[1])
var formfields={$subject:$pad.find('input[type="text"]:eq(0)'),$content:$pad.find('textarea:eq(0)')}
var buttons={$save:$pad.find('a.save')}
var largestorage=window.localStorage||(window.globalStorage?globalStorage[location.hostname]:{})
$pad.bind('keydown cut paste',function(e){var target=e.target
var $target=$(target)
if(target.tagName=="TEXTAREA"||(target.tagName=="INPUT"&&target.type=="text")){if(buttons.$save.css('opacity')!=1)
buttons.$save.css({opacity:1}).attr({title:'Click to Save Contents'}).text('Save')}})
$pad.bind('mousedown',function(e){var $startpos=$pad.offset()
$pad.css({zIndex:notepad.zIndex++})
$pad.bind('selectstart',function(){return false}).css('MozUserSelect','-moz-none').find('input, textarea').bind('selectstart',function(e){e.stopPropagation()}).css('MozUserSelect','text')
$pad.data({dragdata:{startpos:{left:$startpos.left,top:$startpos.top},startmousepos:{left:e.clientX,top:e.clientY}}})
$(document).bind('mousemove.dragpad mouseup.dragpad',function(e){if(e.type=="mousemove"){var startpos=$pad.data('dragdata').startpos
var startmousepos=$pad.data('dragdata').startmousepos
var dx=e.clientX-startmousepos.left,dy=e.clientY-startmousepos.top
$pad.css({left:startpos.left+dx,top:startpos.top+dy})}
else if(e.type=="mouseup"){$(document).unbind('mousemove.dragpad mouseup.dragpad')}})})
$pad.find('.close').bind('click',function(e){var padid=$(this).parents('.notepad').attr('id')
notepad.unloadpad(padid)})
$pad.find('form').bind('mousedown',function(e){e.stopPropagation()})
buttons.$save.click(function(e){buttons.$save.css({opacity:0.5}).attr({title:'Contents Saved'}).text('Saved')
savenote()
e.preventDefault()})
loadnote()
if(largestorage["notepad_"+id])
buttons.$save.css({opacity:0.5}).attr({title:'Contents Saved'}).text('Saved')},unloadpad:function(id){jQuery('div#'+id).remove()}}
</script>

<script language='javascript'>
jQuery(function($){ //on document.ready
 notepad.loadpad('mynotepad1') //load "mynotepad1" when document loads
})
</script>

<a href="javascript:notepad.loadpad('mynotepad2')">Mynotepad2</a>

Perhatikan script yg diberi warna (paling bawah bos) Pilihlah salah satu saja.

<script language='javascript'>
jQuery(function($){ //on document.ready
 notepad.loadpad('mynotepad1') //load "mynotepad1" when document loads
})
</script>

Ini akan membuka board setelah beres loading blogsite sobat.<a href="javascript:notepad.loadpad('mynotepad2')">Mynotepad2</a>
Yang ini via klik dulu baru muncul deh boardnya. Sok mau mana yg dipakainya deh, terserah agan agin :P Good luck, and demikian three great news from dynamic drive.
Happy salma \m/