.png)
Cara Membuat Tombol Navigasi Halaman Bergambar
Penulis:
Moch Adnan
dipublikasikan:
26 Agustus 2023
Moch Adnan Blog - Assalamu'alaikum sobat semua, bagaimana kabar sobat hari ini? Semoga sedang sehat dan tidak kurang satu apa pun. senang sekali saya bisa memposting kembali sebuah tutorial blogging untuk pengguna blogger, dimana tutorial kali ini adalah cara membuat tombol navigasi untuk halaman seperti komik atau Foto.
Tombol navigasi untuk gambar ini dapat sobat terapkan kedalam halaman blog sobat terutama jika sobat ingin menampilkan sejenis komik atau gallery foto.
Ide ini keluar begitu saja ketika saat saya ingin menambahkan sebuah halaman gallery foto dalam blog ini.
Maka hasilnya dapat sobat lihat dalam Blog Moch Adnan ini melalui menu Gallery Foto, navigasi perpindahan foto sangat mendekati dengan navigasi yang sering kita lihat dalam situs-situs web komik.
Cara membuat dan memasang Tombol Navigasi halaman Bergambar
Tertarik untuk membuatnya juga sob? Yuk gassken ke tata cara pembuatan dan pemasangannya.
Cara membuatnya:
- 1- Upload terlebih dahulu gambar gambar yang akan sobat tampilkan kedalam halaman.
Langkah ini bertujuan untuk mendapatkan link gambar.
Contoh saya mengupload nya via blogger maka akan di dapat link gambar seperti berikut.
https://googleusercontent/213/0023.pngSelesai.
- 2- Selanjutnya, copy code Script berikut ini.
<script type='text/javascript'>
//<![CDATA[
//////////////////////////////////////
// http://exiashare.blogspot.com
// 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>
Note: bisa sobat simpan dalam halaman blog, atau menyimpannya ke dalam template entri blog sobat, tidak ada masalah.
- 3- Copy dan pastekan lagi kode Script berikut.
<script type="text/javascript">
addpage('url gambar','');
addpage('url gambar','');
addpage('url gambar','');
addpage('url gambar','');
addpage('url gambar','');
</script><br />
<a href="javascript:void(showPrevious());">Prev</a> <span id="index"></span> <a href="javascript:void(showNext());">Next</a><br />
<div align="center">
<span id="caption"></span><br />
<span id="page"></span><br />
<a href="javascript:void(showPrevious());">Prev</a> <span id="index2"></span> <a href="javascript:void(showNext());">Next</a></div>
<script language="javascript">
initpage();
</script>
Tips: Pilih halaman, lalu buat halaman baru, ubah mode penulisan menjadi mode HTML.
Selesai.
Setelah semua persiapan diatas terselesaikan, selanjutnya kita ke tahap berikutnya.
Cara memasangnya:
1- Buka folder/halaman dimana sobat mengupload gambar atau foto-foto yang saya sebutkan dalam baris pembuatan diatas.
2- Silahkan copy satu persatu link url gambarnya.
Dan pastekan ke dalam kode HTML yang sebelumnya sudah sobat simpan ke dalam halaman baru.
3- Pastekan link gambar pada tiap kode yang bertuliskan
'url gambar'
Hingga urutan kode Script yang sudah sobat simpan sebelumnya (lihat langkah penyiapan diatas) tersebut berubah menjadi seperti berikut.
<script type="text/javascript">
addpage('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaIqpB31qhM_hVBxuKJdvwMt2BXxu_jGACN6mvbD6r2OBX6vfL9lhPWwu218jMRygGinGbmVmwV9e-wBbbSSklvCU9ItvRQpubXHN_aqJY3Zlp8gjQEBuo1JFqP-TolmkTnF-dndOdOoqFf847_gn-iZpk0Z7ZspMlAxO_AsNyU2uKHa35PA7Ucl6243X/w640-h480/IMG_20230802_124731.webp','');
addpage('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisDqfQWHWS9TyoiqGfxb9wZpHrlY40da7p47mkENgmccg3eRFdbdC6sVrVp1DlXHnnFxCyinW6v_uvdne2DI-9h41AuM58nC0WL7i7DiAckyxheO1b18rWXtubMRHFwxfnLTXgppX0yTRxSWuLk--37qnhnI2leLhYJy3XG-3zJnog0e3QJ2ANqY4L5QHO/w480-h640/IMG_20230802_124747.webp','');
</script><br />
<a href="javascript:void(showPrevious());">Prev</a> <span id="index"></span> <a href="javascript:void(showNext());">Next</a><br />
<div align="center">
<span id="caption"></span><br />
<span id="page"></span><br />
<a href="javascript:void(showPrevious());">Prev</a> <span id="index2"></span> <a href="javascript:void(showNext());">Next</a></div>
<script language="javascript">
initpage();
</script>
4- Klik pratinjau atau langsung klik Publikasikan jika semua url gambar sudah sobat simpan ke dalam kode HTML menu diatas.
Sampai disini pembuatan dan pemasangan Tombol Navigasi Halaman Bergambar saya sampaikan dan semoga bermanfaat buat sobat.
Jika ada terkendala, silahkan tanyakan dalam kotak komentar di bawah artikel ini.
Untuk mengganti tombol PREV dan NEXT dengan icon SVG atau dengan Google Material icon sobat bisa membacanya disini:
Cara menggunakan icon SVG ke dalam Halaman Blogger
Cara menggunakan Google material icon kedalam halaman blog
Cara menggunakan icon SVG ke dalam Halaman Blogger
Cara menggunakan Google material icon kedalam halaman blog
Moch Adnan
Seorang Blogger biasa yang hanya sekedar ingin menulis dan berbagi. Tidak soal berapa lama kita hidup, tetapi bagaimana kita hidup
Tidak ada komentar:
Posting Komentar
Beri komentar