Theme Blog Facebook
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-top
olid 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>