[Share] Trang chủ tin tức đơn giản ngắn gọn và đẹp - Edit huyvip83

avatar

huyvip83175
307
62
Punbb
Cẩn thận
Mod phụ hotrofm
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
175
Points :
307
Like :
62
Punbb
Cẩn thận
Mod phụ hotrofm
Code cho hết vào html
Thay các h-pahe theo các chuyên mục tương ứng

Demo:
Code:
http://thainguyennews.forumvi.com/h22-page

Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" id="min-width" lang="vi" xml:lang="vi" xmlns:og="http://opengraphprotocol.org/schema/"  >
    <head>
    <title>Diễn đàn Thái Nguyên News</title>
    <meta content='deskripsi blog kamu' name='Diễn đàn chia sẻ game, anime, video'/>
    <meta content='keyword blog kamu' name='gunny private, game offline, game online private, web game private, phan mem, ghost win 7, ghost win xp, tai anime, anime vietsub, anime mp4 hay, anime convert cho mobile, anime mobile, download anime, game lau, gunny lau, gunny private 2014'/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style id='page-skin-1' type='text/css'><!--
    /**
    * Theme Name: Shiroi
    * Theme URL: http://shiroi-bt.blogspot.com/
    * Description: Minimalist Blogger template
    * Author: Johanes DJ
    * Author URL: http://Djogzs.blogspot.com
    *
    */
    .navbar {
    visibility:hidden;
    display:none;
    }
    #content{
    max-width: 600px;
    float: left;
    position: relative;
    width: 100%;
    }
    .postim{
    background:#fff;
    padding:10px;
    margin-top:10px;
    }
    .profile-textblock {
    margin: .5em 0;
    text-align: justify;
    font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 10pt;
    letter-spacing: 0.02em;
    line-height: 20px;
    font-smooth: always;
    }
    .profile-img {
    float: left;
    margin: 0 5px 5px;
    border: 1px solid #DDD;
    padding: 5px;
    border-radius: 5px;
    }
    .PopularPosts img{padding: 0px;
    border-radius: 50px;
    border: 4px solid #f0f0f0;}
    .item-snippet{
    font-style: italic;
    color: #777;
    line-height: 26px;
    font-size: 9pt;}
    .PopularPosts .item-thumbnail {
    float: left;
    margin: 0 5px 5px 0;
    height: 72px;
    padding: 5px;
    }
    .comments .comments-content .user {
    font-weight: bold;
    font-size: 12pt;
    color: #474747;
    }
    .comments {
    clear: both;
    background: #FAFAFA;
    padding: 30px;
    }
    .comments .comments-content .datetime {
    margin-right: 10px;
    font-style: normal;
    font-weight: 200;
    font-size: 8pt;
    letter-spacing: 0.01em;
    color: #fff;
    position: absolute;
    bottom: 12px;
    right: 0px;
    }
    .post h2{
    text-align: left;
    color: #474747;
    padding: 10px;
    font-weight: bold;
    font-size: 13pt;
    text-transform: uppercase;
    padding-top: 20px;
    }
    .post h2 a:link,.post h2 a:visited{
    color:#474747;
    }
    .arrow{
    position:absolute;
    top:50px;
    left:-10px;
    height:30px;
    width:10px;
    }
    .postright:hover .jomore{opacity:1}
    .postright{
    position: relative;
    }
    .postright img{width:100%;height: auto;}
    .author,.clock{
    padding: 3px 20px;
    margin: 0px 0px 0px -10px;
    font-size: 11px;
    color: #000;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    }
    .clock {float:right;}
    .widget-content{padding: 10px;
    color: #666;
    padding-bottom: 15px;}
    .comments .comments-content .comment-header, .comments .comments-content .comment-content {
    margin: 0 10px 8px;
    }
    #ArchiveList ul li {
    margin: -6px 0 0 10px !important;
    }
    #ArchiveList ul li a:link, #ArchiveList ul li a:visited {
    padding: 0px 0px 0px 10px !important;
    margin:5px;
    }
    #commentsbox {
    margin:0;
    width:600px;
    }
    h3#comments{
    font-size30px;
    font-family: 'Open Sans', sans-serif;
    color:#ffffff;
    font-weight:normal;
    padding:10px 10px ;
    background:#D3D4CE;
    margin-top:10px;
    }
    ol.commentlist {
    margin:0px 0 0;
    clear:both;
    overflow:hidden;
    list-style:none;
    }
    ol.commentlist li {
    margin:0px 0;
    line-height:18px;
    padding:10px;
    background:#78786D;
    }
    ol.commentlist li .comment-author {
    color:#ffffff;
    }
    .comment-body {
    margin: auto;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    padding: 5px;
    }
    ol.commentlist li .comment-author a:link,ol.commentlist li .comment-author a:visited{
    color:#ffffff;
    font-weight:bold;
    text-decoration:none !important;font-size:15px;font-family: 'Open Sans', sans-serif;}
    }
    ol.commentlist li .comment-author .fn {
    color:#000;
    }
    ol.commentlist li .comment-author .avatar{
    float:right;
    background:#fff;
    padding:3px;
    }
    .comments .comments-content .comment-content {
    text-align: justify;
    border-bottom: 1px solid #DDD;
    padding-top: 10px;
    font-style: normal;
    font-size: 10pt;
    letter-spacing: 0.01em;
    color: #000;
    }
    .comments .comment .comment-actions a {
    padding: 5px;
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    color: #222;
    margin: 5px;
    position: relative;
    }
    .comments .comments-content .comment-replies {
    margin-left: 65px;
    margin-top: 1em;
    }
    .comments .comments-content .inline-thread {
    padding: .5em 0em;
    }
    .comments h4{
    font-weight: bold;
    font-size: 15pt;
    letter-spacing: 0.01em;
    color: #474747;
    text-align: center;}
    .comments .continue a {
    padding: 5px;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    margin-left: 90px;
    background: #2ABEC0;
    text-transform: uppercase;
    }
    .avatar-image-container {
    float:right;
    height:50px;
    width:65px;
    }
    .avatar-image-container img {
    height:50px;
    width:50px;
    }
    .comments .avatar-image-container {
    float: left;
    max-height: 75px;
    overflow: hidden;
    width: 50px;
    padding: 5px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #2ABEC0;
    margin-top: 0px;
    }
    .comments .avatar-image-container img {height:auto;border-radius: 50px;}
    ol.commentlist li .comment-meta{
    font-size:13px;font-family: 'Open Sans', sans-serif;
    }
    ol.commentlist li .comment-meta .commentmetadata{
    color:#555;
    }
    ol.commentlist li .comment-meta a {
    color:#ffffff;
    text-decoration:none !important;
    }
    ol.commentlist li p {
    line-height:22px;
    margin-top:5px;
    color:#FEFAEF;
    font-size:12px;
    }
    ol.commentlist li .reply{
    margin-top:10px;
    font-size:10px;
    }
    ol.commentlist li .reply a{
    background:#5F553B;
    color:#fff;
    text-decoration:none;
    padding:3px 10px;
    }
    ol.commentlist li.odd {
    background:#D3D4CE;
    }
    ol.commentlist li.even {
    }
    ol.commentlist li.even:hover{BACKGROUND:#D3D4CE;}
    ol.commentlist li ul.children {
    list-style:none;
    margin:1em 0 0;
    text-indent:0;
    }
    ol.commentlist li ul.children li.depth-2 {
    margin:0 0 0px 50px;
    }
    ol.commentlist li ul.children li.depth-3 {
    margin:0 0 0px 50px;
    }
    ol.commentlist li ul.children li.depth-4 {
    margin:0 0 0px 50px;
    }
    ol.commentlist li ul.children li.depth-5 {
    margin:0 0 0px 50px;
    }
    .comment-nav{
    padding:5px ;
    height:20px;
    background:#C4D533;
    }
    .comment-nav a:link,.comment-nav a:visited{
    color:#fff;
    }
    #respond{
    padding:20px;
    margin:20px 0px;
    }
    #respond h3 {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    color: #000;
    padding-bottom: 10px;
    font-weight: normal;
    }
    #commentform p{
    margin:5px 0px;
    }
    #respond label{
    display:block;
    padding:5px 0;
    font-weight:bold;
    color:#3F361F;
    }
    #respond label small {
    font-size:10px;
    }
    #respond input {
    margin-bottom:10px;
    padding:5px 0px;
    margin:0 10px 10px 0;
    background:#6F6753;
    color:#F7EEE9;
    }
    #commentform input{
    width:99%;
    }
    #respond input#commentSubmit {
    width:100px;
    padding:5px 0px;
    background:#B7CD2C;
    color:#fff;
    margin:10px 0px;
    font-weight:bold;
    cursor:pointer;
    }
    textarea#comment{
    background:#6F6753;
    width:99%;
    margin:0px 0px;
    padding:5px 0px;
    color:#F7EEE9;
    }
    html,body,div,span,object,h1,h2,h3,h4,h5,h6,p
    ,pre,a,abbr,acronym,address,big,cite
    ,code,del,dfn,em,img,ins,kbd,q,samp,small
    ,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,
    form,label,legend,table,caption,tbody,tfoot,
    thead,tr,th,td{
    margin:0;
    padding:0;
    vertical-align:baseline;
    outline:none;
    }
    b,i,hr,u,center,menu,layer,s,strike,font,xmp
    {
    margin:0;
    padding:0;
    vertical-align:baseline;
    outline:none;
    font-size:100%;
    background:transparent;
    border:none;
    }
    font{
    color:#333
    }
    center{
    text-align:left
    }
    body {
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    font-family: 'Open Sans', sans-serif;
    color: #312C21;
    overflow-x: hidden;
    font-size: 13px;
    background:#F0F0F0;
    }
    a {
    color: #222;
    text-decoration: none;
    }
    a:visited {
    color: #000;
    }
    a:hover, a:active {
    color: #000;
    text-decoration:none;
    }
    h1,h2, h3, h4, h5, h6 {
    color: #000;
    font-weight: bold;
    }
    h1 {
    font-size: 85px;
    font-family: 'Open Sans', sans-serif;}
    h2 {
    font-size: 21px;
    }
    h3 {
    font-size: 19px;
    }
    h4 {
    font-size: 17px;color:#222;
    }
    h5 {
    font-size: 15px;
    }
    h6 {
    font-size: 13px;
    }
    ul {
    list-style: none;
    }
    blockquote {
    font-style: italic;
    color: black;
    border: 1px double #DDD;
    padding: 25px;
    border-radius: 5px;
    overflow: hidden;
    background: white;
    }
    blockquote blockquote {
    color: #222;
    }
    blockquote em {
    font-style: normal;
    }
    pre {
    padding: 9px;
    background: #f9f9f9;
    border: 1px solid #ccc;
    overflow:hidden;
    }
    code {
    padding: 0 3px;
    background: #eee;
    }
    pre code {
    background: transparent;
    }
    .clear {
    clear:both;
    }
    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 0px;
    }
    #casing{
    width: 100%;
    max-width: 930px;
    margin: auto;
    padding-top: 20px;
    }
    #wrapper{
    max-width:1000px;
    width:100%;
    margin:auto;
    }
    #header{
    max-width: 100%;
    position: relative;
    margin: auto;
    overflow: hidden;
    background: #373737;
    }
    .header-wrap {max-width: 930px;margin:auto;position:relative;}
    h1#blog-title {
    text-align: left;
    margin-top: 20px;
    font-weight: 200;
    font-size: 40pt;
    color: #fff;
    line-height: 45px;
    }
    h1#blog-title a {padding:5px;color:#fff;}
    h1#blog-title a:link,h1#blog-title a:visited {
    color: #fff;
    }
    h2#blog-desc {
    padding: 5px;
    text-align: left;
    font-family: 'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-size: 15pt;
    letter-spacing: 0.01em;
    color: #fff;
    margin-bottom: 20px;
    }
    .title h2{
    text-decoration: none;
    padding: 10px;
    margin-bottom: 15px;
    text-align: left;
    margin: auto;
    font-weight: bold;
    font-size: 20pt;
    color: #fff;
    }
    .title h2 a:link, .title h2 a:visited{
    color:#000;text-decoration: none;
    }
    .timemeta {float: left;
    margin-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #AEAEAE;
    color: #AEAEAE;
    text-transform: uppercase;
    font-size: 8pt;}
    .author1 {float: left;
    margin-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #AEAEAE;
    color: #AEAEAE;
    text-transform: uppercase;
    font-size: 8pt;}
    .postmeta, .postinfo{
    background:#F5ECC1;
    padding:3px 10px;
    border:1px solid #DFD5A7;
    font-size:10px;
    text-transform:uppercase;
    }
    .post {
    border-bottom: 1px solid #ddd;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    float: right;
    max-width: 480px;
    border-radius: 2px;}
    .pagepost ul {list-style: disc;}
    .pagepost{
    width: 550px;
    float: left;
    padding: 10px;
    line-height: 2.0;
    margin-bottom: 25px;
    font-weight: 300;
    font-size: 10pt;
    }
    .pagepost a{color:#2D5A9A;text-decoration:underline;}
    .pagepost a:hover {color:#2B5795;}
    .widget {
    margin: auto;}
    .singlepst p:first-letter {
    font-size : 30px;
    font-weight : bold;
    float : left;
    font-family: 'Open Sans', sans-serif;
    color : #3F3A2B;
    margin:8px 5px 0px 0px;
    }
    .cover {
    margin: 0 0;
    color: #222;
    margin-bottom: 10px;
    }
    h2.pagetitle{
    font-size: 12px;
    padding: 10px 0px;
    font-weight: normal;
    margin-right: 10px;
    color: #6F6753;
    text-align: center;
    }
    .comments .avatar-image-container img {
    max-width: 50px;
    }
    .PopularPosts .item-title a {font-size: 15pt;}
    #main2 .widget-content {
    overflow: hidden;
    margin-bottom: 20px;
    padding: 20px;
    padding-top:10px;
    background: #fff;
    font-size: 10pt;
    letter-spacing: 0.02em;
    line-height: 20px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    padding-left: 15px;
    font-weight: normal;
    color: #474747;
    border-radius: 0px 0px 2px 2px;
    }
    #main2 h2:hover {cursor:pointer;}
    #main2 h2{
    text-align: left;
    margin: auto;
    padding: 20px 5px;
    border-radius: 2px 2px 0px 0px;
    padding-left: 15px;
    color: #474747;
    text-transform: uppercase;
    background: #fff;
    font-weight: bold;
    font-size: 13pt;}
    #main2 ul li a:link, #main2 ul li a:visited {-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    font-weight: 200;
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 24pt;
    font-smooth: always;
    color: ##8AA6B4;}
    #main2 ul li{border-bottom: 1px solid #DDD;}
    #main2 ul li a:hover{color:#2D89EF;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;}
    .fleft{
    text-align: center;
    margin: auto;
    width:100%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #474747;
    font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 8pt;
    margin-top:30px;
    text-transform: uppercase;
    background:#fff;}
    .fleft p {text-align: center;}
    .fleft a{color:#2ABEC0;}
    #Label1 ul li{font-family: 'Open Sans', sans-serif;}
    #LinkList1 ul li{font-family: 'Open Sans', sans-serif;}
    .crop-wrap{
    position: absolute;
    width: 80px;
    height: 80px;
    overflow: hidden;
    left: -105px;
    border-radius: 50px;
    top: 0px;
    box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
    border: 4px solid #fff;
    background: url(http://1.bp.blogspot.com/-_rVBDk7MBgs/UeW2vn3fwWI/AAAAAAAAGzI/ONP2vpF-MdE/s1600/Untitled-1.png);
    background-size: 80px;}
    .crop-wrap-dalem{margin-left: -60px;
    width: 200px;}
    .crop {
    width: 170px;
    height: 100%;
    overflow: hidden;
    margin: auto;}
    .posting {
    padding: 0px 15px 10px 15px;
    font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 8pt;
    letter-spacing: 0.02em;
    line-height: 20px;
    text-align: justify;
    position:relative;
    display:none;
    min-width: 120px;}
    .breadcrumb ul{margin:auto;}
    .breadcrumb ul li a{padding-right:30px;color:#000;font-weight:bold;}
    .breadcrumb li {
    position: relative;
    display: block;
    color: #474747;
    font-weight: bold;
    font-size: 14px;
    float: left;
    text-decoration: none;
    letter-spacing: 0.02em;
    padding: 10px 10px;}
    .breadcrumb{
    width: 100%;
    float: left;
    margin-bottom: 30px;
    text-transform: uppercase;
    }
    .home-link {
    display:none;}
    #blog-pager-newer-link {
    float: right;
    color: white;
    padding: 10px;
    text-align: center;
    overflow: hidden;}
    #blog-pager-older-link {
    float: left;
    padding: 10px;
    text-align: center;
    overflow: hidden;}
    #blog-pager-older-link a, #blog-pager-newer-link a {color: #bbb;
    line-height: 33px;
    padding: 5px;}
    #blog-pager {
    color: #DDD;
    text-transform: uppercase;
    font-size: 20px;
    float: left;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
    transition: all 0.2s ease-in-out;
    width: 100%;}
    .comments .comments-content {position: relative;
    margin-bottom: 16px;}
    .comments .comment-block {
    margin-left: 90px;
    position: relative;
    background: white;
    padding: 10px;}
    .blognames {margin:auto;}
    .jomore {position: relative;
    font-weight: normal;
    width: 100%;
    padding-bottom: 35px;}
    .jomorelink{
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    bottom: -9px;
    right: 0px;
    opacity:0;
    background: #2ABEC0;
    padding: 5px;
    font-size: 10px;
    border-radius: 2px 0px 0px 2px;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
    .post:hover .jomorelink{opacity:1;}
    .pagepost a {text-decoration: underline;}
    .pagepost img{padding: 0px;
    border: 5px solid #fff;
    max-width: 510px;}
    .BlogArchive #ArchiveList ul li {
    background: none;
    list-style: none;
    list-style-image: none;
    list-style-position: outside;
    border-width: 0;
    padding-left:0px;
    text-indent:0px;
    margin:0;
    background-image: none;}
    #ArchiveList .toggle-open {
    line-height: .6em;
    float: left;
    margin-top: 8px;}
    .post-count {display:none;}
    .post-footer-line-1 {
    border-top: 1px solid #fafafa;}
    .icon-action {display:none;}
    #search input[type="text"] {
    background: #fff;
    font-size: 13px;
    background-position-y: 10px;
    color: #222;
    max-width: 278px;
    padding: 10px;
    border: 1px solid #fff;
    height: 30px;
    font-family: 'Open Sans', sans-serif;
    border-bottom: 1px solid #ddd;
    width: 100%;
    text-transform: uppercase;}
    .main2 {width: 100%;list-style-type: none;}
    ::-webkit-scrollbar {
    width: 6px;
    background: #474747;}
    ::-webkit-scrollbar-thumb {background: #2ABEC0;}
    a.anes{
    font-size: 10pt;
    color: #fff;
    font-weight: bold;}
    .label-size a{-moz-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;color:#fff}
    .label-size a:hover{color:#222;-moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;}
    .comment-form {
    max-width: 520px;
    _width: 410px;
    clear: both;
    background: white;
    padding: 20px;
    border: 1px solid #DDD;
    border-radius: 5px;}
    .widget-item-control a{display:none;}
    .PopularPosts .item-title a {font-size:20pt;
    padding-bottom: .2em;}
    .readmore {width: 370px;
    border-bottom: 1px solid #ddd;}
    #Navbar1, #Attribution1 {display:none;}
    .bigcom {width: 234px;text-align: center;}
    .posted {
    width: 300px;
    border-right: 1px solid #ddd;
    text-align: center;}
    a.comment-link {float: left;
    margin-left: 10px;
    padding-right: 10px;
    color: #AEAEAE;
    text-transform: uppercase;
    font-size: 8pt;}

    .profile-name-link {
    background: no-repeat left top;
    display: inline;
    min-height: 20px;
    padding-left: 20px;
    }
    .label-size:hover {background: #2ABEC0;color:#222;-moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;}
    .label-size {
    background: #5D5D5D;
    padding: 5px;
    margin: 2px;
    font-size: 12px;
    float: left;
    overflow: hidden;
    text-align: left;
    -moz-transition: all 0.9s ease-in-out;
    -webkit-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
    color: #fff;
    text-transform: uppercase;
    border-left: 5px solid #2ABEC0;}
    #menujohanes{
    width:100%;
    font-size: 10pt;
    margin: auto;
    background: #5d5d5d;
    height: 50px;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    position: relative;}
    #menujohanes ul{
    list-style-type: none;
    z-index: 9;
    max-width: 930px;
    margin: auto;}
    #menujohanes ul li{
    float: left;
    position: relative;
    padding: 12px;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
    #menujohanes ul li:hover a.menu{color:#fff;}
    #menujohanes ul li:hover{
    background:#474747;}
    #menujohanes ul li a:hover {
    color:#fff;}
    #menujohanes ul li a{
    color: #fafafa;
    padding: 0 10px;
    line-height:25px;
    font-weight:bold;
    font-size: 10pt;
    display:block;
    text-decoration:none;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
    #menujohanes ul li ul li{float: none;position: relative;}
    #menujohanes ul li ul{
    position: absolute;
    top:49px;
    left:0;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display:none;
    background: #5d5d5d;}
    #menujohanes:hover ul li ul {width:150px;}
    #menujohanes ul li:hover > ul{-moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;display:block; }
    #menujohanes ul li ul li a{line-height:25px;}
    #menujohanes ul li ul li ul{
    position: absolute;
    top:0; left:150px;
    width:150px;
    background: #5d5d5d;}
    #menujohanes ul li.selected a{font-size: 10pt;font-weight:bold;}
    #menujohanes ul li.selected{color: #fff;background: #474747;font-weight:bold;}
    .pinterestjo:hover, .twitterjo:hover, .facebookjo:hover, .googlejo:hover {background-color:#65C7CA;}
    .pinterestjo, .twitterjo, .facebookjo, .googlejo {
    font-size: 13px;
    color: #222;
    width: 100%;
    z-index: 9;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    height: 45px;}
    /* Blog johanes djogzs.blogspot.com */
    .twitterjo{
    background: #5d5d5d url("http://4.bp.blogspot.com/-8BAKelUOAUY/UTyKNEclkHI/AAAAAAAAF3w/JWk7Bt7gJ6s/s1600/white_twitter_bird.png")no-repeat center center;}
    .facebookjo {
    background: #474747 url("http://3.bp.blogspot.com/-vG6u1PK9oY0/UTyKNIjeVvI/AAAAAAAAF3o/Vr5nEq6jrAw/s1600/white_facebook.png")no-repeat center center;}
    .googlejo{
    background: #474747 url("http://2.bp.blogspot.com/-VgoImgPXil8/UbNUTrYoCqI/AAAAAAAAGUw/hCImmM-IYZw/s1600/footer-icon-google.png")no-repeat center center;}
    .pinterestjo{
    background: #5D5D5D url("http://2.bp.blogspot.com/-9piAQfPmxa8/UZ-rdm96t7I/AAAAAAAAGKw/BZQeZleoZhI/s1600/white_pinterest.png")no-repeat center center;}
    /* Blog johanes djogzs.blogspot.com */
    .jorib {
    width: 45px;
    height: 109px;
    position: fixed;
    top: 173px;
    right: 0px;
    z-index: 9;
    }
    #featured{
    max-width: 930px;
    position: relative;
    height: 300px;
    background: #2ABEC0;
    margin: auto;
    overflow: hidden;
    }
    #featured ul.ui-tabs-nav{
    position: absolute;
    top: 0;
    right: 0px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 340px;
    z-index: 9;
    height: 300px;
    overflow-y: scroll;
    }
    #featured ul.ui-tabs-nav li{
    padding: 0px;
    padding-left: 34px;
    font-size: 12px;
    color: #666;
    }
    #featured ul.ui-tabs-nav li span{
    font-size: 15px;
    line-height: 75px;
    padding-right: 10px;
    }
    #featured .ui-tabs-panel{
    width: 620px;
    height: 300px;
    background: #999;
    position: relative;
    overflow: hidden;
    }
    #featured .ui-tabs-hide{display:none;}
    #featured li.ui-tabs-nav-item a{
    display: block;
    height: 74px;
    color: #fafafa;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: #373737;
    line-height: 20px;
    outline: none;
    padding: 13px 0px;
    }
    #featured li.ui-tabs-nav-item a:hover{
    background:#5D5D5D;color:#fff;
    }
    #featured li.ui-tabs-selected{background:url("http://3.bp.blogspot.com/-KQZX_lq5neo/UeWmhe_BpVI/AAAAAAAAGyo/3dBfFeO2AHc/s1600/Untitled-1.png") top right}
    #featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#474747;color:#fff;}
    #featured ul.ui-tabs-nav li img{
    float: left;
    margin: 2px 5px;
    background: #2ABEC0;
    padding: 4px;
    height: 63px;
    width: 63px;
    border-radius: 50px;
    }
    #featured .ui-tabs-panel .info{
    position: absolute;
    bottom: 0px;
    left: 0;
    height: 65px;
    max-width: 600px;
    background:rgba(0,0,0,0.5);
    padding: 10px;
    width: 100%;
    }
    #featured .info h2{
    font-size: 15pt;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    }
    #featured .info p{
    font-size: 13px;
    line-height: 15px;
    color: #fff;
    font-style: italic;
    }
    #featured .info a{
    text-decoration:none;
    color:#fff;
    }
    #featured .info a:hover{text-decoration:underline;}
    #topic1 li {
    border-bottom: 1px solid #DDD;padding: 5px;
    }
      #topic2 li {
    border-bottom: 1px solid #DDD;padding: 5px;
    }
       #topic3 li {
    border-bottom: 1px solid #DDD;padding: 5px;
    }
      .sidebar {
    float: right;
    width: 300px;
    position: relative;
    }
    --></style>
    <style>
    @media screen and (max-width:930px){
    #featured{height:0px;}
    #content {
    max-width: 600px;
    float: none;
    position: relative;
    width: 100%;
    margin: auto;
    }

    #search input[type="text"]{max-width: 930px;}
    #menujohanes {display: inline-table;}
    #menujohanes ul{width:auto;}
    #menujohanes ul li {float: none;padding:5px;border-bottom: 1px solid #ddd;}
    #menujohanes ul li ul {top:0px;position:relative;display: none;box-shadow: none;width: 100%;}
    #menujohanes:hover ul li ul {width:100%;}
    .jorib{display:none;}
    h1#blog-title{text-align:center;}
    h2#blog-desc{text-align:center;}
    }
    </style>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'/>
    <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 100;
    summary_img = 100;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }
    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = '<div class="crop"><img src="'+img[0].src+'" max-width="535;" /></div>';
    summ = summary_img;
    }
    var summary = imgtag + '<div class="posting">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>
    <script type="text/javascript">var a="indexOf",b="&m=1",e="(^|&)m=",f="?",g="?m=1";function h(){var c=window.location.href,d=c.split(f);switch(d.length){case 1:return c+g;case 2:return 0<=d[1].search(e)?null:c+b;default:return null}}var k=navigator.userAgent;if(-1!=k[a]("Mobile")&&-1!=k[a]("WebKit")&&-1==k[a]("iPad")||-1!=k[a]("Opera Mini")||-1!=k[a]("IEMobile")){var l=h();l&&window.location.replace(l)};
    </script><script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script></head>
    <body class='home blog'><div class='jorib'><a href='#' target='_blank'><div class='googlejo'></div></a>
    <a href='#' target='_blank'><div class='twitterjo'></div></a>
    <a href='#' target='_blank'><div class='facebookjo'></div></a>
    <a href='#' target='_blank'><div class='pinterestjo'></div></a>
    </div><div id='header'><div class='header-wrap'><div class='blognames section' id='blognames'><div class='widget Header' id='Header1'>
    <h1 id='blog-title'><span>
     </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="/13078.js"></script>
<div class="banner">
 
 <center>
 
 <table style="width: 928px; height: 124px;" align="center" background="http://i55.servimg.com/u/f55/17/57/29/64/tnn21011.gif" border="0" cellpadding="0" cellspacing="0">
 
 <tbody>
 
 <tr>
 
 <td align="left">
 
 </td>
 
 </tr>
 
 </tbody>
 
 </table>
 
 </center>
</div
    </span></h2>
    </div></div>
    </div></div><div id='menujohanes'>
    <ul>
    <li class='selected'><a href='/' title='Home'>Home</a></li>
    <li><a class='menu' href='/forum'>Vào Diễn Đàn</a>

    </li>
    <li><a class='menu' href='/f1-'>Rao vặt</a>
    <ul>
    <li><a href='/f8-'>Máy tính</a></li>
    <li><a href='/f7-'>Điện thoại</a></li>
    <li><a href='/f10-'>Xe máy</a></li>
    <li><a href='/f9-'>Điện tử</a></li>
    <li><a href='/f20-'>Ôtô</a></li>
    <li><a href='/f5-'>Thời trang</a></li>
    </ul>
    </li>
    <li><a class='menu' href='/f21-'>Tin tức</a>
    <ul>
    <li><a href='/f69-'>Tổng hợp</a></li>
    <li><a href='/f21-'>Xã hội</a></li>
    <li><a href='/f68-'>An ninh</a></li>
    </ul>
    </li>
    <li><a class='menu' href=' /faq'>Trợ giúp</a></li>
    <li><a class='menu' href='/h16-page'>Giải trí</a></li>
    </ul>
    </div><div id='wrapper'><div id='featured'>
    <ul class='ui-tabs-nav'>
    <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/mt310.jpg'/>
    <span>Máy tính - Computer</span></a></li>
    <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/dt110.jpg'/>
    <span>Điên thoại - Mobile</span></a></li>
    <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/xm110.jpg'/>
    <span>Xe máy - Moto</span></a></li>
    <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-4'>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/vt10.jpg'/>
    <span>Điện tử - Electron</span></a></li>
    <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-5'>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/oto10.jpg'/>
    <span>Ôtô - automobile</span></a></li>


    </ul><div class='ui-tabs-panel' id='fragment-1' style=''>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/mt310.jpg'/><div class='info'><h2><a href='http://thainguyennews.forumvi.com/f8-forum'>Cập nhật thị trường máy tính</a></h2>
    <p>Tổng hợp các kiểu mẫu mã về máy tính</p>
    </div></div>
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/dt110.jpg'/><div class='info'><h2><a href='http://thainguyennews.forumvi.com/f7-forum'>Cập nhật thị trường điện thoại</a></h2>
    <p>Tổng hợp các kiểu mẫu mã về điện thoại</p>
    </div></div>
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/xm110.jpg'/><div class='info'><h2><a href='http://thainguyennews.forumvi.com/f10-forum'>Cập nhật thị trường xe máy</a></h2>
    <p>Tổng hợp các kiểu mẫu mã về xe máy</p>
    </div></div>
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/vt10.jpg'/><div class='info'><h2><a href='http://thainguyennews.forumvi.com/f9-forum'>Cập nhật thị trường điện tử</a></h2>
    <p>Tổng hợp các kiểu mẫu mã về điện tử</p>
    </div></div>
    <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
    <img alt='' src='http://i19.servimg.com/u/f19/17/57/29/64/oto10.jpg'/><div class='info'><h2><a href='http://thainguyennews.forumvi.com/f20-forum'>Cập nhật thị trường xe máy</a></h2>
    <p>Tổng hợp các kiểu mẫu mã về ôtô</p>
    </div></div>


    </div><div class='clear'></div>
    <div id='casing'>


    <div id='content'>
    <div class='main section' id='main'>
    <div class='widget Blog' id='Blog1'>
    <div class='blog-posts hfeed'>



            <div class="date-outer">
          

            <div class="date-posts">
          <div class='post-outer'>


    <div class="show_topic"><div id="topic"></div>

    </div></div></div></div></div></div></div></div>
    <div class='sidebar'>
    <form action='/search' id='search' method='get'>
    <input name='q' placeholder='Search Somethings..' size='40' type='text'/></form>
    <div class='main2 section' id='main2'>
    <div class='widget PopularPosts' id='PopularPosts1'>

    <h2>Tin mới nhất</h2>
    <div class='widget-content'>
      <!--Tin tức mới nhất-->
    <script type="text/javascript">document.write('<script type="text/javascript" src="' + ('https:' == document.location.protocol ? 'https://' : 'http://') + 'feed.mikle.com/js/rssmikle.js"><\/script>');</script><script type="text/javascript">(function() {var params = {rssmikle_url: "http://thainguyennews.forumvi.com/feed",rssmikle_frame_width: "260",rssmikle_frame_height: "400",rssmikle_target: "_top",rssmikle_font: "Arial, Helvetica, sans-serif",rssmikle_font_size: "12",rssmikle_border: "off",responsive: "off",rssmikle_css_url: "",text_align: "left",text_align2: "left",corner: "off",scrollbar: "on",autoscroll: "on",scrolldirection: "down",scrollstep: "5",mcspeed: "30",sort: "Off",rssmikle_title: "off",rssmikle_title_sentence: "",rssmikle_title_link: "",rssmikle_title_bgcolor: "#0066FF",rssmikle_title_color: "#FFFFFF",rssmikle_title_bgimage: "",rssmikle_item_bgcolor: "#FFFFFF",rssmikle_item_bgimage: "",rssmikle_item_title_length: "55",rssmikle_item_title_color: "#0066FF",rssmikle_item_border_bottom: "on",rssmikle_item_description: "off",rssmikle_item_description_length: "100",rssmikle_item_description_color: "#666666",rssmikle_item_date: "gl1",rssmikle_timezone: "Etc/GMT",datetime_format: "%b %e, %Y %l:%M:%S %p",rssmikle_item_description_tag: "off",rssmikle_item_description_image_scaling: "on",article_num: "20",rssmikle_item_podcast: "off",keyword_inc: "",keyword_exc: "",};feedwind_show_widget_iframe(params);})();</script>
      <!--Tin tức mới nhất-->
    <div class='clear'></div>
    </div></div>

    <h2>Máy tính, Laptop</h2>
    <div class='widget-content'>
    <div id="topic1"></div>
    <div class='clear'></div>
    </div></div>

    <h2>Xe gắn máy</h2>
    <div class='widget-content'>
    <div id="topic2"></div>
    <div class='clear'></div>
    </div>

    <h2>Thiết bị số</h2>
    <div class='widget-content'>
    <div id="topic3"></div>
    <div class='clear'></div>
    </div>

    <h2>Từ khóa hot</h2>
    <div class='widget-content'>
    <span class="label-size label-size-2">
    <a dir="ltr" href="http://www.plusvn.net/f8-forum">gunny lau</a>
    </span>
    <span class="label-size label-size-2">
    <a dir="ltr" href="http://www.plusvn.net/f14-forum">web game private</a>
    </span>
    <span class="label-size label-size-2">
    <a dir="ltr" href="http://www.plusvn.net/">anime vietsub</a>
    </span>
    <div class='clear'></div>
    </div>
    </div></div></div>
    <div class="clear"></div>
    <div class="fleft">
<p>- Copyright © 2011 thainguyennews - Powered by <a href="http://www.forumvi.com" target="_blank">Forumvi</a> - Designed by <a href="http://thainguyennews.forumvi.com/" title="Dang0123">Quang Huy</a> - <a href="http://thainguyennews.forumvi.com/" title="gunny lau, game private, web game"><strong>thainguyennews</strong></a> -</p></div>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'></script>
    <script type='text/javascript'>
    $(document).ready(function(){  
        $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 6000, true);  
    });
    </script>

    <script>
        $(function () {
            $.ajax({
                url: "/feed/?f",
                success: function (ta) {
                    for (var i = 2; i < 17; i++) {
                        var DL = $(ta).find("link:eq(" + i + ")").text();
                        var title = $(ta).find("title:eq(" + i + ")").text();
    $('<div class="news-item"><div class="post"><div class="postright"><div class="arrow"></div><div class="cover"><div class="crop-wrap"><div class="crop-wrap-dalem"><div id="summary"><div class="crop"><a href="' + DL + '" rel="bookmark"></a></div></div></div></div></div><h2></h2><div style="clear: both;"></div><div class="jomore"><span class="author1">Posted by: ' + $(ta).find("creator:eq(" + i + ")").text() + '</span><div class="timemeta">' + $(ta).find("pubDate:eq(" + i + ")").text() + '</div><a class="comment-link" href="/" title="' + title + '" rel="category">' + $(ta).find("category:eq(" + i + ")").text() + '</a><div class="jomorelink"><a class="anes" href="' + DL + '">Read More</a></div></div></div></div></div>').appendTo('div.show_topic #topic');              
                        
                        $('<a href="' + DL + '">' + title + '</a>').appendTo('.news-item:eq(' + (i - 2) + ') .post h2');
                        $('<img src="' + $(".news-item:eq(" + (i - 2) + ") .crop a:eq(0)").load(DL + ".post-entry .entry-content img:eq(0)") + '" alt="test" />').appendTo('.news-item:eq(' + (i - 2) + ') .crop a:eq(0)');
                    }
                }
            })
        })
    </script>
    <script>  
    $(function () {
            $.ajax({
                url: "/feed/?f=8",
                success: function (ta) {
                    for (var i = 2; i < 7; i++) {
                        var DL = $(ta).find("link:eq(" + i + ")").text();
                        var title = $(ta).find("title:eq(" + i + ")").text();
       $('<li><a href="'+DL+'">'+title+'</a></li>').appendTo('#topic1');              
                        
                        
                    }
                }
            })
        })
    </script>
    <script>  
    $(function () {
            $.ajax({
                url: "/feed/?f=10",
                success: function (ta) {
                    for (var i = 2; i < 7; i++) {
                        var DL = $(ta).find("link:eq(" + i + ")").text();
                        var title = $(ta).find("title:eq(" + i + ")").text();
       $('<li><a href="'+DL+'">'+title+'</a></li>').appendTo('#topic2');              
                        
                        
                    }
                }
            })
        })
    </script>
    <script>  
    $(function () {
            $.ajax({
                url: "/feed/?f=19",
                success: function (ta) {
                    for (var i = 2; i < 7; i++) {
                        var DL = $(ta).find("link:eq(" + i + ")").text();
                        var title = $(ta).find("title:eq(" + i + ")").text();
       $('<li><a href="'+DL+'">'+title+'</a></li>').appendTo('#topic3');              
                        
                        
                    }
                }
            })
        })
    </script>


    

    </body>
    </html>
 Trả lời bài viết
avatar

Admin250
504
87
Punbb
Quản trị
?????
Founder
Founder

Bài viết :
250
Points :
504
Like :
87
Punbb
Quản trị
?????
ko có demo bằng ảnh à thím
 Trả lời bài viết
avatar

huyvip83175
307
62
Punbb
Cẩn thận
Mod phụ hotrofm
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
175
Points :
307
Like :
62
Punbb
Cẩn thận
Mod phụ hotrofm
@Admin đã viết:ko có demo bằng ảnh à thím

có nhưng chụp xấu lắm
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...