Followers
Wednesday, August 17, 2011
Tutorial 32 : Autohide Shoutbox plus Float
9:11 AM | Ditulis Daripade
limz |
Edit Post
Dah 2 hari tak update blog..sebab bz sikit..banyak nak share ini..kakakka..
Sebenarnya I tengah sibuk main code html untuk design blog I ini..Nanti tahun 2012, I guna templete itu hehehe..
I buat yang simple je tapi kemas plus PINK!! love pink much much much hehehe..penat sangat nak main code html walaupun dah mula berjinak-jinak menjadi designer huhuu.. poyo je..
Ok mari sini? I nak ajar untuk buat hide chatbox, ala-ala main sembunyi-sembunyi tu..
Blog I ini belum lagi main nyorok-nyorok ye sebab I belum lagi nak menyorok :) So kalau suka sorok-sorok dan menyorok boleh test tutorial ini yep..
1. Seperti biasa, Sign in blogger > Design > Page Elements > Add a Gadget > HTML/javascript
2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..
50px : Semakin tinggi nombor samakin rendah/bawah chatbox anda.
Font yang warna merah : adalah URL image, u all boleh tukar dengan URL sendiri. Kalau guna yang itu pun OK!
100px, 50px : adalah ketinggi dan kelebaran, tukar ikut citarasa ye..
Replacekan MASUKKAN CODE SHOUTBOX DI SINI dengan code chatbox/shoutbox anda.
#F11DF4 adalah warna background..
#666666 adalah warna border..
Lepas itu Save dan tengok hasilnya..
Sekian tutorial untuk hari ini..TATA..komen ye lepas try..
kebanyakkan coding di atas tak berapa nak ngam..ada yang tersentol, terkeluar dan macam-macam masalahkan. Ok kali ini aku nak ajar Auto hide Float SHoutbox. Senang jer.. lagi laju dan cepat macam kilat..
1. Seperti biasa, Sign in blogger > Design > Page Elements > Add a Gadget > HTML/javascript
2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..
3. Tukar benda berikut :
MASUKKAN CODE SHOUTBOX DI SINI : Code shoutbox korang, register sini kalau tak ada.
URL BUTANG CLOSE : url link butang close
URL BUTANG SHOUTBOX : url butang shoutbox
#F70415 : warna border
#FC6A84 : warna background
code warna SINI
penting! kalau nak kotak shoutbox korang cun, pastikan width=300 height=380 untuk coding shoutbox korang.
aku designkan untuk korang, pilih mana yang suka :)
Butang Shoutbox
Sebenarnya I tengah sibuk main code html untuk design blog I ini..Nanti tahun 2012, I guna templete itu hehehe..
I buat yang simple je tapi kemas plus PINK!! love pink much much much hehehe..penat sangat nak main code html walaupun dah mula berjinak-jinak menjadi designer huhuu.. poyo je..
Ok mari sini? I nak ajar untuk buat hide chatbox, ala-ala main sembunyi-sembunyi tu..
Blog I ini belum lagi main nyorok-nyorok ye sebab I belum lagi nak menyorok :) So kalau suka sorok-sorok dan menyorok boleh test tutorial ini yep..
1. Seperti biasa, Sign in blogger > Design > Page Elements > Add a Gadget > HTML/javascript
2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..
<style type="text/css">3. Selepas itu sila ubahsuai benda-benda berikut sebelum SAVE.
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1205.photobucket.com/albums/bb432/fara_idola/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F11DF4;
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">
MASUKKAN CODE SHOUTBOX DI SINI
<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>
50px : Semakin tinggi nombor samakin rendah/bawah chatbox anda.
Font yang warna merah : adalah URL image, u all boleh tukar dengan URL sendiri. Kalau guna yang itu pun OK!
100px, 50px : adalah ketinggi dan kelebaran, tukar ikut citarasa ye..
Replacekan MASUKKAN CODE SHOUTBOX DI SINI dengan code chatbox/shoutbox anda.
#F11DF4 adalah warna background..
#666666 adalah warna border..
Lepas itu Save dan tengok hasilnya..
Sekian tutorial untuk hari ini..TATA..komen ye lepas try..
kebanyakkan coding di atas tak berapa nak ngam..ada yang tersentol, terkeluar dan macam-macam masalahkan. Ok kali ini aku nak ajar Auto hide Float SHoutbox. Senang jer.. lagi laju dan cepat macam kilat..
1. Seperti biasa, Sign in blogger > Design > Page Elements > Add a Gadget > HTML/javascript
2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..
<style type="text/css">
.gb_fixed{
position:fixed;
top:50px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:3px solid #F70415;
background:#FC6A84;
right:10px;
padding:10px;
padding-top:20px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
MASUKKAN CODE SHOUTBOX DI SINI
<div><center><a href="javascript:void(0)" onclick="gb_showHideGB()">
<img src="URL BUTANG CLOSE"/></a></center></div>
</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img src="URL BUTANG SHOUTBOX"/></a>
3. Tukar benda berikut :
MASUKKAN CODE SHOUTBOX DI SINI : Code shoutbox korang, register sini kalau tak ada.
URL BUTANG CLOSE : url link butang close
URL BUTANG SHOUTBOX : url butang shoutbox
#F70415 : warna border
#FC6A84 : warna background
code warna SINI
penting! kalau nak kotak shoutbox korang cun, pastikan width=300 height=380 untuk coding shoutbox korang.
aku designkan untuk korang, pilih mana yang suka :)
Butang Close
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb2luF9pb3PguuQS-agDoqYIG35d_wE54aoOZ930GOJo2qZosaXrs8BrK6K6DvJ7BRcHSI6yZjPVyNV1NQaVz4OOtqhBo7gCXPTdw2O7terXoHWL5ETfoZfZdWX7EUpubxCZy_hAWfu4U/s1600/close.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Q3Lebz1lEP71DHU5wl16n_KxK1kQtmBfAihhfesOZokGNxirCP1gvt9VfaO1vLM4Wdqx8IwGUIyb1F_Lyv7x6tPXh-XTechIhRQjCq4wysKAy3FkqO-BnHf-IXG7Q7b9KjrC9c91uiU/s1600/close2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNrNjCB1msFWRD56YIO3WuuA9V1UIhooE9VOxcROncmLpHtbmHuTqrTdqcgnZ44Ob3lbIMhJBS9b4-vHYh9B3usySVhgkc6N-HC_jMlUZ9yTAeK2gLJH67ktRoCw0mo-JYVG-Z2LlU4nY/s1600/close3.png
Butang Shoutbox
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-2xscs8v1nRGmw0Tl8WdaqNkNSKOZRZJ5NFrR_VG9f14abgiMFvUwFmGhsjWnXIHHTB8CX-YqBQ40u1g9QUHv9kzkrEOMsMoAWpTG1wyLZj8BZEjd_TaqzqC06j3h0F7pZTJlC-FHCLE/s1600/shoutbox1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz12EPgZwoRpfMZQTiqoxDSj4ouWnv5eUh5hoPSwaZJOMI_USWeGP0uSWjKTyxvYxCJkpzLrcjJZihWUYyX5bnNvHjlATPxFSJnNmsTu-jRVL-3P4lif1PMh_NQQMk8JtZIUwP8aMo1dY/s1600/shoutbox2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqwLkbDUju4pH5TQkxEKtluCwSEZR-8S83WZg_XoUwIv5oye_OoO0gUCCZbIszpbut0XeMCJj8uTuV03MTtR0yPf0uygH3xMSNaZKuZdLU9cffbJf0VONtBoaX9dVm5PsfpShOHB8kPl4/s1600/shoutbox3.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitpJZ-FE2Uw6R-h1I_pFpDj4y_tvVrs80ugU0lhGRn4HQt-Hpksk-KECy0G-lxBvG1bghl6rLOug52ztyY-Qg_iTTfX5DN6O4chfjLZv3lGHHiaVFwUXsS9yKmkctkjvbyWLRPxd5NXaE/s1600/shoutbox4.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6r8KJ4i8wzDTjp7W4xULdzqnPeng0L274yWpdFcTaTrwTbUkQ7l1QpYHc1Xpe6lWPZqckkyqylLOy9JhespK4h4SyFDvtyoU4IVcaa5X73gpDJkdy5WDcXcAm3JcO4jdc10tfWUcUdY/s1600/shoutbox5.pngok baii, dah try bagitahu eh :)
Labels:
Tutorial
Subscribe to:
Post Comments (Atom)
Awak Orang Yang Ke
♥Myself♥
Labels
Tutorial
(96)
Read This
Blog Archive
-
▼
2011
(144)
-
▼
August
(97)
- Tutorial 95 : Ambil Url Link Gambar (Photobucket)
- Tutorial 94 : Jquery Tab Menu.
- Tutorial 93 : Cute Profile.
- Tutorial 92 : Icon Comel di tepi Komen.
- Tutorial 91 : Pasang Top commentator.
- Tutorial 90 : Tukar Blog Archive Kepada Calendar.
- Tutorial 89 : Gambar di Footer Blog.
- Tutorial 88 : Delete / Buang Subscribe Atom.
- Tutorial 87 : Buang Underline di bawah Link.
- Tutorial 86 : Animated Link di Hover
- Tutorial 85 : Fieldset Box
- Tutorial 84 : Meningkatkan SEO Blog.
- Tutorial 83 : Simbol Comel-comel
- Tutorial 82 : Fireworks / Bunga Api di Blog
- Tutorial 81 : Snow Ball Effect
- Tutorial 80 : Ucapan "Good Bye" kepada Reader.
- Tutorial 79 : Pasang Button Twitter di Entry.
- Tutorial 78 : Drop-Down Tab Menu
- Tutorial 77 : Text Berkelip-Kelip
- Tutorial 76 : Ucapan Sebelum Komen.
- Tidak Perlu Tahu .
- Tutorial 75 : New Tab Menu Semasa Click Link.
- Tutorial 74 : Delete Navigation Bar
- Tutorial 73 : Follow Guna Gambar.
- Tutorial 72 : Entry/Posting Berpassword
- Tutorial 71 : Double Dashed bila diHover
- Tutorial 70 : Membuat Read More
- Tutorial 69 : Letak Iklan Nuffnang Terapung
- Tutorial 68 : Letak Iklan Nuffnang dalam Post Entry.
- Tutorial 67 : Letak Iklan Nuffnang Atas Header.
- Tutorial 66 : Cara Pasang Button Share Facebook.
- Tutorial 65 : Cara untuk Link kan Tab Menu
- Tutorial 64 : Scroll Box untuk Blog List
- Tutorial 63 : Button Follower dan Dashboard
- Tutorial 62 : Cari Blog ID
- Tutorial 61 : Marquee Codes
- Tutorial 60 : Scroll Box untuk Blog Archive
- Tutorial 59 : Cara Ubah Warna Highlight
- Tutorial 58 : Link Within
- Tutorial 57 : Membuat Double Underline
- Tutorial 56 : Shadow di Tajuk Entry dan Sidebar
- Tutotial 55 : Gambar Membulat Ketika Disentuh
- Tutorial 54 : Link Membesar Semasa Disentuh.
- Tutorial 53 : Bubbles Cursors
- Tutorial 52 : Cara untuk Print Screen
- Tutorial 51 : Membuat Search Engine pada Blog
- Tutorial 50 : Membuat Bloglist di Blog
- Tutorial 49 : Burung Twitter Terbang Melayang
- Tutorial 48 : Cursor Bergerak dengan Perkataan
- Tutorial 47 : Cursor Comel-comel
- Tutorial 46 : Sparkling Cursor
- Tutorial 45 : Automatic Recent Post dan Previous P...
- Tutorial 44 : Membuat Floating Button
- Tutorial 43 : Membuat Wish List
- Tutorial 42 : Membuat Header Transparent
- Tutorial 41 : Menukar Perkataan Older, Newer Pages...
- Tutorial 40 : Senarai Tutorial Adobe Photoshop yan...
- Tutorial 39 : Membuang Border pada header
- Tutorial 38 : Membuat Divider di Sidebar
- Tutorial 37 : Jom pasang Energy Saving Mode pada Blog
- Tutorial 36 : Membuat [ Reply ] pada kotak komen +...
- Tutorial 35 : Meletakkan background pada blog
- Tutorial 34 : Pop up window when open blog
- Tutorial 33 : Background berbeza untuk setiap page
- Tutorial 32 : Autohide Shoutbox plus Float
- Tutorial 31 : Membuat Arrow Back to Top
- Tutorial 30 : Note di Bawah Setiap Post / Entry
- Tutorial 29 : Mencantikkan Comment Box
- Tutorial 28 : Mengambil Code Warna
- Tutorial 27 : Membuat Favicon Sendiri
- Tutorial 26 : Meletakkan Divider di setiap post entry
- Tutorial 25 : Membuat blog bersalji
- Tutorial 24 : Meletak Disable highlight Text
- Tutorial 23 : Meletak Disable Right Clik NON pop u...
- Tutorial 22 : Membuat background di sidebar
- Tutorial 22 : Membuat background di sidebar
- Tutorial 21 : Menambah background dan border di ta...
- Tutorial 20 : Membuat Copyright blog
- Tutorial 19 : Membuat Tab Menu Cantik ( dekorasi s...
- Tutorial 18 : Membuat icon di sebelah Title post/e...
- Tutorial 17 : Membuat icon di sebelah Bloglist
- Tutorial 16 : Mengambil URL Glitter Graphics
- Tutorial 15 : Membuat Title Bar Animated
- Tutorial 14 : Cara Membuat Kotak Blockquote
- Tutorial 13 : Cara Meringankan BLOG
- Tutorial 12 : Memasang butang LIKE untuk Facebook
- Tutorial 11 : Membuat Tab Menu / Blog Tab
- Tutorial 10 : Membuat Link Rainbow/ Pelangi
- Tutorial 9 : Membuat Scroll Bar
- Tutorial 8 : Membuat Menu Bar Link
- Tutorial 7 : Membuat Button di Blog
- Tutorial 6 : Cara Membuat Title Blog Bergerak
- Tutorial 5 : Cara Membuat Floating Up & Home Button
- Tutorial 4 : Meletak Disable Right Click Pop Up Mesej
- Tutorial 3 : Membuat Pages Pada BLOG
- Tutorial 2:Membuat Welcome Blog
- Tutorial 1:Timbang berat blog.
-
▼
August
(97)
Recent Post
Don' t Copy Oke !
Limz. Powered by Blogger.
0 Meh Komen Disini !:
Post a Comment