Make Beautiful Govt Jobs Website Using JavaScript Code
अगर आप गवर्नमेंट जॉब से रिलेटेड कोई आर्टिकल डालते हो रिजल्ट से रिलेटेड आर्टिकल डालते हो उसके लिए एक पेज क्रिएट करना है तो पेज किस तरीके से बनाया जाये उसके बारे में इस आर्टिकल के माध्यम से आपको बताएंगे।
CSS Code
<style>
ul.recent-posts-container {
margin-left: -15px;
}
ul.new-title {
padding: 10px;
}
li.recent-posts-list {
list-style: disc;
}
li.recent-posts-list a{
font-weight: 500;
}
div#sidebar {
display: none;
}
.col-lg-8 {
width: 95%;
margin: auto;
}
.new:after {
content: url(//1.bp.blogspot.com/-4vV86GWCFn8/XjWbGwNDxXI/AAAAAAAABAk/gjcjBJgIZhkcAZ8hUSL_LM1nABESFcNFACNcBGAsYHQ/s1600/newicon.gif);
position: relative;
top: 3px;
padding: 0 4px;
}
.recent li:nth-child(even) {
background: #cc0000;;
}
.recent li:nth-child(odd) {
background: darkblue;
}
.recent li a {
color: white;
text-decoration: none;
}
ul.recent li {
/* padding: 10px; */
font-weight: bold;
text-align: center;
width: 90%;
/* margin: 10px auto; */
}
.more {
text-align: right;
margin: 10px 0px;
}
.more a {
padding: 5px 15px;
background: red;
color: white;
text-decoration: none;
margin: 0px 5px;
border-radius: 5px;
font-weight: bold;
}
.job-list {
box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
/* padding: 10px 25px; */
}
.job-title {
text-align: center;
background: darkred;
color: white;
font-weight: bold;
font-size: 25px;
padding: 5px;
/* margin: 0px -20px; */
}
h1.entry-title {
text-align: center;
}
span.recent-posts-details {
color: white;
}
@media only screen and (min-width: 600px) {
div#Blog1 {
width: 100%;
margin: auto;
}
.category-list {
display: flex;
}
.category-list .job-list {
width: 32%;
margin: auto;
}
.Recent ul {
/* margin-left: -40px;*/
}
.Recent ul li {
list-style: none;
text-align: center;
}
}
</style>
Article CSS
<style>div#post-body h2 {color: #38761d;border-bottom: 3px solid;text-align: center !important;text-shadow: 1px 1px #fff, 2px 2px #b3bfcc;border-image: linear-gradient(to right,transparent,#38761d,transparent);border-image-slice: 1;background-color: lightcyan;}h1.entry-title {text-align: center;border-bottom: 3px solid;border-image-slice: 1;color: darkblue;}div#post-body table tr th, td {text-align: center;}</style>
JavaScript Code
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="1",w[2]="2",w[3]="3",w[4]="4",w[5]="5",w[6]="6",w[7]="7",w[8]="8",w[9]="9",w[10]="10",w[11]="11",w[12]="12",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<a href="'+r+'" target ="_top">'+i+"</a>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write(' <span class="recent-posts-details">'),1==posts_date&&(_=_+f+", "+w[parseInt(g,10)]+", "+v,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</span>"),document.write("</li>")}document.write("</ul>")}
</script>
Second JavaScript Code
<script type="text/javascript">
var posts_no = 20;
var showpoststhumbs = false;
var readmorelink = false;
var showcommentslink = false;
var posts_date = true;
var post_summary = false;
var summary_chars = 70;
</script>
HTML Code
<div class="category-list">
<div class="job-list" style="margin-top: 10px;">
<div class="job-title">Latest Job</div>
<ul class="new-title">
<script src="/feeds/posts/default/-/New Jobs?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
</ul>
<div class="more"><a href="/p/new-jobs.html">More</a></div>
</div>
<div class="job-list" style="margin-top: 10px;">
<div class="job-title">Admit Card</div>
<ul class="new-title">
<script src="/feeds/posts/default/-/Admit Card?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
</ul>
<div class="more"><a href="/p/new-jobs.html">More</a></div>
</div>
<div class="job-list" style="margin-top: 10px;">
<div class="job-title">Results</div>
<ul class="new-title">
<script src="/feeds/posts/default/-/Results?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
</ul>
<div class="more"><a href="/p/new-jobs.html">More</a></div>
</div>
</div>
Second HTML Code
<div class="category-list">
<div class="job-list" style="margin-top: 10px;">
<div class="job-title">Answer Key</div>
<ul class="new-title">
<script src="/feeds/posts/default/-/Answer Key?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
</ul>
<div class="more"><a href="/p/new-jobs.html">More</a></div>
</div>
<div class="job-list" style="margin-top: 10px;">
<div class="job-title">Syllabus</div>
<ul class="new-title">
<script src="/feeds/posts/default/-/Syllabus?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
</ul>
<div class="more"><a href="/p/new-jobs.html">More</a></div>
</div>
<div class="job-list" style="margin-top: 10px;">
<div class="job-title">Admission</div>
<ul class="new-title">
<script src="/feeds/posts/default/-/Admission?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
</ul>
<div class="more"><a href="/p/new-jobs.html">More</a></div>
</div>
</div>
Java Script Code for New
<script>
var postTime = document.querySelectorAll(".recent-posts-details");
for (let i = 0; i < postTime.length; i++) {
const time = postTime[i].innerHTML;
const firstDate = new Date();
const secondDate = new Date(time);
const oneDay = 24 * 60 * 60 * 1000;
const diffDays = Math.round(Math.abs((firstDate - secondDate) / oneDay));
if (diffDays < 5) {
postTime[i].classList.add("new");
postTime[i].innerHTML="";
}else{
postTime[i].remove();
};
}
</script>
