[Đóng góp] Share trang chủ auto cập nhật ver 1

  Bài viết hay nhất1
Tình cờ qua trang blogspot mang về chế :v .Dự là sẽ làm nhiều trang chủ nên đặt là ver 1 nhé :D

Thông tin:

Chế by: Dang0123
Vui lòng không xóa dòng bản quyền và textlink cuối trang
Cảm ơn rất nhiều

Demo ảnh:



Demo online: http://www.plusvn.net/h43-trang-chu

Code sử dụng feed rss nhé @@~

Cách làm:

tạo một html mới

Title: ghi gì cũng dc
Use this page as homepage ? chọn Có

Code:
Spoiler:

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 Plusvn.Net</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>
<a href='/' rel='home' title='Shiroi'>Plusvn.Net</a>
</span></h1>
<h2 id='blog-desc'><span>
Giải trí là tất cả
</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-'>Game Private</a>
<ul>
<li><a href='/f8-'>Gunny Private</a></li>
<li><a href='/f9-'>Kiếm Thế</a></li>
<li><a href='/f10-'>MU private</a></li>
<li><a href='/f11-'>JX private</a></li>
<li><a href='/f14-'>Webgames</a></li>
<li><a href='/f15-'>Game khác</a></li>
</ul>
</li>
<li><a class='menu' href='/f21-'>Anime Download</a>
<ul>
<li><a href='/f37-'>Ongoing</a></li>
<li><a href='/f38-'>Completed</a></li>
<li><a href='/f49-'>Convert Mobile</a></li>
</ul>
</li>
<li><a class='menu' href='f61-'>Plus Sub</a></li>
<li><a class='menu' href='/f39-'>Hayo Fansub</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='https://lh4.googleusercontent.com/-iReJTjToddQ/U70HWIimI_I/AAAAAAAABYU/M_1Jqz1SwSU/Plus.5Forum.net-logo1.png
'/>
<span>Sword Art Online II</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'>
<img alt='' src='https://lh3.googleusercontent.com/-CYjBTM1Fcsc/U7aF0VFP7_I/AAAAAAAABOM/mpL5jYt8FTs/s800/Plus.5Forum.net-bt3910-3.jpg'/>
<span>Fairy Tail Chap 391</span></a></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'>
<img alt='' src='https://scontent-a-lax.xx.fbcdn.net/hphotos-xpa1/t1.0-9/10384664_508002432633999_5049619457818759373_n.jpg'/>
<span>Fairy Tail Special</span></a></li>


</ul><div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='' src='http://www.swordart-online.net/phantom/img/top/bg/bg1.jpg'/><div class='info'><h2><a href='#'>Sword Art Online II : Gun Gale Online</a></h2>
<p>Chính thức lên sóng, đây là ss2 có tên là "MA ĐẠN" hay Gunz Online =))</p>
</div></div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='fairy tail chap 391' src='https://lh5.googleusercontent.com/-1JwppzMcytY/U7aHVIhmWoI/AAAAAAAABQc/afK2Waq6v5Y/s800/Plus.5Forum.net-bt4210-20_2.jpg'/><div class='info'><h2><a href='http://www.plusvn.net/t2188-topic'>Fairy Tail chap 391 vietsub</a></h2>
<p>Cuộc chiến giữa Gray và cha đang đến hồi gay cấn</p>
</div></div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='https://scontent-a-lax.xx.fbcdn.net/hphotos-xpa1/t1.0-9/10384664_508002432633999_5049619457818759373_n.jpg'/><div class='info'><h2><a href='http://www.plusvn.net/t2134-topic'>Fairy Tail Special: Fairy Woman</a></h2>
<p>Một ngày kia, ở thị trấn nọ, có một cô gái tên là Erza...Muốn biết sự tình thì mời vào xem :v</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>Thông báo mới</h2>
<div class='widget-content'>
<div id="topic1"></div>
<div class='clear'></div>
</div></div>

<h2>Event trên forum</h2>
<div class='widget-content'>
<div id="topic2"></div>
<div class='clear'></div>
</div>

<h2>Gunny Lậu Mới</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 © 2014 Plusvn.net - Powered by <a href="http://www.forumvi.com" target="_blank">Forumvi</a> - Designed by <a href="http://www.plusvn.net/" title="Dang0123">Dang0123</a> - <a href="http://www.plusvn.net/" title="gunny lau, game private, web game"><strong>web game private</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=4",
            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=35",
            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=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('#topic3');             
                   
                   
                }
            }
        })
    })
</script>


 

</body>
</html>

Chú ý mấy chỗ /feed/?f=4 /feed/?f=8 /feed/?f=35 thay thành id chuyên mục của bạn :v
  Bài viết hay nhất2
Style đẹp đấy :-s like
  Bài viết hay nhất3
Code để vào Spoiler. Rất bừa bộn, không đúng chuẩn W3C.
  Bài viết hay nhất4
Mình share cho nhữg người hok biết làm thôi còn các pro biết làm thì đừg nói kiểu đó. chuẩn w3c à forum pro có chuẩn chưa? thử check đi mình cá là trên duới 100 error đấy.mình hok biết viết code như pro,tự biết là code sắp xếp lung tung nhưg làm dc vậy là mìh mừg lắm r. bớt ném gạch dùm.
  Bài viết hay nhất5
bỏ cái dòng design by... dưới cuối đi bạn .style lấy của ng khác mà , nếu để thì để tên ngta , k thì xóa luôn còn hơn tự chèn tên mình vào ,mong bạn có thêm nhiều đóng góp nữa cho cộng đồng Fm .
  Bài viết hay nhất6
méo có chê bai gì đâu mà dang0123 làm méo buồn quá
Giờ góp ý một cái nhỏ: dùng code beautifier để làm đẹp code lại cho nó dễ nhìn :3
  Bài viết hay nhất7
Nói chuyện có duyên chút nhé! Dù gì cũng phải sắp xếp code lại cho gọn, chứ js thì vứt cục này cục kia nhìn ức chế bỏ bố đi được.
  Bài viết hay nhất8
dang0123 wrote:Mình share cho nhữg người hok biết làm thôi còn các pro biết làm thì đừg nói kiểu đó. chuẩn w3c à forum pro có chuẩn chưa? thử check đi mình cá là trên duới 100 error đấy.mình hok biết viết code như pro,tự biết là code sắp xếp lung tung nhưg làm dc vậy là mìh mừg lắm r. bớt ném gạch dùm.
có ai ném gạch đâu, cái đó là góp ý thôi mà @@ -_-
có vẻ khó chịu với các góp ý "khác khen" thì phải
t chả có ý kiến gì, có like cái đầu đấy :)
cố gắng hoàn thiện hơn từ các góp ý là đc mà :)
  Bài viết hay nhất9
Đẹp đấy, mà slideshow đầu tiên cũng có thể dùng rss để làm.
Thông tin bài viết (tác giả, thời gian, chuyên mục) sai rồi, xem lại nhé!
Định dạng lại thời gian http://devs.forumvi.com/t85-gist-dinh-dang-ngay-gio-viet-nam?showpost=p473
  Bài viết hay nhất10
http://www.kenhgame8.com/ toi thì lam don giãn hon oq t'y chũ topice à
  Bài viết hay nhất11
Khen chê thì quan trọng gì @@~

còn cái slidebar lúc đầu em cũng tính làm rss luôn nhưng thôi. feed nhiều quá lỡ dính request limit thì khổ (^^^)
  Bài viết hay nhất12
dang0123 wrote:Khen chê thì quan trọng gì @@~

còn cái slidebar lúc đầu em cũng tính làm rss luôn nhưng thôi. feed nhiều quá lỡ dính request limit thì khổ (^^^)
khen chê gì đừq wtâm ai cần thì sài, mình cần góp ý chứ đừng nghe họ phán :v, tôi chúc ông ngày càn ra nhiều cái hay cho Punbb
  Bài viết hay nhất13
Style như Blogger nhỉ ?
You cannot reply to topics in this forum