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

  • huyvip83
    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>

  • Admin
    ko có demo bằng ảnh à thím


    --Chữ ký--
    www.danganhviet.com


    • - Tránh đặt tiêu đề các dạng như: Giúp em với, Code này hay nè, Vào xem nè anh em,...
      - Đăng bài phải có ảnh demo hoặc viết mô tả rõ ràng, code phải bỏ vào khung code
      - Không comment vô nghĩa, không spam, không chữi tục, không post link độc hại, không hide bài viết
      - Hạn chế viết tắt, viết chữ màu, chữ to, chữ in đậm
  • huyvip83
    @Admin đã viết:ko có demo bằng ảnh à thím

    có nhưng chụp xấu lắm

  • Sponsored content

Thông tin tác giả
avatar
MEM LV3
Bài viết :
202
Points :
343
Like :
65
Punbb
Cẩn thận
Xem lý lịch thành viên
Thông tin tác giả
avatar
ACP
Bài viết :
307
Points :
599
Like :
101
Punbb
Quản trị
Status :
test
Xem lý lịch thành viên http://hotrofm.forumvi.com
Thông tin tác giả
avatar
MEM LV3
Bài viết :
202
Points :
343
Like :
65
Punbb
Cẩn thận
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết