Script Manga Reader For Blogger [Update]

Script Manga Reader For Blogger - Artikel kali ini saya akan membagikan tutorial/ cara membuat post baca Manga (Manga Reader). Tutorial kali ini saya buat menggunakan script slider yang sudah disederhanakan sehingga mudah untuk digunakan.



Script manga ini terbilang masih manual & lumayan memakan waktu sedikit untuk membuatnya, kalaupun satu chapter manga ada 20 image masih terbilang cukup cepatlah, Ok kita mulai saja tutorial kali ini..

Pratinjau bisa kalian lihat ditombol berikut ini :



Script Manga Reader For Blogger

  1. Buka Blogger > Tema > Edit HTML
  2. Simpan Javascript berikut di atas </head>
  3. <link href="https://cdn.staticaly.com/gh/Arleth98/2019/8c8b1630/slick.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="https://cdn.staticaly.com/gh/Arleth98/2019/d642f925/slickdz.js"></script>

  4. Kemudian Simpan CSS berikut ke dalam <b:skin>...</b:skin> atau <style>...</style>
  5. /* Script Manga Reader blogger - Arlethdesign
     ============================================ */
    .slick-arrow{position:absolute;bottom:10px;width:50%;z-index:9;background:#222;color:#FFF;padding:10px 0;border:1px solid #555;cursor:pointer;overflow:hidden}
    button.slick-next.slick-arrow{right:0}
    button.slick-prev.slick-arrow{left:0}
    .post-body .slick-slide{height:inherit}
    .post-body .slick-list{padding:0 0 50px}
    .post-body .slick-slide img{width:100%;text-align:center;margin:auto}
    .slick-dotted.slick-slider{margin-bottom:30px}
    .post ul.slick-dots{position:absolute;bottom:-35px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}
    .post ul.slick-dots li{position:relative;display:inline-block;width:10px;height:15px;margin:0 5px;padding:0;cursor:pointer}
    .slick-dots li button{font-size:0;line-height:0;display:block;width:10px;height:15px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}
    .slick-dots li button:hover,.slick-dots li button:focus{outline:none}
    .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1}
    .slick-dots li button:before{content:"\f111";font-family:Fontawesome;font-size:6px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;text-align:center;opacity:.25;color:black;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
    .slick-dots li.slick-active button:before{opacity:.75;color:black}

  6. Selanjutnya Simpan Javascript berikut ini di atas </body>
  7. <b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
    <script type='text/javascript'>//<![CDATA[
    $(".slider.fade>div").wrapInner("<div class='image'></div>");$(".fade").slick({dots: true,infinite: true,speed: 500,fade: true,cssEase: "linear"});
    //]]></script>
    </b:if>

  8. Jika Sudah Save tema.



Langkah terakhir
  • Buatlah Manga post menggunakan HTML berikut ini
  • <!--more-->
    <div id='--fixedsize'>
    <div id='targetzx' class="slider fade">
    <!-- batas -->
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>
    
    <!-- batas -->
    </div></div>

  • jika sudah Publikasikan Post & Lihat hasilnya.

  • Untuk Menambahkan 1 Image, Silakan tambahkan html seperti dibawah ini
    <div>
    <img border="0"  src="LINK GAMBAR" />
    </div>

Kalau Masih Kurang Jelas Silahkan Lihat Tutorial Pada Tombol Berikut Ini

https://arlethdesign.page.link/html

Sekian artikel kali ini semoga bermanfaat & sampai jumpa ditutorial berikutnya, Terima Kasih.

Related Post
Comment Post