0 Cara membuat tampilan Blog Archive berbeda dan bergoyang

Cara membuat tampilan Blog Archive berbeda dan bergoyang lebih keren jangan basabasi lagi langsum saja

Dan Cara Masangnya
1.  Seperti biasanya Log In Blog dulu
2.  Klik Rancangan
3.  Klik Edit HMTL
4.  Letakkan kode CSS dibawah ini diatas kode ]]></b:skin>

body {min-width: 926px;}.content-outer, .content-fauxcolumn-outer, .region-inner {min-width: 926px;max-width: 926px;_width: 926px;}.main-inner .columns {padding-left: 0;padding-right: 420px;}.main-inner .fauxcolumn-center-outer {left: 0;right: 420px;/* IE6 does not respect left and right together */ _width: expression(this.parentNode.offsetWidth - parseInt("0") - parseInt("420px") + 'px');}.main-inner .fauxcolumn-left-outer {width: 0;}.main-inner .fauxcolumn-right-outer {width: 420px;}.main-inner .column-left-outer {width: 0;right: 100%;margin-left: -0;}.main-inner .column-right-outer {width: 420px;margin-right: -420px;}#layout {min-width: 0;}#layout .content-outer {min-width: 0;width: 800px;}#layout .region-inner {min-width: 0;width: auto;}p.comment-footer a.bgsGRkomentar{margin: 0 auto;font-size: 18px;padding: 1px 0px;font-family: Serif;display: block;text-decoration: none;text-decoration: blink;width: 200px;text-align: center;background: #aaa;background: #666666;background: -moz-linear-gradient(top, #666666 0%, #cccccc 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#cccccc));background: -webkit-linear-gradient(top, #666666 0%,#cccccc 100%);background: -o-linear-gradient(top, #666666 0%,#cccccc 100%);background: -ms-linear-gradient(top, #666666 0%,#cccccc 100%);background: linear-gradient(to bottom, #666666 0%,#cccccc 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#cccccc',GradientType=0 );color: #660066;border: 1px solid orange;outline: none;border-radius: 8px;text-shadow: 1px 1px 1px #eee;transition: all 0.6ss ease-in-out;-ms-transition: all 0.6ss ease-in-out;-o-transition: all 0.6ss ease-in-out;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;}p.comment-footer a.bgsGRkomentar:hover {background: #996600;color: red;border-color: #6699FF;box-shadow: 0 0 15px #333;}p.comment-footer a.bgsGRkomentar:active {background: #CCCCCC;color: #0000FF;font-size: 16px;}.boxsmsluar{height:184px;width:274px;padding:5px;overflow:hidden;border:3px solid #999;background: #777 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgjaring.png);border-radius:8px;transition:all 1.1s ease-out;-o-transition:all 1.1s ease-out;-ms-transition:all 1.1s ease-out;-moz-transition:all 1.1s ease-out;-webkit-transition:all 1.1s ease-out;background:#555 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/pinkGRlogoH200V94.jpg) top center no-repeat;background-position: 12px 92px;}.boxsmsluar:hover {height:395px;background:#CC9966 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgjaring.png);border-color:#663300;}.boxsmsluar iframe{background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/bgsms2.jpg);border:2px solid #666;border-radius:8px;}.boxsmsluar .boxsmsdalam{overflow:hidden;opacity:0.5;height:76px;margin:0;padding:0;border-radius:8px;box-shadow:-1px -1px 2px #fff, 1px 1px 6px #fff;transition:all 1.8s ease-out;-o-transition:all 1.8s ease-out;-ms-transition:all 1.8s ease-out;-moz-transition:all 1.8s ease-out;-webkit-transition:all 1.8s ease-out;}.boxsmsluar:hover .boxsmsdalam{height:390px;opacity:1.0;transition:all 1.5s ease-in;-o-transition:all 1.5s ease-in;-ms-transition:all 1.5s ease-in;-moz-transition:all 1.5s ease-in;-webkit-transition:all 1.5s ease-in;}.boxsmsluar a{padding:2px 8px;margin:0 auto;display:block;text-align:center;font-family:Verdana;color:red;font-size:16px;font-weight:normal;text-shadow:1px 1px 1px #000;font-weight:bold;border-radius:4px;transition:all 1.5s ease-in;-o-transition:all 1.5s ease-in;-ms-transition:all 1.5s ease-in;-moz-transition:all 1.5s ease-in;-webkit-transition:all 1.5s ease-in;}.boxsmsluar a:hover{color:blue;background:#999;width:150px;text-decoration:none;}#Slideshow1 h2.title{font-size:12px;padding-bottom:0;margin-bottom:0;}.tansisi10eo{transition:all 1.0s ease-out;-o-transition:all 1.0s ease-out;-ms-transition:all 1.0s ease-out;-moz-transition:all 1.0s ease-out;-webkit-transition:all 1.0s ease-out;}.bagatas {display:block;position:relative;margin:-15px 0 8px 0;float: right;color: #FFFFCC;background: #990000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/bgjaring.png);opacity:0.7;text-shadow:0 1px 0 #000;padding:7px 5px 2px 20px;border-radius:4px 3px 3px 22px;border:3px solid #777;cursor:pointer;}.bagatas:hover {color:red;opacity:0.8;background: #aaa url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgButtons-3V31H33.gif) left center repeat-x;border-bottom:3px solid #CC9933;}.bagatas img{position: absolute;top:-850px;left:-800px;width:30px;height:5px;opacity:0;filter:alpha(opacity=0);border:2px solid red;padding:1px solid blue;border-radius:2px;transition:all 6s ease-in;-o-transition:all 6s ease-in;-ms-transition:all 6s ease-in;-moz-transition:all 6s ease-in;-webkit-transition:all 6s ease-in;}.bagatas:hover img {width:125px;top:-50px;left:-150px;height:150px;opacity:100;filter:alpha(opacity=100);border:4px solid #aaa;background: #999;padding:3px;border-radius:12px;transform:rotate(735deg);-o-transform:rotate(735deg);-ms-transform:rotate(735deg);-moz-transform:rotate(735deg);-webkit-transform:rotate(735deg);transition:all 1.2s ease-out;-o-transition:all 1.2s ease-out;-ms-transition:all 1.2s ease-out;-moz-transition:all 1.2s ease-out;-webkit-transition:all 1.2s ease-out;}.clear,.clr{clear:both;margin:0;padding:0;}.posting-author {width:15px;height:19px;float:left;background: url(https://sites.google.com/site/gubhugreyot/images/AvatarGR.png) left center no-repeat;display:block;margin:0;margin-right:8px;border:1px solid #555;border-radius:2px;transition:all 1s ease-in;-o-transition:all 1s ease-in;-ms-transition:all 1s ease-in;-moz-transition:all 1s ease-in;-webkit-transition:all 1s ease-in;}.posting-author:hover{transform:scale(2) rotate(-10deg);-o-transform:scale(2) rotate(-10deg);-ms-transform:scale(2) rotate(-10deg);-moz-transform:scale(2) rotate(-10deg);-webkit-transform:scale(2) rotate(-10deg);}#comment-form iframe{background:#7f9db9 url(http://i48.tinypic.com/2rxd26s.gif) no-repeat bottom right;border:7px solid #eeeeee;padding:5px;font:normal 12pt "ms sans serif", Arial;color:#000000;width:95%;height:250px;}#comment-form iframe:hover{background:#7f9db9 url(http://i48.tinypic.com/2rxd26s.gif) no-repeat top right;border:7px solid #bababa;}#comment-form a{color:#ffffff;}.post-body img.fl, .post-body img.fc, .post-body img.fc, .post-body img.fr{background:rgba(0,0,0,0.4);border-radius:6px;border: 2px solid #555;box-shadow:0 0 10px #000;padding:3px;}.post-body img.fl{float:left;margin:5px 15px 5px 0;}.post-body img.fn, .post-body img.fc{margin:20px auto;display:block;text-align:center;}.post-body img.fr{float:right;margin:5px 0 5px 15px;}.post-body a.tuto, .post-body a.tutorial{text-shadow:0 0 3px #666;font-weight:bold;font-size:14px;color:#930;text-decoration:underline;transition:1s;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;}.post-body a.tuto:hover, .post-body a.tutorial:hover{text-shadow:1px 1px 1px #000;color:#f00;text-decoration:none;}.clear{padding:0;margin:0;width:0;height:0;border:none;font-size:0;clear:both;}.post-body .opening, .post-body .buka{text-align:justify !important;display:block;}.anticopy_left, .anticopy_center{position:relative;float:left;padding:0;}.anticopy_center{float:none;margin:0 auto;padding:0;text-align:center;}.anticopy_left:before, .anticopy_center:before{content:"";padding:5px;height:100%;margin-top:-5px;margin-left:-5px;width:100%;left:0;top:0;position:absolute;}.QOverlay{background-color: #000000;z-index:9999999;}.QOverlay:before, .QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}.QOverlay:before{color:#666;top:350px;content:"Refresh jika loading terlalu lama ....!!!";}.QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}.QLoader{background-color:#CCCCCC;height:1px;}.fade-effect-box-css3{position:relative;width:95%;max-height:400px;background:#fff;overflow:auto;padding:20px 15px;margin:20px auto;border:2px solid #777;border-radius:6px;opacity:0.2;filter:alpha(opacity=20);transition:1s;-o-transition:1s;-moz-transition:1s;-webkit-transition:1s;box-shadow:2px 2px 4px #333;}.fade-effect-box-css3:hover{opacity:1.0;filter:alpha(opacity=100);}.popular-posts ul{margin:0;padding:0 5px 0 5px;}.popular-posts li{margin:0;padding:0;}.popular-posts .item-thumbnail a img{width:40px !important;height:40px !important;border:1px solid #eee;padding:4px;background:#aaa;border-radius:5px;box-shadow:2px 2px 2px #000;margin:0 6px 5px 0;}#PopularPosts1 li {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4wi9P16RVKwN1F_zf0RfI4J68JTmVqJwd3QgOWGnBX6UcjwSY9yB-ZZMxQB2qnCNidU4ozZozopkYzaTQc01gg2qxCdppG1Ag0X6UxcjucIoVTDkxP68mMhbwi3TKqmRvUzo9dBrpAoA/s1600/bg-ticker-popular-posts.jpg) repeat-x;border:1px solid #ddd;}#sidebar-right-2-1{margin-left:0;}.blog-pager{height:30px;padding:8px 10px;}.blog-pager-older-link,.home-link,.blog-pager-newer-link{padding:2px 8px;background:#eee;text-shadow:2px 2px 2px #444;border-radius:4px;border:1px solid #ccc;}.home-link{margin-right:70px;}.pre{padding:5px;width:97%;float:left;background:#09F;border:1px solid #444;border-radius:8px;margin:20px 0 15px 0;}.pre pre{text-align:left;line-height:18px;font-family:"Courier New",Courier,monospace;display:block;padding:20px 25px 15px 10px;color:#036;margin:0;overflow:auto;background:#E6E6E6;max-height:450px;box-shadow:0 0 8px #000;font-size:12px;text-shadow:1px 1px 1px #fff;}.pre pre.wsn{white-space:normal;}.pre pre span,.post-body .pre pre.wsn span{color:#555;text-shadow:2px 2px 2px #888;}.pre h5{font-size:14px;font-family:verdana;text-transform:uppercase;margin:5px 0 10px 0;padding:0;font-weight:500;color:#eee;text-shadow:1px 1px 1px #000;letter-spacing:-1px;text-align:center;}.post-body img {max-width:99% !important;}@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}} @-o-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}} @-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}} @-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}} @-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}} #BlogArchive1_ArchiveList ul.posts li{list-style-type:circle;width:97%;color: brown;}#BlogArchive1_ArchiveList ul.posts li:hover{animation:list_archive_anima 0.4s forwards;-o-animation:list_archive_anima 0.4s forwards;-ms-animation:list_archive_anima 0.4s forwards;-moz-animation:list_archive_anima 0.4s forwards;-webkit-animation:list_archive_anima 0.4s forwards;color:red;}#BlogArchive1_ArchiveList ul.posts li a{text-decoration:none;transition:color 1.5s;-o-transition:color 1.5s;-ms-transition:color 1.5s;-moz-transition:color 1.5s;-webkit-transition:color 1.5s;}#BlogArchive1_ArchiveList ul.posts li:hover a{color:red;} #BlogArchive1_ArchiveList ul.hierarchy li.expanded{line-height:20px;} #BlogArchive1_ArchiveList ul.hierarchy li.archivedate a.toggle{padding:3px 0 0 5px;border-top-left-radius:6px;border-bottom-left-radius:20px;width:120px !important;background: -moz-linear-gradient(left, rgba(102,102,102,0.6) 0%, rgba(204,204,204,0) 100%); background:-webkit-gradient(linear, left top, right top, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(204,204,204,0))); background:-webkit-linear-gradient(left, rgba(102,102,102,1) 0%,rgba(204,204,204,0) 100%); background:-o-linear-gradient(left, rgba(102,102,102,1) 0%,rgba(204,204,204,0) 100%); background:-ms-linear-gradient(left, rgba(102,102,102,1) 0%,rgba(204,204,204,0) 100%); background:linear-gradient(to right, rgba(102,102,102,1) 0%,rgba(204,204,204,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#00cccccc',GradientType=1 );;border-bottom:3px double #555;} #BlogArchive1_ArchiveList ul.hierarchy li.archivedate a.toggle .zippy{font-size:14px;text-shadow:1px 1px 1px #000;} #BlogArchive1_ArchiveList ul.hierarchy li.archivedate a.post-count-link{color:red;text-decoration:blink underline;} #BlogArchive1_ArchiveList ul.hierarchy li.archivedate:hover a.post-count-link{text-decoration:none underline;} #BlogArchive1_ArchiveList ul.hierarchy li.archivedate a.post-count-link{color:red;} #BlogArchive1_ArchiveList ul.hierarchy li.archivedate span.post-count{color:orange;-moz-animation:zippy_anima2 10s infinite alternate;} #BlogArchive1_ArchiveList ul.hierarchy li.archivedate:hover span.post-count{-moz-animation:zippy_anima2 0s;} @-moz-keyframes zippy_anima2{ 0%{color:red;margin-left:15px;} 50%{color:green;margin-left:-70px;} 100%{color:blue;margin-left:-5px;} } @-moz-keyframes zippy_anima{ 0%{color:red;margin-right:35px;} 50%{color:green;margin-right:70px;} 100%{color:blue;margin-right:-5px;} } #BlogArchive1_ArchiveList ul.hierarchy li.archivedate a.toggle .zippy{-moz-animation:zippy_anima 8s infinite alternate; color:blue; -moz-transition:color 1s; } #BlogArchive1_ArchiveList ul.hierarchy li.archivedate a.toggle:hover .zippy{ -moz-animation:zippy_anima 0s; color:orange; } #BlogArchive1_ArchiveList ul.hierarchy li.archivedate a.toggle:focus .zippy{ -moz-animation:zippy_anima 0s; color:lime; } #BlogArchive1_ArchiveList ul.hierarchy li.archivedate a.toggle:active .zippy{ -moz-animation:zippy_anima 0s; color:red; }

Selamat mencoba semuga berhasil