Blog Thiết Kế

Hướng dẫn và giải đáp cho bạn những kĩ thuật trong việc sử dụng Yahoo! Blog, nơi bạn tìm thấy những theme đẹp, giúp bạn làm quen và tìm hiểu về cách tuỳ chỉnh Blog và học hỏi kinh nghiệm thiết kế Blog.

Post sort order : Thi thiết kế theme

24/49 POSTS
preview
22-24/49 POSTS

close

[Bài thi thiết kế] Summer Day

Jul 26, 2012 12:06 PMPublicPageviews 3679 39

Trackback from
SUMMER DAY đúng theo cách gọi, ngập tràn trong theme mà sự tươi khỏe, trẻ trung của một Ngày hè tràn đầy năng lượng. Có lẽ theme mang khuynh hướng dành cho phái nữ nhưng không vì thế nó thành ủy mị. Bạn dễ dàng nhận thấy cá tính được thể hiện rõ ràng cho không chỉ là màu sắc, họa tiết, hình ảnh mà còn trong cả font chữ trang trí cho theme. Khi thiết kế nó, không đơn giản muốn nó là cái nền cho những bài viết của mình, hơn thế, tôi muốn bằng cách truy cập vào blog mình, tận hưởng nét khỏe khoắn của theme, tôi sẽ có những khởi đầu mạnh mẽ hơn, năng động hơn. Có thể bạn cho đó là những lời trống rỗng, nhưng hãy tin tôi, tôi biết chắc điều gì mà tôi cần, cái gì mà tôi có khi design nó. Dù hiểu hay không hiểu, tin hay không tin những điều mà tôi chia sẻ ở đây, nhưng tôi mong bạn hãy đón nhận nó chỉ đơn giản như một món quà mà tôi muốn gởi đến các blogger thân yêu cảu Yahoo!Blog. Cảm ơn các bạn đã dành thời gian để đọc những lời này. Thanks.


DEMO:


CODE:

<style>

#asb-menu ul{border:none;}#article-single .comment-count
{text-align:center;width:39px;height:39px;line-height:40px;background:url(http://i.imgur.com/jYDSz.png)
no-repeat center top;border-top:0px;}#article-single .comment-count
a{color:#5E5849;}



.yut-pg-container .pg-next
{background:url(http://i.imgur.com/YKmCi.png) no-repeat center
top;height:32px;width:32px;border:0px;}.yut-pg-container .pg-previous
{background:url(http://i.imgur.com/qhckG.png) no-repeat center
top;height:32px;width:32px;border:0px;}.yut-pg-container .pg-next .ico,
.yut-pg-container .pg-previous .ico {visibility:hidden;}.yut-pg-container
.pg-next:hover {background:url(http://i.imgur.com/YKmCi.png) no-repeat center
bottom;height:32px;width:32px;border:0px;}.yut-pg-container .pg-previous:hover
{background:url(http://i.imgur.com/qhckG.png) no-repeat center
bottom;height:32px;width:32px;border:0px;}.yut-pg-container .pg-page, .yut-pg-container
.pg-break {background:transparent url(http://i.imgur.com/T7yxW.png) no-repeat
center;border:0px;}.yut-pg-container .pg-current-page{background:transparent
url(http://i.imgur.com/kSUxi.png) no-repeat
center;border:0px;}.yut-pg-container .pg-page:hover, .yut-pg-container
.pg-break:hover {color:white;background:transparent
url(http://i.imgur.com/dXg2L.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;}



body
{margin:0;padding:0;color:#514A46;font-family:proxima-nova,
sans-serif;background:transparent url(http://i.imgur.com/lXdlm.jpg) no-repeat
scroll center top; background-attachment:fixed background-position: center; }



.sidebar{background:transparent ;border:0px;}



#w-profile-card{margin-left:0px!important;padding-bottom:0px;}



#w-profile-card
.bd,#widget-recentVisitor .bd{padding:0px 10px;}



#w-profile-name{padding-top:20px;}



#widget-recentVisitor
.bd li {margin:0 5px;}



.yui-b
#sidebar1,.yui-t6 .yui-b {width:220px;}



.widget{margin-top:40px;border:0px;}



.widget-first-of-type
{margin-top:0px!important;}



.widget
.hd{background:url(http://i.imgur.com/TEHok.png) no-repeat center
top;height:84px;width:220px;}



.widget .bd{padding:0px 10px;background:transparent
url(http://i.imgur.com/jFrrT.png) repeat-y center top;width:200px;}



.widget
{padding:0px 0px 80px 0px;background:transparent
url(http://i.imgur.com/8DkYk.png) no-repeat center
bottom;width:220px;border-top:0px;}



.widget h3{text-align:center;font-size:0px;color:white;}



#asb-menu
li a
{height:30px;line-height:30px;display:block;border:0px;color:#514A46;font-size:10px;}



#asb-menu{width:970px;margin:1px
auto;}



#asb-menu
ul{width:700px;float:right;background:url(http://i.imgur.com/no55a.png)
no-repeat left;height:31px;}



#asb-header
hgroup {visibility:hidden;}



#asb-nav-update,
#asb-nav span.ico, #asb-nav-mail, #asb-nav-yahoo, #asb-nav-help,
#asb-nav-search span.search-secondary, #asb-nav li .divider{display:none;}



#asb-nav-right{top:30px;}



#asb-nav
{padding: 0px 0px 20px 20px;}



#asb-menu
li{width:80px;text-transform:none;}



#asb-menu
li.first {width:100px;}



#asb-nav
li.nav-item a.nav-link:hover{color:#F16675;} #asb-nav-search
span.search-primary{background:transparent;border:0px;}



#asb-nav-search
button {display:none;}



#asb-nav-search
input {display:none;}



#asb-nav
li.nav-item a.nav-link:hover{color:#F16675;}



#asb-uh,
#asb-nav, #asb-nav-logo {background-color:transparent;border:0px;}

#w-profile-card{margin-left:0px!important;padding-bottom:0px;}



#w-profile-card
.bd,#widget-recentVisitor .bd{padding:0px 10px;}



#w-profile-name{padding-top:20px;}



#widget-recentVisitor
.bd li {margin:0 5px;}



#widget-recentComment li,#widget-category li, #widget-recentPost
.bd ul li {margin-left:2px;list-style:none;padding:5px 0px 5px
15px;border-bottom: 1px dashed #EDEEE9;background:transparent
url(http://i.imgur.com/TOYn2.png) no-repeat left;}



#widget-category
li a{padding-left:0px!important;}



#widget-recentComment
li a,#widget-category li a{font-family: bree;color:#5B7A7E;}



#widget-category
li:hover a{color:#F33;font-family: bree;}



#widget-recentComment
li:hover,#widget-category li:hover{background:#fff
url(http://i.imgur.com/5A3iN.png) no-repeat left;opacity: .5;}
#widget-recentPost .bd ul li:hover{background:#fff url(http://i.imgur.com/5A3iN.png)
no-repeat left;opacity: .5;}



#active-widgets
.widget,#inactive-widgets .widget .bd,#inactive-widgets
.widget{background:transparent!important;height:60px;padding:5px;width:190px;}



#active-widgets
.sidebar {width:220px;}



#comment-list
.comment-reply { font-weight:italic; font-family: Comic Sans MS;color: #C71585;
font-size:14px;} 



#comment-form{background:transparent;border:1px
dashed #fc6b7a}



#comment-form
.fields .yut-btn{background:transparent url(http://i.imgur.com/VCsw2.png)
no-repeat center;height:30px;width:30px;border:0px;}



#comment-form
.fields .yut-btn .sm{height:27px;padding:0px
5px;text-indent:9999px;width:27px;}



.new-style-supplement
#comment-list .comment-reply{background:#E2E2D9;opacity: .8;}



#article-single.bd, #article-supplement, #article-bottom-nav,
#article-list, #pagination-bottom, #emotion-carousel, #article-bottom-nav ,
#pagination-bottom {background:transparent;border:0px; margin-top:0px;}

#article-navigation {margin-bottom:0px; background:transparent;height:80px;
border:0px;}



#article-top-nav
{margin-bottom:0px;background:transparent url(http://i.imgur.com/ER3jZ.png)
no-repeat center bottom;height:50px; border:0px;} #article-listing
.article-listing-hd {font-size:0px;margin-top:0px;margin-bottom:0px;background:transparent
url(http://i.imgur.com/ZHcBB.png) no-repeat center bottom;height:200px;
border:0px;}



#asb-header-ctn
img{height:0px;width:0px;}



#hd {margin-bottom:0px;border-bottom:0px solid
white;background:transparent url(http://i.imgur.com/C0tx3.png) repeat-y center
bottom;height:700px; }

#bd {background:transparent url(http://i.imgur.com/yeLQM.png) repeat-y center;}

#ft {background:transparent url(http://i.imgur.com/6VDj3.png) no-repeat top
center;height:560px; margin-top:0px; font-size:0px;border-top:0px;}

#article-listing .img-wrap
{width:200px;float:left;height:200px;background:url(http://i.imgur.com/3EZky.png)
no-repeat center;}



#article-listing
.img-wrap img{height:150px!important;width:150px!important;padding:21px 0px 0px
3px;}



#article-listing
.article .summary {margin:10px 30px 0px
0px;color:#5B7A7E;width:360px;float:right;padding:25px 5px 0px
5px;background:url(http://i.imgur.com/cx9mS.png) no-repeat right top;}



#article-listing
.img-wrap img {max-width:100%!important;}



#article-listing
.article .meta {width:300px;float:right;position:absolute;top:50px;left:250px;}



#article-listing
.article .meta span {padding:0px 5px;}



#article-listing
.article{position:relative;}



#article-listing .first-of-type .summary {margin:15px 30px 0px 0px!important;}



#article-listing
.first-of-type .meta {top:40px!important;}



#article-single .bd{padding-top:40px;}



#article-supplement
.yui-nav{visibility:hidden;}



#article-supplement.new-style-supplement{border-bottom:0px;}



.new-style-supplement
#comment-list .comment-reply { background:url(http://i.imgur.com/YfEqK.png)
no-repeat bottom;border-top:1px dashed #FC6B7A;}



a:hover{font-family:segoe print,
Times;font-style:italic;color:#FBFFF5!important;text-shadow:2px 2px 2px #556600!important;background:transparent;}



a{font-family:italic;}a:hover{color:#BA9154;text-decoration:none;}.first-of-type
li:hover{background:transparent url(http://i.imgur.com/YTDaz.png);}



#widget-recentVisitor
.hd a,#w-profile-status .status-bubble ,.yut-pg-container .pg-previous
.ico,.yut-pg-container .pg-next .ico,#article-single
.emotion,#widget-searchbox,#article-single #socialGroup-bottom,#article-listing
.article .meta .date,#article-listing .article .meta
.view-permission,#article-listing .article .meta .divider,#widget-category li
.ico,#article-breadcrumb,#article-navigation {display:none;}



#comment-list
.vcard {position:relative;}

#comment-list .vcard a{z-index:9!important;}



#comment-list
.vcard img {height:60px;width:60px;}



#comment-list
.vcard
span{font-size:0px!important;display:block!important;text-indent:9999px!important;background:url(http://i.imgur.com/uNRVi.png)
no-repeat left top;height:70px;width:70px;position:absolute;top:0px;left:0px;}



#comment-list
.comment-content {margin-left: 70px;}



 



</style>




Blog Taito

Report abuse for this article

Copyright © 2013 Yahoo!, Inc. All rights reserved