Friday 30 December 2011

Customise scroll bar

Upgraded blogger;


1. Design -> Edit HTML
2. Copy and this code
::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;
}
::-Webkit-scrollbar-thumb {
background-Color: #999999 ;
}
3. Paste it above 
]]></b:skin>


Classic blogger; 


1. Template
2. Copy and this code
::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;
}
::-Webkit-scrollbar-thumb {
background-Color: #999999 ;
}
3. Paste it under
<style type="text/css"> 

--------------------------------------------------------------------------------------------------------------------


If you want your scroll bar to have rounded corners add
-moz-border-radius: 5px;
border-radius: 5px;

under ::-Webkit-scrollbar-thumb { 

It should look like this :

::-Webkit-scrollbar {
height: 12px;
width: 12px;
background:  #ffffff ;}
::-Webkit-scrollbar-thumb {
-moz-border-radius: 5px;
border-radius: 5px;
background-Color: #999999 ;}

--------------------------------------------------------------------------------------------------------------------

If you want to add border you will have to use this code.  (this would include to all your scroll bars)
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
height:  12 px;
display: block;
background-color: #999; border:1px solid #ffffff;}::-webkit-scrollbar-track-piece {
background-color:#999;
}
::-webkit-scrollbar-thumb{
background:#ddd;border:1px solid #ffffff;}::webkit-scrollbar-thumb:vertical {
background:#fff);
border: 0px solid #ffffff;
border-right:none;
}
::webkit-scrollbar-thumb:horizontal {
background:#fff;
border: 0px solid #ffffff;
border-bottom;
}

(Red is where you change the colours of the scroll bar)

Colour codes can be copied from here ; http://justanothertutorial.blogspot.co.uk/2011/11/colour-code.html

Thursday 29 December 2011

Snow effect

Upgraded blogger ; Design -> Edit html. Now search for the code </head> (Ctrl + F) On top of the </head> code, paste this code :


Classic blogger ; Template ->  Now search for the code <style type="text/css">  (Ctrl + F) On top of the <style type="text/css"> code, paste this code :


Wednesday 28 December 2011

Smooth tabbed menu in jQuery

This is only for classic blogger . 
Click for demo.

STEP 1: Paste this code BELOW<head> OR </title>

<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(){
$(".menu > li").click(function(e){
switch(e.target.id){
case "news":
//change status &amp;amp;amp; style menu
$("#news").addClass("active");
$("#tutorials").removeClass("active");
$("#links").removeClass("active");
//display selected division, hide others
$("div.news").fadeIn();
$("div.tutorials").css("display", "none");
$("div.links").css("display", "none");
break;
case "tutorials":
//change status &amp;amp;amp; style menu
$("#news").removeClass("active");
$("#tutorials").addClass("active");
$("#links").removeClass("active");
//display selected division, hide others
$("div.tutorials").fadeIn();
$("div.news").css("display", "none");
$("div.links").css("display", "none");
break;
case "links":
//change status &amp;amp;amp; style menu
$("#news").removeClass("active");
$("#tutorials").removeClass("active");
$("#links").addClass("active");
//display selected division, hide others
$("div.links").fadeIn();
$("div.news").css("display", "none");
$("div.tutorials").css("display", "none");
break;
}
//alert(e.target.id);
return false;
});
});

</script>





STEP 2: Paste this code BELOW <style type="text/css">

@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
background: #fff;
line-height:14px;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
margin:0pt;
cursor:default;
overflow: hidden;
}
html,body{
height:100%;
text-align: center;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}
/******* GENERAL RESET *******/
/******* LOGO *******/
#logo{
margin-top: 1em;
display: block;
}
/******* /LOGO *******/
/******* MENU *******/
#container{
margin: 7em auto;
width: 400px;
}
#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin-right: 5px;
margin-bottom: -1px;
}
#container ul.menu li{
font-weight: 700;
display: block;
padding: 5px 10px 5px 10px;
background: #efefef;
margin-bottom: -1px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;

z-index: 1;

}
/******* /MENU *******/
/******* CONTENT *******/
.content{
margin: 0pt auto;
background: #efefef;
background: #fff;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 48px;
padding: 10px 10px 10px 52px;
font-size: 32px;
}
/******* /CONTENT *******/
/******* NEWS *******/
.content.news h1{
background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
display: block;
}
/******* /NEWS *******/
/******* TUTORIALS *******/
.content.tutorials h1{
background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
display: none;
}
/******* /TUTORIALS *******/
/******* LINKS *******/
.content.links h1{
background: transparent url(images/links.jpg) no-repeat scroll left top;
}
.content.links{
display: none;
}
.content.links a{
color: #5f95ef;
}
/******* /LINKS *******/





STEP 3: Paste this code BELOW </head> OR </style> 

<body>
<div id="container">
<ul class="menu">
<li id="news" class="active">News</li> 
<li id="tutorials">Tutorials</li> 
<li id="links">Links</li> 
</ul>
<span class="clear"></span>

<div class="content news"> 
<h1>Latest News</h1> 
<ul> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic001demoji_366194decoojp.gif " alt="-" /> Boobles: First theme on Themeforest released!</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic001demoji_366194decoojp.gif " alt="-" /> Cokidoo becomes official</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic001demoji_366194decoojp.gif " alt="-" /> plusmusica.com private beta invitations</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic001demoji_366194decoojp.gif " alt="-" /> yensdesign.com 2.0 launched!</li> 
<ul> 
</div> 


<div class="content tutorials"> 
<h1>Latest Tutorials</h1> 
<ul> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic013demoji_416577decoojp.gif " alt="-" /> Top 10 free fonts for professional design</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic013demoji_416577decoojp.gif " alt="-" /> Create an amazing music player using mouse gestures &amp;amp;amp;amp;amp; hotkeys</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic013demoji_416577decoojp.gif " alt="-" /> Boobles: First theme on Themeforest released!</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic013demoji_416577decoojp.gif " alt="-" /> Creating AJAX websites based on anchor navigation</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic013demoji_416577decoojp.gif " alt="-" /> Fast Tip: Create your personal blog to promote your self</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic013demoji_416577decoojp.gif " alt="-" /> How to make a brilliant mysql forum database from scratch</li> 
<ul> 
</div> 


<div class="content links"> 
<h1>You may visit</h1> 
<ul> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic014demoji_666399decoojp.gif " alt="-" /> <a href="http://www.plusmusica.com/ ">www.plusmusica.com </a> - Online jukebox!</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic014demoji_666399decoojp.gif " alt="-" /> <a href="http://www.cokidoo.com/ ">www.cokidoo.com </a> - Awesome startup! :)</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic014demoji_666399decoojp.gif " alt="-" /> <a href="http://www.cokidoo.com/ ">www.pixelartgames.com </a> - Do you want pixel art games? ;)</li> 
<li><img src="http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic014demoji_666399decoojp.gif " alt="-" /> <a href="http://www.dmsconsulting.es/ ">www.dmsconsulting.es </a> - Great guys</li> 
<ul> 
</div> 

</div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js "></script>
<script type="text/javascript" src="tabs.js"></script>
</body>
</html>





PREVIEW and then SAVE.

You can edit the menu in STEP 3. Red is for the title names, Blue is the Content.


Credits:yensdesign

Chatbox icons


http://3.bp.blogspot.com/-fqez7R1Uhik/Tvqym9D6J0I/AAAAAAAAFHs/kEmJiPFxgl8/s1600/bikkuri01.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5YXnPwAhisTXWaSYux4ehjb1SL89ZLea22wyv3kvDzgvJuST5UT_JaHKvWOJYqEYuCE_kAJh8iOLC08yaBdfinrBt9cTcpizQIuMEs5Q-K_w2FyltzkNw6rq0R1DTcpMmL1O6XWhNvvYX/s1600/bye02.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSEEBVKjiL9fnI4BT8HIB6kcIBV4NmxFp7StGJ9vGL4f7HC54jpouSs6gOXOryCaCD-fKMTK5wyztKNJhfkJGMqzLYE1nEfPNU2Jk7Ilmw-uLCJlP_iDquuJXBTYoorkC-v-ULyvNmbcG/s1600/bye03.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AmtR3Ab2ChjqWzd6eYi7giXq119AolQgcN8L_Os64orGA3OVKUqsqjTMymjeyk1YWC3wU0nlyHYennVqY9EqadIEQE5QX3qbXSXpjlj_U1Uc1b_AcTUJW9tw45jxORGcVHvEgivJZ6Qs/s1600/bye06.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipjD3BeWv_BVM1DWI3keZ1yKZmG0zjA6uqRWN5Vdunhtp6Jqk-z_m0-W6g1xJ2W2EPIQQlgubUJo8Vzs0lCLsjpZ4nbIQ_uMryGo7J8pAlXySgaI002CyNi3VQWOH_gdVBUtMzYGeox5YO/s1600/ga-n01.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmwO0n6gBUa8LghX5uiW3E5r7B1YfUtvGECFBxJ09iRvJIOiQz6Bfd8yqxQOqoktLG3YRYNhCgRumxijz8jbVbkn_ona6GirV4Ll8bUCYJrjqbLMr2BPsOdJD2Er6892BQ0ZJl25vqg1V/s1600/ga-n02.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVnGHMPhhbWn0wTIp-80AjWpSa2dTMWiuY4cMRbByPpIYoiMsdtHBtGlZe8yMvbxtYxyz7ft3E36uL_o2v7LTjDPrCoTlfHx2R-ItJor-WbbTrYofg2FEAxZLSGUAqRJhHSHwTYTaUoU1G/s1600/hanaji03.gif

http://2.bp.blogspot.com/-jWRsWEj7zgo/TvqyuvtOhqI/AAAAAAAAFIs/4UbWqrqRc_g/s1600/hatena01.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw57Zq4ya9X2hslI9bLO7PSxhCWv9ed4z7EJDAwPzaMwLmvVqFalcjrf-A1ZTUZAukkFs9HltKWUXRMKLiulAfhpU4IC1zwcMEt5LUK3JIjmBblzwfgliqU1rhHK7Hme3y8-VbZd6hyJb3/s1600/hatena03.gif

http://2.bp.blogspot.com/-kIQORog_XRQ/TvqywksMxRI/AAAAAAAAFI4/OFwhgCT4jg4/s1600/ikari01.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidYJD-1_gXEpBFIbGOZC0IUJBlHuLWK_uaw4Xw1E2-27jqegA4Bzg9NYD5HyklGjv15Bkkgc0CWsdF8qrqTpjJCeq0b8rF_wgLq8elPe4cqy24POswiRsk7OCSOyEgUoqLs2_rlTGDruaW/s1600/ikari03.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6E29HlYW2HV6a1Ve-aouNKn5IsYTo1TBSOC6ZIwBUCQKF6qrXCgtioEHQrPYJJ7EkyLd4ONB3QkpHGi34dQAXJSYCC4z8LwCfDn1E_EU7XlOH3w5LB1GFxHBmyvB8lazMbyJPPoJkQBe2/s1600/ikari04.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQaRsW1ZSeLO2RRNNm2Jmw2n42yh1foRTx3nrlR32Wxgyg22U0RUGjwrIzV-EMWRIuf3RdUDNtwV1UMZpoT9ymM3rEfFySzDPgmFn4PTiDlXTeCfIRvOJq85MnHHx5PgitMOMhoVk0aHY-/s1600/kusyami01.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqYhjjYBq3YVdI0YCgp6SsXevsprlsSzh1QS7OwVra5Fq98-KSzPxH3YjZbdwYGNjZkTNhw_-b74X7P8fDNdsf8_rRGWxzB_SMMk9RlzwWqmYMd3600tB1iXjMPhkmekyMqM25BC0p5UK/s1600/naku02.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6lXm1avyql0Mia8pCj7-MuK0-08AYVOTCnzC0dkdE9ffMFKBjYm6E2rs3WyhPhTL8URKLTjcTI61RTAESt6l0jlvLGAROKfyy7g546LmF_gWwbLeGRSXb7747zgCPnXseD8PlJMIGnp6L/s1600/onegai03t.gif

http://3.bp.blogspot.com/-Adh7lMsGhXs/Tvqy4IiTPgI/AAAAAAAAFJ4/SFkkV0eGjHg/s1600/w01.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ryE2CJwdUeoBPRqBSZ_0ojplUXGeqdLeczxm3i868KlFqGAjJKvpURI3VF8ZReDldB8dItRP2R96Zfd_GkUn-EaV6EGWt2TWuG6vla4IceVWjet6kbzknHcH3tiCIGu9zucFcucs9C8T/s1600/w02.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCLK3JKSrlhwPcNl4-0bsE5coNXpHa7SEO_cHJc6xXdulsyUxZuNgSaaMsrXBHYGC5E94DIyohyHq3x1mxXz3R4B9kNz99D_q9ZC-VVUzTK-REw1J-3AWoFMeLoMR7DstpZ-IetoDHio7Y/s1600/w04.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmr21m-mdXGuRx17VMfT6j_EISM92uxLuxMFx1HcpZJB1r_YrSLVH9Nz2_69g60CH9ADoteAi1qQjhtvR94Ro_NoOIkly3F2pDlPLflyWQMaHUZ36LA8xkHEjrhtTp-vkhllRcLzvjt3y/s1600/w05.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Af66Zs9lKoGNcH1ClTdJsGjQKZZW6qkS9wWOTG-T_AsamXiDTRcxtWQsUNaT1T5JibFK_WlpLpfmq3do0TCaa1G5gzIcB8NzrK8WuOKg2gM9hktTh4S3E7STUKZo8SiJ5kMt65OMsiKl/s1600/wink01.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zgc4hw1ORAh88_m66xWGSXsf0Pa4Hr-bgOswBxkCvu4zoz_KN4cHGdeuuuzZ5bAEqshubzsc8rhCOobmadyxL40ohJNOUwZOYLJ-papYqqSFOcCAQXlVnvCQxRuWYGtJauzr1FfbxSdw/s1600/zzz01.gif

credit魚兒

Sunday 18 December 2011

Japanese emoticons/日本符号表情


得意/Proud                <( ̄︶ ̄)>  
滿足/Satisfy                  ( ̄ˇ ̄) 
沒睡醒/Half asleep       ( ̄﹏ ̄)
被打一巴掌/Slapped    ( ̄ε(# ̄)
無言/Silent                     ( ̄. ̄)
無奈/Helpless            ╮( ̄▽ ̄)╭
裝傻/Acting innocent    ( ̄▽ ̄)~*
驚訝/Surprised              (⊙ˍ⊙)
發現/Realised               ( ̄. ̄)+
驚嚇/Shock                Σ( ° △ °|||)︴
冷/Cold                         ( ̄▽ ̄)"
沒辦法/No point        ╮(╯▽╰)╭
貓咪臉/Cat                 (= ̄ω ̄=)
疑惑/Doubts                ( ̄3 ̄)a
不/No                           (>﹏<)
懷疑/Suspect                (→_→)
睏/Sleepy                  ( ̄o ̄) . z Z
崇拜/Worship            m( _ _ )m
我想想/Thinking            (ˇˍˇ)
生氣/Angry              <( ̄ ﹌  ̄)>

小眼睛/Mini eyes
( ・ˍ・) (・ˍ・*) (p・_q) (〃・o・〃) (*^・_・)  (。・ˍ・。)  (*・0・) (・ε・●) (。・ω・) (。・д・。) (・∀・) (/ˍ・、) (・□・、*) (・-・。) (・▽・。) (・_・。)
(・O・。) (ノ△・。) (@・ˍ・) (*・・*) 人(・ε・;)  (・ o ・) (・ェ・o) (′・∀・『)

瞇瞇眼/Squinting eyes
(*  ̄ー ̄) ( ̄ー ̄〃) (@ ̄ー ̄@) (*  ̄︿ ̄) (* ̄∇ ̄*) <(ˍ ˍ*)>
( ̄(●●) ̄) ( ̄・・ ̄) (ー∀ー) ( ̄o ̄) ( ̄、 ̄) (* ̄△ ̄*) ( ̄へ ̄) ( ̄□ ̄) ( ̄~ ̄;) (。-ˍ-。 ) ( ̄ε ̄;) ( ̄┬ ̄;) ( ̄∀ ̄) (ノへ ̄、) (* ̄ro ̄) (ー人ー) (* ̄m ̄)

緊閉眼/Wink or closed eyes
(><) (;><) (>_<) (>.<) (>o<) (>▽<) (>O<) (o>▽<) (>◇<)  (>▽<) (;>△<) (>з<) (o>ェ<) (>д<) (>皿<) (>_<、) (/_<。) (>。;) (>。ヘ) (ノ_<) (>。☆) (>y<;)

小狗嘴/Puppy
(-ω- ) (+ω+) (*ω* ) ( ^ω^) (;ω;) (。ω。) (『ω′) (・ω・=) ( ̄ω ̄)
(〃ω〃) (≧ω≦) (。・ω・) (=・ω・=) ( >ω<) (′・ω・`) (/ω\) (/ω・\)
(/・ω・\) (ΘωΘ) (ΦωΦ)

<( ̄︶ ̄)>      满足且得意/Satisfied or proud
<( ̄︶ ̄)/      满足并且伸出手表示赞同/Agree
<(@ ̄︶ ̄@)>    满足地脸红/Blush
(# ̄▽ ̄#)      害羞/Shy
\( ̄︶ ̄)/      抱抱/Hug
b( ̄▽ ̄)d      竖起双手拇指说好/Thumbs up
╰( ̄▽ ̄)╭      眉飞色舞/Joy or thrill
( ̄︶ ̄)↗       出发吧/Start the journey
○(* ̄︶ ̄*)○    吃饱睡好/Eat fully and sleep peacefully
╮(╯◇╰)╭      啾~啾~亲一个/Kiss
╭(′▽‵)╭(′▽‵)╭(′▽‵)╯    GO!
( ̄▽ ̄)~■□~( ̄▽ ̄)         干杯/Cheers
<( ̄︶ ̄)><( ̄︶ ̄)><( ̄︶ ̄)>  当我们同在一起/When we're together
 (┬_┬)        流泪/Fall tears
(>﹏<)        痛苦/Pain
 〒▽〒          真命苦/Life is bad

万岁.真棒.开心~/Happy
≧▽≦y (/≧▽≦/) (≧▽≦)y (/≧▽≦)/~┴┴ (≧▽≦)(@)

(≧3≦)/ (≧ω≦)/ o(≧ω≦)o o(≧o≦)o ˋ( ° ▽、° )

o(≧v≦)o ┴┴~(≧▽≦)/~┴┴ ≧□≦○

惊讶.吃惊~/Surprised

︽⊙_⊙︽ (⊙_⊙) (@口@) Σ(@) Σ(⊙▽⊙"a

(@[]@!!) ㄟ(≧◇≦)ㄏ( ̄ε(# ̄) Σ( ° △ °|||)︴


不爽.生气~ /Angry
(*-.-)
 Σ(  ̄□ ̄;)
(/"≡ _ ≡)/~┴┴
(#-.-)
 (╬ ̄皿 ̄)凸


credit:maymay
Chinese was translated to English by google translate.