Petunjuk Operasional Peengisian Konten Website BATAN

download Petunjuk Operasional Peengisian Konten Website BATAN

of 43

Transcript of Petunjuk Operasional Peengisian Konten Website BATAN

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    1/43

    PETUNJUK OPERASIONALUNTUK ADMIN WEB SATKER

    Disusun Oleh :

    GHOFIR, S.ST

    Gedung 90 kawasan Puspiptek-SerpongTangerang Selatan

    2015

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    2/43

    DAFTAR ISI

    KATA PENGANTAR

    BAB I. PENDAHULUAN ..............................................................................1

    BAB II. LOGIN ADMINISTRATOR  ............................................................... 2

    BAB III. PROFIL USER ................................................................................4

    BAB IV. INPUT/EDIT ARTIKEL ................................................................... 6

    BAB V. MEDIA MANAGER .......................................................................18

    BAB VI. PHOCA DOWNLAOD .................................................................20

    BAB VII. PHOCA GALLERY ...................................................................... 2

    BAB VIII. SLIDER SATKER .......................................................................!!BAB I". PENUTUP .................................................................................... 40

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    3/43

    KATA PENGANTAR

    Alhamdulillah, puji syukur saya panjatkan ke hadirat Ilahi Rabbi Tuhan semesta alam

    yang telah berkenan memberikan ridho, hidayah dan kekuatan serta kemampuan untuk

    menyelesaikan Petunjuk Operasional untuk admin web satker dalam pengisianartikel/berita ke Website BATA yang di laun!hing akhir tahun "#$%&

    'ami berharap Petunjuk Operasional untuk admin web satker dapat memberikan man(aat

    bagi pemba!anya& Petunjuk Operasional ini masih banyak kekurangannya, untuk itu

    mohon kritik dan saran untuk meningkatkan isi dari modul ini&

    )erpong, *anuari "#$+

    Penyusun

    ho(ir,)&)T&

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    4/43

    Petunjuk operasional untuk admin web satker

    BAB I

    PENDAHULUAN

    Akhir tahun "#$%, tepat tanggal + -esember "#$% bertempat di edung -R.

    P)PIPT0' website BATA dengan desain baru dilaun!hing, bertepatan

    dengan ulang tahun BATA yang ke +1&

    -engan tampilnya website BATA yang baru, dimana kebijakannya juga baru&

    Pada website BATA yang lama, semua satker dapat mendesain dan

    membuat tampilan website satker masing.masing, sesuai selera web admin

    satker& Pada desain website yang baru, website satker sudah menyatu dalamdesain tampilan website BATA, sehingga admin satker tidak lagi mendesain

    tampilan website satker&

    ntuk memperkaya konten website BATA, admin satker diminta akti( untuk

    mengisi berita, artikel, (oto galeri, hasil.hasil litbang dan kegiatan satker ke

     website satker yang juga merupakan website BATA&

    ntuk itu perlu dibuat petunjuk operasioanl untuk admin satker dalam input

    berita, artikel, (oto galeri, hasil.hasil litbang dan kegiatan satker ke website

    satker& -alam Petunjuk Operasional untuk admin web satker akan diuraikan

    !ara.!ara upload berita, artikel dan (oto ke web ser2er&

    ho(ir 3 PPI') . BATA   1

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    5/43

    Petunjuk operasional untuk admin web satker

    BAB II.LOGIN ADMINISTRATOR

    ntuk dapat mengisi artikel/berita ke website BATA terlebih dahulu, haruslogin ke administrator website BATA dengan !ara, buka browser dan ketik dialamat browser 4 http4//www&batan&go&id/administrator/5 jogja6Prambanan"#$%, sehingga tampil halaman login seperti di bawah ini 4

    ambar $& 7enu 8ogin

    )etelah diklik tombol 8og in, maka akan masuk ke halaman utamanadministrator admin satker, seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   2

    http://www.batan.go.id/administrator/?jogja=Prambanan2014http://www.batan.go.id/administrator/?jogja=Prambanan2014http://www.batan.go.id/administrator/?jogja=Prambanan2014http://www.batan.go.id/administrator/?jogja=Prambanan2014

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    6/43

    Petunjuk operasional untuk admin web satker

    ambar "& 7enu 9ontrol Panel

    ho(ir 3 PPI') . BATA   3

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    7/43

    Petunjuk operasional untuk admin web satker

    BAB III.PROFIL USER

    ser admin satker di webser BATA, mempunyai akses yang terbatas&Walaupun mempunyai akses yang terbatas, untuk keamanan tetap saja harusmemperhatikan keamanan, karena satu user yang mengabaikan keamanan,bisa satu ser2er yang akan menerima akibatnya&

    ntuk itu, pada saat pertama kali login ke administrator website BATA, yangpertama dilakukan adalah mengubah password standard menjadi passwordsendiri :admin satker;& Pengisiaan password sebaiknya berupa karakter a.<dan #.= dengan kombinassi huru( besar dan ke!il dan diselipi dengankarakter spesial :lambang; seperti >?@CDEF:;& 9ontoh 4

    PpiksnBatan"#$+& 'ata.kata mudah diingat, hanya memberi tanda pagar di awal dan akhir, serta setiap awal kata dengan huru( besar&

    ntuk mengganti password, ada di menu Pro(il ser& ntuk merubah pro(iluser, seperti merubah nama, alamat email dan password, klik i!on setting dipojok kanan atas, seperti gambar di bawah ini 4

    ambar G& 7enu 0dit A!!ount

    'lik i!on setting di pojok kanan atas, sehingga tampila menu 0dit A!!ount,

    pilih menu 0di A!!ount, untuk mengganti/mengubah nama lengkap, alamatemail dan password& Hield yang dapat diubah (ield yang mempunyai latarbelakang putih, untuk (ield yang mempunyai latar belakang abu.abu, hanyaadministrator website yang dapat mengubahnya&

    alaman/tampilan 7enu 0dit Pro(ile/7y Pro(ile )eperti tampak pada gambardi bawah ini 4

    ho(ir 3 PPI') . BATA   4

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    8/43

    Petunjuk operasional untuk admin web satker

    ambar %& 7enu 0dit Pro(ile/7y Pro(ile

    Apabila user admin satker merubah setting pada menu basi! setting& 7akatampilannya tidak akan sesuai dengan petunjuk operasional ini&

    ho(ir 3 PPI') . BATA   5

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    9/43

    Petunjuk operasional untuk admin web satker

    BAB IV.INPUT/EDIT ARTIKEL

    )etiap admin satker diminta akti( untuk menambah berita/artikel ke websitesatker, apabila ada artiker.artikel yang bagus yang layak tayang di halamandepan website BATA, maka administrator website BATA :B'; akanmenampilkan berita/artikel tersebut ke halaman depan website BATA&

    ntuk melakukan input artikel/berita ke website BATA yang dilakukan olehadmin satker, pertama buka browser, dan ketik 4http4//www&batan&go&id/administrator/5jogja6Prambanan"#$%, sehingga akantampil menu login seperti di bawah ini 4

    ambar +& 7enu 8ogin

    ho(ir 3 PPI') . BATA   6

    http://www.batan.go.id/administrator/?jogja=Prambanan2014http://www.batan.go.id/administrator/?jogja=Prambanan2014

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    10/43

    Petunjuk operasional untuk admin web satker

    'emudian ketik user login dan password& :user6adminppiksn,password6FFFFFFFFF;

    'lik tombol log in, sehingga tampil menu 9ontrol Panel, seperti di bawah ini 4

    ambar J& 7enu 9ontrol Panel

    ntuk menambahkan artikel/berita baru, klik menu Add ew Arti!le daritampilan menu 9ontrol Panel :ambar J;, sehingga tampil (orm Arti!le7anager/Add ew Art!le seperti di bawah ini 4

    ho(ir 3 PPI') . BATA   7

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    11/43

    Petunjuk operasional untuk admin web satker

    ambar 1& Horm Arti!le 7anager/Add ew Arti!le

    7asukkan *udul artikel di bagian paling atas :title; kemudian pilih kategori dimenu kanan atas sesuai dengan artikel yang akan dimasukkan, !ontoh beritaPPI')& Pada pilihan tags, sebaiknya diisi kata kun!i dari artikel tersebut,minimal dimasukkan kata BATA, nuklir, indonesia, atom& )etelah isi semuaartikelnya, beri tanda readmore di akhir paragrap pertama denganmenempatkan kursos di akhir paragrap, kemudian klik tombol readmore dibagian kanan bawah, Agar tampil kata #$%$&'()*&+).... di potongan posting

    halaman utama website&

    ho(ir 3 PPI') . BATA   8

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    12/43

    Petunjuk operasional untuk admin web satker

    ambar K& Tombol read more

    Bila ada gambar dalam artikel/berita tersebut, klik tombol images di bagianbawah untuk menambahkan gambar ke dalam berita tersebut, :lihat gambardi bawah ini ;&

    ambar K& Tombol Image

    )etelah tombol image di klik, maka akan tampil menu (ile manager, sepertigambar di bawah ini 4

    ho(ir 3 PPI') . BATA   9

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    13/43

    Petunjuk operasional untuk admin web satker

    ambar =& Hile manager :Pilih (older satker;

    Pilih (older sesuai nama satker, kemudian insert gambar dari komputer lokalmelalui tombol browse&&&&, seperti gambar di bawah ini 4

    ambar $#& Tombol Browse&&&

    'lik tombol Browser untuk memilih gambar dari komputer lokal yang akandiupload sebagai gambar artikel, tampilan (ile manager di komputer lokalseperti di bawah ini 4

    ho(ir 3 PPI') . BATA   10

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    14/43

    Petunjuk operasional untuk admin web satker

    ambar $$& Hile manager komputer lokal

    Pilih nama (ile yang akan diupload, dengan persyaratan nama (ile tidak bolehmenggunakan spasi, tidak boleh menggunakan lambang seperti @CDEF:;.L>, bila menggunakan garis bawah diperbolehkan& kuran gambar yangdisarankan $##kbs, ukuran maksimal +##kbs, dengan dimensi J%#piMel M %"#piMel& )etelah memilih nama (ile, klik tombol Open, sehingga tampilan padaBrowse&&&, menjadi seperti gambar di bawah ini 4

    ambar $"& )tart pload

    'lik tombol )tart pload, sehingga (ile gambar tersebut terkirim ke ser2er,seperti tampak pada gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   11

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    15/43

    Petunjuk operasional untuk admin web satker

    ambar $G& pload (ile image sukses

    pload image/gambar yang sukses, ditandai dengan pesanpload9omplete 4 /namaN(ile&eMt dan nama (ile tersebut ada dalam da(tar (ile

    di (ile manager seperti gambar di atas&

    ntuk menempatkan gambar tersebut ke artikel, pilih nama (ile gambar yangsesuai/yang baru di upload, kemudian klik tombol insert di kanan atas (ilemanager& )ehingga dalam (orm artikel akan tampak tambahan gambarseperti di bawah ini 4

    ho(ir 3 PPI') . BATA   12

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    16/43

    Petunjuk operasional untuk admin web satker

    ambar $%& asil insert gambar ke artikel

    Posisi gambar dalam artikel masih belum rapi, sehingga perlu dirapikandengan !ara, tempatkan kursor di lokasi gambar, kemudian klik kanan,sehingga tampil menu berikut ini 4

    ambar $+& 7enu properties images

    'lik menu Insert Image, untuk mengatur panjang dan lebar gambar gambar,spasi 2ertikal dan horisontal gambar seperti pada gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   13

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    17/43

    Petunjuk operasional untuk admin web satker

    ambar $J& spasi dan dimensi gambar

    -imesions diisi, J%# M %"#, tapi kalau 9ontrains proportions di!entang, maka

    !ukup mengisi salah satu saja, 2ertikal atau horisontalnya& ntuk spasi2ertikal diisi $# dan spasi horisontal diisi $#& kemudian klik O', kemudian klikalignment le(t, pada menu pojok kanan atas& 'emudian blok seluruh teMt di(orm artikel dan klik i!on alignment justi(y, sehingga tampilan teMt dan gambarmenjadi rapi, seperti tampak pada gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   14

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    18/43

    Petunjuk operasional untuk admin web satker

    ambar $J& Artikel yang rapih

    )etelah selesai input artikel/berita, akhiri dengan klik tombol )a2e atau )a2eE 9lose& )ehingga artikel disimpan dan ditampilkan di website BATA&

    Tampak pada (orm arti!le manager, ada tambahan artikel dengan warna biru,yang berarti user akti( dapat mengubah artikel tersebut karena milik user akti(&Perhatikan di kolom author&

    ntuk menampilkan penulis aslinya bisa memasukkan nama penulis padamenu Publishing saat input arti!le atau edit arti!le, di (ield 9reated by alias 4&&&&&&

    Admin satker tidak boleh mengeklik tombol (eatured pada setiap artikel,tombol (eatured hanya dapat dilakukan oleh administrator website, yaitupetugas dari B'& )ehingga artikel mana yang dapat tampil di halamandepan website BATA, hanya petugas dari B' yang dapat melakukannya&

    Tampilan artikel dari admin satker, yang sudah selesai akan terlihat di(orm/menu Arti!le manager 4 Arti!le seperti di bawah ini 4

    ho(ir 3 PPI') . BATA   15

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    19/43

    Petunjuk operasional untuk admin web satker

    ambar $1& Artikel baru paling atas

    Arikel yang baru di input akan berada paling atas, artikel yang berwarna biruyang dapat di ubah karena milik user akti(& Artikel yang lain bukan milik userakti(, sehingga tidak dapat melakukan editing terhadap artikel tersebut&

    ntuk editing/mengubah artikel yang sudah ada, tinggal buka (orm/menuarti!le manager 4 arti!le, kemudian pilih/klik pada judul artikel, sehingga artikeltersebut terbuka pada (orm Arti!le manager 4 edit arti!le, seperti gambar dibawah ini 4

    ambar $K& Horm/7enu edit artikel

    ho(ir 3 PPI') . BATA   16

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    20/43

    Petunjuk operasional untuk admin web satker

    )etelah selesai melakukan perubahan baik pada bagian teMt, gambar ataumengganti gambar, jangan lupa untuk menyimpannya dengan mengeklik

    tombol sa2e atau sa2e E !lose&

    Admin satker tidak diijinkan untuk mengeklik tombol (eature, kalaupun dikliktombol (eature, tidak akan ada perubahan& Artikel yang (eaturenya diakti(kanoleh admin satker tidak dapat akti( tampil di halaman depan website BATA&Artikel dari admin satker akan tampil di halaman depan website BATAsetelah diakti(kan oleh administrator website BATA yaitu B'&

    Admin satker juga sebaiknya tidak merubah kategori yang sudahdibuat/tersedia& Apabila menginginkan tambahan kategori atau tambahanmenu, dapat mengajukan ke administrator website BATA :B'; atau

    mengajukan ke tim pengembang website BATA :PPI');&

    ho(ir 3 PPI') . BATA   17

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    21/43

    Petunjuk operasional untuk admin web satker

    BAB V. MEDIA MANAGER

    Pada tampilan (orm !ontrol panel, terdapat menu media manager yangber(ungsi untuk mengatur kepemilikan (older dan (ile masing.masing adminsatker& )eperti gambar di bawah ini 4

    ambar $=& menu 7edia 7anager

    'lik menu media manager, sehingga tampil da(tar (older dan (ile, sepertigambar di bawah ini 4

    ho(ir 3 PPI') . BATA   18

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    22/43

    Petunjuk operasional untuk admin web satker

    ambar "#& -a(tar (older dan (ile

    Admin satker dapat membuat (older dan menambahkan (ile ke dalam mediamanager tersebut& Tapi jangan sampai admin satker merubah ataumengahapus nama (older atau (ile dari satker lain&

    Holder dan (ile di media manager dapat diisi dengan (ile.(ile gambar :&png,

    &jpg, &jpeg, bmp; dan (ile pd(& *angan sekali.kali mengupload (ile bahasaprogramming seperti berekstensi php, 2b, bas dan lain.lain&

    Bilaa ingin menanyangkan 2ideo, dapat diupload ke youtube dan dilink keartikel website satker atau ke gallery satker&

    ho(ir 3 PPI') . BATA   19

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    23/43

    Petunjuk operasional untuk admin web satker

    BAB VI. PHOCA DOWNLAOD

    Hasilitas download (ile pd( dari website satker, dapat diatur melalui menu9omponent Pho!a -ownload 9ontrol Panel dari menu utama, seperti

    gambar di bawah ini 4

    ambar "$& menu Pho!a -onwload

    )etelah klik menu 9ontrol Panel pada Pho!a -ownload akan tampil menu

    pho!a download !ontrol panel seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   20

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    24/43

    Petunjuk operasional untuk admin web satker

    ambar ""& menu Pho!a -onwload 9ontrol Panel

    )aat mengupload (ile.(ile pd(, admin satker dapat membuat kategori terlebih

    dahulu, dengan mengeklik menu/i!on !ategories dari pho!a download !ontrol

    panel, seperti gambar di bawah ini 4

    ambar "G& menu/i!on 9ategories Pho!a -onwload 9ontrol Panel

    )etelah diklik, maka akan tampil (orm da(tar kategori untuk da(tar (ile pd( yang

    akan diupload, agar dapat didownload oleh pengunjung website& Tampilan

    (orm da(tar kategori dapat dilihat seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   21

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    25/43

    Petunjuk operasional untuk admin web satker

    ambar "%& -a(tar kategori

    ntuk membuat kategori baru, klik menu/tombol new berwarna hijau di pojok

    kanan atas& 7aka akan tampil (orm isian kategori seperti gambar di bawah

    ini 4

    ambar "+& Horm Isian kategori

    -alam (orm ini, admin satker hanya perlu mengisi di (ield Title, untuk (ield

    yang dikosongkan saja, kemudian klik tombol )a2e atau )a2e E 9lose&

    pload (ile pd( dapat dilakukan satu persatu atau satu kali upload banyak (ile

    ho(ir 3 PPI') . BATA   22

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    26/43

    Petunjuk operasional untuk admin web satker

    pd( untuk satu kategori& Bila ingin upload (ile satu persatu klik menu new yang

    berwarna hijau di pojok kanan atas, sehingga tampil (orm isian untuk upload

    seperti gambar di bawah ini 4

    ambar "J& Horm Isian pload (ile pd(

    'etik *udul artikel (ile pd( di (ield title, (ield alias dikosongkan akan diisi

    otomatis, (ield 9ategory, diisi dengan kategori dari tampilan menu di website,

    (ield Ordering dipilih dari (ield title yang sudah ada, kalau belum ada

    dikosongkan saja, akan otomatis terisi dengan (ield title yang ada diatas&

    )etelah selesai klik tombol sele!t Hilename pada (ield HilenameF, untuk

    mengupload (ile dari komputer lokal ke ser2er website& )etelah di klik tombol

    )ele!t Hilename, akan tampil menu/(orm berikut ini 4

    ambar "1& )ele!t Hilename

    ho(ir 3 PPI') . BATA   23

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    27/43

    Petunjuk operasional untuk admin web satker

    'lik tombol Browse&&&, untuk melihat/mengambil (ile pd( dari komputer lokal,

    sehingga tampilan sebagai berikut 4

    ambar "K& )ele!t Hilename

    Pilih nama (ile yang akan diupload, kemudian klik tombol Open, sehingga

    kembali ke tampilan )ele!t Hilename dengan tambahan nama (ile yang akandiupload& Pilih nama (older tempat menyimpan (ile pd( tersebut, kemudian klik

    tombol )tart.pload di tampilan )ele!t Hilename& 7aka (ield Hilename di (orm

    isian upload (ile pd(, akan terisi nama (older dan nama (ile pd( yang baru saju

    diupload&

    )elanjutnya dapat dilihat di da(tar (ile pd( juga terdapat nama (ile pd( yang

    baru saja diupload, berserta lokasi (older tempat penyimpanannya&

    ho(ir 3 PPI') . BATA   24

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    28/43

    Petunjuk operasional untuk admin web satker

    BAB VII. PHOCA GALLERY

    Hasilitas Pho!a allery ber(ungsi untuk mengupload dan menampilkan gallery(oto kegiatan& allery (oto kegiatan sebaiknya diupload per.kegiatan, nama

    kegiatan dapat dijadikan sebagai kategori dari galleri (oto yang akan

    ditampilkan&

    )ebelum membuat kategori dan mengupload (oto ke dalam (oto gallery,

    pertama harus membuat (older di media manager, kemudian upload (ile.(ile

    (oto ke dalam (older tersebut& )etelah itu baru membuat kategori kegiatan dan

    mengupload (oto dari media manager&

    8angkah.langkahnya adalah sebagai berikut 4

    7asuk ke admin websatker, kemudian pilih menu media manager, seperti

    gambar di bawah ini 4

    ambar "=& 7enu 7edia 7anager

    )etelah tampil menu media manager, seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   25

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    29/43

    Petunjuk operasional untuk admin web satker

    ambar G#& -a(tar Holder di 7edia 7anager

    Pilih (older Hoto, tampilan pindah ke atas, kemudian klik menu 9reate Holder,

    'etik nama (older sesuai dengan nama kegiatan dengan !atatan nama (older

    tidak boleh menggunakan spasi, symbol atau karakter asing, hanya

    diperbolehkan huru(, angka dan spasi& )eperti gambar di bawah ini 4

    ambar G$& 9reate Holder di 7edia 7anager

    Pindah ke (older yang baru dibuat, untuk upload (ile (oto ke media manage&

    'emudian klik tombol pload, sehingga tampil menu berikut ini 4

    ho(ir 3 PPI') . BATA   26

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    30/43

    Petunjuk operasional untuk admin web satker

    ambar G"& 7enu upload di 7edia 7anager

    'lik tombol Browse&&&, untuk mengupload (ile.(ile dari komputer lokal ke ser2er

     website, dengan tampilan seperti gambar di bawah ini 4

    ambar GG& Pilih (ile dari komputer lokal

    ho(ir 3 PPI') . BATA   27

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    31/43

    Petunjuk operasional untuk admin web satker

    'lik tombol Open, kemudian di media manager akan terlihat keterangan %

    (iles sele!ted, seperti gambar di bawah ini 4

    ambar G%& *umlah (ile terpilih dari komputer lokal

    'lik tombol )tart pload, sehiggna (ile.(ile tersebut terupload ke ser2er

     website, seperti tampak pada gambar di bawah ini 4

    ambar G+& Hile.(ile yang berhasil diupload

    )etelah (ile.(ile (oto diupload ke ser2er, selanjutnya membuat kategori

    kegiatan, dengan memilih/mengeklik menu 9omponent..QPho!a allery,

    sehingga tampil menu Pho!a allery seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   28

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    32/43

    Petunjuk operasional untuk admin web satker

    ambar GJ& 7enu Pho!a allery

    Pilih menu 9ategories, kemudian klik tombol ew, untuk membuat kategori

    baru, tampilan (orm untuk membuat kategori baru seperti tampak pada

    gambar di bawah ini 4

    ambar G1& Horm ew 9ategories

    Hield yang diisi !ukup beberapa (ield saja, seperti, Title, Parent 9ategory

    ho(ir 3 PPI') . BATA   29

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    33/43

    Petunjuk operasional untuk admin web satker

    dipilih Hoto dan 9ategory Holder, klik )ele!t Holder, sehingga tampil da(tar

    (older yang dapat dipilih, seperti tampak pada gambar di bawah ini 4

    ambar G1& 7engakti(kan (older untuk kategori

    'lik, (older (oto, setelah tampil nama.nama (older di bawah (older (oto, klik

    i!on hijau di nama (older yang akan diat(ikan, !ontoh 9ollaboratingN9&&&&,

    sehingga pada (ield 9ategory Holder akan terisi nama (older yang dipilih,

    seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   30

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    34/43

    Petunjuk operasional untuk admin web satker

    ambar GK& Horm 9ategories yang telah terisi

    )elanjutnya untuk menyelesaikan pembuatan kategori, klik tombol )a2e E

    9lose&

    )etelah ada nama kategori, selanjutnya upload (ile (oto ke dalam pho!a

    gallery dengan memilih menu images, selanjutnya klik tombol 7ultiple Add,

    sehingga tampil (orm seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   31

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    35/43

    Petunjuk operasional untuk admin web satker

    ambar G=& Horm 7ultiple Add

    Pilih nama (older Hoto, kemudian pilih nama (older yang akan diakti(kan

    :9ollaboratingN9entre;, tampak pada gambar yang diberi tanda o2al,

    kemudian klik kotak ke!il di sebelah kiri Hilename& )elanjutnya isi (ield yang

    diberi tanda kotak :Title dan 9ategory;& 'emudian klik tombol )a2e E 9lose&

    )ehingga tampil proses pembuatan thumbnail (ile (oto dalam (older tersebut,

    seperti gambar di bawah ini 4

    ambar %#& Proses Thumbnails Pho!a allery

    kuran Hoto di Hoto alleri sebaiknya dibuat dalam ukuran besar, !ontoh

    $#"% M KJ#&

    ho(ir 3 PPI') . BATA   32

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    36/43

    Petunjuk operasional untuk admin web satker

    BAB VIII. SLIDER SATKER

    )lider setiap satker berbeda.beda, untuk itu admin satker dapat merubahtampilan slider di halaman website satker& kuran gambar untuk slider

    KG#MG+# piMel, $## 'B, agar ringan saat dibuka& Banyaknya gambar slider

    tidak dibatasi, hanya saja sebaiknya maksimal J gambar untuk tiap satker&

    )etiap slider sebaiknya selain gambar, juga ada artikel/keterangan detail

    mengenai gambar tersebut&

    ntuk menayangkan/memasukkan dapat dilakukan dari menu administrator,

    kemudian pilih menu eMtension 7odul 7anager, seperti gambar di bawah

    ini 4

    ambar %$& 7enu 7odul 7anager

    ho(ir 3 PPI') . BATA   33

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    37/43

    Petunjuk operasional untuk admin web satker

    Pilih menu slider sesuai nama satker masing.masing, dalam !ontoh saya pilih

    slide homepage PPI'), klik menu slide homepage PPI'), sehingga

    tampil (orm )lide omepage PPI') seperti gambar di bawah ini 4

    ambar %"& Horm )lider )atker :omepage PPI');

    Pilihan pada menu modul sebaiknya tidak dirubah, langsung saja klik menu

    9on(iguration Options, sehingga tampil menu 9on(iguration Options seperti

    gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   34

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    38/43

    Petunjuk operasional untuk admin web satker

    ambar %G& menu 9on(iguration Options

    Apabila ingin merubah slider, persiapkan gambar sudah diupload melalui

    media manager, dan diletakkan di (older satker slider atau (older slider

    nama satker, dengan ukuran gambar untuk slider KG# M G+# pM, nilanya $##

    'B& 8ink untuk keteranga detail dari gambar slider tersebut, dapat diambil gari

    artikel yang ditampilkan& 8angkah.langkahnya, klik tanda L :plus; atau klik teMt

    nama slider pada slider yang akan dirubah, !ontoh slider nomor $ :+J Tahun

    Indonesia Terus Berkarya;, sepert gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   35

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    39/43

    Petunjuk operasional untuk admin web satker

    ambar %%& Horm )lider

    anti nama/judul slider pada slider name, ganti alamat url gambar sesuailokasi dan nama gambar, ganti *udul )lider yang akan ditampilkan diantara

    tanda hGQ&&&& dan /hGQ, beri keterangan di tag paragrap pQ&&&&&&&&&&&&&&&&&&&&&&&

    /pQ dan !opy paste alamat url dari detail slider tersebut dari website BATA&

    )ehingga tampilan gambar di atas berubah seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   36

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    40/43

    Petunjuk operasional untuk admin web satker

    ambar %+& asil perubahan )lider

    Apabila ingin menambahkan slider, klik tombol pada menu 9on(iguration

    Options, lihat gambar %G& )ehingga tampil menu add slider seperti gambar

    berikut ini 4

    ho(ir 3 PPI') . BATA   37

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    41/43

    Petunjuk operasional untuk admin web satker

    ambar %J& Add )lider

    anti nama/judul slider pada slider name, ganti alamat url gambar sesuai

    lokasi dan nama gambar, ganti *udul )lider yang akan ditampilkan diantara

    tanda hGQ&&&& dan /hGQ, beri keterangan di tag paragrap pQ&&&&&&&&&&&&&&&&&&&&&&&

    /pQ dan !opy paste alamat url dari detail slider tersebut dari website BATA&

    Pada tagline )tyle6le(t4"#pM diganti menjadi style6le(t4KJKpM& )ehingga

    tampilan gambar di atas berubah seperti gambar di bawah ini 4

    ho(ir 3 PPI') . BATA   38

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    42/43

    Petunjuk operasional untuk admin web satker

    ambar %1& asil Add )lider

    )elanjutnya klik menu )a2e atau )a2e E 9lose, )ehingga slider baru telah

    ditambahkan ke dalam da(tar slider& asilnya tampak seperti gambar di

    bawah ini 4

    ambar %K& -a(tar )lider

    ho(ir 3 PPI') . BATA   39

  • 8/16/2019 Petunjuk Operasional Peengisian Konten Website BATAN

    43/43

    Petunjuk operasional untuk admin web satker

    BAB I". PENUTUP

    -emikian Petunjuk Operasional pengisian konten website BATA ini, tentunya masih banyak kekurangan dan kelemahan, kerena terbatasnya penulis&

    Penulis banyak berharap para pemba!a yang budiman dapat memberikan

    kritik dan saran yang membangun kepada penulis demi sempurnanya

    Petunjuk Operasional ini dan penulisan Petunjuk Operasional dikesempatan.

    kesempatan berikutnya& )emoga Petunjuk Operasional ini berguna bagi

    penulis pada khususnya juga para pemba!a yang budiman pada umumnya&