Get Started > Details
- Details
- Install
Deskripsi.
Slider ini merupakan request dari Seseorang dan material ini berbentuk mentahan jadi harus disesuaikan lagi terutama pada CSSnya.
Cara meng-install.
-
Pasang Swiper js dan Swiper Css dan letakan di atas
</head>
<!-- Link Swiper's CSS --> <link href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css' rel='stylesheet'> <!-- Swiper JS --> <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js'></script>
-
Setelah itu, salin kode ini dan letakan di dalam
<b:skin><![CDATA[...]]></b:skin>
jika menggunakan Blogger.slider_Manga_Reader{} .slider_Manga_Reader .box_item{position:relative;overflow:hidden;background:#20152d;padding-bottom:35%} .slider_Manga_Reader .box_item .bg_item{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;opacity:.4} .slider_Manga_Reader .box_item .bg_item img{position:absolute;object-fit:cover;width:120%;height:120%;top:-10%;left:-10%;opacity:1;filter:blur(8px)} .slider_Manga_Reader .box_item .poster_item{position:absolute;top:-130px;left:650px;width:400px;transform:scale(1.2)} .swiper-fade .swiper-slide-active .poster_item{top:-100px;transform:scale(1)} .slider_Manga_Reader .box_item .poster_item a{display:inline-block;transform:rotate(15deg);border:20px solid #fff;box-shadow:0 30px 30px rgba(0,0,0,.2);width:100%;padding-bottom:148%;position:relative;overflow:hidden;background:#eee} .slider_Manga_Reader .box_item .poster_item img{position:absolute;width:100%;height:100%;object-fit:cover;top:0;left:0;right:0;bottom:0} .slider_Manga_Reader .box_item .content_item{max-width:600px;width:100%;position:absolute;top:50%;transform:translateY(-50%);left:30px;z-index:3;color:#fff;padding:0 30px} .slider_Manga_Reader .box_item .content_item .content_item_chapter{font-size:18px;line-height:1.3em;font-weight:600;margin-bottom:5px} .slider_Manga_Reader .box_item .content_item .content_item_title{font-size:32px;line-height:1.3;font-weight:600;margin-bottom:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .slider_Manga_Reader .box_item .content_item .content_item_title a{color:#fff} .slider_Manga_Reader .box_item .content_item .content_item_details{font-size:1em;display:block;font-weight:400;margin-bottom:30px} .slider_Manga_Reader .box_item .content_item .content_item_details > *{margin-bottom:1em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .slider_Manga_Reader .box_item .content_item .content_item_details .content_item_details_genre span{display:inline-block;margin:0 3px 6px 0;border:1px solid rgba(255,255,255,.5);padding:.3rem .5rem;line-height:1;border-radius:.2rem;font-size:.8em} .slider_Manga_Reader .box_item .content_item .content_item_buttons > *{display:inline-block;background:#fff;color:#111;font-weight:500;font-size:14px;line-height:40px;padding:0 20px;border-radius:4px} .slider_Manga_Reader .box_item .content_item .content_item_buttons .content_item_buttons_read{background:#ffd702} .boox_bt{position:absolute;bottom:40px;z-index:1;right:40px} .swiper-button{display:flex;align-items:center;justify-content:center;background:#fff;color:#111;width:40px;height:40px;line-height:40px;border-radius:50%;font-size:16px;text-align:center;margin:0 5px;float:right;cursor:pointer} .swiper-button svg{display:block;width:20px;height:20px} @media only screen and (max-width: 900px) { .slider_Manga_Reader .box_item .content_item .content_item_chapter,.slider_Manga_Reader .box_item .content_item .content_item_details .content_item_details_genre{display:none} .slider_Manga_Reader .box_item .content_item{max-width:460px} .slider_Manga_Reader .box_item .poster_item{left:460px;transform:scale(1);top:-130px} .swiper-fade .swiper-slide-active .poster_item{transform:scale(1);top:-130px} .boox_bt{display:none} } @media only screen and (max-width: 768px) { .slider_Manga_Reader .box_item .poster_item{left:400px} .slider_Manga_Reader .box_item .content_item{max-width:400px} .slider_Manga_Reader .box_item .content_item .content_item_details{display:none} } @media only screen and (max-width: 540px) { .slider_Manga_Reader .box_item{padding-bottom:50%} .slider_Manga_Reader .box_item .content_item .content_item_title{font-size:18px;margin-bottom:.75rem} .slider_Manga_Reader .box_item .content_item .content_item_buttons > *{margin-top:5px;min-width:83px;line-height:30px;padding:0 10px;font-size:12px;text-align:center} .slider_Manga_Reader .box_item .poster_item a{border:10px solid #fff} .slider_Manga_Reader .box_item .content_item{max-width:250px;left:0} .slider_Manga_Reader .box_item .poster_item{width:210px;right:auto;left:250px;top:-35px!important;transform:scale(1)} .swiper-fade .swiper-slide-active .poster_item{top:-35px!important;transform:scale(1)} } @media only screen and (max-width: 320px) { .slider_Manga_Reader .box_item .poster_item{left:160px} .slider_Manga_Reader .box_item .content_item{max-width:200px} }
- Untuk kode HTML
<div class="swiper slider_Manga_Reader"> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"> <div class="box_item"> <a href="#" class="bg_item"> <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHmViUObjAwPGznyGMzUe6FUnm5Q7ZFP4Q1D_JN74NDEZkxeRyX0zyn0My_6IqgWmM_w7epYcRoyPVRFv6aDiBraMFjiliYniyGjVF9Kv6_oieaYII9WZLSkWZKyyROmvVE0-l1tQeirATNTbIrbDqb49Ve4l4bPRxGHlYob1jlCShmdJb0ha9Y7WGg8/s1600/0044656ee05ca233329d179ac98801a9.jpg"/> </a> <div class="poster_item"> <a href="#"> <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZHmViUObjAwPGznyGMzUe6FUnm5Q7ZFP4Q1D_JN74NDEZkxeRyX0zyn0My_6IqgWmM_w7epYcRoyPVRFv6aDiBraMFjiliYniyGjVF9Kv6_oieaYII9WZLSkWZKyyROmvVE0-l1tQeirATNTbIrbDqb49Ve4l4bPRxGHlYob1jlCShmdJb0ha9Y7WGg8/s1600/0044656ee05ca233329d179ac98801a9.jpg"/> </a> </div> <div class="content_item"> <div class="content_item_chapter">Chapter: 103 [EN]</div> <div class="content_item_title"> <a title="Dragon Ball Super" href="#">Dragon Ball Super</a> </div> <div class="content_item_details"> <div class="content_item_details_des">Reuniting the franchise's iconic characters, follows the aftermath of Goku's fierce battle with Majin Buu as he attempts to maintain earth's fragile peace. (Source: AniDB)</div> <div class="content_item_details_genre"> <span>Action</span><span>Comedy</span><span>Martial Arts</span><span>Shounen</span><span>Super Power</span> </div> </div> <div class="content_item_buttons"> <a href="#" class="content_item_buttons_read">Read Now</a> <a href="#" class="content_item_buttons_view">View Info</a> </div> </div> </div> </div> <div class="swiper-slide"> <div class="box_item"> <a href="#" class="bg_item"> <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tSdDGT_qmq4WKiq_xq6lIGe1IILBpt6t-ltsv1NifheNtNiT3p9VZ0So1DDm5YHIgzC32UtYXgJ0CwLTVxw42sDr6iv33ICdcMpDv3nsXU-pP5KBgfAHqMTQREddM4na3XJ0m7E0zmih8g1-__wfv1y5QyWe4SPzQEEVRrpMk8TRUBDdSNe3kPLk3lY/s1600/2b81acfc5ad30cc046274d672bd643eb.jpg"/> </a> <div class="poster_item"> <a href="#"> <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5tSdDGT_qmq4WKiq_xq6lIGe1IILBpt6t-ltsv1NifheNtNiT3p9VZ0So1DDm5YHIgzC32UtYXgJ0CwLTVxw42sDr6iv33ICdcMpDv3nsXU-pP5KBgfAHqMTQREddM4na3XJ0m7E0zmih8g1-__wfv1y5QyWe4SPzQEEVRrpMk8TRUBDdSNe3kPLk3lY/s1600/2b81acfc5ad30cc046274d672bd643eb.jpg"/> </a> </div> <div class="content_item"> <div class="content_item_chapter">Chapter: 103 [EN]</div> <div class="content_item_title"> <a title="Blue Exorcist" href="#">Blue Exorcist</a> </div> <div class="content_item_details"> <div class="content_item_details_des">After a fight with his foster father Shirou Fujimoto, Rin Okumura's life is transformed overnight when Rin is revealed to be the son of the demon lord Satan, king of the demonic realm of Gehenna. Soon...</div> <div class="content_item_details_genre"> <span>Action</span><span>Comedy</span><span>Martial Arts</span><span>Shounen</span><span>Super Power</span> </div> </div> <div class="content_item_buttons"> <a href="#" class="content_item_buttons_read">Read Now</a> <a href="#" class="content_item_buttons_view">View Info</a> </div> </div> </div> </div> <div class="swiper-slide"> <div class="box_item"> <a href="#" class="bg_item"> <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUtvg9e04FP3dZlg9xUuC3NofgGeY8U-YGuuubymmxMSg64WEerDnBapf1BvynnkA3Ev5RroUNUShw-GXcb9oNUIU_unx0hbXzRCfBBpSThx3xG_YnzG6lCa7kx1efNsXLf_ci5PeXFXPdQvj18FQ4rNiS0j7Fesce5Ml1aZe-_g1s8rj6grUqvMevxRQ/s1600/71157caa0d251504b2999f9ceb45fc33.jpg"/> </a> <div class="poster_item"> <a href="#"> <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUtvg9e04FP3dZlg9xUuC3NofgGeY8U-YGuuubymmxMSg64WEerDnBapf1BvynnkA3Ev5RroUNUShw-GXcb9oNUIU_unx0hbXzRCfBBpSThx3xG_YnzG6lCa7kx1efNsXLf_ci5PeXFXPdQvj18FQ4rNiS0j7Fesce5Ml1aZe-_g1s8rj6grUqvMevxRQ/s1600/71157caa0d251504b2999f9ceb45fc33.jpg"/> </a> </div> <div class="content_item"> <div class="content_item_chapter">Chapter: 103 [EN]</div> <div class="content_item_title"> <a title="Dragon Ball Super" href="#">Komi Can't Communicate</a> </div> <div class="content_item_details"> <div class="content_item_details_des">It's Shouko Komi's first day at the prestigious Itan Private High School, and she has already risen to the status of the school's Madonna. With long black hair and a tall, graceful appearance, she...</div> <div class="content_item_details_genre"> <span>Action</span><span>Comedy</span><span>Martial Arts</span><span>Shounen</span><span>Super Power</span> </div> </div> <div class="content_item_buttons"> <a href="#" class="content_item_buttons_read">Read Now</a> <a href="#" class="content_item_buttons_view">View Info</a> </div> </div> </div> </div> <div class="swiper-slide"> <div class="box_item"> <a href="#" class="bg_item"> <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmaduYckqYGZV8y6dGLWuL4frf4xflt_NkY9StTg_GWbFg960vAesFoysAlzpLOuqIXyQ_1CLAr-48QxGetPm4c1_F-X1byaM70VfKq7AQfp5S17704-OgAuox2SRj6rs3fIa0HVZQncZ06_cQj-7lP0eDiMeOnx5e2BfG-1MY599UNLjTMKjjN2ysOk/s1600/77ef441119b58b0e7549337543083dbe.jpg"/> </a> <div class="poster_item"> <a href="#"> <img alt="#" height="787" width="500" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmaduYckqYGZV8y6dGLWuL4frf4xflt_NkY9StTg_GWbFg960vAesFoysAlzpLOuqIXyQ_1CLAr-48QxGetPm4c1_F-X1byaM70VfKq7AQfp5S17704-OgAuox2SRj6rs3fIa0HVZQncZ06_cQj-7lP0eDiMeOnx5e2BfG-1MY599UNLjTMKjjN2ysOk/s1600/77ef441119b58b0e7549337543083dbe.jpg"/> </a> </div> <div class="content_item"> <div class="content_item_chapter">Chapter: 103 [EN]</div> <div class="content_item_title"> <a title="Dragon Ball Super" href="#">One-Punch Man</a> </div> <div class="content_item_details"> <div class="content_item_details_des">After rigorously training for three years, the ordinary Saitama has gained immense strength which allows him to take out anyone and anything with just one punch. He decides to put his new skill to...</div> <div class="content_item_details_genre"> <span>Action</span><span>Comedy</span><span>Martial Arts</span><span>Shounen</span><span>Super Power</span> </div> </div> <div class="content_item_buttons"> <a href="#" class="content_item_buttons_read">Read Now</a> <a href="#" class="content_item_buttons_view">View Info</a> </div> </div> </div> </div> <!-- End Post --> </div> <div class="boox_bt"> <div class="swiper-button swiper-bt-prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/></svg></div> <div class="swiper-button swiper-bt-next"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg></div> </div> </div>
- Dan yang terakhir pasang kode javascript ini
var swiper = new Swiper(".slider_Manga_Reader", { effect: "fade", navigation: { nextEl: ".swiper-bt-next", prevEl: ".swiper-bt-prev", }, loop: true, lazy: true, });
- Jika ingin menambahkan fungsi bisa baca Dokumentasi dari https://swiperjs.com
- Letakkan di atas
</body>
Referensi :
https://mangareader.to/home
https://swiperjs.com/
https://fontawesome.com/
https://mangareader.to/home
https://swiperjs.com/
https://fontawesome.com/
not working bro
ReplyDeletehttps://codepen.io/Berkas-Kita/full/GRLebjY
Deletecan it automatically fetch content ?
ReplyDeleteOf course you can, but this is only raw material so it has to be processed again.
DeleteMin bisa ga di buat pake blogger script dayat untuk seriesnya, bukan manual gitu
ReplyDeletebisa saja.
Deletecan you please create a raw slider for anime also ?
ReplyDeleteCan.
Deletehey min , i tried auto fetch script but it is not working . can you please help me with that ?
ReplyDeleteCode : https://codepen.io/Jay-Tiwari-the-flexboxer/pen/gOJeOVG
First of all, have you mastered the basics of JavaScript? At first glance, I see that you haven't installed Swiper JS and Swiper CSS, have you read the Swiper Slider guide? because the html structure is not correct. on https://YOUR_BLOG_URL which blog did you go to? You use ?alt=rss to retrieve the data, I don't know how to implement it, I often use ?alt=json because it is the most commonly used.
Deletefor the javascript , i am still learning it min also for the swiper js and css , i have installed them and also added my url for the blog but then also it didn't fetched the slides brooo ..... can you please help with the javascript for this one because i think i should go for ?alt=json one .
Deleteplease check this out min (updated)
Deletethis is https://codepen.io/ulbyokmr-the-animator/pen/NWVYmPY
DeleteJust save it in the widget content
the result is like this
https://yondkomik.blogspot.com/
ohh thankss min ... also i want to know one more thing
Deletehow to make them appear side by side ? https://ibb.co/nwbT2Rn
ReplyDeletejust apply it inside the html tag
Delete