jQuery Banner Marquee
Jika mau memakai langsung beserta script crawler.js monggo. Kalau mau menghosting sendiri, berikut scriptnya yg sudah dipress crawler.js<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>
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
Perhatikan script yg diberi warna (paling bawah bos) Pilihlah salah satu saja.
.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><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/
Tidak ada komentar:
Posting Komentar