[Bài thi thiết kế] Blog And Me | Blog | Blog Thiết Kế

Thi thiết kế theme

[Bài thi thiết kế] Blog And Me

Aug 14, 2012 8:58 AMPublicPageviews 3023 21

Trackback from [Theme Blog] Blog And Me

• Theme "BLOG and Me"
• Designed by Kts.TrungHau
• Ý tưởng: Một chút từ Hệ điều hành Mac, một chút từ Paint Tossing Pack, một chút từ tách cà phê quen thuộc và một chút từ Blog Thiết Kế

Vẫn là tông màu ghi chủ đạo, đây là bài thi thứ ba của mình sau hai bài thi "e"City và "I Design" gửi cho cuộc thi Thiết Kế Theme do Yahoo!Blog tổ chức. Màu xanh được sử dụng trong bài thi là hình ảnh cô gái mặc áo xanh (cái này là mình lấy ý tưởng từ theme của Blog Thiết Kế - Màu Xanh), một hình ảnh đẹp để các bạn nam khi sử dụng theme có thể vừa viết bài và vừa ngắm nghía đúng không nào

. Và tất nhiên, với theme này thì đối tượng mình hướng tới là các bạn nữ nhưng như mình đã nói, các bạn nam cũng có thể sử dụng được

. Điểm nhấn ban đầu được sử dụng là tách cà phê (hình ảnh cách điệu của chữ O trong từ BLOG. BLOG and Me: Blog với tôi không thể tách rời, như ly cà phê, có cả vị ngọt và đắng, cũng nếm trải biết bao mùi vị, biết bao kỉ niệm gắn bó không thể tách rời. "...Anh ngồi ngắm nhìn cốc cà phê. Từng giọt, từng giọt tý tách rơi. Cà phê ngọt và đắng cũng như tình yêu vậy. Người chưa yêu muốn được lao vào nếm trải vị ngọt của nó, người đang yêu thì lại được biết tới vị đắng của nó. Thật chẳng khác gì ly cà phê này. Nhưng lạ thật! Có ai nói rằng cà phê không ngon? Nó là thứ đồ uống mà anh rất thích. Mỗi khi có tâm sự thì chính nó là thứ đầu tiên anh sẽ nghĩ tới và thưởng thức..." - Trích từ "Những Suy Nghĩ Vẩn Vơ Tình Ảo - Em Và Anh Và Blog" (Một bài viết của mình

). Phần cột chính mình lấy ý tưởng từ Title bar của hệ điều hành Mac, một hệ điều hành được đánh giá cao về tính thẩm mĩ. Và tất nhiên cũng sẽ không chỉ đơn giản như vậy, để lạ mắt mình đã làm hiệu ứng thanh title bar hóa lỏng

Với theme này các bạn dàn trang hai cột trái nhé. Phần Demo và Code mình xin gửi tới các bạn trong phần cuối cùng. Now

• Demo:

• Code:

<style type="text/css">
body {
background:url(http://a.imageshack.us/img515/4030/backgroundcw.jpg);font-family:Times, serif;line-height:16px;color:#333;}
p {padding:0 0 1.3em;}
h1, h2 , h3, h4, h5, h6 {
display:block;color:#13382A;line-height:100%;text-shadow:1px 1px #fff;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none;}
h1 {letter-spacing:-2px;}
h2 {
font-size:14px;margin:10px 0 15px;font-weight:bold;}
a {
color:#000;border-bottom:0px dotted #bbb;text-decoration:none;}
a:hover {
color:#739905;border-bottom:0px dotted #000;text-shadow:0 0 2px #afe20f;}
.yui-b {width:270px !important;padding-left:10px;}
#yui-main .yui-b {width:595px !important;padding-left:35px;}
#widget-calendar .hd, 
#widget-recentVisitor .hd, 
#widget-statistic .hd, 
#widget-photoSlide .hd, 
#widget-followingList .hd, 
#widget-tag .hd, 
#widget-category .hd, 
#widget-recentComment .hd, 
#widget-recentPost .hd, 
.widget .hd {
background:transparent;padding-top:5px;}
#asb-header #asb-header-ctn img, 
#emotion-carousel{display:none;}
#asb-menu li.first, #asb-menu li, #asb-menu li.current, #article-navigation, #article-single, #article-list, .widget, .yui-t6 .yui-b, #emotion-carousel, #article-listing, 
#article-single .bd, #article-supplement.new-style-supplement, #article-single .actions, #asb-menu, #pagination-bottom, .sidebar, #article-carousel, .article-nav {background:transparent;border:none;}
#asb-header h1 {margin:60px 0 0 70px;color:#000;}
#asb-header h2 {margin-left:70px;color:#000000;width:835px;}
#asb-menu {
position:relative;top:560px;right:300px;}
#asb-menu ul {border:none;padding:0 0 0 200px;color:#000000;width:650px;height:80px;}
#asb-header h1 a, #asb-menu li a {color:#000000;}
#asb-menu li{padding:30px 0 0 70px;color:#000000;}
#w-profile-name {text-align:center;text-transform:uppercase;}
#search-result-info, #article-listing-toggle {display:none;}
#asb-menu li.first, 
#asb-menu li, 
#asb-menu li.current, 
#asb-menu li.current a, 
#asb-menu li a {background:transparent url(http://a.imageshack.us/img36/9124/spacerib.gif);border:none;}
.yut-pg-container .pg-current-page {background-color:#0d1f18;border:#7a0001;}
#article-listing .img-wrap img {max-width:100%;float:left;padding:8px 0 0 15px;height:135px;width:139px;}
#article-listing .img-wrap {float:left;width:168px;background:transparent url(http://a.imageshack.us/img708/5412/piczp.png) no-repeat center!important;height:157px;}
#article-listing .article .summary {text-align:justify;padding-top:0px;}
.article .tag {
margin-top:25px;}
#hd{
background:transparent url(http://a.imageshack.us/img594/5135/toplt.jpg) no-repeat center;height:669px;margin:0;position:relative;border:none;}
#bd{
margin:0 auto;width:900px;background:transparent url(http://a.imageshack.us/img18/3408/37660468.jpg) 0 8px repeat-y;overflow:hidden;}
#ft p {margin:0;}
#article-listing .emotion {display:none;}
#article-listing .article .hd {background:url("http://a.imageshack.us/img152/1350/postxk.png") no-repeat scroll 78px 0 transparent;}
#widget-externalSource .hd {display:none;}
#ft {
background:transparent url(http://a.imageshack.us/img254/8601/99452383.jpg) no-repeat center top;min-height:0px;border:none;overflow:hidden;margin-top:0px;padding-top:175px;font-size:0%;}
#ygubcmt textarea {width:400px;}
#comment-list .reply-container textarea {width:325px;}
#article-carousel, .article-nav {width:560px;}
#asb-header h2 {display:none;}
#asb-header h1 {display:none;}
#widget-recentPost h3 {font-size:0px;}
#widget-recentVisitor h3 {font-size:0px;}
#widget-recentComment h3 {font-size:0px;}
#widget-category h3 {font-size:0px;}
#widget-statistic h3 {font-size:0px;}
#widget-calendar h3 {font-size:0px;}
#widget-photoSlide h3 {font-size:0px;}
#widget-followingList h3 {font-size:0px;}
#widget-tag h3 {font-size:0px;}
#widget-category .hd{background:url(http://a.imageshack.us/img337/7705/thumuc.jpg) no-repeat center;height:56px;}
#widget-recentPost .hd{background:url(http://a.imageshack.us/img214/4118/baivietz.jpg) no-repeat center;height:56px;}
#widget-statistic .hd{background:url(http://a.imageshack.us/img651/4083/thongkep.jpg) tcentVisitor no-repeat top center;height:56px;}
#widget-statistic .hd{background:url(http://a.imageshack.us/img651/4083/thongkep.jpg) no-repeat center;height:56px;}
#widget-recentVisitor .hd{background:url(http://a.imageshack.us/img40/1516/khach.jpg) no-repeat center;height:56px;}
#widget-calendar .hd{background:url(http://a.imageshack.us/img593/3473/lichz.jpg) no-repeat center;height:56px;}
#widget-photoSlide .hd{background:url(http://a.imageshack.us/img191/7146/anhf.jpg) no-repeat center;height:56px;}
#widget-recentComment .hd{background:url(http://a.imageshack.us/img507/4673/binhluank.jpg) no-repeat center;height:56px;}
#widget-followingList .hd{background:url(http://a.imageshack.us/img18/3268/lienket.jpg) no-repeat center;height:56px;}
#widget-tag .hd{background:url(http://a.imageshack.us/img571/1720/taghy.jpg) no-repeat center;height:56px;}
.widget {
border-top:0px solid #E5E5E5;padding:0px;}
#w-profile-card .profile .ico {
background:url(http://a.imageshack.us/img856/9129/hoso.png) no-repeat;height:11px;width:9 px;}
.divider {
width:0px;}
.yut-pg-container .pg-next {background:url(http://a.imageshack.us/img641/567/nextqk.png) no-repeat center top;height:41px;width:36px;border:0px;}.yut-pg-container .pg-previous {background:url(http://img600.imageshack.us/img600/2357/prewz.png) no-repeat center top;height:41px;width:36px;border:0px;}.yut-pg-container .pg-next .ico, .yut-pg-container .pg-previous .ico {visibility:hidden;}.yut-pg-container .pg-page, .yut-pg-container .pg-break {background:transparent url(http://a.imageshack.us/img256/6673/numa.png) no-repeat center;border:0px;}.yut-pg-container .pg-current-page{background:transparent url(http://a.imageshack.us/img256/6673/numa.png) no-repeat center;border:0px;}.yut-pg-container .pg-page:hover, .yut-pg-container .pg-break:hover {background:transparent url(http://img256.imageshack.us/img256/6673/numa.png) no-repeat center;border:0px;}#dashboard-sidebar dt.init, #msg-and-action-block{background:transparent;}#dashboard-sidebar{float:right;}#dashboard-main{float:left;}.dashboard-widget #content, #inactive-widgets ul, #two-col-right, #two-col-left , #two-col-right .sidebar{background:transparent;border:0px;}#dashboard-widget li.customizable .bd{line-height:25px;font-size:12px;}
#widget-category .bd ul li.clrfix a .ico {
background:transparent url(http://a.imageshack.us/img6/2549/bmicateg.png) no-repeat;margin-left:0px;list-style:none;width:20px;}
#widget-recentComment .bd ul.force-wrap li{
background:transparent url(http://a.imageshack.us/img542/6569/98689162.png) 0 9px no-repeat;padding-left:20px;list-style:none;}
#widget-recentPost .bd li {background:url(http://a.imageshack.us/img3/9745/47013215.gif) no-repeat left;padding-left:23px;padding-top:0px;margin-bottom:0px;list-style:none;}
.yui-b #sidebar2 {border-top:0px solid #EEE;}
#w-profile-card .profile .ico {
background:url(http://a.imageshack.us/img31/6981/bmiauthor.png) no-repeat;height:20px;width:19px;}
.article .tag .ico {width:15px;height:13px;background:url(http://a.imageshack.us/img822/185/basetags.png);}
#article-single .comment-count .ico {
width:19px;height:18px;background:url(http://a.imageshack.us/img808/5284/bmicomment.png);}
#ygubcmt textarea {
width:400px;}
#article-single .ccl-info .ico {width:22px;height:23px;background:url(http://a.imageshack.us/img515/4484/toanquyen.jpg);}
.yut-btn-big, .yut-btn-light {
border:1px solid black;font-weight:bold;background:black;}
#comment-list {max-height:400px;overflow-y:auto;color:black;}
#widget-rss .ico{background:url(http://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/32/social_rss_box_white.png) no-repeat center;width:35px;height:35px;margin:0 5px 10px 0;}
#widget-rss .ico:hover{background:url(http://cdn1.iconfinder.com/data/icons/Classy_Social_Media_Icons/32/rss.png) no-repeat center;width:35px;height:35px;margin:0 5px 10px 0;}
#comment-form .fields .yut-btn {
background:transparent url(http://img32.imageshack.us/img32/6662/95271818.jpg) no-repeat center top;height:20px;width:42px;border:0px;}
#comment-form .fields .yut-btn:hover{
background:transparent url(http://img32.imageshack.us/img32/6662/95271818.jpg) no-repeat center bottom;height:20px;width:42px;border:0px;}
#comment-form .fields .yut-btn .sm {
height:27px;padding:0px 5px;text-indent:9999px;width:27px;}
#comment-list .vcard {
background:url(http://img688.imageshack.us/img688/5032/1234vm.jpg) no-repeat left top;height:61px;width:56px;padding:5px 0px 0px 4px;}
.article .category .ico {background:transparent url(http://a.imageshack.us/img6/2549/bmicateg.png) no-repeat;margin-left:0px;list-style:none;width:20px;height:17px;}
.yut-btn-big, .yut-btn-light {
background:black;border:1px solid black;}
.ico {
display:inline-block;background-image:url(http://a.imageshack.us/img811/5610/icosprite.png);background-repeat:no-repeat;vertical-align:middle;}
#widget-recentVisitor .bd .ico {display:none;}
#article-carousel {padding:25px 0 25px 45px;}
#article-carousel li {
width:153px;height:235px;margin-right:25px;float:left;overflow:hidden;}
#article-carousel li .img-wrap {
display:block;width:153px;height:120px;margin:0 auto 7px;background:#F4F4F4;text-align:center;}
#comment-list .reply-container .yut-btn {
height:20px;width:42px;border:0px;background:transparent url(http://img32.imageshack.us/img32/6662/95271818.jpg) no-repeat center top;}
#comment-list .reply-container .yut-btn:hover {
height:20px;width:42px;border:0px;background:transparent url(http://img32.imageshack.us/img32/6662/95271818.jpg) no-repeat center bottom;}
#comment-list .reply-container .sm {
height:27px;padding:0px 5px;text-indent:9999px;width:27px;}
#asb-nav-search {
margin:149px 1px 0 10px;}
#asb-nav-search span.search-primary {
margin-right:2px;border:1px solid #C8AC5E;background-color:#FFD870;left:10px;}
#asb-nav-search span.search-secondary {
margin-right:1px;border:1px solid #858585;background-color:#EBEBEB;display:none;}
#asb-nav-search input {margin-right:2px;}
#w-profile-card .status {
border:1px solid #B1B1B1;}
#asb-menu {
position:relative;top:75px;right:300px;}
</style>

Blog Kts. Trung Hậu