Ads

Widget Project seperti template Kiryuu dan EastManga untuk Blogger

Ya Hallo! Setelah pengumuman sebelum nya tentang berhenti nya saya untuk membuat template baru dan update template.

Kali ini saya akan membagikan source code Postingan Project mirip template Kiryuu dan EastManga, yang rencana nya akan di pasang ke seleSeven v3 tapi tidak jadi karena saya berhenti.

Widget Project

Widget Project seperti template Kiryuu dan EastManga untuk Blogger
Dagruel

Pertama Pasang Script berikut di atas tag </head>

<script type="text/javascript">
  //<![CDATA[
  var timeString=function(t){if(/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/.test(t)){var e=t,i=e.substring(0,4),n=e.substring(5,7),r=e.substring(8,10),o=new Array;return o[1]="Jan",o[2]="Feb",o[3]="Mar",o[4]="Apr",o[5]="May",o[6]="Jun",o[7]="Jul",o[8]="Aug",o[9]="Sep",o[10]="Oct",o[11]="Nov",o[12]="Dec",r+" "+o[parseInt(n,10)]+" "+i}return!1},imageString=function(t){var e=t.indexOf("<img"),i=t.indexOf('src="',e),n=t.indexOf('"',i+5),r=t.substr(i+5,n-i-5);return-1!=e&&-1!=i&&-1!=n&&""!=r?r:"https://1.bp.blogspot.com/-BYDJ1dpFEhE/X9QnAUfeORI/AAAAAAAAHxw/OjfaqiPHjhAmCgJts39XIg7o4KR-8YtdACNcBGAsYHQ/w300-h225-p-k-no-nu/dagruel-no-image.png"},bookPost={mainItemArr:new Array,subItemArr:new Array,compile:function(t){var e=t.feed.entry;if(!e)return!1;var i=document.getElementById("myProject");if(!i)return!1;if(i.dataset.created="Dagruel",e.forEach(function({category:t,content:e,link:i,title:n,published:r,media$thumbnail:o}){var a=n.$t,s=t.map(function(t){return t.term}),u=i.find(function(t){if("alternate"===t.rel)return t}).href,c="function"==typeof timeAgo?timeAgo(new Date(r.$t)):timeString(r.$t),l=e.$t&&e.$t.length>0?e.$t:"Nothing",m=o?o.url.replace(/\/s[0-9]+(\-c)?/,"/w150-h210-p-k-no-nu"):imageString(l);s=s.filter(function(t){if("Project"!==t)return t}),bookPost.mainItem.filter(function(t){s.join(", ").includes(t)&&bookPost.mainItemArr.push({title:a,link:u,image:m,category:s})}),bookPost.subItem.filter(function(t){s.join(", ").includes(t)&&bookPost.subItemArr.push({titleSub:a,linkSub:u,publishedSub:c,categorySub:s})})}),bookPost.mainItemArr.length>0){var n="";bookPost.mainItemArr.forEach(function({title:t,link:e,image:i,category:r}){var o="";bookPost.subItemArr.length>0&&bookPost.subItemArr.forEach(function({titleSub:t,linkSub:e,publishedSub:i,categorySub:n}){var a=t;bookPost.settingTitle.forEach(function({name:e,news:i}){a.includes(e)&&(a=i+" "+t.split(e)[1].replace(/[^0-9\.-]+/g,""))}),n.filter(function(n){r.join(", ").includes(n)&&(o+='<li class="char"><div class="chpName"><a href="'+e+'" title="'+t+'">'+a+'</a></div><div class="chpDate">'+i+"</div></li>")})}),n+='<div class="bookItem"><a href="'+e+'" title="'+t+'"><div class="snippet-thumbnail"><img src="'+i+'"/><div class="ply"></div></div></a><div class="data"><h2><a href="'+e+'" title="'+t+'">'+t+'</a></h2><ul class="subItem">'+o+"</ul></div></div>"}),i.innerHTML=n}},run:function(t,e){var i=document.createElement("script");i.src="/feeds/posts/default/-/"+t+"?alt=json-in-script&max-results="+e+"&callback=bookPost.compile",document.body.appendChild(i)}};

  //Setting Script
  bookPost.mainItem = ['Manga', 'Novel'];
  bookPost.subItem = ['Chapter'];
  bookPost.settingTitle = [{
    name: 'Chapter',
    news: 'Ch'
  }, {
    name: 'Episode',
    news: 'Ep'
  }];
  //]]>
</script>

Perhatikan Script paling bawah //Setting Script.

  • bookPost.mainItem = ini Daftar Label Postingan Info.
  • bookPost.subItem = Daftar Label Postingan Chapter.
  • bookPost.settingTitle = Ini Untuk Mengganti Judul Postingan Chapter.

Selanjutnya tinggal pasang script berikut kedalam widget HTML cara nya: buka Blogger > Tata Letak > Tambahkan Widget > Widget HTML.

<div id="myProject">
  <script>bookPost.run('Project', jumlahPost)</script>
</div>

Ganti text yang di tandai sesuai keterangan.

Syarat Penggunaan.

  1. Post Info dan Post Chapter wajib di beri label: Project dan Nama Judul.
  2. Post Info wajib di beri label: Kategori post (Manga, Anime, Novel, atau yang lain). Lihat script pertama bookPost.mainItem
  3. Post Chapter wajib di beri label: Kategori post (Chapter, SubItem, atau yang lain). Lihat script pertama bookPost.subItem
  4. Contoh label Post Info: One Piece(wajib), Project(wajib), Manga(wajib), dll (bebas)
  5. Contoh label Post Chapter: One Piece(wajib), Project(wajib), Chapter(wajib), hanya tiga, boleh lebih asalkan nama label tidak sama dengan post info.
  6. Juga Post Chapter yang wajib di beri label hanya 3 postingan terakhir saja misal Postingan Chapter One Piece hanya 3 postingan chapter terakhir saja yang di beri label Project sisa nya gk usah.

Sekarang untuk tampilan pilih salah satu css di bawah. Pasang nya di atas ]]></b:skin>.

Kiryuu

#myProject .bookItem,.bookItem>a{position:relative;overflow:hidden}.bookItem>.data>h2,.subItem li .chpName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#myProject{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:15px}#myProject .bookItem{border-bottom:1px solid #f1f1f1}.bookItem>a{float:left;height:105px;margin-right:10px;border-radius:3px}.bookItem .snippet-thumbnail img{width:75px;height:auto;object-fit:cover}.bookItem>.data{overflow:hidden}.bookItem>.data>h2{margin:0;font-size:.98em;font-weight:500}.bookItem a{color:#333;text-decoration:none}.bookItem>.data>.subItem{margin:10px 0 0;padding-left:15px}.subItem li{margin-bottom:5px;font-size:13px}.subItem li .chpName{float:left;max-width:80px}.subItem li .chpDate{float:right;color:#999;font-size:12px}@media screen and (max-width:1080px){#myProject{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:500px){#myProject{grid-template-columns:repeat(1,1fr)}}

EastManga

.bookItem .data h2,.subItem li .chpName{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#myProject .bookItem,.bookItem .snippet-thumbnail{position:relative;overflow:hidden}#myProject{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:15px}#myProject a{color:#333;text-decoration:none}.bookItem .snippet-thumbnail{background:#f1f1f1;padding:77% 0 0}.bookItem .ply,.bookItem .ply:before,.bookItem .snippet-thumbnail img{position:absolute;top:0;height:100%;width:100%}.bookItem:hover .ply{visibility:visible;opacity:1}.bookItem .snippet-thumbnail img{object-fit:cover}.bookItem .ply{z-index:1;background:rgba(0,0,0,.67);visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s linear}.bookItem .ply:before{content:'';background-repeat:no-repeat;background-position:center;background-size:50px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,5C19.89,4.65 18.67,4.5 17.5,4.5C15.55,4.5 13.45,4.9 12,6C10.55,4.9 8.45,4.5 6.5,4.5C4.55,4.5 2.45,4.9 1,6V20.65C1,20.9 1.25,21.15 1.5,21.15C1.6,21.15 1.65,21.1 1.75,21.1C3.1,20.45 5.05,20 6.5,20C8.45,20 10.55,20.4 12,21.5C13.35,20.65 15.8,20 17.5,20C19.15,20 20.85,20.3 22.25,21.05C22.35,21.1 22.4,21.1 22.5,21.1C22.75,21.1 23,20.85 23,20.6V6C22.4,5.55 21.75,5.25 21,5M21,18.5C19.9,18.15 18.7,18 17.5,18C15.8,18 13.35,18.65 12,19.5V8C13.35,7.15 15.8,6.5 17.5,6.5C18.7,6.5 19.9,6.65 21,7V18.5Z' fill='%23fff'/%3E%3C/svg%3E")}.bookItem .data{height:120px;padding:0 4px;font-size:13px;color:#666}.bookItem .data h2{display:block;font-size:14px;font-weight:500;color:#222d34;line-height:21px;padding-top:8px;margin:0 0 7px;padding-bottom:6px;border-bottom:solid 3px #f5f7fa}.subItem{margin:0;padding:0;list-style:none}.subItem li{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;overflow:hidden;line-height:23px;font-size:13px;color:#757a7d;padding:0;margin:0}.subItem li .chpName{flex:1;margin-right:2px}@media screen and (max-width:900px){#myProject{grid-template-columns:repeat(3,1fr)}}@media screen and (max-width:600px){#myProject{grid-template-columns:repeat(2,1fr)}}

25 komentar

Blogger Disqus
  1. Hello,
    Is there a version of Contempo reDesign Blogger Template Versi Manga that contains the transition page as it appears in the preview "demo"
    Thanks

    BalasHapus
    Balasan
    1. There is a difference in the transition page between the template when installed

      https://blue-fast.blogspot.com/

      and the preview template"demo"

      https://eastclone.blogspot.com/

      I want the template as it appears in the preview"demo"

      Thanks again

      Hapus
    2. this?https://www.dagruel.com/2021/08/preloader.html

      Hapus
    3. Yes it is,
      Thanks a lot
      Is there need to remove code or just past the code as it appears

      Hapus
    4. delete this <div class='preloader'>
      <div class='loadpre'></div>
      </div>

      Hapus
  2. Oalah, Min jadi Ss V3 berhenti karena istirahat dulu apa Berhenti Gak akan ada SS V3? Btw makasih min Selalu Post widget" yang bagus untuk tampilan Blog, semoga Sehat terus dan Jaya!

    BalasHapus
    Balasan
    1. Gak Muncul min kenapa ya? tanya:
      labelProject', jumlahPost diganti jadi apa min untuk SS v2?

      Hapus
    2. Contoh label post nya
      https://1.bp.blogspot.com/-UaT1YLh1pio/YU5fbNBj4DI/AAAAAAAAAM8/-P9I28Rla64qOVXdwzUwiO2QdPiaQkvKgCLcBGAsYHQ/s0/Screenshot_20210925-072408_Chrome.jpg
      Pemanggil nya
      https://1.bp.blogspot.com/-3-bsaLKSMPQ/YU5fbHu0MJI/AAAAAAAAAM4/jgdxhDAJNvIJmjiiQeXr-HQPkGHI8z4eACLcBGAsYHQ/s0/Screenshot_20210925-072459_Chrome.jpg

      Hapus
    3. wah mantab min semangat nya tapi kalo saran dari ane sih itu masih sangat manual banget min dan kenapa ga ambil data label nya dari main post aja jadi kalo dia punya 1 label di tiap post chapter maka akan muncul sesuai datanya misal Nama komik Magic Emperor maka postingan Chapter 1 sampe seterus nya cukup pakai label dari judul series dan di set pakai javascript hanya 3 yang tampil dan ini juga ada kelemahan besar kalo salah setting di homepage tampilnya bisa sama semua , ane juga terapin di blog yang ini [ basmanga.blogspot.com ]

      Hapus
    4. @Ahmad Waslim
      Bisa Begitu tapi blog jadi lambat untuk di akses, karena banyak nya request misal kan terdapat 9 post maka akan terdapat 9 request berturut-turut.
      Sedangkan ini hanya perlu 1 request saja sehingga blog tidak lambat untuk di akses.
      Yah masing-masing cara terdapat kekurangan dan kelebihan jadi sesuaikan saja dengan keinginan.

      Hapus
    5. Wkwkw itu dia sisi kelemahan dari blogger meski label di jadikan parameter tetep aja ribet ngoprek nya dan post ga punya id khusus tiap post id nya berbeda beda mau ga mau dari label di jadikan parameter nya

      Hapus
  3. min mau tanya ini kok ke-double ya?
    https://uploads.disquscdn.com/images/8f5aec8a079f5b1006872635cc1cb8564cfa9552f9cad7447672bd9226a561ea.png

    BalasHapus
    Balasan
    1. Salah beri label aja itu lihat komentar di atas ada contoh label nya

      Hapus
    2. ah iya, terima kasih min.

      Hapus
    3. kalo digabung chapter list versi maid nggak bisa ya min?

      Hapus
  4. min tambahan saran dari ane kalau model begitu saat awal nambah label chapter cuma 3 lalu saat update chapter lagi yg awal di hapus ganti yg baru itu sangat buruk untuk seo , malahan robot google harus crawl ulang dan kalau eror bisa jadi dapet noti xx501 bahkan menjadi no index

    BalasHapus
    Balasan
    1. Cuman ganti label post gk ngaruh ke seo. Kecuali post tersebut memiliki breadcrumps baru ngaruh. Kebanyakan template anime/manga gk ada breadcrumps nya jadi aman.

      Kekurangan memakai widget ini hanya harus menghapus dan menambahkan label setiap terdapat post baru.

      Hapus
  5. tampilan widget project nya bisa di ganti di ubah jadi post default ga

    BalasHapus
    Balasan
    1. maksud nya post default?

      Hapus
    2. mungkin gini min kan bagian ambil data nya ada yng harus pake label Chapter nah label Chapter ini di ambil secara default label kan tiap series berbeda beda jadi variabel nya mode 'data:label.name+' yg mana row count > 2 sesuai label series nya

      Hapus
    3. seperti ini : https://ibb.co/QFTBv1L

      walaupun caranya sangat ribet yg penting bisa tolong di ajarkan

      Hapus
    4. mungkin lebih tepatnya latest update

      Hapus
    5. nanti di buatin. tapi gk tau kapan nya!

      Hapus
  6. Min tolong yang kiryuu tambahin bendera untuk tiap label manga mahnwa dll

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!