Add A Simple Css Bump Effect To Your Blogs Images

.gobump img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; border-radius: 5px 5px 5px 5px; } .gobump img:hover { margin-top: 12px; } ...

Read More

Mutiple Color Menu

main-nav-wrap{margin: 19px 0 0 0 }.ie8 .main-nav-wrap{margin:0} .main-nav li{ float:left;width:12.5%; position:relative; -moz-transition:background-color 0.4s ease; -o-transition:background-color 0.4s ease; -webkit-transition:background-color 0.4s ease; -ms-transition:background-color 0.4s ease } .main-nav li:hover{ background:rgba(0,0,0,0.4); -moz-transition:background-color 0.1s ease; -o-transition:background-color 0.1s ease; -webkit-transition:background-color 0.1s ease; -ms-transition:background-color 0.1s ease -moz-border-radius:3px...

Read More

Transform Image

.item-thumbnail img { -moz-transition: all 0.5s ease 0s; border: 1px dashed #666666; border-radius: 5px 5px 5px 5px; height: auto; padding: 3px; width:auto; } .item-thumbnail img:hover { border:5px solid #BBB; -moz-transform: scale(1.3) rotate(-5deg) ; -webkit-transform: scale(1.3) rotate(-5deg) ; -o-transform: scale(1.3) rotate(-5deg) ; -ms-transform: scale(1.3) rotate(-5deg) ; transform: scale(1.3) rotate(-5deg) ; } ...

Read More

How To Change Colors of Selected/Highlighted Texts

::selection {background:#cc0000;color:#ffffff;} ::-moz-selection{background:#cc0000;color:#ffffff;} code::selection {background: #333333;color:#ffffff;} code::-moz-selection {background: #333333;color:#ffffff;} pre::selection {background: #44ceff;color:#ffffff;} pre::-moz-selection {background: #44ceff;color:#ffffff...

Read More

test1........2.........3.....

https://plus.google.com/103848748687273434558/about?rel=author .post-archive { line-height: 1.2; text-align: center; width: 100%; margin: 30px 0 60px; } .post-archive h4 { text-align: left; margin:0 0 10px 2px; } .post-archive td { width: 31%; padding: 5px 2% 20px; background-color: #f3f3f3; } .post-archive h6 { margin: 0 0 5px; } .post-archive a:visited { color:#ccc; } .post-archive span { position: relative; color: #fff; background-color: #999; padding: 5px 15px; -moz-border-radius: 3px; border-radius:...

Read More

Popup Java Script --

Untuk Melihat Halaman ini dengan Sempurna Silahkan download browser di bawah ini Download Chrome Download Mozila $(document).ready(function() { $('a.login-window').click(function() { //Getting the variable's value from a link var loginBox = $(this).attr('href'); //Fade in the Popup $(loginBox).fadeIn(300); //Set the center alignment padding + border see css style var popMargTop = ($(loginBox).height() + 24) / 2; var popMargLeft = ($(loginBox).width()...

Simple sticky by CSS for your blog posts

<!-- .sticky { padding: 0 20px 20px 20px; border: 1px solid #DDD; border-top: none; border-left: none; width: 160px; min-height:150px; float: right; margin: 15px 0 15px 15px; background-color: yellow; font-size:16px; font-style:italic; line-height:1.5em; color: darkRed; } .sticky div{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdbjKSiBfcXkF-hwLIlYF2YAjKuos-n12S2-DOqdIDqfg_z3jTLNNsrV4rbFo43uNNv_uJw9AY9R0j_FtC9AKNLxkizO6eqouYBjpG2mNyiCX2Zlx3r9dwu_dYZClWYskxiekj_q98HRbP/s47/pin-right.png) no-repeat; width: 47px; height:...

Read More

CSS Page Flip

#magazine{ width:800px; height:400px; } #magazine .turn-page{ width:400px; height:400px; background-color:#ccc; } Page 1 Page 2 Page 3...

Read More

TEST POST

...

Read More

CSS3 Ribbon Menu

.ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border:1.5em solid #FF1493; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; } .ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; float:left; height:3.4em; overflow:hidden; } .ribbon span { background:#FF1493; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background,...

Read More

gallery

.gallery { margin: 45px auto 0; width: 600px; } .gallery a { display: inline-block; height: 135px; position: relative; width: 180px; -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } .gallery a img { border: 8px solid #fff; cursor: -moz-zoom-in; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; ...

Read More

Amazing Dynamic Stack Effect For Blogger

Card 1 Name: Toucan Age: 5 Size: 50 cm Weight: 600 g Food: Fruit Toucan lives in southern and central America and loves to fly around Card 2 Name: Fox Age: 3 Size: 70 cm ...

Read More

PieceMaker 2 Flash Slider For Blogger

You need to Upgrade your Flash Player to version 10 or newer. var flashvars = {}; flashvars.xmlSource = "http://dl.dropbox.com/u/27675057/piecemaker.xml"; flashvars.cssSource = "http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.css"; flashvars.imageSource = ""; var attributes = {}; attributes.wmode = "transparent"; var params = {}; params.allowscriptaccess = "always"; params.allownetworking = "all"; ...

Read More

Animated Cubes

.frame {position:relative; width:500px; height:400px; margin:50px auto;} .cube { position:absolute; height:135px; width:122px; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -moz-animation-duration:5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration:5s; } .frame .one {left:0; top:50px; z-index:20} .frame .two {left:244px; top:50px; z-index:10} .frame .three {left:122px; top:115px; z-index:10;} .frame .four {left:122px; top:115px; z-index:60;} .frame...

Read More

css menu

#navigation { background: #353535; /* Old browsers */ background: -moz-linear-gradient(top, #353535 0%, #2c2c2c 50%, #222222 51%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(50%,#2c2c2c), color-stop(51%,#222222)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,...

Read More

Page Style

body { background: #1fe011; background: -moz-radial-gradient(center, ellipse cover, #1fe011 0%, #299a0b 98%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1fe011), color-stop(98%,#299a0b)); background: -webkit-radial-gradient(center, ellipse cover, #1fe011 0%,#299a0b 98%); background: -o-radial-gradient(center, ellipse cover, #1fe011 0%,#299a0b 98%); background: -ms-radial-gradient(center, ellipse cover, #1fe011 0%,#299a0b 98%); background: radial-gradient(center, ellipse cover, #1fe011 0%,#299a0b...

Read More