Contoh Code New Chapter Homepage
1 Comment
0 x dilihat
Kode ini menggunakan html dan css untuk menampilkan chapter mengguakan javascript
<div class="utao">
<div class="uta">
<div class="imgu"> <a rel="149964" class="series" href="urlpage" title="judulkomik">
<img width="211" height="300" src="urlimage" class="attachment-thumb size-thumb wp-post-image" alt="The MAX leveled hero will return!"> </a></div>
<div class="luf">
<a class="series" href="urlpage" title="judulkomik ">
<h3>judulkomik </h3>
</a>
<ul class="Manga">
<script src="https://dojokomik.blogspot.com/feeds/posts/default/-/label?orderby=published&alt=json-in-script&callback=startpost&max-results=999"></script>
</ul>
</div>
</div>
</div>
Code via pastebin
versi kedua
<div class="bixbox">
<div class="releases">
<h3><span>Chapter Terbaru</span></h3>
<a class="vl" href="https://postkomik.blogspot.com/">View All</a>
</div>
<div class="listupd">
<div class="utao">
<div class="uta">
<div class="imgu"> <a rel="149964" class="series" href="https://postkomik.blogspot.com/" title="Talentless Nana Talentless Nana Talentless Nana Talentless Nana">
<img width="211" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW6QqKxSj8uJvciwrJqd8L5FKnJfjuK4hh67rUfmbrJ39BCei4EMZ-6hc4ddjoWV0nPTIIFfVuts1r-e5DTtwrg2TIdfE-IexUMXIlgYyzwgciMzPQUf-YsWFdWnfuelVEHOAAyGAWsvE/w157/memorize-799805-B0xEOggd.jpeg" class="attachment-thumb size-thumb wp-post-image" alt=""> </a></div>
<div class="luf">
<a class="series" href="https://postkomik.blogspot.com/" title="Talentless Nana Talentless Nana Talentless Nana Talentless Nana">
<h3>Talentless Nana Talentless Nana Talentless Nana Talentless Nana</h3>
</a>
<ul class="Manga">
<script>
var numposts = 3;
var standardstyling = true;
function startpost(json){
for (var i = 0; i < numposts; i++){
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++){
if (entry.link[k].rel == 'alternate'){
posturl = entry.link[k].href;break;
}
}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);
}
if (standardstyling) document.write('</li>');
}
</script>
<script src="https://dojokomik.blogspot.com/feeds/posts/default/-/The%20Villain?orderby=published&alt=json-in-script&callback=startpost&max-results=999"></script>
</ul>
</div>
</div>
</div>
<div class="utao">
<div class="uta">
<div class="imgu"> <a rel="149964" class="series" href="https://postkomik.blogspot.com/" title="Talentless Nana Talentless Nana Talentless Nana Talentless Nana">
<img width="211" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW6QqKxSj8uJvciwrJqd8L5FKnJfjuK4hh67rUfmbrJ39BCei4EMZ-6hc4ddjoWV0nPTIIFfVuts1r-e5DTtwrg2TIdfE-IexUMXIlgYyzwgciMzPQUf-YsWFdWnfuelVEHOAAyGAWsvE/w157/memorize-799805-B0xEOggd.jpeg" class="attachment-thumb size-thumb wp-post-image" alt=""> </a></div>
<div class="luf">
<a class="series" href="https://postkomik.blogspot.com/" title="Talentless Nana Talentless Nana Talentless Nana Talentless Nana">
<h3>Talentless Nana Talentless Nana Talentless Nana Talentless Nana</h3>
</a>
<ul class="Manga">
<script>
var numposts = 3;
var standardstyling = true;
function startpost(json){
for (var i = 0; i < numposts; i++){
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++){
if (entry.link[k].rel == 'alternate'){
posturl = entry.link[k].href;break;
}
}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);
}
if (standardstyling) document.write('</li>');
}
</script>
<script src="https://dojokomik.blogspot.com/feeds/posts/default/-/The%20Villain?orderby=published&alt=json-in-script&callback=startpost&max-results=999"></script>
</ul>
</div>
</div>
</div>
<div class="utao">
<div class="uta">
<div class="imgu"> <a rel="149964" class="series" href="https://postkomik.blogspot.com/" title="Talentless Nana Talentless Nana Talentless Nana Talentless Nana">
<img width="211" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW6QqKxSj8uJvciwrJqd8L5FKnJfjuK4hh67rUfmbrJ39BCei4EMZ-6hc4ddjoWV0nPTIIFfVuts1r-e5DTtwrg2TIdfE-IexUMXIlgYyzwgciMzPQUf-YsWFdWnfuelVEHOAAyGAWsvE/w157/memorize-799805-B0xEOggd.jpeg" class="attachment-thumb size-thumb wp-post-image" alt=""> </a></div>
<div class="luf">
<a class="series" href="https://postkomik.blogspot.com/" title="Talentless Nana Talentless Nana Talentless Nana Talentless Nana">
<h3>Talentless Nana Talentless Nana Talentless Nana Talentless Nana</h3>
</a>
<ul class="Manga">
<script>
var numposts = 3;
var standardstyling = true;
function startpost(json){
for (var i = 0; i < numposts; i++){
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++){
if (entry.link[k].rel == 'alternate'){
posturl = entry.link[k].href;break;
}
}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);
}
if (standardstyling) document.write('</li>');
}
</script>
<script src="https://dojokomik.blogspot.com/feeds/posts/default/-/The%20Villain?orderby=published&alt=json-in-script&callback=startpost&max-results=999"></script>
</ul>
</div>
</div>
</div>
<!--selesai-->
</div> </div>
Code Css
@media only screen and (max-width: 800px)
.bixbox {
border-radius: 0;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
margin-bottom: 5px;
}
.releases {
position: relative;
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid #f1f1f1;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(241, 241, 241);
padding: 8px 15px;
padding-top: 8px;
padding-right: 15px;
padding-bottom: 8px;
padding-left: 15px;
}
.releases h1, .releases h3, #sidebar .section h4 {
font-size: 1.1em;
color: #3367d6;
line-height: 20px;
font-weight: 700;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
position: relative;
text-transform: uppercase;
}
.releases .vl {
font-size: .6em;
text-transform: uppercase;
color: #fff;
height: 18px;
line-height: 18px;
padding: 0 6px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
background: #3367d6;
display: inline-block;
float: right;
margin-top: 1px;
margin-right: -3px;
}
.listupd {
padding: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.listupd.project .utao {
width: 33.3333333%;
}
@media only screen and (max-width: 500px)
.listupd .utao {
float: none;
width: auto;
position: relative;
}
@media only screen and (max-width: 1080px)
.listupd .utao {
width: 50%;
}
@media only screen and (max-width: 500px)
.listupd .utao {
float: none;
width: auto!important;
position: relative;
}
.listupd .utao .uta {
padding: 12px 5px;
padding-top: 12px;
padding-right: 5px;
padding-bottom: 12px;
padding-left: 5px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
border-bottom: 1px solid #f1f1f1;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(241, 241, 241);
}
*, :before, :after {
box-sizing: border-box;
}
.listupd .utao .uta .imgu {
position: relative;
float: left;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
margin-right: 10px;
}
.listupd .utao .uta .imgu img {
width: 75px;
height: 100%;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #000;
text-decoration: none;
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
transition: color .1s linear;
-moz-transition: color .1s linear;
-webkit-transition: color .1s linear;
}
.listupd .utao .uta .luf {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.listupd .utao .uta .luf h3 {
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-size: 13px;
font-weight: 500;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.listupd .utao .uta .luf ul {
margin: 0;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: 10px;
padding-left: 0;
}
.listupd .utao .uta .luf ul.Manhwa li {
color: #9d4942;
}
.listupd .utao .uta .luf ul li a {
background-color: rgb(255, 255, 0);
display: block;
float: center;
width: 200px;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
background: #f1f1f1;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
padding: 4px;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
border-radius: 4px;
color: #444;
font-weight: 500;
}
pasebin
Cara bikin kaya gini di template bukan khusus komik gimana bang?
ReplyDelete