Kode HTML,Java script,untuk blogspot

Kode script yang telah saya kumpulkan semoga dapat di pakai oleh rekan Blogger
Perhatian Kode ini di tujukan buat Blogger Pemula yang masih Butuh.
Ini kodenya:


1. Cara membuat gambar zom dan berputar

ni scrpinya letakkan kode ini diatas kode ]]</b:skin>
.post img{-o-transition:all 1.5s ease;-moz-transition:all
 1.5s ease;-webkit-transition:
all 1.5s ease}.post img:hover{-o-transform:scale(1.2)
 rotate(360deg) translate(0px);-moz-transform:scale(1.2)
 rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg)
 translate(0px);-o-transition:all 1.5s ease;-moz-transition:
all 1.5s ease;-webkit-transition:all 1.5s ease}

Cara membuat link bertabur bintang
letakkan scrip dibawah ini di atas kode </head>
ni dia scripnya
<style>
a:hover { text-decoration:blink; background:url(http://4.bp.blogspot
.com/-A7M9Y087VyU/TOEGx2SguCI/AAAAAAAABGw/gTzKReIhj_0/s1600/str4.gif); }

2. Buat link bergoyang
letakkan scrip
ini di atas kode</head>kamu

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});</script>
</style>

3. Scrip Untuk  Negara Visitor Blog Kode widgetnya:

<div><script src="http://www.widgeo.net/geocompteur/geocompteur.
php?c=geoall&id=2117842&adult=0&cat=astro&fonce=&claire="></script><br />
<noscript><a href="http://www.widgeo.net">widget</a></noscript>
<a href="http://www.widgeo.net"><img alt="widget" border="0"
 src="http://www.widgeo.net/img/logopm.png" /></a></div>

4. Kode Spasi Html:
<p style="line-height: 50px;">Tex.Anda..</p>

5. BUKU TAMU embed letakkan di widget.
BUKU TAMU BUKU TAMU
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.
cbox.ws/box/?boxid=647622&amp;boxtag=cabx5e&amp;sec=main" marginheight="2"
 marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-647622"
 style="border:#000000 1px solid;" id="cboxmain7-647622"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?
boxid=647622&amp;boxtag=cabx5e&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no"
 allowtransparency="yes" name="cboxform7-647622" style="border:#000000 1px solid;border-top:0px"
 id="cboxform7-647622"></iframe></div>
</div>
<!-- END CBOX -->

 Embed diatas  Ini di pasang
di dalam Kode ini : left hiden Chat box:

<!-- left hidden chatbox by http://www.m-azka.com/ START -->
<style>
#hcl {
position:fixed;top:100px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {height:100px;width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgr-aGvbLRODgy09jxd-cwP1qLrIt68vHJpUpsvsd40WvAI6gtaZVOJwU1yNFJRX1DoG9moKuYDa1j_4TrAOTb4IDn_kTp7yQzATHOYctgK0tFra93XYn1uTE9IjybgP-9Axgm_1PSDZE/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent"><!-- KODE SHOUTMIX ANDA DISINI -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></a></span>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left hidden chatbox by http://www.m-azka.com/ END -->



Right Hidden Chatbox

<!-- right hidden chatbox by http://www.m-azka.com/ START -->
<style>
#hcr {
position:fixed;top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {height:100px;width:30px;
float:left;
cursor:pointer;
background:url('http://b.imagehost.org/0611/buku-tamu.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent"><!-- KODE SHOUTMIX ANDA DISINI -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></a></span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://www.m-azka.com/ END -->
6. Pasang Like Facebook
Ini Embed codenya di pasang setelah <body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Embed ini dipasang dimanapun
<div class="fb-like-box" data-href="http://www.facebook.com/asmuribae" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>


7. Pans page Tersembunyi di blog

Copy kode dibawah dan letakan datas kode </head>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

cari tataletak
tambah gadget HTML java scrips:

    <script type="text/javascript">
    //<!--
    $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().
animate({right: "-250"}, "medium");}, 500);});
    //-->
    </script>
    <style type="text/css">
    .w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent
!important;display:
 block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
    .w2bslikebox div{border:none;position:relative;display:block;}
    .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
    .w2bslikebox span a{color: #808080;text-decoration:none;}
    .w2bslikebox span a:hover{text-decoration:underline;}
    </style><div class="w2bslikebox" style=""><div>

    <iframe src="http://www.facebook.com/plugins/likebox.php?href=    URL PAGE ANDA    &amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;
connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px;
 width: 245px;background:#fff;"></iframe><span><a href="http://tutorialuntukblog.blogspot.com/2011/10/tutorial-sembunyikan-fb-fan-page-di.html">
Tutorial Here</a></span></div></div>

Keterangan :
Perhatikan Tulisan URL PAGE ANDA ganti Dengan URL Fans Page Facebook anda (Contoh URL Fans Facebook :http://www.facebook.com/asmuribae: lihat gambar dibawah)
Sekarang Paste kode diatas pada box HTML/JavaScript yang sudah anda pilih tadi
Klik simpan

8. Tanggal kalender Widget Top Right
code:<script type="text/javascript" src="http://widgetfree.com/js/clock05_widget.js"></script><script type="text/javascript">position({position:"righttop", link01:
"<a href=www.ilbiribino.it>agriturismo il biribino</a>", link02:"<a href=http://www.italycerca.com>geo ricerca turismo aziende</a>", link03:"<a href=
http://www.scambio-link.net>scambio link</a>", link04:"<a href=http://www.webmastergratis.it>risorse gratis per webmaster</a>", link05:"
<a href=http://www.negozioonline.biz>negozio online</a>", link07:"<a href=http://www.autismo-cure-cause.org>autismo cure e casuse</a>",
 link09:"<a href=http://www.guestmap.it>geo ricerca agriturismi hotel beb</a>", link11:"<a href=http://www.3giorniamedjugorje.it>3 giorni a medjugorje</a>",
 link12:"<a href=http://www.virusvisits.com>visite gratis sito</a>", link13:"<a href=http://www.agriturismi-umbria.net>agriturismi umbria</a>",
link14:"<a href=http://www.beb-umbria.net>beb umbria</a>"})</script><noscript><a href="http://ilbiribino.it/">Agriturismo il Biribino</a>
<a href="http://widgetfree.com/">Widget Free</a></noscript>
copy sebelum tag </body>

9. Fan page Facebook plugin

letakkan setelah <body>
kode ini
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

10. kode faacebook flugin

<div class="fb-like-box" data-href="http://www.facebook.com/asmurbae?skip_nax_wizard=true"
data-width="292" data-height="180" data-colorscheme="dark" data-show-faces="true" data-stream=
"true" data-header="true"></div>

11. Kotak Scroll
<div style="overflow:auto; width:50px; height:80px; padding:10px; border:1px solid #999999;">
<li><a Kode link teman </a></li>
<li><a Kode link teman </a></li>
</div>

Read more: http://infosinta.blogspot.com/2012/04/cara-mudah-membuat-kotak-link-teman-di.html#ixzz2Dp2b8nd8

12. daftar dropdown:
 <select name="selectionField">
  <option value="JABAR" >Jawa Barat -- JABAR </option>
  <option value="JATIM" >Jawa Timur -- JATIM</option>
  <option value="JATENG" >Jawa Tengah -- JATENG</option>
  <option value="KALTIM" >Kalimantan Timur -- KALTIM</option>
</select>

13. Berikut adalah kode script kotak scroll:

Kotak Scroll Dengan Latar Belakang Transparans.

Isi Kotak scroll anda di sini sesuai dengan keinginan anda dan anda dapat merubah lebar dan tinggi kotak scroll sesuai dengan keinginan anda serta besar font juga bisa anda rubah, pkoknya sesuaikan dengan tempat anda memasang kotak scroll.
Kodenya:

    <div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">
    Isi Kotak scroll anda di sini sesuai dengan keinginan anda.
    </div>


14. Kotak Scroll Dengan Latar Belakang Berwarna:
Isi Kotak scroll anda di sini sesuai dengan keinginan anda dan anda dapat merubah lebar dan tinggi kotak scroll sesuai dengan keinginan anda serta besar font juga bisa anda rubah, pkoknya sesuaikan dengan tempat anda memasang kotak scroll.
Kodenya:

    <div style="height:90px;width:160px;overflow:scroll;background-color:#67F152;">Isi Kotak scroll anda di sini sesuai dengan keinginan anda 'background-color' property.</div>


15. Kotak Scroll Dengan Latar Belakang Gambar:

Anda bisa menggantikan kode gambar latar belakang dan besar font sesuai keinginan anda serta warna tulisan silahkan anda atur supaya tulisan tampak jelas terlihat di atas gambar.
Kodenya:

    <div style="height:220px;width:325px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">Anda bisa menggantikan kode gambar latar belakang dan besar font sesuai keinginan anda serta warna tulisan silahkan anda atur supaya tulisan tampak jelas terlihat di atas gambar.
    </div>


16. Kotak Scroll Horizontal:

Isi Kotak scroll anda di sini sesuai dengan keinginan anda dan anda dapat merubah lebar dan tinggi kotak scroll sesuai dengan keinginan anda serta besar font juga bisa anda rubah, pkoknya sesuaikan dengan tempat anda memasang kotak scroll.
Kodenya:

    <div style="border:1px solid black;width:200px;height:100px;overflow-y:hidden;overflow-x:scroll;">
    <p style="width:250%;">
    Isi Kotak scroll anda di sini sesuai dengan keinginan anda.
    </p>
    </div>


Keterangan: Teks Dan Gambar serta lebar dan tinggi pada kotak scroll bisa anda rubah sesuai dengan keinginan anda.


Sumber : http://www.infojadul.info/2012/03/cara-membuat-kotak-scroll-pada-blog.html#ixzz2DpjJumfq

Demikianlah kode scrip yang penting di blogspot untuk membuktikan efek setiap kode tersebut silakan di coba di blog anda

semoga bermanfaat bagi kita semua...