My Tutorials Blog

Tutorial 10 - Auto Hide Chatbox

Mahukan shoutbox macam dekat blog ni tak? :77:

Haha, comel kan

Btw. Dia ade dua pulihan code. Sama ade korang nak SHOUTBOX atau SHOUTMIX.

Dashboard --> Design --> Page Elements--> Add gadget --> HTML/JAVA SCRIPT

Paste kan code bawah ni.

<style type="text/css">
    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}
    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('http://i1023.photobucket.com/albums/af355/abuinayat/Tab.png') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #000000;
    background: #FFFFFF;
    padding:10px;
    }
    </style>
    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent">

YOUR SHOUTMIX CODE HERE

    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    Close    </a>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

<style type="text/css">
    #gb{
    position:fixed;
    top:50px;
    z-index:+1000;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMuWKf52yYPAqsjms_GjlUsXdOHsG1GRenK6hzVuWALty-H4Z4HQ15Ilds4_haPtcuW-7glUmQzwG5kARiCaJ2zlMmUmmJe_cr5X-dWapLR_feURpjw2GQfnLlliJb_qsaIDkS2V4sbeB6/s320/tabs.png') no-repeat;
    }
    .gbcontent{
    float:left;
    border:2px solid #666666;
    background:#F5F5F5;
    padding:10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent">

YOUR SHOUTBOX CODE HERE

    <div style="text-align:right">
    <a href="javascript:showHideGB()">
    [close]
    </a>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

Gantikan warna purple tuu dengan code chatbox korang

Save, siap.

Tutorial 9 - Page Post

Eheii, new tutos

Suka tak suka tak? Haaa kalau suka cepat lompat duluuu Lol

Hee okay. Saya nak buat tuto pasal PAGE POST Contoh, page post tuuuu ialah :

Dashboard --> Design --> Add gadget --> HTML/JAVA SCRIPT

Paste code dekat bawah ni.

<script>language="JavaScript">confirm("TYPE YOUR WORD")</script>

Taip apa yg awask nak dekat warna purple tu. Nak buat page post ni, senag giler. Tak smpai tiga minit

Tutorial 8 - Cute Cursor

Ehem :P Alahaii lama nya tk update blog ni kan?

Ehee, sorry lah. Okay, kalini saya nak ajar korang pasal Cute Cursor. Haaa, tahu tk cute cursor tu ape? Alahaii, malas ni nak masok kan gambar. Haha, tkpe lah. Cuba awak tengok deka SINI. Haaa, nampak tk cursor tu. Dahulu just arrow en? But now, dekat blog tu, dia jadi bentuk Cherry yg sodap jika dimakan. Cursor bentuk cherry tu sangat comel kan? Heheh :P

Pergi ke laman web Cursor 4-U ni okay

Dekat situ, ade byak cursor yg comel comel. Pilih lah pape corak cursor yg korang suka.

Lepas dah pilih cursor, copy code yg dia bagi tu.

Lepastu, pegi Design --> Page Elements --> Add gadget --> HTML JAVA SCRIPT. :14:

Paste kan code yg korang dah copy tadi, dekat situ.

But the prob is, nanti bler korang dah save, ade banner dia keluar. Fuhh, amat menyakitkan mata sesiapa saja yg memandang. So, kalau nak buang, tengok step ni.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-1/ani177.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/11/07/ani177.html" target="_blank" title="Cute Hello Kitty 2"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cute Hello Kitty 2" style="position:absolute; top: 0px; right: 0px;" /></a>

Delete code warna purple tu. Then save terus :)

Tutorial 7 - Cute Emoticon In Blog

Ahha,tengok gambar dekat atas tuu cepat :119:

So, gambar tu sememang nya ade kaitan dengan tuto kalini. Request from Cik EQN.

Hah, camne nak buat cute emotion dekat post? Bytheway, tuto ni hanya berkesan utk pengguna

je eh, selain tu, tk boleh

jum check it out :65:

Awak kena install Greasemonkey dekat SINI. Camne nk install? Haa, nampak button Add to Firefox en? Sila tekan utk install.

lepastu restart balek firefox korang.

Then, korang boleh download emoticon yg cute cute dekat SINI. Korang search lah cute emoticon ke apa ke. Asal kan yg sama maksud dgn nyeeee.

Lepas tu, kena install lah en. Haa, kan ada button install yg warna hijau tu, click situ.

Make sure korang guna old editor di blogger eh.

Blogger --> Settings --> Global settings --> Old editor --> Save

Tutorial 6 - Background

Haii my lovely blogger

Harini tuto lagi :q:

Heh, mestilah sume tuto en. Dah kata tutorial blog blogger-emoticon.blogspot.com

Lalala, whatever. blogger-emoticon.blogspot.com

Tutorial pasal background. Di request oleh seorang budak comel, Danisya Ardini. *Danisya, aku dah puji kau, cepat cakap time kaseh

* Tapi tapi tapi, tuto background ni hanya utk Template Designer jeh eh? So, goodluck guys!

Design --> Template Designer --> Background

Ikut arahan saya macam dalam gmbar kt bawah ni.

Lepas dah pilih gmbar, klik Apply to blog. Dah siap :D