>

Contoh Code New Chapter Homepage

Contoh Code New Chapter Homepage

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&amp;alt=json-in-script&amp;callback=startpost&amp;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&amp;alt=json-in-script&amp;callback=startpost&amp;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&amp;alt=json-in-script&amp;callback=startpost&amp;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&amp;alt=json-in-script&amp;callback=startpost&amp;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

alwi Apa tujuanmu datang ke blog ini ?

1 Response to "Contoh Code New Chapter Homepage"

  1. Cara bikin kaya gini di template bukan khusus komik gimana bang?

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel