BACA>>>> Blog Ini Saya Buat Dengan Gaya Bahasa Saya Sendiri, Jika Kurang mengerti Silahkan Commen, Bertanya Di Facebook atau melalui email di Ilove.merti@gmail.com

CATATAN KODE HTML BLOG

Saya banyak mengumpulkan kode-kode HTML yang sering saya gunakan sebagai bahan penghias blog saya, kode-kode ini saya peroleh dari beberapa blog yang menyediakan berbagai jenis kode html. 
Kode yang saya catat di blog ini semuanya berfungsi dengan baik, bagi kalian yang kurang mengerti, bisa tanyakan langsung pada saya melalui kommentar.
Brikut beberapa kodenya:

  • Membuat tulisan bergerak 
ke kiri
Kode :   <marquee> Bergerak ki kiri </ marquee> 



Bergerak Ke Kiri ke kanan dan ke kiri

Kode : <font face='Arial' color='#FF0000'><marquee behavior="alternate">Bergerak Ke kiri Terus Ke Kanan</font></marquee>



Bergerak Ke Kiri Terus Ke Kanan ke atas
Kode : <center><font face='Arial' color='#000000'><marquee direction="up">KE ATAS</font></marquee></center>
KE ATAS
Jika ingin tulisan bergerak ke bawah tinggal ganti " up " dengan " down"

bergerk zigzag
Kode : <font face='Arial' color='#000000'><marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">ZIGZAG</font></marquee></marquee>



ZIG - ZAG
 zig zag kiri kanan
Kode : <font face='Arial' color='#000000'><marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</font></marquee></marquee>

ZIG ZAG LAGI



Tulisan berjalan dengan gambar.
Kode : <marquee behavior="scroll"><br /> <img src="Url gambar yang akan anda tampilkan" width="110" height="84"><br />Tulisan yang ingin anda tampilkan<br /> </marquee><br />

Tulisan berjalan dengan gambar

Buat kreasi sendiri dengan meng edit. diletakan di html/javascript




  • Icon adres bar blogger
<link href='Link Icon' rel='shortcut icon' type='image/x-icon'/>











Tulisan warna merah diganti dengan link icon yang ingin kita gunakan, pasang kode diatas pada Edit HTML tepat di atas kode </head>




  • Membuat tombol yang bisa di show/hidden pada blogger
Contoh hasil dari ini adalah tombol cheatbox yang ada di kanan layar blog ini. kode ini dipasang di html/javascript tanpa judul

KIRI
<!-- 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/AVvXsEh1VhYJpebunUFECrvR8OijG6qBcJy3mz6b9nvXxwZPKQ7MhXYBwJH9NO4J_WYNBzzqMVqWJc_7sR7_cBxuj9iCvFlut67Zf2b6HjoVO2ahRIrYuuNs3Yo2rcygSjvfgKaEMIV56kYZFBM/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">PASTE KODE SHOUTMIX ANDA DISINI 

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
Get this
<a href=http://www.m-azka.com/2011/02/cara-membuat-chat-kotak-chatting.html target="_blank">
Widget
</a>
and
<a href=http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html target="_blank">
Desaign!
</a>
</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 -->

KANAN
<!-- 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 -->
Get this
<a href=http://www.m-azka.com/2011/02/cara-membuat-chat-kotak-chatting.html target="_blank">
Widget
</a>
and
<a href=http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html target="_blank">
Desaign!
</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 -->



  • Kreasi kursor blog menarik
Bentuk kursor










<style type="text/css">body {cursor:url("http://baykun.byethost15.com/roket.ico"),default}</style>

Hiasan Kursor
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

Kode ini di letakkan di HTML/javascript




  • Buat commen facebook di blog
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a href='http://www.kumpulancara.com/2010/08/pasang-kotak-komentar-facebook-di.html' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0-YXA8iANJ5PK7WcWTTTJBxzplPyRdgQm0bplRBVTL_XYTK6BhmL9yBj3PR5m7JCQ6VPVU0TfFfD5A0LMhhPsuH4XcRvtyw2nF1j-8zl6WmB3lxqAzLAIEYr_jq-2lfBxX8TSsGXngmQ/'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;136575963025211&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'><b> by <a href='http://www.kumpulancara.com/2010/08/pasang-kotak-komentar-facebook-di.html' target='_blank' title='Facebook Comment'>Facebook Comment , Mau ?</a></b></div>

Dipasang di bawah kide ini <data:post.body/> Pada edit html, contreng pada 









Expand Widget Templates

Label: