Options
Theme Blog Facebook | Diễn Đàn Tuổi Trẻ Việt Nam Uhm.VN
- Theme Blog Facebook
-
Theme Blog Facebook
prince.new01 > 09-07-2012, 02:30 PM
Theme Blog Facebook
![[Image: Untitled.jpg]](http://i589.photobucket.com/albums/ss339/h0oooo/Untitled.jpg)
![[Image: Untitled2.jpg]](http://i589.photobucket.com/albums/ss339/h0oooo/Untitled2.jpg)
Các bạn sắp xếp bố cục như sau
Các phần mình chú thích các bạn chia vào các module cho hợp lý nhé!
Thêm CSS này vào CSS chính
#article-single .actions,#w-profile-card .status {z-index:1;}
<style type="text/css">
#article-listing .article .summary-short, #article-single .article .content{font-size:12px!important;}
/*LOGO*/
#asb-nav-logo{background-position:-1px -152px!important;}
#w-profile-img-ctn img{display:none;}
#w-profile-img-ctn{background:url(http://i1263.photobucket.com/albums/ii62...ngface.gif) no-repeat;}
a{color:#3B5998;}
a:hover{text-decoration:underline;}
body{font-size:11px;font-family:tahoma, verdana, arial, sans-serif;color:#333;line-height:1.28;}
html{background:white;}
#hd{background:transparent;border-bottom:0px;margin-bottom:0px;}
#sidebar2{border:0px!important;width:179px;}
.three-col #yui-main{margin-left:180px;width:540px;}
.yui-b #sidebar1{border:0px!important;width:245px;}
.yui-t6 .yui-b{width:245px;}
.widget h3{color:#999;}
#bd{border-right:1px solid #ccc;background:white url(http://i589.photobucket.com/albums/ss339...border.png) repeat-y left top;min-height:650px;}
#ft{margin-top:0px;}
.divider{background:transparent!important;}
.widget h3{padding:0px 0px;}
.widget .bd{padding:5px 5px 0px 0px!important;}
.widget{padding:5px 0px;border-top:0px;}
.yui-b #sidebar1 #widget-externalSource h3{background:#F2F2F2;padding:5px;border-top
olid 1px #E2E2E2;}
#ft{font-size:100%;}
#article-listing .emotion, #article-single .emotion{background:url(http://i1263.photobucket.com/albums/ii62...ngface.gif) no-repeat scroll transparent;width:50px;height:50px;}
#article-listing span.att1, #article-single span.att1{background-position:-0px -0px;}
#article-listing span.att2, #article-single span.att2{background-position:-0px -50px;}
#article-listing span.att3, #article-single span.att3{background-position:-0px -100px;}
#article-listing span.att4, #article-single span.att4{background-position:-0px -150px;}
#article-listing span.att5, #article-single span.att5{background-position:-0px -200px;}
#article-listing span.att6, #article-single span.att6{background-position:-0px -250px;}
#article-listing span.att7, #article-single span.att7{background-position:-0px -300px;}
#article-listing span.att8, #article-single span.att8{background-position:-0px -350px;}
#article-listing span.att9, #article-single span.att9{background-position:-0px -400px;}
#article-listing span.att10, #article-single span.att10{background-position:-0px -450px;}
#article-listing span.att11, #article-single span.att11{background-position:-0px -500px;}
#article-listing span.att12, #article-single span.att12{background-position:-0px -550px;}
.socialGroup .twitter, .article .category, #article-single .bd .tag, .new-style-supplement #comment-list .comment-content .action a.action-delete-reply, .new-style-supplement #comment-list .comment-content .action a.action-delete-comment, #profilecard-hover, #article-bottom-nav, #article-single .bd .trackback, #article-navigation, #article-breadcrumb, #emotion-carousel, #article-single .comment-count, #article-single #socialGroup-top{display:none;}
#pagination-bottom{border:0px;background:transparent;padding:10px 0px;margin-bottom:30px;}
.yut-pg-container .pg-page, .yut-pg-container .pg-current-page, .yut-pg-container .pg-break{display:none;}
.yut-pg-container .pg-previous, .yut-pg-container .pg-next{height:25px;line-height:25px;width:95px;border:0px;background:transparent;}
.yut-pg-container .pg-previous{float:left;margin-left:20px;}
.yut-pg-container .pg-next{float:right;margin-right:20px;}
.yut-pg-container .pg-previous .ico{background:no-repeat;}
.yut-pg-container .pg-next .ico{background:no-repeat;}
.yut-pg-container .pg-previous .ico, .yut-pg-container .pg-next .ico {width:95px;height:25px;}
.yut-pg-container .pg-previous-disabled .ico, .yut-pg-container .pg-next-disabled .ico{background:transparent!important;}
#article-single .article .title{font-size:12px;color:#3B5998;}
#article-single .article .content a img{max-width:70%!important;}
#article-single .bd{padding:25px 30px 12px 20px;}
#article-single .bd .meta{padding-bottom:20px;border-bottom:1px solid #ccc;}
#article-single .actions{width:80px;position:absolute;padding:5px 5px;border-bottom:0px;right:5px;}
#article-single #socialGroup-bottom{position:absolute;top:50px;width:100px;right:5px;padding:0px 0px;}
#article-supplement .yui-nav .selected{background:transparent;}
#article-supplement .yui-nav{border-bottom:0px;}
#article-single{background:transparent;border:0px;margin-top:90px;}
#article-supplement, #article-supplement.new-style-supplement{border:0px!important;}
#article-supplement{background:transparent;}
#article-supplement .yui-nav li, #article-supplement .yui-nav .selected{height:25px;line-height:25px;margin-bottom:0px;}
#article-supplement .yui-content {padding:0px 30px 30px 20px!important;}
.new-style-supplement #comment-list .comment-item{padding:5px 5px 4px;background:#EDEFF4;border-top:1px solid white;}
.vcard .url, .vcard .url img{height:32px;width:32px;}
#comment-list .reply-container, #comment-list .comment-content, #comment-list .reply-container textarea{margin-left:43px;}
.new-style-supplement #comment-form-wrapper{margin-bottom:0px;}
#comment-form .fields{margin-left:42px;}
#comment-form {background:#EDEFF4;padding:5px 5px 4px;}
#comment-textarea{width:350px!important;height:18px;float:left;max-height:18px;max-width:350px;display:inline-block;outline:none;}
#comment-form .fields{text-align:left;}
#comment-form .fields .yut-btn, #comment-list .reply-container .yut-btn{background:#5B74A8;margin-bottom:1px;border-color:#29447E #29447E #1A356E;padding:4px;margin-left:5px;}
#comment-form .fields .yut-btn .sm{font-weight:bold;}
#comment-list .reply-container{background:#EDEFF4;padding:5px 5px;}
#comment-list .reply-container .reply-form .vcard, #comment-list .reply-container .emoticon, #comment-list .reply-container .reply{display:none;}
#comment-list .reply-container .reply-form{display:inline-block;}
.three-col #comment-list .reply-container textarea{width:320px;margin-left:0px;float:left;height:18px;max-height:18px;max-width:320px;margin-bottom:0px!important;}
#comment-list .vcard{width:32px;height:32px;}
.new-style-supplement #comment-history .action-load-more-comments{display:block;border-top:1px solid white;padding:5px 5px;background:#EDEFF4;text-indent:5px;}
#comment-list .comment-content .action-show-reply, #comment-list .comment-content .action-show-all-reply{margin-bottom:0px;}
#article-single .article-ft, #comment-form .fields .set-private, .emoticon-toggle, #comment-form .fields .emoticon, #ygubcmt .comment-charcounter, .new-style-supplement #ygubcmt .ft{display:none;}
#asb-nav-logo{height:31px!important;width:103px;margin:3px 15px 0 0;background:transparent url(http://i589.photobucket.com/albums/ss339...ok_ico.png) no-repeat;background-position:-1px -152px;}
#asb-nav li.nav-item{height:32px;padding:0px 0px;}
#asb-nav li.nav-item a.nav-link{font-size:100%;font-weight:bold;color:#D8DFEA;width:100%;text-decoration:none;}
#asb-menu, #asb-header-ctn{display:none;}
#asb-uh{background:#3B5998;height:38px;line-height:38px;border-bottom:1px solid #133783;}
#asb-nav{background:#3B5998;height:31px;line-height:31px;}
#asb-nav li.nav-item .divider{display:none;}
#asb-nav-explorer a.nav-link, #asb-nav-update a.nav-link{text-indent:-9999px;}
#asb-nav-explorer{background:url(http://i589.photobucket.com/albums/ss339...ok_ico.png) no-repeat;background-position:-25px -255px;width:20px;padding:0px 0px!important;height:31px!important;margin-top:3px;margin-right:3px;}
#asb-nav-myblog, #asb-nav-dashboard{float:right!important;margin-top:2px;padding:0px 6px!important;}
#asb-nav-myblog{margin-right:0px;}
#asb-nav-myblog a.nav-link{background:transparent url(http://i1263.photobucket.com/albums/ii62...oiface.gif) no-repeat left center;padding-left:45px!important;width:auto!important;}
#asb-nav-dashboard{margin-right:55px;}
#asb-nav-signout{position:absolute!important;top:4px;right:10px;padding:0px 6px!important;}
#asb-nav-signin, #asb-nav-signup{float:right!important;}
#asb-nav-signup{margin-right:20px;}
#asb-nav-signup em{display:none;}
#asb-nav-myblog:hover, #asb-nav-dashboard:hover, #asb-nav-signout:hover{background:#4B67A1;}
#asb-nav-myblog a.nav-link:hover, #asb-nav-dashboard a.nav-link:hover, #asb-nav-signout a.nav-link:hover, #asb-nav-signina.nav-link:hover, #asb-nav-signup a.nav-link:hover{color:white!important;}
#asb-nav-update{background:url(http://i589.photobucket.com/albums/ss339...ok_ico.png) no-repeat;background-position:-27px -288px;width:20px;padding:0px 0px!important;height:31px!important;margin-top:3px;}
#asb-nav .expanded {background:transparent url(http://i589.photobucket.com/albums/ss339...ok_ico.png) no-repeat;background-position:-25px -320px;}
#asb-nav-update-ctn{top:40px;left:-130px;}
#asb-nav-right{position:absolute;top:5px;left:175px;width:400px;}
#asb-nav-mail, #asb-nav-yahoo, #asb-nav-help, #asb-nav-search span.ico, #asb-nav-search span.search-secondary{display:none;}
#asb-nav-search input{float:left;width:300px;margin-right:3px;height:20px;line-height:20px;outline:none;}
#asb-nav-search span.search-primary{border:0px!important;margin-top:2px;height:21px;background-color:white;width:21px;left:-10px;border:0px;outline:1px solid white;}
#asb-nav-search button {background:url(http://i589.photobucket.com/albums/ss339...ok_ico.png) no-repeat;background-position:-8px -34px;height:20px;line-height:20px;text-indent:-9999px;}
#asb-nav-update-ctn li.update-item .content a.title{color:#3B5998;height:20px;line-height:20px;float:left;}
#asb-nav-update-ctn li.update-item .content p{float:left;width:100%;height:18px;line-height:5px;}
#article-list{border:0px!important;padding-left:18px;padding-right:25px;}
#article-listing{margin-top:90px;}
#article-list{background:transparent;padding:20px 30px 0 25px;}
#article-listing .article-listing-hd{display:none;}
#article-listing .article{border-top:1px solid #E9E9E9!important;}
#article-listing .article .title{font-size:100%;}
#article-listing .article .meta .divider, #article-listing .article .meta .view-permission, #article-listing .article .meta .trackback-count{display:none;}
#article-listing .article .meta span{margin-right:10px;}
#article-listing .article .summary{display:none;}
#article-listing .article .summary-short{display:block!important;font-size:100%;margin-left:60px;margin-top:10px;}
#article-listing .first-of-type{padding-top:15px!important;}
#article-listing .article .tag{display:none;}
#article-listing .article .hd{width:80px;float:right;}
#article-listing .img-wrap{margin-left:60px;text-align:left;}
#article-listing .article .summary-short img, #widget-recentComment li span img{display:none;}
#article-list.display-compact .img-wrap {float:none;text-align:left;}
#article-list.display-compact .img-wrap img{max-width:70%!important;}
#article-listing.photo .photo-list-title{font-size:100%;color:#3B5998;}
#article-listing.photo .photo-list-image-count{color:#3B5998;}
#article-listing.photo .article-photoview-hd{margin-bottom:0px;margin-top:95px;margin-left:10px;}
#article-photoview {padding:10px 20px 25px;}
#article-photoview .article .title{font-size:100%!important;margin-bottom:5px!important;margin-top:5px;color:#3B5998!important;}
#article-photoview .article{padding-bottom:0px!important;}
#carousel .hide-thumbnails{color:#3B5998;}
#w-profile-card .status {position:absolute;top:50px;width:500px;padding:5px;left:200px;background:white;}
#w-editable-status .inline-edit-field{width:490px;height:18px!important;display:block;}
#w-profile-status .status-bubble{background:url(http://i589.photobucket.com/albums/ss339...ok_ico.png) no-repeat;background-position:-11px -8px;width:11px;}
#w-profile-card .quick-links li.profile-only, #w-profile-card .quick-links .profile{display:none;}
#w-profile-card {padding:5px 0px 0px;overflow:hidden;width:185px;}
#w-profile-card .hd{width:130px;float:right;margin-right:5px;}
#w-profile-name{font-size:11px;color:#3B5998;line-height:50px;margin-right:10px;word-wrap:break-word;}
#w-profile-img-ctn {width:40px;height:40px;}
#w-profile-img-ctn img{max-width:40px;max-height:40px;margin-left:0px;}
#w-profile-card .quick-links .newpost{display:none;}
#w-profile-card .follow.group{margin-top:0px;}
#w-profile-card .highlight a{padding:0px 5px;font-weight:bold;color:#3B5998;}
#w-profile-card .follow.group .yut-btn-light{background:#F1F2F7;border:1px solid #DADFF7;}
#w-profile-card .follow .ico {width:15px;height:13px;background:url(http://i589.photobucket.com/albums/ss339...b_like.png) no-repeat;background-position:-0px -36px;margin-bottom:1px;}
#w-profile-card .to-unfollow .unfollow{display:none;}
#w-profile-img-root{width:40px;}
#w-profile-name-wrap .inline-edit-container .inline-edit-field{width:120px;}
#w-profile-name-wrap .inline-edit-container{text-align:left;}
#w-profile-card .status .text{font-size:100%;}
#widget-recentPost li, #widget-recentComment li{list-style:none;background:url(http://i1263.photobucket.com/albums/ii62.../hot-1.gif) no-repeat left;padding-left:20px;margin-left:0px;}
#widget-category li em{color:#3B5998;background:#D8DFEA;padding:0px 4px;}
#widget-category li .ico{background:url(http://i589.photobucket.com/albums/ss339...ok_ico.png) no-repeat;background-position:-30px -37px;}
#widget-recentPost li time, #widget-recentComment li time{display:none;}
#widget-recentPost li a{margin-top:0px!important;text-decoration:none;color:#333!important;}
#widget-recentComment li a{text-decoration:none;}
#widget-category li:hover, #widget-recentPost li:hover, #widget-recentComment li:hover, .yui-b #sidebar2 #widget-externalSource li:hover{background-color:#EFF2F7;}
#widget-recentVisitor .bd p{display:none;}
#widget-recentVisitor .bd{padding:5px 4px 15px 0px!important;display:block;float:left;}
#widget-recentVisitor .hd a {position:absolute;top:0px;right:5px;}
#widget-recentVisitor .bd ul{float:left;}
#widget-recentVisitor .bd li{float:left;width:32px;margin:1px 1px 0px 0px;}
#widget-recentVisitor .bd .profile-img {margin:0px;}
#widget-recentVisitor .bd .profile-img img{height:32px;width:32px;}
#widget-followingList li{width:32px;margin:1px 1px 0px 0px;}
#widget-followingList .photo {width:32px;height:32px;}
#widget-followingList li .user-name{display:none;}
#widget-recentComment li{height:29px;overflow:hidden;line-height:29px;margin-right:10px;border-bottom:1px solid #E9E9E9;}
#widget-recentComment li a{color:#333!important;}
#widget-recentComment h3{padding:5px 5px!important;margin-top:10px;background:#F2F2F2;border-topolid 1px #E2E2E2!important;}
.asb-searchbox span.yut-btn-search{height:20px;}
</style>
<!--Menu status-->
<style type="text/css">
#menustatus{position:absolute;left:200px;top:20px;}
#menustatus ul{padding:7px 0 8px;}
#menustatus .menust{float:left;margin-right:20px;}
#menustatus .menust a{font-weight:bold;font-size:100%;}
#menustatus .menust a.db{color:#333!important;}
#menustatus .menust .subst{display:inline-block;background:url(http://i589.photobucket.com/albums/ss339...ok_ico.png) no-repeat;height:16px;width:16px;margin-right:5px;}
#menustatus .menust .sub1{background-position:-60px -65px;}
#menustatus .menust .sub2{background-position:-9px -93px;}
#menustatus .menust .sub3{background-position:-43px -65px;}
</style>
<div id="menustatus">
<ul>
<li class="menust"><a class="db"><span class="subst sub1"></span>Cập nhật trạng thái</a></li>
<li class="menust"><a href="http://blog.yahoo.com/9xlovesexpro/category/Th%E1%BA%BF+Gi%E1%BB%9Bi+Ng%C6%B0%E1%BB%9Di+%C4%90%E1%BA%B9p%2C+H%C3%ACnh+%E1%BA%A2nh+Hot+Girl"><span class="subst sub2"></span>Xem ảnh/Video</a></li>
<li class="menust"><a href="http://blog.yahoo.com/y/blog/post"><span class="subst sub3"></span>Viết bài mới</a></li>
</ul>
</div>
<!--Phần dành cho quảng cáo-->
<style type="text/css">
#quangcao .subqc{margin:8px 4px 8px 0px;border-top:1px solid #E9E9E9;width:100%;float:left;display:block;}
#quangcao .titleqc{font-weight:bold;line-height:13px;margin-bottom:0px;margin-top:5px;}
#quangcao .noidungqc{padding-top:3px;}
#quangcao .imgqc{width:100px;display:block;float:left;margin-right:8px;}
#quangcao .imgqc img{padding-top:3px;max-width:100px;max-height:72px;}
#quangcao .bdtext{line-height:13px;}
</style>
<div id="quangcao">
<div class="subqc">
<div class="bdqc">
<div class="titleqc">
<a class="titlez" href="#">Cùng tham gia Uhm.vn nhé!</a>
</div>
<div class="noidungqc">
<a class="imgqc" href=""><img src="http://i1263.photobucket.com/albums/ii627/9xlovesexpro/avatar102_16.gif"></a>
<div class="textqc">
<div class="bdtext">Diễn Đàn Tuổi Trẻ Việt Nam
</div>
</div>
</div>
</div>
</div>
<div class="subqc">
<div class="bdqc">
<div class="titleqc">
<a class="titlez" href="#">Hình KInh Dị </a>
</div>
<div class="noidungqc">
<a class="imgqc" href=""><img src="http://i1263.photobucket.com/albums/ii627/9xlovesexpro/kinhdi.gif"></a>
<div class="textqc">
<div class="bdtext">Thế Gới Ảnh Kinh Dị
Truy cập uhm.vn nhé!
</div>
</div>
</div>
</div>
</div>
<div class="subqc">
<div class="bdqc">
<div class="titleqc">
<a class="titlez" href="#">Topmua.vn</a>
</div>
<div class="noidungqc">
<a class="imgqc" href=""><img//////////></a>
<div class="textqc">
<div class="bdtext">Nơi Mua Sắm lý Tưởng
</div>
</div>
</div>
</div>
</div>
</div>
<h3>Kho Ứng Dụng</h3>
<ul>
<li class="otsub"><a class="otsub1" href="http://blog.yahoo.com/9xlovesexpro/category/Th%E1%BA%BF+Gi%E1%BB%9Bi+Ng%C6%B0%E1%BB%9Di+%C4%90%E1%BA%B9p%2C+H%C3%ACnh+%E1%BA%A2nh+Hot+Girl" target="_blank"><span class="otimg"><div class="otico otico4"></div></span><div class="ottext">Girl Xinh</div></a></li>
<li class="otsub"><a class="otsub1" href="http://blog.yahoo.com/9xlovesexpro/category/Th%E1%BB%A7+thu%E1%BA%ADt+Blog" target="_blank"><span class="otimg"><div class="otico otico5"></div></span><div class="ottext">Thủ Thuật</div></a></li>
<li class="otsub"><a class="otsub1" href="http://blog.yahoo.com/9xlovesexpro/category/Theme+Blog" target="_blank"><span class="otimg"><div class="otico otico6"></div></span><div class="ottext">Theme Blog 2013</div></a></li>
<li class="otsub"><a class="otsub1" href="http://blog.yahoo.com/9xlovesexpro/category/Apple.com" target="_blank"><span class="otimg"><div class="otico otico7"></div></span><div class="ottext">Công Nghệ</div></a></li>
</ul>