Cara Membuat Show/Hide Chatbox Pada Blogger Dengan Jquery

Kali ini saya mau share cara buat chatbox di blogger kita agar bisa di show dan hide dengan menggunakan Jquery. caranya mudah aja:

1.Login Blogger » Design
2.Klik Add Gadget » HTML/Javascript
3.Copy dan pastekan kode dibawah ini

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});

});
</script>
<style>
#panel {
height: auto;
background:#000;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzy382WY_2uEHzLGtowNPoLBsi4-0L9qnvwHLN4bsK34JM5L6jdmWnYyHIhJXf9hkPUJCkmtbQxMFOAAu4utbvSKhgTocIlWr95LoZ0hkEbqmMTCCLEpWMfb-eTFhzmXJRAOEOG6D4NqA/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLa2u8N_5HSEFhNBFArcCj8GQ4T1zr9ZDtz9-wkNs2l1auqr7XpKvS4OlrRcAMpmMeTGrw27__W7IagK5LNDSPs-RFqoucuTm8ReFWNX7gth8f2WFkc7tCqumiOBLvQR8AUR_JcOMmaOU/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div id="panel">

KODE CHAT BOXMU

<center><a href='http://dok-edok.blogspot.com/2012/01/cara-membuat-showhide-chatbox-pada.html' target='_blank'>Get This Widget<br />(Show/Hide Chatbox)</a></center>
</div>
<p class="slide"><a href="#" class="btn-slide">Chatbox</a></p>

4. Ganti tulisan berwarna MERAH di atas dengan kode chatboxmu
5. Tekan save dan selesai

Read More

Dasar-dasar HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.





contoh HTML:

<html>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>
Disini penulisan informasi Web
</body>
</html>

langsung saja download tutorial e-booknya di bawah ini

download e-book dasar-dasar HTML

Read More

Identifikasi Kode Warna HTML (HTML COLORS CODE)

Dengan bagan warna Kode HTML dinamis, Anda bisa mendapatkan kode HTML untuk warna dasar.
Klik pada warna apapun untuk mendapatkan kode warna HTML





Identifikasi Kode Warna HTML


Tulis kode warna HTML (tanpa menggunakan tanda #) lalu klik UPDATE

Read More

cara membuat label menjadi flash animasi (Tag Cloud)

caranya membuat label menjadi flash animasi atau yang biasanya di bilang tag cloud ini terbilang cukup mudah









Pertama, pilih Tata Letak > Edit HTML
Kedua, centang Expand Template Widget
Ketiga, cari kode di bawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

Keempat, kalau yang di atas udah ketemu, copy script di bawah ini dan paste di bawah script yang kamu cari tadi

<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/ruangsc/enes/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://twitter.com/satriyoputra'>@satriyoputra;/a> Distributed by <a href='http://dok-edok.blogspot.com/2011/05/cara-membuat-label-menjadi-flash.html'>dok-edok;/a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "240", "300", "7", "#333333");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Selamat Mencoba dan semoga berhasil..

Read More