Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Thursday, July 7, 2016

Membuat Animasi DVD Menggunakan CSS


Hello sahabat Asfarul, setelah kita belajar bagaimana cara Membuat Blog Manga dengan Manga Reader, kali ini kita akan belajar membuat animasi DVD dengan menggunakan CSS. Mungkin pada artikel sebelumnya juga kalian akan berfikir karena Blog Manga bisa dikatakan sulit menggunakan Blogger, begitu juga dengan halnya Animasi DVD menggunakan CSS. Dengan menggunakan Animasi DVD ini kalian dapat meletakkan pada blog kalian sebagai hiasan hingga bisa juga sebagai tombol download. Nah, jadi sangat cocok untuk sahabat asfar yang memiliki blog kumpulan film nih.

Panduan Membuat DVD Animation

Pertama-tama dan paling utama, sahabat asfar harus masuk ke Blogger terlebih dahulu. Kemudian ke Template -> Edit HTML.
Kalian harus memasukkan CSS berikut ini terlebih dahulu sebelum ]]></b:skin> atau </style>.
#movie-style {
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    float: left;
    margin: 0 90px 40px 0;
    position: relative;
}
#movie-style a {
    display: block;
    height: 250px;
    line-height: 0 !important;
    z-index: 100;
}
#movie-style h1 {
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 25px;
    color: #FFF;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 10px 0;
    position: absolute;
    text-align: center;
    width: 180px;
    z-index: 60;
    text-shadow: 1px 1px 0 #000;
}
#movie-style:hover h1 {
    color: #66bcff;
}
.mask-dvd {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYE0SHaYzesOXN252DN-qNCtUs9B854AosrfryetHsiLDI6kesh5IBTLGh_yYZtAdsQMVFi4OT6xjDgwBY_u8uwEdJfEzTg6AdupTKN3Z8Fd3Gq6yvvs_keaX-fXMz_7f7y07ChTZvZc6L/s1600/mask-dvd.png") no-repeat scroll 0 0 transparent;
    box-shadow: 2px 0 1px rgba(0, 0, 0, 0.2) inset;
    height: 250px;
    left: 0;
    position: absolute;
    top: 5px;
    width: 180px;
}
.corte-movie {
    border-bottom: 5px solid #222;
    border-radius: 3px 3px 3px 3px;
    border-right: 5px solid #222;
    border-top: 5px solid #222;
    float: left;
    height: 250px;
    overflow: hidden;
    position: relative;
    width: 180px;
    z-index: 50;
}
.corte-movie img {
    max-height: 300px;
}
.dvd-rol {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVEKO9cBV8jkzmN5ywNEhgB-iRVOI_u4sTmZlmU1doO5cW7RGz973QEuHtNrEIPNu6ikwyBjbOf9DnJBOyC5Ooi64srtakSP7S0wut5HqA4e37t12Xl5jIDp7XDuzyPQJ3fG8UFRxD4dyL/s1600/dvd.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 180px;
    position: absolute;
    right: 0;
    top: 50px;
    transform: rotate(100deg);
    -moz-transform: rotate(100deg);
    -webkit-transform: rotate(100deg);
    -o-transform: rotate(100deg);
    width: 180px;
    z-index: 10;
}
.dvd-rol, #movie-style h1 {
    transition: all 300ms ease-in-out 0s;
    -moz-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
}
#movie-style:hover .dvd-rol {
    right: -73px;
    transform: rotate(242deg);
    -moz-transform: rotate(242deg);
    -webkit-transform: rotate(242deg);
    -o-transform: rotate(242deg);
}

Masuk ke tahap penerapannya, sahabat tinggal membuat sebuah postingan lalu masukkan HTML dibawah ini.
<div id="movie-style">
    <span class="corte-movie">
        <img src="URL GAMBAR">
    </span>
    <h1>Judul DVD</h1>
    <a href="URL YANG DITUJU" class="mask-dvd"></a>
    <i class="dvd-rol"></i>
</div>


Demo 




Laskar Pelangi


Demikian panduan Membuat Animasi DVD Menggunakan CSS. Semoga panduan ini bermanfaat untuk sahabat asfar
Read More

Monday, July 4, 2016

Membuat Blog Manga dengan Manga Reader


Hello sahabat Asfarul, postingan ini merupakan postingan pertama blog ASFAR Guide. Kali ini saya akan membahas panduan membuat blog manga dengan Manga Reader. Pastinya hal ini sangat dipentingkan untuk memulai membuat blog manga karena dengan menggunakan Manga Reader blog kamu tidak perlu memuat gambar manga dari atas hingga kebawah yang pastinya dengan begitu membuat blog kamu menjadi lemot karena harus memuat semua gambar manga. Dengan menggunakan Manga Reader, pembaca manga akan lebih enak membaca manga karena menggunakan klik untuk melanjutkan lembar manga berikutnya/sebelumnya tanpa harus meng-scroll kebawah. Dengan menggunakan Manga Reader juga postingan manga kamu pastinya lebih cepat karena hanya meload per gambar setiap kliknya.

Panduan Memasang Manga Reader

Buka Template, kemudian menuju ke HTML.
Agar Manga Reader dapat berfungsi dengan baik. kita harus memasukkan script berikut ini sebelum penutup </head>

<script type='text/javascript'>
//<![CDATA[
//////////////////////////////////////
// Manga Reader for blogger 1.2
// Compiled Javascript (from any resource)
// License Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
// Free Copy, Free Use, Free Modification, Give proper credit
//////////////////////////////////////
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 Y=7 j(5);2 Z=\' \';2 11=7 j(5);2 12=7 j(t);2 13=\'B\';2 14=\'N\';2 15=\'C\';2 O=7 j(t);2 n=7 j(t);2 u=10;2 P=7 j(5);2 16=7 j(5);6 17(){d=7 18();19=\',\';8=\'\'+y.Q;8=8.o((8.f(\'?\'))+1);3(8.p<1){v t}q=7 18();D=1;1a(8.f(\'&\')>-1){q[D]=8.o(0,8.f(\'&\'));8=8.o((8.f(\'&\'))+1);D++}q[D]=8;1b(i 1B q){z=q[i].o(0,q[i].f(\'=\'));h=q[i].o((q[i].f(\'=\'))+1);1a(h.f(\'+\')>-1){h=h.o(0,h.f(\'+\'))+\' \'+h.o(h.f(\'+\')+1)}h=1C(h);3(d[z]){d[z]=d[z]+19+h}k{d[z]=h}}v d}d=17();2 E;2 R;2 4=1;2 9=7 S();2 F=7 S();2 A=7 S();6 w(G){3(H.1c){v H.1c[G]}k{v H.1D(G)}}6 l(C){2 m=""+y.Q;3(m.f("?")>0){m=m.o(0,m.f("?"))}m+="?B="+C;3(n==5){m+="&n=5";m+="&u="+u}y.Q=m}6 I(){3(4>=9.p){3(O==5){4=1;l(4)}}k{4+=1;l(4)}}6 1d(){3(4<=1){3(O==5){4=9.p;l(4)}}k{4+=-1;l(4)}}6 1E(){4=1;l(4)}6 1F(){4=9.p;l(4)}6 1G(){2 1e=w(13);2 r=\'\';2 J=7 1H();J.T=9[4-1];2 1f=J.1f;2 K=J.K;3(P==5){r+="<a 1I=\'1g:1h(I());\'>"}r+="<1J 1K=\'0\' G=\'1i\' T=\'"+9[4-1]+"\'";3(16==5){r+=\' 1L="\'+F[4-1].1j(/"/g,"\'").1j(/<[^>]*>/g,"")+\'"\'}3(K>1M){r+="K=\'1N\'"}r+=">";3(P==5){r+="</a>"}1e.L=r;3(11==5){2 1k=w(14);1k.L=F[4-1]}3(Y==5){1l()}3((12==5)&&(4<9.p)){E=U(\'M(\'+4+\');\',1m)}3(n==5){R=U(\'I();\',(u*1O))}}6 M(1n){3(w(\'1i\').1P){1o(E);w(\'M\').T=9[1n]}k{E=U(\'M(\'+4+\');\',1m)}}6 1Q(1p,N,V){2 x=9.p;9[x]=1p;F[x]=N;3(1R V=="1S"){A[x]=x+1}k{A[x]=V}}6 1l(){2 s=\'\';2 i;s=" <b>1T</b> <1q 1U=\'C\' 1V=\'1g:1h(l(y.1W[y.1X].1r));\'>";1b(i=1;i<9.p+1;i++){s+="<1s 1r=\'"+A[i-1]+"\' ";3(i==4){s+="1t=\'1t\'"}s+=\'>\'+A[i-1]+\'</1s>\'}s+="</1q> 1Y "+9.p;w(15).L=s;w("1Z").L=s}6 20(W){n=j(5);3(W>0){u=W}l(4)}6 21(){n=j(t);1o(R);l(4)}3(d["B"]>0){4=22(d["B"])}k{4=1}3(d["n"]=="5"){n=j(5);u=d["u"]}6 1u(e){2 c=0;3(23.24=="25 26 27"){3(!e){2 e=1v.1w}3(e.c){c=e.c;3((c==1x)||(c==1y)){1v.1w.c=0}}k{c=e.X}}k{3(e.X){c=e.X}k{c=e.c}}28(c){1z 1x:1d();v t;1z 1y:I();v t;29:v 5}}H.2a=1u;Z=\'&1A;|&1A; \';',62,135,'||var|if|glbCurrentpage|true|function|new|query|pages|||keyCode|FORM_DATA||indexOf||keyValue||Boolean|else|showpage|theURL|slideMode|substring|length|keypairs|imgString|indexString|false|slideDelay|return|getObjectByID|len|this|keyName|linkNames|page|index|numKP|glbCacheTimer|captions|id|document|showNext|newImg|width|innerHTML|cache|caption|wrapOn|clickMode|location|glbSlideTimer|Array|src|setTimeout|linkName|newDelay|which|showIndex|indexSeparator||showCaption|preCache|pictureID|captionID|indexID|pageALT|createRequestObject|Object|separator|while|for|all|showPrevious|pageLocation|height|javascript|void|mainpage|replace|pageCaption|buildIndex|500|pageID|clearTimeout|filename|select|value|option|selected|omvKeyPressed|window|event|37|39|case|nbsp|in|unescape|getElementById|showFirst|showLast|initpage|Image|href|img|border|alt|850|900|1000|complete|addpage|typeof|undefined|Page|name|onchange|options|selectedIndex|of|index2|enableSlideMode|disableSlideMode|Number|navigator|appName|Microsoft|Internet|Explorer|switch|default|onkeydown'.split('|'),0,{}))
//]]>
</script>

Buat Entri, kemudian masukkan HTML berikut ini di tab HTML

<center>
<script type="text/javascript">
addpage('MASUKKAN URL GAMBAR','');
addpage('MASUKKAN URL GAMBAR','');
addpage('MASUKKAN URL GAMBAR','');
addpage('MASUKKAN URL GAMBAR','');
addpage('MASUKKAN URL GAMBAR','');
addpage('MASUKKAN URL GAMBAR','');
</script><br />
<div align="center">
<script src="http://blogmu.blogspot.com/feeds/posts/default/-/
KATEGORI?alt=json-in-script&amp;callback=listchapter">
</script>
<br />
<br />
<div class="naviarea1">
<aw class="awnavi1">
       <span id="index"></span>
<a href="javascript:void(showPrevious());"><button class="navigasi">← Prev</button></a>&nbsp;&nbsp;&nbsp;<span id="index"></span>&nbsp;&nbsp;&nbsp;<a href="javascript:void(showNext());"><button class="navigasi">Next →</button></a></aw></div>
<br /></div>
<div align="center">
<span id="caption"></span><br />
<span id="page"></span><br />
<br />
<div class="naviarea2">
<aw class="awnavi2"><a href="javascript:void(showPrevious());"><button class="navigasi">← Prev</button></a>&nbsp;&nbsp;&nbsp;<span id="index2"></span>&nbsp;&nbsp;&nbsp;<a href="javascript:void(showNext());"><button class="navigasi">Next →</button></a></aw></div>
<br /></div>
<script language="javascript">
initpage();
</script>
</center>

MASUKKAN URL GAMBAR =  URL GAMBAR Manga
kamu dapat menambahkan gambar dengan mengulangi baris
addpage('MASUKKAN URL GAMBAR','');
blogmu = alamat blog kamu
KATEGORI = Nama Manga (Berdasarkan Label)
Contoh: Kamu memposting manga Naruto, masukkan Label Naruto saat membuat postingan, lalu ubah KATEGORI menjadi Naruto, Apabila label menggunakan SPASI gunakan %20 seperti One Piece menjadi One%20Piece


Demikian panduan Membuat Blog Manga dengan Manga Reader. Semoga panduan ini bermanfaat untuk sahabat asfar
Read More