Showing posts with label ccs. Show all posts
Showing posts with label ccs. Show all posts

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
BY krystal ♥ 0 comments
Labels: , ,

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 :


BY krystal ♥ 0 comments
Labels: ,

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
BY krystal ♥ 0 comments
Labels:

Thursday, 3 November 2011

How to add scroll back to the top image


Upgraded blogger ; Design -> Page Elements -> Add gadget -> Paste the code given into  "HTML/JavaScript".

Classic blogger ; Template -> Find "</title>" Paste the code given BELOW/UNDER </title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var scrolltotop={
   setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="图画 URL/IMAGE URL" style="filter:alpha(opacity=70); -moz-opacity:0.1; " />',
    controlattrs: {offsetx:40, offsety:70},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
                mainobj.$control.css({width:mainobj.$control.width()})
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

Preview and then save . 

Remember to delete 图画 URL/IMAGE URL and then replace it with your own image ^^
BY krystal ♥ 0 comments
Labels: , ,

Saturday, 31 July 2010

How to add back to the top (CCS)

the errors & differences :
the image or text would align in the middle only and only could be found when you scroll until the bottom of the page.

dashboard -> template -> edit html

copy this code below and the paste it below <head> *it can be found at the top of the codes*

<p><a name="formtop1"></p>
copy this code.

<p><a href="#formtop1"><b><img src="direct link" ></b></a></p>
paste it before this code below. *it can be found at the end of the codes*

</html>

<b> ...... </b> is the font style if you want normal font style you do not need to add this code.
<img src="direct link" > this is what you want your picture/ text to be.

it should look like this :-

with image :
<p><a href="#formtop1"><b><img src="http://dl10.glitter-graphics.net/pub/79/79730l4d8pj2fyu.gif" ></b></a></p>

with text :
<p><a href="#formtop1"><b>Click here to return to the top of this page</b></a></p>

OR
this code:
<p><a href="#formtop1"><b><img src="direct link" ></b></a></p>
can be added anywhere you like ^^ example : in the end of the posts (:
Photobucket
BY krystal ♥ 0 comments
Labels:
Subscribe to: Posts (Atom)