- Giao diện đơn giản giản có responsive
-Giao diện thực sự chưa hoàn chỉnh nên các bạn có thể tự edit lại theo cách của các bạn :)
- Mình thấy giao diện của TheHackerNews.Com đơn giản không cầu kì nên đã tự làm 1 cái như thế. Dù không giống hoàn toàn nhưng vẫn đại loại như vậy
- Thiết kế để đặt banner 300x250 or 728x90 để các bạn có thể chơi quảng cáo tốt nhất
Full Code Radom Post
<style type="text/css">
*{margin:0;padding:0;}
#random-posts{border-left:0px #ccc solid;border-bottom:1px #ccc solid;border-right:0px #ccc solid;background:#fff;margin:0 0 10px;padding:0;}
ul,li{list-style:none;}
#random-posts li{height:65px!important;font-weight:0;border-bottom:0px solid #dedede;padding:5px 3px 0 5px;font-family:Segoe UI, Gill Sans Light, Helvetica;}
#random-posts hover img{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);}
li#li-rd a,li#li-rd-chan a,li#li-rd-le a{text-decoration:none;}
li#li-rd a:hover,li#li-rd-chan a:hover,li#li-rd-le a:hover{text-decoration:underline;}
li#li-rd{border-bottom:0px solid #dedede;height:65px!important;font-weight:0px;text-transform:capitalize;padding:1px;}
li#li-rd-chan{background:#fff;}
div#info h1{font-size:20px;}
div#footer{padding-left:135px;}
img#rd-thumb,img#rd-thumb0{background:#fff;margin-right:5px;float:left;height:72px;width:72px;margin-top:0;border:0px solid #ddd;border-radius:0px;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease;-o-transition:all .5s ease;padding:1px 0px 4px 0px;}
</style>
<div id="random-posts">
<div id='rd-posts-loading'>
<img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqMTPiLpR8xWyPtiiRoJVv5PVjnw394X0VXPwEOwGG1ZYboQU07gset1iz7mb_niJaxT8LzVXSDjZM4yjXvU2tPRuFQJvAfjXMTNFW5EwpOsCGXYARlv3oKm4quF0Fgt_6oGQgb5OVVdT/s1600/loading-related-Dautocrazy-Blog-com.gif'/>
</div>
</div>
<script type="text/javascript">
var maxEntries = 5;nocmtext = "0 comment";
cmtext = "Comment";
</script>
<script type='text/javascript'>
function getRandomPosts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
var img = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
if (pcm==0) {var comment = " " +nocmtext+ " ";}
else {var comment = " " + pcm + " " +cmtext+ " ";}
var comment0 = "<br/>" +comment + "<br/><font style='font-weight:normal;font-size:0px; color:#888;'>posted in : "+day+ "-" + m + "-" + y + "</font>";
var s = entry.content.$t;
var a=s.indexOf("<img");
var b=s.indexOf("src=\"",a);
var c=s.indexOf("\"",b+5);
var d=s.substr(b+5,c-b-5);
var li = document.createElement('li');
if (i==0) { li.id = 'li-rd'; }
if ((i%2==0)&&(i!=0)) {li.id = 'li-rd-chan';}
if (i%2==1) {li.id = 'li-rd-le';}
var img = document.createElement('img');
if (i==0) { img.id = 'rd-thumb0'; }
else { img.id = 'rd-thumb'; }
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{img.src = d;}
else
{ img.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsthnjtmcHGWwir_R9kFGNvzI3lXO3EqI4pvws_CBrXH_d-cVC09DPhU3sItrcafHTwFuOu5ukfAjcujp9F2zmijS5RCGAlxZ6RaSRyK44atDXpkC1qQW0eB2TGtywrUvGmVQoaXkHo9M/s400/noimage.png";}
var em = document.createElement('i');
if (i==0) { em.innerHTML = comment0; }
else { em.innerHTML = comment; }
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(img);
li.appendChild(a);
li.appendChild(em);
ul.appendChild(li);
}
container.appendChild(ul);
document.getElementById("rd-posts-loading").style.display = "none";
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=getRandomPosts&max-results=9999" type="text/javascript"></script>
*{margin:0;padding:0;}
#random-posts{border-left:0px #ccc solid;border-bottom:1px #ccc solid;border-right:0px #ccc solid;background:#fff;margin:0 0 10px;padding:0;}
ul,li{list-style:none;}
#random-posts li{height:65px!important;font-weight:0;border-bottom:0px solid #dedede;padding:5px 3px 0 5px;font-family:Segoe UI, Gill Sans Light, Helvetica;}
#random-posts hover img{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);}
li#li-rd a,li#li-rd-chan a,li#li-rd-le a{text-decoration:none;}
li#li-rd a:hover,li#li-rd-chan a:hover,li#li-rd-le a:hover{text-decoration:underline;}
li#li-rd{border-bottom:0px solid #dedede;height:65px!important;font-weight:0px;text-transform:capitalize;padding:1px;}
li#li-rd-chan{background:#fff;}
div#info h1{font-size:20px;}
div#footer{padding-left:135px;}
img#rd-thumb,img#rd-thumb0{background:#fff;margin-right:5px;float:left;height:72px;width:72px;margin-top:0;border:0px solid #ddd;border-radius:0px;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease;-o-transition:all .5s ease;padding:1px 0px 4px 0px;}
</style>
<div id="random-posts">
<div id='rd-posts-loading'>
<img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqMTPiLpR8xWyPtiiRoJVv5PVjnw394X0VXPwEOwGG1ZYboQU07gset1iz7mb_niJaxT8LzVXSDjZM4yjXvU2tPRuFQJvAfjXMTNFW5EwpOsCGXYARlv3oKm4quF0Fgt_6oGQgb5OVVdT/s1600/loading-related-Dautocrazy-Blog-com.gif'/>
</div>
</div>
<script type="text/javascript">
var maxEntries = 5;nocmtext = "0 comment";
cmtext = "Comment";
</script>
<script type='text/javascript'>
function getRandomPosts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
var img = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('random-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
if (pcm==0) {var comment = " " +nocmtext+ " ";}
else {var comment = " " + pcm + " " +cmtext+ " ";}
var comment0 = "<br/>" +comment + "<br/><font style='font-weight:normal;font-size:0px; color:#888;'>posted in : "+day+ "-" + m + "-" + y + "</font>";
var s = entry.content.$t;
var a=s.indexOf("<img");
var b=s.indexOf("src=\"",a);
var c=s.indexOf("\"",b+5);
var d=s.substr(b+5,c-b-5);
var li = document.createElement('li');
if (i==0) { li.id = 'li-rd'; }
if ((i%2==0)&&(i!=0)) {li.id = 'li-rd-chan';}
if (i%2==1) {li.id = 'li-rd-le';}
var img = document.createElement('img');
if (i==0) { img.id = 'rd-thumb0'; }
else { img.id = 'rd-thumb'; }
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{img.src = d;}
else
{ img.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsthnjtmcHGWwir_R9kFGNvzI3lXO3EqI4pvws_CBrXH_d-cVC09DPhU3sItrcafHTwFuOu5ukfAjcujp9F2zmijS5RCGAlxZ6RaSRyK44atDXpkC1qQW0eB2TGtywrUvGmVQoaXkHo9M/s400/noimage.png";}
var em = document.createElement('i');
if (i==0) { em.innerHTML = comment0; }
else { em.innerHTML = comment; }
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(img);
li.appendChild(a);
li.appendChild(em);
ul.appendChild(li);
}
container.appendChild(ul);
document.getElementById("rd-posts-loading").style.display = "none";
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=getRandomPosts&max-results=9999" type="text/javascript"></script>
Thay Đổi Thẻ Meta
<meta content='ID' name='geo.country'/>
<meta content='vi-vn' name='geo.placename'/>
<meta content='blogger' name='generator'/>
<meta Content='snippet' name='googlebot'/>
<meta content='Bờm Khùng' name='author'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='index, follow' name='googlebot'/>
<b:if cond='data:blog.pageType != "index"'>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVjxtgOABi8Y_mTDwHj0wnRZkF712MBU3jDiPiu_rs1EJcouqQCvXZ7PDFDI0joid-RCEwymJa5pM0SCPo39Pzp6WnlcML_u9fMb1gyju0VV_PpVrpdjP9vNj_BaqbzDRNTozxPzvXgEg/s100-c/995018_738445206184683_837442452_n.jpg' property='og:image'/>
</b:if>
<meta content='100002632149630' property='fb:admins'/>
<meta content='729600280435517' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='vi-vn' name='geo.placename'/>
<meta content='blogger' name='generator'/>
<meta Content='snippet' name='googlebot'/>
<meta content='Bờm Khùng' name='author'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='index, follow' name='googlebot'/>
<b:if cond='data:blog.pageType != "index"'>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVjxtgOABi8Y_mTDwHj0wnRZkF712MBU3jDiPiu_rs1EJcouqQCvXZ7PDFDI0joid-RCEwymJa5pM0SCPo39Pzp6WnlcML_u9fMb1gyju0VV_PpVrpdjP9vNj_BaqbzDRNTozxPzvXgEg/s100-c/995018_738445206184683_837442452_n.jpg' property='og:image'/>
</b:if>
<meta content='100002632149630' property='fb:admins'/>
<meta content='729600280435517' property='fb:app_id'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>