[Bài thi thiết kế] FOREST GREEN
Trackback from [ Bài thi thiết kế ] FOREST GREEN
Hihi . Mới đầu tổ chức cuộc thi cũng hào hứng lắm chứ . Nhưng nhìn lại
thời gian mình đc chăm chút cái theme dự thi thì quá ít , thành ra làm
theme chẳng ra cái gì , lại còn nộp bài vào hạn chót nữa chứ 
! Thôi thì cũng mang cái theme xoàng xoàng đem dự thi góp vui cho cuộc thi đây ^^! 
Mọi người ủng hộ mình nhé !
DEMO :
DEMO online : Chính theme blog mình đang sài đó ^^!
CODE:
Chú Ý : Hầu hết thì chúng ta đều biết cài CSS vào NGUỒN BÊN NGOÀI rồi nên mình sẽ không nói thêm . Nhưng để phần bố cục blog ( CHỦ ĐỀ / GIAO DIỆN ) được đúng với thiết kế , các bạn nên chọn những giao diện nền mặc định (hai cột phải) nhé ! Chúc các bạn có thật nhiều niềm vui .......!
Blog HOÀNG HÙNG
! Thôi thì cũng mang cái theme xoàng xoàng đem dự thi góp vui cho cuộc thi đây ^^! Mọi người ủng hộ mình nhé !DEMO :
DEMO online : Chính theme blog mình đang sài đó ^^!
CODE:
<style>
a, .common-text-color {text-decoration:none;color:#5FAEF8;}
a:hover, .common-text-color:hover{color:green;}
body {font:13px/1.231 arial, helvetica, clean, sans-serif;}
html{color:#444;}
/*Trong suốt + xóa border toàn blog*/
#asb-nav, #asb-uh , .sidebar, .widget, .yui-b #sidebar2, #emotion-carousel, #article-list, #pagination-bottom, #article-navigation, #article-carousel, #article-single, #article-supplement.new-style-supplement, .article-nav {background:transparent;border:none;}
#asb-nav-search, #asb-nav-logo {display:none;}
#asb-uh {background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-asb-nav-1.png) repeat;border-bottom:1px solid #FFF;}
#asb-nav .expanded {background:transparent;}
#asb-nav-update-ctn {background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-asb-nav-1.png) repeat;background-color:transparent;position:absolute;top:21px;}
#asb-header hgroup {width:200px;height:232px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/logo-byhh.png) no-repeat left top;margin:34px auto 0px;}
#asb-header hgroup:hover {background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/logo-byhh.png) no-repeat right top;}
#blog-description, #asb-header h2 {display:none;}
#asb-header h1, #blog-title {width:200px;height:232px!important;font-size:50px;opacity:0.0;}
#asb-menu{width:998px;height:53px;margin:15px auto 0;background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/top-II.png) no-repeat center top;}
#asb-menu ul{width:990px;height:53px;border:none;}
#asb-menu li {width:330px;height:40px;background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/img-asb-menu.png) no-repeat right top;border:none;}
#asb-menu li:hover{background-position:right bottom;}
#asb-menu li.first{width:330px;height:40px;background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/img-asb-menu.png) no-repeat left top;border-left:none;}
#asb-menu li:hover.first{background-position:left bottom;}
#asb-menu li.current{width:330px;height:40px;background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/img-asb-menu.png) no-repeat center bottom;}
#asb-menu li.current a{border:none;background:transparent;color:white;}
#asb-menu li a {height:40px;line-height:45px;border:none;color:green;}
#asb-menu li a:hover {height:40px;line-height:45px;border:none;color:white;}
#yui-main .yui-b {width:auto!important;padding-top:20px;background:transparent;}
.yui-b {width:240px!important;padding:20px 26px 18px 20px;background:transparent url(http://i1200.photobucket.com/albums/bb327/nh0kover/Untitled2.png) no-repeat center bottom;}
#sidebar1.sidebar{width:240px;padding:0px;background:#c3e03f url(http://i1052.photobucket.com/albums/s455/hhung_photos/sidebar.png) no-repeat center top;padding-top:55px;}
#sidebar2.sidebar{background:#c3e03f;}
.widget {width:240px;padding:0px;border-top:none;}
.widget h3 {color:black;text-transform:lowercase;text-transform:capitalize;font-size:20px;font-weight:bold;text-align:center;font-family:HL Scomic;text-shadow:1px 1px 1px white;padding:10px 0;}
.widget h3:hover{text-decoration:underline;}
#widget-calendar .hd h3 {float:none;}
#widget-recentVisitor .hd a {position:absolute;top:95%;right:15px;}
#widget-statistic .hd h3 {padding:10px 0;}
.widget .hd {height:54px;width:250px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-hd-widget.png) no-repeat right bottom;}
#widget-recentPost li time, #widget-recentComment li time {display:none;}
#w-profile-card{width:240px;}
#w-profile-name {padding:10px 0;font-size:22px;color:green;}
#w-profile-card .bd {padding-left:24px;}
#w-profile-card .status {border:1px solid black;background-color:black;}
#w-profile-status .status-bubble{width:30px;height:10px;background-color:transparent;padding-top:5px;}
#w-profile-card .status .ico {background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/status-bubble.png) no-repeat left top;}
#w-profile-card .status .text {color:white;}
#widget-recentPost li, #widget-category li, #widget-recentComment li {position:relative;color:green;padding:4px 0;margin-left:15px;}
#widget-recentPost li {list-style-type:decimal;}
#widget-category li {list-style-type:decimal-leading-zero;}
#widget-recentComment li {list-style-type:square;}
#widget-category li a, #widget-recentPost li a {color:#444;height:auto;white-space:nowrap;}
#widget-recentComment li a {color:#444;height:auto;}
#widget-category li a, #widget-recentPost li a {display:inline-block;}
#widget-recentComment li a {display:inline-block;}
#widget-tag .size-4:hover, #widget-category li a:hover, #widget-recentComment li a:hover, #widget-recentPost li a:hover {color:green;text-shadow:1px 1px 1px white;}
#widget-category li .ico, #widget-calendar {display:none;}
#widget-category li a {padding-left:0px;float:none;max-width:100%;}
#widget-tag .size-4 {color:#444;}
#widget-statistic .bd dd {list-style-type:circle;margin:2px 0 2px 0;}
#widget-statistic .bd dt{list-style-type:square;}
#article-listing .article-listing-hd{float:left;width:699px;height:90px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-article.png) no-repeat top;margin:0px;font-size:0px;}
#article-list {float:left;padding:0px 0 0 17px;background:url(http://i1200.photobucket.com/albums/bb327/nh0kover/article-center.png) repeat center;}
.article-listing-ft{float:left;width:699px;height:99px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-article.png) no-repeat bottom;}
#article-listing .article {float:left;width:330px;height:170px;margin:0 10px 10px 0;padding:0px;border-top:none;font-size:102%;border-bottom:1px solid #ccc;}
#emotion-carousel, #article-listing .article .emotion, #article-listing .category, #article-listing .meta, #article-listing .actions, #article-listing .tag{display:none;}
#article-listing .article .title{text-transform:uppercase;font-size:100%;display:inline-block;}
#article-listing .article .title:hover{text-transform:uppercase;font-size:100%;}
#article-listing .img-wrap img {float:left;max-width:100%;width:110px;height:110px;padding:4px;}
#article-listing .img-wrap {float:left;background:brown;margin-right:5px;}
#article-listing .article .summary {display:none;}
#article-listing .article .summary-short {display:block;padding:0 6px 0 6px;text-align:justify;}
#pagination-bottom {padding:10px 0;}
.yut-pg-container .pg-page, .yut-pg-container .pg-break{height:25px;line-height:25px;width:25px;border:1px solid green;background-color:green;color:white;}
.yut-pg-container .pg-current-page, .yut-pg-container .pg-page:hover, .yut-pg-container .pg-break:hover{line-height:24px;border:1px solid green;background-color:#0e6600;color:#EEE;}
.yut-pg-container .pg-next, .yut-pg-container .pg-previous{background-color:transparent;background-image:none;border:none;}
/*Icon next prew*/
.yut-pg-container .pg-next .ico, .yut-pg-container .pg-next-disabled .ico{background-image:url(http://files.myopera.com/hhungphotos/albums/12066492/next.png);}
.yut-pg-container .pg-next .ico{background-position:0 -27px;}
.yut-pg-container .pg-next .ico:hover{background-position:0 0px;}
.yut-pg-container .pg-next-disabled .ico{background-position:0 0px;}
.yut-pg-container .pg-previous .ico, .yut-pg-container .pg-previous-disabled .ico{background-image:url(http://files.myopera.com/hhungphotos/albums/12066492/prev.png);}
.yut-pg-container .pg-previous .ico{background-position:0 -27px;}
.yut-pg-container .pg-previous .ico:hover{background-position:0 0px;}
.yut-pg-container .pg-previous-disabled .ico{background-position:0 0px;}
.yut-pg-container .pg-previous .ico, .yut-pg-container .pg-next .ico{width:16px;height:27px;}
.yut-pg-container .pg-previous, .yut-pg-container .pg-next {height:27px;line-height:22px;width:20px;}
#article-bottom-nav, #article-navigation .hd, #article-breadcrumb{display:none;}
#article-carousel li{margin-right:17px;}
#article-navigation{margin-bottom:0px;min-height:90px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-article.png) no-repeat center top;}
#article-top-nav{min-height:80px;}
#carousel {margin:30px 0 0px;}
#article-single .category {margin-bottom:0px;padding-top:40px;border-top:1px solid #CCC;font-size:0px;}
#article-single .category .ico{display:none;}
#article-single .actions {border:none;}
#article-single.bd{background:url(http://i1200.photobucket.com/albums/bb327/nh0kover/article-center.png) repeat center;}
#article-single .article .content {margin-bottom:0px;}
#article-single #socialGroup-bottom{padding:0px;}
#article-supplement .yui-nav {width:699px;height:99px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-article.png) no-repeat bottom;border-bottom:none;}
#article-supplement .yui-nav .selected{background:none;}
#article-supplement .yui-content{padding:20px 10px 20px 10px;}
#comment-list .comment-item {border-top:0px;}
#comment-list .comment-item, .new-style-supplement #comment-form-wrapper{outline:#DDD double 3px;background:#F7F7F7;}
.new-style-supplement #comment-list .comment-item {padding:15px 0;margin-top:15px;}
.action-delete-comment, .action-delete-reply {display:none;}
#hd{background:transparent url(http://blog.yimg.com/1/OykjU5x7s5.b15C1sYYinSIMU.nXtwUcGQSTN36uebvNWovhckl5Wg--/81/o/toX8gcTwjQOHo8W5oyxJrQ.jpg) no-repeat center top;height:374px;border:none;margin-bottom:0px;}
#bd{background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/center-blog.png) repeat-y center;width:998px;}
#ft{background:transparent url(http://blog.yimg.com/1/JAuLG797s5.S2oKYv1kI66zhwm9mFCnvsKHxH4QGrqAIT1_k.QcHkQ--/35/o/bl6KZXgYay4_Vu7CEMDxiQ.jpg) no-repeat center top;height:130px;width:100%;border:none;margin:0px;}
#ft p {margin-top:50px;margin-bottom:10px;}
body{background:transparent;}
html{background:#262e1a url(http://blog.yimg.com/1/OykjU5x7s5.b15C1sYYinSIMU.nXtwUcGQSTN36uebvNWovhckl5Wg--/83/o/tmdjrTqvZ8uDdQ7yHiGbGw.jpg) fixed center;}
</style>
a, .common-text-color {text-decoration:none;color:#5FAEF8;}
a:hover, .common-text-color:hover{color:green;}
body {font:13px/1.231 arial, helvetica, clean, sans-serif;}
html{color:#444;}
/*Trong suốt + xóa border toàn blog*/
#asb-nav, #asb-uh , .sidebar, .widget, .yui-b #sidebar2, #emotion-carousel, #article-list, #pagination-bottom, #article-navigation, #article-carousel, #article-single, #article-supplement.new-style-supplement, .article-nav {background:transparent;border:none;}
#asb-nav-search, #asb-nav-logo {display:none;}
#asb-uh {background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-asb-nav-1.png) repeat;border-bottom:1px solid #FFF;}
#asb-nav .expanded {background:transparent;}
#asb-nav-update-ctn {background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-asb-nav-1.png) repeat;background-color:transparent;position:absolute;top:21px;}
#asb-header hgroup {width:200px;height:232px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/logo-byhh.png) no-repeat left top;margin:34px auto 0px;}
#asb-header hgroup:hover {background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/logo-byhh.png) no-repeat right top;}
#blog-description, #asb-header h2 {display:none;}
#asb-header h1, #blog-title {width:200px;height:232px!important;font-size:50px;opacity:0.0;}
#asb-menu{width:998px;height:53px;margin:15px auto 0;background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/top-II.png) no-repeat center top;}
#asb-menu ul{width:990px;height:53px;border:none;}
#asb-menu li {width:330px;height:40px;background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/img-asb-menu.png) no-repeat right top;border:none;}
#asb-menu li:hover{background-position:right bottom;}
#asb-menu li.first{width:330px;height:40px;background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/img-asb-menu.png) no-repeat left top;border-left:none;}
#asb-menu li:hover.first{background-position:left bottom;}
#asb-menu li.current{width:330px;height:40px;background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/img-asb-menu.png) no-repeat center bottom;}
#asb-menu li.current a{border:none;background:transparent;color:white;}
#asb-menu li a {height:40px;line-height:45px;border:none;color:green;}
#asb-menu li a:hover {height:40px;line-height:45px;border:none;color:white;}
#yui-main .yui-b {width:auto!important;padding-top:20px;background:transparent;}
.yui-b {width:240px!important;padding:20px 26px 18px 20px;background:transparent url(http://i1200.photobucket.com/albums/bb327/nh0kover/Untitled2.png) no-repeat center bottom;}
#sidebar1.sidebar{width:240px;padding:0px;background:#c3e03f url(http://i1052.photobucket.com/albums/s455/hhung_photos/sidebar.png) no-repeat center top;padding-top:55px;}
#sidebar2.sidebar{background:#c3e03f;}
.widget {width:240px;padding:0px;border-top:none;}
.widget h3 {color:black;text-transform:lowercase;text-transform:capitalize;font-size:20px;font-weight:bold;text-align:center;font-family:HL Scomic;text-shadow:1px 1px 1px white;padding:10px 0;}
.widget h3:hover{text-decoration:underline;}
#widget-calendar .hd h3 {float:none;}
#widget-recentVisitor .hd a {position:absolute;top:95%;right:15px;}
#widget-statistic .hd h3 {padding:10px 0;}
.widget .hd {height:54px;width:250px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-hd-widget.png) no-repeat right bottom;}
#widget-recentPost li time, #widget-recentComment li time {display:none;}
#w-profile-card{width:240px;}
#w-profile-name {padding:10px 0;font-size:22px;color:green;}
#w-profile-card .bd {padding-left:24px;}
#w-profile-card .status {border:1px solid black;background-color:black;}
#w-profile-status .status-bubble{width:30px;height:10px;background-color:transparent;padding-top:5px;}
#w-profile-card .status .ico {background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/status-bubble.png) no-repeat left top;}
#w-profile-card .status .text {color:white;}
#widget-recentPost li, #widget-category li, #widget-recentComment li {position:relative;color:green;padding:4px 0;margin-left:15px;}
#widget-recentPost li {list-style-type:decimal;}
#widget-category li {list-style-type:decimal-leading-zero;}
#widget-recentComment li {list-style-type:square;}
#widget-category li a, #widget-recentPost li a {color:#444;height:auto;white-space:nowrap;}
#widget-recentComment li a {color:#444;height:auto;}
#widget-category li a, #widget-recentPost li a {display:inline-block;}
#widget-recentComment li a {display:inline-block;}
#widget-tag .size-4:hover, #widget-category li a:hover, #widget-recentComment li a:hover, #widget-recentPost li a:hover {color:green;text-shadow:1px 1px 1px white;}
#widget-category li .ico, #widget-calendar {display:none;}
#widget-category li a {padding-left:0px;float:none;max-width:100%;}
#widget-tag .size-4 {color:#444;}
#widget-statistic .bd dd {list-style-type:circle;margin:2px 0 2px 0;}
#widget-statistic .bd dt{list-style-type:square;}
#article-listing .article-listing-hd{float:left;width:699px;height:90px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-article.png) no-repeat top;margin:0px;font-size:0px;}
#article-list {float:left;padding:0px 0 0 17px;background:url(http://i1200.photobucket.com/albums/bb327/nh0kover/article-center.png) repeat center;}
.article-listing-ft{float:left;width:699px;height:99px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-article.png) no-repeat bottom;}
#article-listing .article {float:left;width:330px;height:170px;margin:0 10px 10px 0;padding:0px;border-top:none;font-size:102%;border-bottom:1px solid #ccc;}
#emotion-carousel, #article-listing .article .emotion, #article-listing .category, #article-listing .meta, #article-listing .actions, #article-listing .tag{display:none;}
#article-listing .article .title{text-transform:uppercase;font-size:100%;display:inline-block;}
#article-listing .article .title:hover{text-transform:uppercase;font-size:100%;}
#article-listing .img-wrap img {float:left;max-width:100%;width:110px;height:110px;padding:4px;}
#article-listing .img-wrap {float:left;background:brown;margin-right:5px;}
#article-listing .article .summary {display:none;}
#article-listing .article .summary-short {display:block;padding:0 6px 0 6px;text-align:justify;}
#pagination-bottom {padding:10px 0;}
.yut-pg-container .pg-page, .yut-pg-container .pg-break{height:25px;line-height:25px;width:25px;border:1px solid green;background-color:green;color:white;}
.yut-pg-container .pg-current-page, .yut-pg-container .pg-page:hover, .yut-pg-container .pg-break:hover{line-height:24px;border:1px solid green;background-color:#0e6600;color:#EEE;}
.yut-pg-container .pg-next, .yut-pg-container .pg-previous{background-color:transparent;background-image:none;border:none;}
/*Icon next prew*/
.yut-pg-container .pg-next .ico, .yut-pg-container .pg-next-disabled .ico{background-image:url(http://files.myopera.com/hhungphotos/albums/12066492/next.png);}
.yut-pg-container .pg-next .ico{background-position:0 -27px;}
.yut-pg-container .pg-next .ico:hover{background-position:0 0px;}
.yut-pg-container .pg-next-disabled .ico{background-position:0 0px;}
.yut-pg-container .pg-previous .ico, .yut-pg-container .pg-previous-disabled .ico{background-image:url(http://files.myopera.com/hhungphotos/albums/12066492/prev.png);}
.yut-pg-container .pg-previous .ico{background-position:0 -27px;}
.yut-pg-container .pg-previous .ico:hover{background-position:0 0px;}
.yut-pg-container .pg-previous-disabled .ico{background-position:0 0px;}
.yut-pg-container .pg-previous .ico, .yut-pg-container .pg-next .ico{width:16px;height:27px;}
.yut-pg-container .pg-previous, .yut-pg-container .pg-next {height:27px;line-height:22px;width:20px;}
#article-bottom-nav, #article-navigation .hd, #article-breadcrumb{display:none;}
#article-carousel li{margin-right:17px;}
#article-navigation{margin-bottom:0px;min-height:90px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-article.png) no-repeat center top;}
#article-top-nav{min-height:80px;}
#carousel {margin:30px 0 0px;}
#article-single .category {margin-bottom:0px;padding-top:40px;border-top:1px solid #CCC;font-size:0px;}
#article-single .category .ico{display:none;}
#article-single .actions {border:none;}
#article-single.bd{background:url(http://i1200.photobucket.com/albums/bb327/nh0kover/article-center.png) repeat center;}
#article-single .article .content {margin-bottom:0px;}
#article-single #socialGroup-bottom{padding:0px;}
#article-supplement .yui-nav {width:699px;height:99px;background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/bg-article.png) no-repeat bottom;border-bottom:none;}
#article-supplement .yui-nav .selected{background:none;}
#article-supplement .yui-content{padding:20px 10px 20px 10px;}
#comment-list .comment-item {border-top:0px;}
#comment-list .comment-item, .new-style-supplement #comment-form-wrapper{outline:#DDD double 3px;background:#F7F7F7;}
.new-style-supplement #comment-list .comment-item {padding:15px 0;margin-top:15px;}
.action-delete-comment, .action-delete-reply {display:none;}
#hd{background:transparent url(http://blog.yimg.com/1/OykjU5x7s5.b15C1sYYinSIMU.nXtwUcGQSTN36uebvNWovhckl5Wg--/81/o/toX8gcTwjQOHo8W5oyxJrQ.jpg) no-repeat center top;height:374px;border:none;margin-bottom:0px;}
#bd{background:transparent url(http://i1052.photobucket.com/albums/s455/hhung_photos/center-blog.png) repeat-y center;width:998px;}
#ft{background:transparent url(http://blog.yimg.com/1/JAuLG797s5.S2oKYv1kI66zhwm9mFCnvsKHxH4QGrqAIT1_k.QcHkQ--/35/o/bl6KZXgYay4_Vu7CEMDxiQ.jpg) no-repeat center top;height:130px;width:100%;border:none;margin:0px;}
#ft p {margin-top:50px;margin-bottom:10px;}
body{background:transparent;}
html{background:#262e1a url(http://blog.yimg.com/1/OykjU5x7s5.b15C1sYYinSIMU.nXtwUcGQSTN36uebvNWovhckl5Wg--/83/o/tmdjrTqvZ8uDdQ7yHiGbGw.jpg) fixed center;}
</style>
Chú Ý : Hầu hết thì chúng ta đều biết cài CSS vào NGUỒN BÊN NGOÀI rồi nên mình sẽ không nói thêm . Nhưng để phần bố cục blog ( CHỦ ĐỀ / GIAO DIỆN ) được đúng với thiết kế , các bạn nên chọn những giao diện nền mặc định (hai cột phải) nhé ! Chúc các bạn có thật nhiều niềm vui .......!
Blog HOÀNG HÙNG
