Cara Bikin Slide Popular Anime Atau Baca komik Anime

Cara Bikin Slide Popular Anime Atau Baca komik Anime

Cara Bikin Slide Popular Anime Atau Baca komik Anime

 Tutorial kali ini aku akan coba share Cara Bikin Slide Popular Anime Atau Baca komik Anime buat blog fansub responsif.widged ini bisa kalian di posuingan atau di side bar tergantung kalian sukanya mau di tempatin dimana.

DEMO

Ok Buat kalian yang minat pasang widged slid responsif ini ikuti langkah-langkah di bawa ini

Pertama yang perlu kalian siapkan link tujuan dan url image
Misal aku mempunyai 5 url imge:

http://www.animenewsnetwork.com/thumbnails/max700x700/cms/news/102888/one-piece-zou-visual.jpeg
https://myanimelist.cdn-dena.com/images/anime/5/17407.jpg
http://www.tokyo3.com.br/foto/jpg/noticias-galerias/full/313/2/dragon-ball-super-poster-alternativo-tokyo-3.jpg
https://upload.wikimedia.org/wikipedia/it/3/37/Detective-conan.jpg
https://myanimelist.cdn-dena.com/images/anime/12/76049.jpg

Nah kalau semua sudah kalian siapkan sekarang kita pasang codenya
Pertama masuk bloger-pilih Template-pilih Edit HTML
cari code "</b:skin>dengan cara CLTRL+F kalau sudah ketemu pastekan code di bawah ini tepat di atas code </b:skin>

Code</>slid image responsif

.ia-container { width:90%; overflow:hidden; box-shadow:1px 1px 4px #52e052; border:7px solid #000; }
.ia-container figure { position:absolute; top:0; left:50px; width:335px; box-shadow:0 0 0 1px rgba(255,255,255,0.6); -webkit-transition:all 0.3s ease-

in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }
.ia-container > figure { position:relative; left:0 !important; }
.ia-container img { display:block; width:100%; }
.ia-container input { position:absolute; top:0; left:0; width:50px; height:100%; cursor:pointer; border:0; padding:0; -ms-

filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; z-index:100; -webkit-appearance:none; -moz-

appearance:none; appearance:none; }
.ia-container input:checked { width:5px; left:auto; right:0; }
.ia-container input:checked ~ figure { -webkit-transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; -o-transition:all 0.7s ease-in-out; -ms-

transition:all 0.7s ease-in-out; transition:all 0.7s ease-in-out; left:335px; }
.ia-container figcaption { width:100%; height:100%; background:rgba(87,73,81,0.1); position:absolute; top:0; -webkit-transition:all 0.2s linear; -moz-

transition:all 0.2s linear; -o-transition:all 0.2s linear; -ms-transition:all 0.2s linear; transition:all 0.2s linear; }
.ia-container figcaption span { position:absolute; top:40%; margin-top:-30px; right:20px; left:20px; overflow:hidden; text-align:center; background:rgba

(87,73,81,0.3); line-height:20px; font-size:18px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;

text-transform:uppercase; letter-spacing:4px; font-weight:700; padding:20px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.1); }
.ia-container input:checked + figcaption,.ia-container input:checked:hover + figcaption { background:rgba(87,73,81,0); }
.ia-container input:checked + figcaption span { -webkit-transition:all 0.4s ease-in-out 0.5s; -moz-transition:all 0.4s ease-in-out 0.5s; -o-transition:all

0.4s ease-in-out 0.5s; -ms-transition:all 0.4s ease-in-out 0.5s; transition:all 0.4s ease-in-out 0.5s; -ms-

filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)"; filter:alpha(opacity=99); opacity:1; top:50%; }
.ia-container #ia-selector-last:checked + figcaption span { -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -o-transition-delay:0.3s; -ms-

transition-delay:0.3s; transition-delay:0.3s; }
.ia-container input:hover + figcaption { background:rgba(87,73,81,0.03); }
.ia-container input:checked ~ figure input { z-index:1; }

@media screen and (max-width:720px) {
    .ia-container { width:540px; } .ia-container figure { left:40px; width:260px; } .ia-container input { width:40px; } .ia-container input:checked ~ figure

{ left:260px; } .ia-container figcaption span { font-size:16px; }
}

@media screen and (max-width:520px) {
    .ia-container { width:320px; } .ia-container figure { left:20px; width:180px; } .ia-container input { width:20px; } .ia-container input:checked ~ figure

{ left:180px; } .ia-container figcaption span { font-size:12px; letter-spacing:2px; padding:10px; margin-top:-20px; }
}
figure { margin:0; -webkit-margin-before:0; -webkit-margin-after:0; -webkit-margin-start:0; -webkit-margin-end:0; }
.ia-container-heading {
position: auto;
    margin: 0 -23px 14px -35px;
    height: 38px;
    width:98%;
    background: #14466a;
    border-radius: 2px 2px 0 0;
    background-image: -webkit-linear-gradient(top, #226797, #0c3452);
    background-image: -moz-linear-gradient(top, #226797, #0c3452);
    background-image: -o-linear-gradient(top, #226797, #0c3452);
    background-image: linear-gradient(to bottom, #226797, #0c3452);
    -webkit-box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
    box-shadow: inset 0 1px #2f81ad, 0 2px 1px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px black;
}
.ia-container-heading > h2 {
    line-height: 36px;
    font-size: 14px;
    color: #ffff;
    text-align: center;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.7);

}

Nah sekarang buka notepad edit code di bawah ini sebelum paliah pastekan di postingan

Code</>slid image responsif

<div class="ia-container-heading">
<h2>JUDUL WIDGED</h2>
</div>
<div class="ia-container">
<figure>
<img src="----url image disini---">
<input type="radio" name="radio-set" checked="checked"/>
<figcaption><span>
<a href="---link tujuan---">---judul image---</a>
</span></figcaption>
<figure>
<img src="----url image disini---">
<input type="radio" name="radio-set" />
<figcaption><span>
<a href="---link tujuan---">---judul image---</a>
</span></figcaption>
<figure>
<img src="----url image disini---" >
<input type="radio" name="radio-set" />
<figcaption><span>
<a href="---link tujuan---">---judul image---</a>
</span></figcaption>
<figure>
<img src="----url image disini---" >
<input type="radio" name="radio-set" />
<figcaption><span>
<a href="---link tujuan---">---judul image---</a>
</span></figcaption>
<figure>
<img src="----url image disini---" >
<input type="radio" name="radio-set" />
<figcaption><span>
<a href="---link tujuan---">---judul image---</a>
</span></figcaption></figure>
</figure>
</figure>
</figure>
</figure>

Ganti tulisan warna
-Merah dengan Url image kalian yang sudah di siapkan
-Biru dengan Link tujuan kalian
-Hijau dengan judul Anime gambar
-Kuning dengan Judul widged

OK..kalau semua sudah di edit tinggal copy dan pastekan pada tempat yang kalian inginkan
Sekian tutorial kali ini kita bertemu di postingan selanjutnya selamat mencoba semoga bermanfa'at

catatan ;
Kalau di postingan jangan lupa untuk pilih mide HTML jangan Compose code tidak akan berjalan