gubhugreyot : Demo & Tutorial: Javascript

Showing posts with label Javascript. Show all posts

Tuesday, 3 April 2012

Add Emoticon to Blogger Template Designer Comment Box

Komunikasi antar blogger, pembaca atau pengunjung blog memang seringkali terasa tak cukup jika hanya menggunakan kata-kata. Sebuah gambar dalam bentuk emoticon, yang diikut sertakan dalam sebuah komentar, sekalipun hanya berupa sebuah gambar yang tak seberapa besar (icon), namun justru bisa menjadi "ungkapan bagi sebuah ekspresi jiwa/perasaan" yang jika dituliskan perlu begitu banyak kata atau kalimat.

Agar pengunjung atau siapapun pemberi komentar dapat dengan mudah menyisipkan satu atau beberapa buah emoticon, seorang pemilik blog dapat menambahkan sebuah javascript yang disertai kode css dan xHTML. Ketiga elemen kode HTML ini akan membentuk sebuah fungsi yang memberi layanan berupa kemudahan bagi pengunjung untuk menambahkan emoticon pada sebuah komentar. Dengan menuliskan kode yang telah ditentukan, sebuah gambar emoticon akan ditampilkan bersamaan dengan diterbitkanya komentar.

Kode CSS :

img.myGRemo{width:24px;height:18px;padding:2px;border:1px solid #666;background:#ddd;float:left;box-shadow:2px 2px 2px #000;margin:2px;}
#GRemobox{border:2px solid #777;background:#aaa;padding:2px;float:left;width:760px;height:104px;}
.comments{position:relative;}
.comments #GRfloatico{position:fixed;bottom:10px;left:-820px;}
.comments:hover #GRfloatico{left:20%;z-index:999;}
.GRemokode{display:inline-block;width:36px;height:50px;font-size:12px;font-weight:bold;color:#000;line-height:20px;text-align:center;border:1px solid #555;float:left;}

Javascript-1 :

<script src='http://gubhugreyot-javascript.googlecode.com/files/GRemocomment.js' type='text/javascript'></script>

Javascript-2 :

<script src='http://gubhugreyot-javascript.googlecode.com/files/GRemocomment-thumb.js' type='text/javascript'></script>

Cara menggunakan kode :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)". Tunggu beberapa saat hingga sebuah halaman baru terbuka.
Cari dan klik "Edit HTML". Halaman baru yang berisi sebuah box "Edit Template" terlihat.
Lakukan backup template.
- Klik "Download Template Lengkap (Download Full Template)".
- Simpan file template dio folder PC.
- Kembali ke box "Edit Template".
Cari kode ]]></b:skin>.
Copy dan paste kode CSS di atas ]]></b:skin>.
Cari kode </body>.
Copy dan paste javascript-1 di atas </body>.
Klik "Simpan Template/Save Template".
Klik "Expand Widget Template".
Cari kode :
<div class='comment-form'>. Kode seperti ini ada 2 buah.
Copy dan paste javascript-2 di bawah <div class='comment-form'> (kedua-duanya!).
Klik "Simpan Template/Save Template".
Buka blog dan coba hasilnya dengan membuat komentar yang menyertakan emoticon.
Selesai !!!

Saturday, 31 March 2012

Friday, 30 March 2012

Monday, 26 March 2012

Effek Hujan Dhuwit

Effek hujan uang sebenarnya merupakan pengembangan dari effek hujan salju atau snow effect. Untuk merubah salju menjadi bentuk uang anda hanya perlu membuat sebuah gambar baru berbentuk uang kemudian upload melalui boks posting blogger. Gunakan URL hasil upload tadi dengan menempatkannya di javascript. Anda dapat mengganti image dengan berbagai image yang lain dan sebutlah effeknya sesuka anda sesuai dengan image yang digunakan.

Tutorial :
Back to tutorial

Create body background using javascript

Umumnya, membuat atau menambah sebuah background image pada body dilakukan menggunakan kode CSS, namun kali ini kita akan membuatnya menggunakan javascript. Sangat simple dan amat mudah menggunakannya. Letakkan dan simpan javascript di atas kode </body> dan segera buka blog untuk melihat bagaimana javascript ini bekerja. Jika anda tak merubah image yang digunakan sebagai background pada javascript, maka halaman blog anda akan terlihat seperti di blog ini (lihat di sisi kanan dan kiri halaman yang background-nya terlihat seperti dari bahan serat kayu/wood.

Template Tata Letak :

Javascript :

<script type="text/javascript">
if (document.all||document.getElementById)
document.body.style.background="url('https://lh3.googleusercontent.com/-TsO62JV2VfU/T24gYRSDWOI/AAAAAAAAAgs/1R-WamNCKkU/s128/gubhugreyot_wood-01.gif') center repeat"
</script>

Blogger Template Designer :

Javascript :

<script type="text/javascript">
document.write("<style>.body-fauxcolumn-outer .cap-top{z-index:0;opacity:0.0;filter:alpha(opacity=0);</style>");
if (document.all||document.getElementById)
document.body.style.background="url('https://lh3.googleusercontent.com/-TsO62JV2VfU/T24gYRSDWOI/AAAAAAAAAgs/1R-WamNCKkU/s128/gubhugreyot_wood-01.gif') white center repeat"
</script>

Tutorial :
Back to tutorial

Display Menu Icon on hover with javascript & css3

Javascript berfungsi untuk menampilkan icon yang berkaitan dengan menu yang ditampilkan. Animasi yang terjadi ketika cursor diarahkan diatas link menu tercipta berkat digunakannya css3 transition. Sangat jarang menu yang didesain dengan menampilkan icon seperti dalam javascript ini sehingga mungkin saja ini bisa menjadi sebuah pilihan menarik buat anda! Gunakan icon dengan ukuran secukupnya agar daftar menu tetap selalu dapat terlihat dengan sempurna tanpa terganggu penggunaan menu icon.

Friday, 23 March 2012

Image Slider with Fade Effect Transition

Image-1 Image-2 Image-3

Slider dengan fade effect transition ini menggunakan sebuah javascript yang sangat sederhana. Slider memuat 3 buah image dengan sebuah background image yang akan terlihat hanya di saat gallery dibuka. Background image ditampilkan dalam bentuk transparan melalui opacity effect. Dibalik background image disertakan juga satu background animasi gif yang berfungsi membuat efek terang-gelap hingga seakan yang memiliki effek terang gelap adalah image dalam slider.

Javascript :

<script type="text/javascript">
//<![CDATA[
function BGS_GR_blor(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    if (opacStart > opacEnd) {
        for (i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    } else if (opacStart < opacEnd) {
        for (i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
}
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
function BGS_GR_blor(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    changeOpac(0, imageid);
    document.getElementById(imageid).src = imagefile;
    for (i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
        timer++;
    }
}
//]]>
</script>

Kode CSS :

span.controllmu{width:60px;display:inline-block;padding:4px 6px;background:#333 url(http://www.abchoes.com/images/textbg.png);color:#f00;margin:0 0 6px 1px;border:2px solid #777;border-right:2px solid #888;text-align:center;}
span.controllmu:hover{background:#900;color:#fff;}

xHTML :

<div style="float:left;background:#333;padding:4px;margin:5px 15px 5px 0;border-radius:4px;">
<a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh3.googleusercontent.com/-9w_Fiv-PJeQ/T20GncsIQgI/AAAAAAAAAfw/33z3Uc0Vwwg/h340/gubhugreyot_cah-ayu-14.jpg',500)"><span class="controllmu">Image-1</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh5.googleusercontent.com/-8xr4NI5qRSA/T20GlkCNnGI/AAAAAAAAAfo/_dDUGLuVXQc/h340/gubhugreyot_cah-ayu-13.jpg',500)"><span class="controllmu">Image-2</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh6.googleusercontent.com/-lHhUrUcz0ew/T20Gp3gV7WI/AAAAAAAAAf4/zQXIWpv4DQs/h420/gubhugreyot_cah-ayu-11.jpg',500)"><span class="controllmu">Image-3</span></a>
<div id="pics" style="background:url(https://lh4.googleusercontent.com/-Stz6oRyVlgA/T2z8v9rMwdI/AAAAAAAAAfg/LWZluvASP-8/h340/anima-80x10.gif);border:4px ridge orange;width:224px;">
<img style="filter:alpha(opacity=70);opacity:0.7;" id="BGS_GR_blor" src="https://lh3.googleusercontent.com/-z4E25hU20KU/T20GrTS8ytI/AAAAAAAAAgI/X9a3-tkr07k/h340/gubhugreyot_cah-ayu-10.jpg"/>
</div>
</div>

Cara membuat :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
  Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy javascript dan letakkan di bawah ]]></b:skin>
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Gunakan xHTML di box posting atau "Add a Gadget | HTML/Javascript".

Keterangan/Catatan :

Gunakan image dengan ukuran sama. Lebar image 224px.
Jika ingin merubah ukuran image, rubah pula lebar image pada xHTML:
width:224px;
Posisi image slider dapat diatur dengan merubah nilai margin pada xHTML :
margin:5px 15px 5px 0;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «

Wednesday, 21 March 2012

Simple Larva Menu

Larva menu dengan script yang sangat sederhana ini dapat anda gunakan di blogger dengan menyimpan xHTML-nya melalui "Tambah Gadget (Add a Gadget)" yang dpat di akses melalui "Elemen Laman (Page Elemen)". Simpan xHTML pada elemen yang terletak di atas elemen "Blog Post" atau di bawah elemen "header blog". Sesuaikan lebar menu (dengan merubah width) agar menu terlihat rapi. Lebar menu berkaitan dengan jumlah menu yang ditampilkan dan jumlah teks setiap menu. Anda sebaiknya menggunakan nama menu (menu title) yang pendek agar menu yang tertampilkan lebih banyak. Untuk memperpendek setiap menu dapat juga melakukan perubahan pada jenis dan ukuran serta tebal font yang digunakan serta merapatkan spasi setiap menu.

Tutorial :
Back to tutorial

Sunday, 18 March 2012

Trick Membuat Effek Salju - Snow Effect di blog

Yang dimaksud dengan trik membuat effek salju sebenarnya hanyalah perkara sederhana, dimana hanya menyarankan anda untuk menggunakan javascript snow effect yang sudah terupload di file hosting. Dengan hanya memasang sebuah link javascript maka template anda menjadi lebih bersih alias tidak terlalu semrawut karena dijejali banyak javascript.

Di bawah ini sudah tersedia sebuah link javascript snow effect. Silahkan copy dan pastekan di atas tag </body>.

Javascript Efek Salju :

<script src="http://gubhugreyotprojects.googlecode.com/svn/effects/effek-salju.js" type="text/javascript"></script>

Cara pasang :

Login ke Blogger.
Halaman Dasbor/Dasboard :
Klik "Design/Rancangan".
Lanjutkan klik "Edit HTML".
Lakukan Backup Template".
Cari kode </body> dan letakkan link javascript tepat di atanya.
Klik "Simpan Template/Save Template".

Saturday, 17 March 2012

Trik Termudah Pasang Scroll Up & Scroll Down

Javascript scroll up sekaligus scroll down ini merupakan javascript paling sederhana sebagai sebuah auto scroller. Berfungsi sebagai penggulung ke atas dan ke bawah dengan pengaturan jarak (dalam pixel). Scroller dengan pengaturan jarak memberi keuntungan lebih karena memungkinkan kita memanfaatkan javascript ini dalam dua fungsi.

Sebagai auto scroller dengan jarak pendek/terbatas (lebih kecil dari tinggi halaman blog).
Anda dapat mengatur jarak up dan scroll down ini dalam radius kecil seperti misalnya 500px, 700px, 900px atau dengan nilai berbeda yang disesuaikan dengan kebutuhan (misalnya dari bab-1 ke bab-2).
Memfungsikan auto scroller sebagai scroll to top contoll dan scroll to bottom controll. Ketika digunakan untuk fungsi seperti ini kita hanya perlu mengatur jarak gulung auto scroller dengan nilai yang sangat besar yang kira-kira pasti akan lebih dari ketinggian halaman blog (misalnya 50000).

Kode CSS :

<style type="text/css">
.GRfixed_top,.GRfixed_bottom,.GRtop,.GRbottom{
        font:Arial 12px;
        font-weight:bold;
        background:#CCC;
        color:#900;
        text-shadow:2px 2px 2px #888;
        border:1px solid #888;
        padding:3px 4px;
        cursor:pointer;
        opacity:0.7;
        z-index:20;
        filter:alpha(opacity=70);
        transition:0.7s ease-out;
        -o-transition:0.7s ease-out;
        -moz-transition:0.7s ease-out;
        -webkit-transition:0.7s ease-out;
        -ms-transition:0.7s ease-out;
}
.GRtop,.GRbottom{
        display:block;
        margin:15px auto;
        text-align:center;
}
.GRfixed_top,.GRfixed_bottom{
        position:fixed; 
        bottom:0; 
        left:3px;   
}
.GRfixed_bottom{
        left:130px;
}
.GRfixed_top:hover,.GRfixed_bottom:hover,.GRtop:hover,.GRbottom:hover{
        background:#900;
        color:#ddd;
        opacity:1.0;
        filter:alpha(opacity=100); 
        z-index:99;
}
</style>

Javascript :

<script type="text/javascript">
//<[CDATA[
m = 50000
function fixedScrolldown(){
    for (GR = 1; GR <= m; GR++){
        parent.scroll(1,GR);
    }
}
function fixedScrollup(){
    for (GR = m; GR >= 1; GR--){
        parent.scroll(m,GR);
    }
}
n = 1000 /* atur range scroller */
function GRdown(){
    for (GR = 1; GR <= n; GR++){
        parent.scroll(1,GR);
    }
}
function GRup(){
    for (GR = n; GR >= 1; GR--){
        parent.scroll(n,GR);
    }
}
//]]>
</script>

xHTML-1:

<input class="GRfixed_top" type=button value="Scroll to Bottom" onClick="fixedScrolldown()"/>
<input class="GRfixed_bottom" type=button value="Back to Top" onClick="fixedScrollup()"/>

xHTML-2:

<input class="GRtop" type=button value="Ke Bab-2" onClick="GRdown()"/>
Bab-1
Sebelum membahas lebih lanjut tentang jenis-jenis anjing galak yang suka menggigit manusia, dalam bab pertama akan dibahas terlebih dahulu jenis anjing lokal yang paling dibenci orang karena suka makan uang haram. Anjing lokal pemakan uang haram lebih dikenali sebagai anjing koruptor. Mereka selalu berpakaian rapi dan berharga mahal dengan mulut setiap saat berbuih menyuarakan "perangi dan bersihkan korupsi". Masyarakat lebih banyak yang tertipu dengan penampilan anjing-anjing ini dan setiap pemilu datang akhirnya kembali memilih mereka sebagai anggota DPR atau pejabat negara lainnya seperti bupati, gubernur, presiden ... dan ...

Bab-2

Akhir posting/penutup
<input class="GRbottom" type=button value="Back to TOP" onClick="GRup()"/>

Cara membuat : Menggunakan script sebagai button scroll to top controll dan scroll to bottom controll:

Login ke Blogger.
Klik "Rancangan (Design)".
Klik salah satu "Add a Gadget (Tambah Gadget)".
Pilih dan klik "HTML/Javascript"
Simpan seluruh kode kecuali xHTML-2 dalam "Box HTML/Javascript".
Klik "SAVE/SIMPAN"
Buka Blog dan lihat hasilnya.

Menggunakan script sebagai scroller dengan controll jarak (range controll).

Gunakan saat posting dan gunakan seperti terlihat pada xHTML-2
Atur range auto scroller pada javascript (n = 1000) untuk mendapat jarak yang sesuai.

Cara Buat DivTab View dengan Javascript

Javascript tab view ini sangat simple dan dapat digunakan secara langsung di blog tanpa perlu menambah lagi dengan script yang lain. Anda juga tak perlu menyimpan di file hosting. Bersama beberapa kode css, javascript membentuk sebuah fungsi tab view. Tab view juga dibuat tanpa melibatkan satupun background image, sehingga beban loadingnya akan semakin cepat. Dalam desain ini digunakan 5 buah tab, namun demikian jika dikehendaki anda dapat menambah atau mengurangi.

D E M O Tab View:

Javascript-1 :

<script type="text/javascript">
//<[CDATA[
function GRtab_view_aux(m, k) {
    var l = document.getElementById(m);
    var n = l.firstChild;
    while (n.className != "tabs") {
        n = n.nextSibling
    }
    var i = n.firstChild;
    var o = 0;
    do {
        if (i.tagName == "A") {
            o++;
            i.href = "javascript:GRtab_view_switch('" + m + "', " + o + ");";
            i.className = (o == k) ? "Active": "";
            i.blur()
        }
    } while (i = i.nextSibling);
    var p = l.firstChild;
    while (p.className != "FTs") {
        p = p.nextSibling
    }
    var j = p.firstChild;
    var o = 0;
    do {
        if (j.className == "FT") {
            o++;
            if (p.offsetHeight) {
                j.style.height = (p.offsetHeight - 2) + "px"
            }
            j.style.overflow = "auto";
            j.style.display = (o == k) ? "block": "none"
        }
    } while (j = j.nextSibling)
}
function GRtab_view_switch(d, c) {
    GRtab_view_aux(d, c)
}
function GRtab_view_initialize(b) {
    GRtab_view_aux(b, 1)
};
//]]>
</script>

Javascript-2 :

<script type="text/javascript">
GRtab_view_initialize('GRtab_view');
</script>

Kode CSS :

.GRtab_view{
        margin:20px auto;
        text-align:center;
        float:none;
        background:#eee;
        width:356px;
}
div.GRtab_view div.tabs{
        cursor:pointer;
        height:30px;
        overflow:hidden;
        border:4px solid #999;
        float:left;
        width:350px;
        background:#666;
}
div.GRtab_view div.tabs a{
        float: left;
        display: block;
        text-align:center;
        padding:8px;
        vertical-align: middle;
        border: 1px solid #444;
        font-family:Arial;
        font-weight:700;
        font-size:11px;
        text-transform:uppercase;
        color:#eee;
        background:#666;
}
div.GRtab_view div.tabs a:hover{
        background:#900;
        color:#fff;
} 
div.GRtab_view div.tabs a.Active{
        background:#444;
        color:#FF0000;
}
div.GRtab_view div.tabs a.Active:hover{
        background:#555;
        color:#ffff99;
} 
div.GRtab_view div.FTs{
        clear: both;
        text-align:left;
        border:3px solid #888;
        border-bottom-width:10px;
        overflow: hidden;
        background:#888;
        width:350px;
        height:250px;
        margin-top:0;
        font-size:11px;
        font-family:verdana;
        color:#CCC;
        line-height:18px;
        padding:1px;
        background:rgba(0,0,0,0.1);
}
div.GRtab_view div.FTs ul{
        list-style-type:square;
        margin:0;
        padding:0;
        padding-left:15px;
}
div.GRtab_view div.FTs li p{
        margin:0 0 0 4px;
}
div.GRtab_view div.FTs div.FT{
        background:rgba(0,0,0,0.6);
        height:100%;
        padding:10px;
        overflow:hidden;
}
div.GRtab_view div.FTs div.FT div.Fs{}
div.GRtab_view a{
        cursor:pointer;
        color:#F90;
        text-decoration:none;
        padding:2px 4px;
        margin:0;
        text-shadow:1px 1px 1px #000;
}
div.GRtab_view a:hover{
        color:#6FF;
        text-decoration:none;
        background:#F90;
}
div.GRtab_view a.GRview_img img{padding:2px;background:#777;}
div.GRtab_view a.GRview_img:hover{background:none;}
div.GRtab_view a.GRview_img img:hover{
        background:#F90;
}

xHTML :

<div class="GRtab_view" id="GRtab_view">
    <div class="tabs">
        <a>CSS</a>
        <a>Javascript</a>
        <a>Animasi gif</a>
        <a>Music</a>
        <a>Gallery</a>
    </div>             
<!-- ======== Start content ========== -->
<div class="FTs">
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot.blogspot.com/2010/01/tab-view.html" target="_blank">Drop Down Menu</a><p>Dropdown menu css3 ...</p></li>
            <li><a href="http://gubhugreyot.blogdetik.com" target="_blank">Tab View Script</a></li>
            <li><a href="http://tantytm.blogspot.com" target="_blank">Hoizontal Menu</a></li>
            <li><a href="http://lightbox-demo-tutorial.blogspot.com" target="_blank">Opacity Effect Script</a></li><a class="GRview_img" href="http://bgsgr.blogspot.com" target="_blank"><img class="opa" src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/hidden-text-sizer.htmlhtml" target="_blank">Hidden Tex Sizer/a></li>
            <li><a href="Link Text Animation.html" target="_blank">Text Animation</a></li>
            <li><a href="Link Top Bar Script.html" target="_blank">Top Bar Script</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Memotong Gambar.html" target="_blank">Memotong Gambar</a></li>
            <li><a href="Link Photo dari Layar PC.html" target="_blank">Photo dari Layar PC</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Mp3 Barat.html" target="_blank">Mp3 Barat</a></li>
            <li><a href="Link Mp3 Indonesia.html" target="_blank">Mp3 Indonesia</a></li>
            <li><a href="LinkReggae.html" target="_blank">Reggae</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Photo Artis.html" target="_blank">Photo Artis Telanjang</a></li>
<a class="GRview_img" href="Link Photo Artis.html" target="_blank"><img src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
            <li><a href="Link Photo Pemandangan.html" target="_blank">Photo Pemandangan </a></li>
            <li><a href="Link Pakaian Adat Afrika.html" target="_blank">3.Pakaian Adat Afrika</a></li>
        </ul>
    </div>
</div>
<!-- ======== End content ========== -->
</div>

Catatan/Keterangan :

Simpan kode css di atas ]]></b:skin>
Simpan Javascript-1 di bawah kode ]]></b:skin>
Simpan Javascript-2 di atas kode </body>
Gunakan xHTML melalui :
Dasboard » Design (Rancangan) » Page Elements (Elemen Laman) » Add a Gadget
Anda bisa juga menyimpan kode css dan javascript-1 di atas xHTML dan Javascript-2 di bawah xHTMl. Semua dilakukan melalui Add a Gadget.
Panduan lebih detail dapatkan di sini!

Friday, 16 March 2012

Menampilkan Posisi Cursor (mouse) dg Javascript

Mouse Position show sebenarnya bisa dimanfaatkan juga saat melakukan berbagai hal berkaitan dengan blog/web. Dengan posisi mouse yang ditampilkan membuat blogger mengetahui secara jelas setiap titik pada halaman blog. Anda dengan mudah akan mengetahu berapa tinggi header, lebar body (halaman), lebar box sidebar tinggi dan lebar image, lebar border dan beberapa yang lain. Jika kita sedang membuat desain posisi mouse bisa menolong untuk mengetahui seberapa besar tinngi atau lebar yang perlu ditambahkan atau dikurangi tanpa harus selalu "main perkiraan".

Di bawah ini ada sebuah box yang mempunyai lebar dan tinggi tertentu dan dilengkapi padding serta border. Cobalah untuk mengetahui seberapa ukuran border (biru), ukuran width dan height image serta paddingnya (merah). Setelah anda pastikan ukurannya dengan melakukan perhitungan melalui "mouse position', silahkan klik gambar untuk mengetahui benar tidaknya hasil pengukuran yang anda lakukan.

Mouse Position

Tutorial:
Back to Tutorial » Mouse Position Show

Thursday, 15 March 2012

Animated Border Color Script

Javascript Animated border bekerja berdasarkan prinsip flashing dengan menggunakan 2 warna border berbeda. Karena untuk menjalankan fungsi dalam bentuk "id" oleh karena itu dalam 1 posting hanya dapat diterapkan dalam sebuah tag saja. Anda dapat menggunakannya pada tag"p', "div', "span", "a" atau "img". Menggunakan fungsi javascript ini akan membuat border mempunyai 2 warna berbeda sesuai yang ditetapka pada script (bisa anda ganti) yang terlihat secara bergantian dengan durasi waktu tertentu (dapat dirubah). Karena warna border animasi menjadi warna utama border, oleh karena itu ketika anda menambahkan style warna border pada xHTML dia hanya akan terlihat pada saat awal saja.
Contoh:
<img id="GRbyarpet" style="border:5px solid red; ... dst, maka warna merah hanya muncul sekali pada saat awal terbuka dan untuk selanjutnya yang diperlihatkan adalah warna border script (id="GRbyarpet")

Javascript :

<script type="text/javascript">
/* animated border */ //<![CDATA[
var speed = 2000;
function byarpet() {
    var kelapkelip = document.getElementById ? document.getElementById("GRbyarpet") : document.all ? document.all.GRbyarpet: "";
    if (kelapkelip) {
        if (kelapkelip.style.borderColor.indexOf("gray") != -1) {
            kelapkelip.style.borderColor = "orange"
        } else {
            kelapkelip.style.borderColor = "gray"
        }
    }
}
setInterval("byarpet()", speed);
//]]>
</script>

Contoh xHTML :

xHTML :

<img id="GRbyarpet" src="image.jpg" width="..." height="..." style="border:5px solid red;padding:2px;margin:5px 12px 5px 0;float:left;border-radius:4px;" />

xHTML :

<div id="GRbyarpet" style="width:400px;margin:20px 0;border:5px outset;padding:10px;margin:5px 12px 5px 0;float:left;border-radius:4px;">
Content here!
</div>

Cara menyimpan javascript :

Login ke Blogger.
Halaman Dasbor (Dasboard) :
Klik "Rancangan (Design)".
Klik "Edit HTML".
Lakukan "Backup Template".
Cari kode </body>
Copy dan paste-kan javascript di atas kode </body>
Klik "Simpan Template (Save Template)".
Gunakan xHTML dalam posting atau bagian lain blog.
Selesai!

Wednesday, 14 March 2012

Membuat Zona No Select Text - Zona Anti copy Teks

Jika pada umumnya javascript no select, javascript no copy, javascript disable right click, atau javascript anti copy berlaku secara menyeluruh di halaman blog, maka dengan javascript ini anda bisa melokalisir teks pada bagian tertentu saja yang tak dapat di copy.

Pemberlakuan zona anti copy pada teks bisa terjadi karena anti copy diberlakukan dengan menetapkan pada tag dengan "id" tertentu. Dengan cara seperti sekaligus memungkinkan anda untuk secara bebas menentukan sendiri bagian mana yang hendak diberlakukan anti copy (no select). Bahkan, jika dikehendaki seluruh posting dibuat sebagai artikel yang tidak diperbolehkan untuk di copy-paste, anda bisa mewadahi seluruh isi posting dalam tag yang sudah diberi anti copy.

D E M O

Silahkan coba anda copy seluruh posting ini dan anda akan melihat bahwa ada bagian yang terlewati oleh cursor hingga tak dapat di copy.

Javascript :

<script type="text/javascript">
//<![CDATA[
function disableSelection(target) {
    if (typeof target.onselectstart != "undefined") target.onselectstart = function () {
        return false
    }
    else if (typeof target.style.MozUserSelect != "undefined") target.style.MozUserSelect = "none"
    else target.onmousedown = function () {
        return false
    }
    target.style.cursor = "default"
}
var kanggubhugreyot = document.getElementById("GRnocopy")
disableSelection(kanggubhugreyot)
//]]>
</script>

xHTML :

<div id=GRnocopy">
Silahkan coba anda copy seluruh posting ini dan anda akan melihat bahwa ada bagian yang terlewati oleh cursor hingga tak dapat di copy.
</div>

Cara menggunakan no select text:

Login ke Blogger.
Halaman Dasbor (dasboard) » klik "Rancangan (Design)".
Klik "Edit HTML".
Lakukan Backup Template.
Cari kode </body>
Copy dan paste-kan javascript di atas kode tersebut.
Klik "Simpan Template (Save Template)".
Lanjutkan membuat posting dan gunakan xHTML seperti yang terlihat di atas untuk mewadahi teks yang hendak dibuat anti copy.
Lihat hasilnya dengan membuka hasil posting.

Catatan/Keterangan :

Anda bisa menggunakan xHTML anti copy ini di semua bagian blog dan tidak dibatasi hanya di box posting.
Selain tag "div" anda juga bisa gunakan tag lain seperti tag "p" atau tag "span"
Javascript No Select Text dengan 3 "id" berbeda dapat anda dapatkan di sini.

Floating Box with Transparency Effect

Banyak blog atau web yang memanfaatkan floating box semacam ini. Box akan terlihat ketika blog/web dibuka dan muncul dari tempat yang ditentukan, seperti atas, kanan, kri atau bawah. Sebuah button "close" menyertai box ini dan berfungsi untuk melenyapkan box. Berbagai informasi baik berupa penawaran sebuah product ataupun yang lain dapat ditempatkan dalamnya. Anda tak harus menggunakannya untuk hal seperti itu. Ada banyak hal lain yang mungkin bisa ditempatkan dalam floating box, seperti misalnya posting populer yang paling anda andalkan dan banyak orang suka. Ya..., hal kecil seperti ini akan sangat berpengaruh terhadap peningkatan rating.

Panduan BloGGeR dan Tutorial BloGGeR yang sangat spesial untuk membangun dan membuat blog di BlogSPOT sampeyan semua semakin cantik dan pastinya akan membuat banyak pengunjung blog penasaran. Floating Transpaerent Box di desain dengan hanya sedikit javascript tapi mampu memberikan sebuah penampilan berbeda. Sampeyan bisa tambahkan foto ganteng sampeyan atau foto cantik sampeyan biar pada "dlongap-dlongop" dan tak beranjak ke blog lain. Atau mungkin sampeyan mau tawarkan iklan di sini. Iklan pabrik songkel gigi misalnya ... Ha ..... Hooo ... jangan ketawa .... wong aku sendiri jadi ketawa kok .... he ....ha ....ha .... Onde ... Lihat saja demonya dulu, baru nanti pikir mo buat apa.

Tuesday, 13 March 2012

No Right Click Script- Javascript Anti copy

Javascript no right click (disable right click) atau sering juga disebut sebagai anti copy sangatlah sederhana. Javascript ini hanya terdiri dari beberapa deret saja. Kegunaan javascript disable right click atau anti copy adalah untuk membuat klik kanan mouse tak dapat bekerja. Sekalipun tak satupun yang dapat bekerja secara maksimal, karena dengan banyak cara segala conten blog tetap dapat dibuka dan diambil, namun setidak-tidaknya akan sedikit mempersulit bagi mereka-mereka yang belum banyak mengetahui trik mengatasi javascript seperti ini.

Jika anda tertarik untuk menggunakan javascript ini, silahkan buka panduan dan tutorial lengkapnya di sini.

Javascript Anti Copy :

<script type="text/javascript">
//<![CDATA[
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if (navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
function mischandler() {
      return false;
}
function mousehandler(e) {
      var myevent = (isNS) ? e: event;
      var eventbutton = (isNS) ? myevent.which: myevent.button;
      if ((eventbutton == 2) || (eventbutton == 3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//]]>
</script>

Silahkan kode ini disimpan di bawah <head> agar lebih cepat terloading sehingga fungsi no right clik-nya juga cepat bekerja.

Tutorial :

Back to Tutorial » Javascript Disable Right Click

Popup Window Script

Jika anda ingin menampilkan file berkstenti htm, html atau mungkin sebuah blog (.com) di dalam blog anda atau halaman posting dengan cara simpel yang hanya menggunakan sedikit script, anda bisa memanfaatkan popup winsow script. Window baru akan ditampilkan dengan ukuran yang bisa diatur dan bahkan juga disertai beberapa variable pengaturan yang lain. Letakkan dan simpan javascriptnya di antara tag <head> dan </head> kemudian buat sebuah link yang di dalamnya berisi URL yang akan dibuka sebagai window baru.

Demo popup window script

Silahkan anda klik 2 buah link di bawah ini untuk melihat bagaimana sebuah popup window script bekerja. Link yang pertama akan memperlihatkan sebuah file berekstensi html sedang yang kedua akan memperlihatkan kode yang digunakan untuk membuat file pertama.

D E M O - 1 (Popup Window)

D E M O - 2 (Popup Window)

Javascript :

<script type="text/Javascript">
//<![CDATA[
function popup_window(url,w,h){
var width=w;
var height=h;
var from_top=150;  /* Jarak dari atas */ 
var from_left=250;  /* Jarak dari kiri */ 
var toolbar='no'; 
var location='no';
var directories='no';
var status='no';
var menubar='no';
var scrollbars='yes';
var resizable='yes';
var atts='width='+width+'show,height='+height+',top='+from_top+',screenY=';
atts+= from_top+',left='+from_left+',screenX='+from_left+',toolbar='+toolbar;
atts+=',location='+location+',directories='+directories+',status='+status;
atts+=',menubar='+menubar+',scrollbars='+scrollbars+',resizable='+resizable;
window.open(url,'win_name',atts);
}
//]]>
</script>

xHTML :

<a href="javascript: popup_window('http://gubhugreyot.comyr.com/iframe/popup-window-script.html',550,400)">Teks Link</a>

http://gubhugreyot.comyr.com/iframe/popup-window-script.html = URL
550 = width » rubah jika diperlukan.
400 = height » rubah jika diperlukan.
Teks Link = title link

Cara menyimpan javascript :

Login ke Blogger.
Setelah Halaman Dasbor Terbuka, klik "Rancangan (Design)".
Lanjutkan klik "Edit HTML"
Lakukan Backup Template.
Cari kode ]]></b:skin>.
Letakkan javascript di bawahnya.
Klik "Simpan Template (Save Template).
Lanjutkan ke halaman posting dan gunakan xHTML.

How to Create Fixed Popup Tex Box

Fixed Popup Text Box sebenarnya tak jauh berbeda dengan tooltip, hanya pada fixed popup text box tips yang muncul akan selalu berada di tengah-tengah halaman blog. Untuk membuatnya diperlukan sebuah javascript dan beberapa kode CSS serta sebuah xHTML. Anda harus meletakkan xHTML-nya tepat di atas javascript, sehingga secara otomatis peyimpanan harus dilakukan di antara tag pembuka body dan tag penutupnya. Agar lebih mudah lakukan melalui "Add a Gadget".

Fixed Popup Tex Box diaktifkan melalui "onmouseover" dan "onmouseout". Ketika mouse berada di atas link Popup Text Box akan bekerja untuk menampilkan teks debfab posisi di tengah-tengah halaman blog dan akan segera menghilang ketika mouse dilepaskan.

D E M O : Fixed Popup Text Box

Kode CSS, xHTML dan Javascript :

<style type="text/css">
.popup{
        font-family:Arial; /* edit jenis font */ 
        font-size:18px; /*edit ukuran font */ 
        color:#033;  /* edit warna font */   
        background:#eee;  /*edit warna latar box - background */ 
        width:500px;  /* edit lebar box */  
        text-align:justify;  /* edit text-align */ 
        padding:10px 6px;
        font-weight:500;  /* edit tebal huruf */ 
        border:5px double #888;  /* edit border */ 
        border-radius:6px;
        text-shadow:2px 2px 2px #888;
}
#popuptextbox {
        position:fixed;
        top:25%;  /* edit posisi popup text box - vertical */ 
        left:25%;  /* edit posisi popup text box - horizontal */ 
        visibility:hidden;
        z-index:200;
}
</style>

<div id="popuptextbox"></div>

<script type="text/javascript">
//<![CDATA[
var old, skn, iex = (document.all);
var ns4 = document.layers
var ns6 = document.getElementById && !document.all
var ie4 = document.all
if (ns4) skn = document.popuptextbox
else if (ns6) skn = document.getElementById("popuptextbox").style
else if (ie4) skn = document.all.popuptextbox.style
if (ns4) document.captureEvents(Event.MOUSEMOVE);
else {
 skn.visibility = "visible"
 skn.display = "none"
}
document.onmousemove = get_mouse;
function popup(msg) {
 var content = "<div class=popup>" + msg + "</div>";
 if (ns4) {
  skn.document.write(content);
  skn.document.close();
  skn.visibility = "visible"
 }
 if (ns6) {
  document.getElementById("popuptextbox").innerHTML = content;
  skn.display = ''
 }
 if (ie4) {
  document.all("popuptextbox").innerHTML = content;
  skn.display = ''
 }
}

function remove_popup() {
 if (ns4) {
  skn.visibility = "hidden";
 }
 else if (ns6 || ie4) skn.display = "none"
}
//]]>
</script>

Cara Menggunakan :

Buatlah link dalam bentuk seperti ini :

Kode link Fixed Popup Text Box:

<a href="http://gubhugreyot.blogspot.com" onMouseOver="popup('Popup Text Box mempunyai fungsi hampir sama dengan tooltip, hanya pada popup text box, tips akan dimunculkan ditengah-tengah halaman blog. Ini berbeda dengan tooltip yang selalu mengikuti cursor.')"; onMouseOut="remove_popup()">D E M O : Popup Text Box</a>

Monday, 12 March 2012

Create Simple jQuery Carousel Slideshow

* GubhuGReyoT - BloGGerStarS-1 *

prev next

Gadis Jomblo butuh Jodoh...
Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ...
Readmore
Gadis Jomblo butuh Jodoh...
Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ...
Readmore
Gadis Jomblo butuh Jodoh...
Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ...
Readmore
Gadis Jomblo butuh Jodoh...
Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ...
Readmore
Gadis Jomblo butuh Jodoh...
Document Text Sizer-2 digunakan pada dokumen-dokumen tertentu yang memang ingin di beri fasilitas text sizer. Desain Text Sizer juga sedikit berbeda karena dibuat dalam bentuk "Hidden Text Sizer". Controll Text Sizer disertai ukuran font yang berbentuk transparan dan hanya terlihat sebagian saja. Baru saat cursor di atasnya ...
Readmore

Jika anda termasuk salah satu blogger yang sudah menggunakan jQuery untuk beberapa fungsi blog, menambahkan carousel slideshow ini tak akan terlalu menambah beban loading karena javascript yang digunakan tak banyak. Beberapa kode css memang diperlukan akan tepai inipun tak akan terlalu banyak berpengaruh terhadap blog. Menggunakannya pasti akan membuat blog bertambah menarik, disamping tentu saja fungsi utamanya sebagai sebuah slideshow yang berguna untuk menampilkan beberapa image yang dikaitkan dengan posting atau blog lain yang anda miliki.

Buat anda yang selama ini belum pernah menggunakan jQuery, jika mulai saat ini anda mencoba untuk memulai menggunakan, saya jamin bahwa anda tak akan rugi sedikitpun karena masih banyak hal lain yang memberi dukungan terhadap tampilan blog dapat dibuat dengan memanfaatkan jQuery. Ya ... dan ini yang penting! Dalam satu blog/web hanya diperlukan 1 jQuery (jQuery v.1.3.2 s/ v.1.7.1), sementara untuk membuat berbagai desain menarik lainnya hanya dibutuhkan dukungan script yang tak lagi banyak (jQuery plugns).

Untuk membuat slideshow ini anda hanya perlu ke gubhugreyot karena semua tutorial cara membuatnya ada di sana. Silahkan klik link di bawah ini untuk kembali ke tutorial atau membuat carousel slideshow.

Tutorial :

Back to tutorial: Carousel Slideshow

Sunday, 11 March 2012

Hidden Text Sizer

Ini sedikit berbeda jika dibandingkan dengan Text Sizer-1 yang berfungsi untuk merubah ukuran teks di seluruh halaman blog. Hidden text sizer diarahkan untuk bagian bagian tertentu saja (dokumen tertentu). Dengan sebuah id (GRpost) anda bebas untuk menentukan dokumen yang mana yang akan diberi fungsi sizer.

Satu hal lain yang membuat "Hidden Rext Sizer" berbeda adalah pada kode css yang dipergunakan. Penambahan css3 transition membuat text sizer yang tersembunyi akan bergerak secara perlahan memperlihatkan diri ketika cursor diarahkan di atasnya. Anda bisa memahami lebih jelas dengan mencoba fungsi text sizer dan peranan css3 dengan mencoba menggunakan text sizer yang ada pada ujung bawah-kanan halaman.

Menggunakan "Hidden Text Sizer" sangat mudah karena anda tinggal memasukkan dokumen di antara tag pembuja dan penutup dari div dengan id "GRpost".

Contoh cara menggunakan dokumen sizer:

Contoh xHTML :

<div id="GRpost">
Tuliskan teks di sini di antara tag pembuka dan penutup div
</div>

Kode yang digunakan membuat Hidden Text Sizer:

Kode CSS :

<style type="text/css">
.GRsizerfix{
        position:fixed;
        right:-250px;
        bottom:0;
        opacity:0.5;
        filter:alpha(opacity=50);
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
.GRsizerfix:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        z-index:10;right:0;
}
.GRsizecontroll{
        background:#555;
        padding:6px 0;
        width:385px;
        margin:0 auto;
}
.GRsizecontroll span{
        padding:7px 8px 7px 12px;
        margin:0 8px;
        background:#aaa;
        font-size:18px;
        font-weight:bold;
        color:#000;
        text-shadow:2px 2px 2px #888;
}
a.GRsizer_controll{
        font-size:14px;
        font-weight:bold;
        display:inline-block;
        padding:4px 6px;
        margin:0;
        background:#aaa;
        border:5px solid #900;
        border-right-width:1px;
        background:#666;
        color:#fff;
        box-shadow:0 0 4px #eee;
}
a.GRright{
        border-right-width:5px;
}
a.GRsizer_controll:active{color:#888;outline:none;outline:0 solid;}
</style>

Javascript :

<script type="text/javascript">
//<![CDATA[
var tgs = new Array('div', 'td', 'tr', 'a');
var szs = new Array('9pt', '10pt', '11pt', '12pt', '14pt', '16pt', '18pt');
var startSz = 1;

function ts(trgt, inc) {
    if (!document.getElementById) return
    var d = document,
        cEl = null,
        sz = startSz,
        i, j, cTags;
    sz += inc;
    if (sz < 0) sz = 0;
    if (sz > 6) sz = 6;
    startSz = sz;
    if (!(cEl = d.getElementById(trgt))) cEl = d.getElementsByTagName(trgt)[0];
    cEl.style.GRtext_sizer = szs[sz];
    for (i = 0; i < tgs.length; i++) {
        cTags = cEl.getElementsByTagName(tgs[i]);
        for (j = 0; j < cTags.length; j++) cTags[j].style.fontSize = szs[sz]
    }
}
function tsz(trgt, sz) {
    if (!document.getElementById) return
    var d = document,
        cEl = null,
        i, j, cTags;
    if (!(cEl = d.getElementById(trgt))) cEl = d.getElementsByTagName(trgt)[0];
    cEl.style.fontSize = sz;
    for (i = 0; i < tgs.length; i++) {
        cTags = cEl.getElementsByTagName(tgs[i]);
        for (j = 0; j < cTags.length; j++) cTags[j].style.fontSize = sz
    }
}
function resizeShort(short, summary) {
    short.setStyle({
        overflow: 'hidden'
    });
    if (summary) {
        var i = 0;
        var text = summary.innerHTML.stripTags();
        summary.update(text);
        while (short.scrollHeight > short.offsetHeight) {
            i++;
            if (i > 100) break;
            var text = summary.innerHTML;
            summary.update(text.replace(/\W*\w+\W*$/, ''))
        }
    }
}
//]]>
</script>

Cara menyimpan javascript dan kode CSS

Copy dan pastekan javascript dan kode css "Hidden Text Sizer" melalui Add a Gadget yang dapat di akses melalui:
Dasbor » Rancangan (Design) » Elemen Laman (Page Elements).
Panduan cara menyimpan javascript dan kode css melalui Add a Gadget dapat anda baca melalui link di bawah ini:
Panduan : Detail cara tambah gadget, kode css & javascript
Atau anda juga bisa melihat cara membuat Text Sizer-1 :
Panduan Lengkap membuat Text Sizer - 1
Untuk merubah posisi Text Sizer lakukan pada kode CSS:
- right:-250px;
  Untuk mengatur posisi ke kanan dan kiri.
- bottom:0;
  Untuk mengatur jarak dari bawah.
- Gunakan kode seperti pada Contoh xHTML di atas untuk menempatkan dokumen yang akan diperbesar atau diperkecil ukuran teks-nya.
Untuk merubah besaran perubahan font pada fungsi text sizer dapat dilakukan melalui javascript dan xHTML (9pt, 10pt ... dst).

Text Sizer »09 10 11 12 14 16 18

Top Navigation Bar

Tuesday, 3 April 2012

Kode CSS :

Javascript-1 :

Javascript-2 :

Saturday, 31 March 2012

Javascript dan xHTML Tagcloud Flash Animasi:

Friday, 30 March 2012

Kode CSS, Javascript dan xHTML :

Monday, 26 March 2012

Javascript :

Javascript :

Friday, 23 March 2012

Javascript :

Kode CSS :

xHTML :

Wednesday, 21 March 2012

Sunday, 18 March 2012

Javascript Efek Salju :

Saturday, 17 March 2012

Kode CSS :

Javascript :

xHTML-1:

xHTML-2:

Javascript-1 :

Javascript-2 :

Kode CSS :

xHTML :

Friday, 16 March 2012

Thursday, 15 March 2012

Javascript :

xHTML :

xHTML :

Wednesday, 14 March 2012

Javascript :

xHTML :

Tuesday, 13 March 2012

Javascript Anti Copy :

Javascript :

xHTML :

Kode CSS, xHTML dan Javascript :

Kode link Fixed Popup Text Box:

Monday, 12 March 2012

Gadis Jomblo butuh Jodoh...

Gadis Jomblo butuh Jodoh...

Gadis Jomblo butuh Jodoh...

Gadis Jomblo butuh Jodoh...

Gadis Jomblo butuh Jodoh...

Sunday, 11 March 2012

Contoh xHTML :

Kode CSS :

Javascript :

Total Pageviews