Desain modus offline

Artikel ini membahas bagaimana cara termudah mengotak-atik tampilan halaman blog myopera, tanpa menunggu lolali, tanpa koneksi internet dan tanpa macet. Anda bisa langsung praktek menggunakan browser HP atau PC. Di dalam folder myopera yang sudah saya kemas dalam archive zip terdapat beberapa folder dan file. Berikut susunannya

3 folder subdirectory dalam directory root myopera
myopera\files\
tempat semua file gambar pribadi seperti header dsb. (terdapat 1 file gambar)
myopera\main\
tempat semua file gambar dari standar myopera community. (terdapat 16 file gambar)
myopera\pics\
tempat file gambar user seperti avatar dan pic. (terdapat 9 file gambar)

4 file dalam directory root myopera\
myopera\blog
file halaman blog
myopera\main.css
file css standar dari myopera community
myopera\user.css
file css milik sendiri (biasa di edit)
myopera\topbar2.css
file css dibagian atas halaman/di atas banner, standar black dari community

Bagaimana cara membuka file blog pada browser
1. Download myopera.zip, kemudian extract folder myopera dan paste di drive mana anda menyukainya. Contoh drive E:\ pada HP.
2. Buka file blog, dengan memilih options => Open by System (HP) atau dengan klik kanan pilih Open With (PC).
Alternatif lain dengan memasukkan alamat file secara manual pada browser file://localhost/E:/myopera/blog.
Ketika browser meminta koneksi internet untuk membaca alamat file gambar yang masih tersambung di database server, pilih “cancel”.
Setelah halaman blog terbuka, edit lah file user.css menggunakan text editor untuk mulai pendesainan halaman blog, setelah selesai pilih save. Lalu kembali ke browser klik reload untuk melihat perubahan. Sekali lagi pilih cancel jika browser meminta koneksi internet. Ulangi langkah-langkah diatas sampe pengeditan selesai.

PENTING! Apabila browser tidak mengenali file blog sebagai file html, rename lah dan simpan sebagai file blog berekstensi .html, seperti ini blog.html

Bagaimana cara mendapatkan 3 file css
Download file halaman blog, kemudian buka menggunakan text editor dan cari 3 alamat css dibagian heading

<link rel="stylesheet" href="http://static.myopera.com/community/css/users/124/main.css" type="text/css" media="screen,projection,tv,print">
<link rel="stylesheet" href="http://files.myopera.com/shofnet/user.css" type="text/css" media="screen,projection,tv,print" charset="utf-8">
<link rel="stylesheet" href="http://static.myopera.com/community/css/themes/topbar2.css" type="text/css" media="screen,projection,tv,print">

Jika alamat file user.css tidak ditemukan penggantinya adalah main-4112624561.css

<link rel="stylesheet" href="http://files.myopera.com/shofnet/usercss/main-4112624561.css" type="text/css" media="screen,projection,tv,print" charset="utf-8">

Bagaimana cara menyesuaikan alamat file css dalam file blog
Buka file blog dengan text editor lalu edit alamat css seperti di bawah ini

<link rel="stylesheet" href="main.css" type="text/css" media="screen,projection,tv,print">
<link rel="stylesheet" href="user.css" type="text/css" media="screen,projection,tv,print" charset="utf-8">
<link rel="stylesheet" href="topbar2.css" type="text/css" media="screen,projection,tv,print">

Bagaimana cara meyesuaikan alamat gambar dalam file css
Buka 3 file css mengunakan text editor kemudian satu persatu sesuaikan alamat file gambarnya seperti di bawah ini

#latestposts li { background:transparent url(main/icons2.gif) 0 -216px no-repeat; }
#top { background:#000 url(files/header.jpg) no-repeat; }
#myo { background:#222 url(main/sprites.png); color:#fff; height:50px; }

Ketika anda sudah selesai mengotak-atik css dan ingin memasang di blog my.opera.com anda harus mengganti alamat gambar sesuai alamat dimana anda mengupload gambar tersebut.

del.icio.us Digg Facebook MySpace reddit StumbleUpon Twitter

28 Responses to “Desain modus offline”

  1. sesuai ktp says:

    sip… Ku coba niq… ;)

  2. Shofnet says:

    Silahkan bro, moga sukses ya ;)

  3. myagu says:

    guy moga sukses

  4. Thejavoe says:

    halah mumet aku bro

  5. Shofnet says:

    Trik ini sudah coba dan sukses oleh om ryudin menggunakan symbian 3rd dan opera mobile v10. Dan aku juga hanya mengandalkan trik ini untuk desain myopera juga shofnet. Di coba dulu bro. Sekali download bisa digunakan seumur dunia :D

  6. jazzy says:

    wah angel :faint:
    v dunlud ah :D
    sukron wal kasiron sob :yes:

  7. Shofnet says:

    hehehe moga sukses ya bro :yes:

  8. Imam syaif says:

    Nice tips ..tp Linkna kok g bs d download bro..
    Lam kenal lumnya..

  9. Shofnet says:

    Maaf sebelumnya mas imam, koment sampean di block spam oleh akismet dan baru pagi ini saya melihatnya. Terimakasih juga karena sudah mengingatkan kalo file myopera.zip tidak bisa didownload.. setelah saya cek ternyata file itu sudah tidak ada di directorynya, mungkin ikut terhapus saat saya bersih-bersih kemarin :) itu saya upload lagi, kebetulan saya masih punya backupnya. Makasih atas kunjungannya :happy:

  10. Imam syaif says:

    Oh gitu y , kirain jaringanku yg lgi eror,cz q googling g bs lgi,n skrng dah d dunlut n mo cb bljr… Makasih y ? Sukses wat nt..

  11. Imam syaif says:

    hmmm…tak semudah kukira…

  12. shofnet says:

    :D Gimana bro? mudah kuk!

  13. Thejavoe says:

    mantaaaaaaab banget bro

  14. shofnet says:

    Sukses buat bro Edy :up:

  15. Imam syaif says:

    Malem bro niqn,ane dateng lgi…n ada yg mo ane tanyain ,cz jujur aja msih rd bingung.,.
    Saya dah buka blog.html dan kbtulan browser hp mendukung,dan krn sy simpannya d mem card,mk almt file tsb adlah : file:///card/blog.html , krn baik main,topbar2 dan user.cssna lom d edit jdi tmpilannya masih dgn background putih. (Ane cm ngndlin hp,so g bs nmplin scrinsutna) ,nah yg mau di tanyain :
    Untuk menyesuaikan file .css kdlm .html ,ex : user.css , spt kt bro yg d edit adalah :

    ,dan sy edit jdinya :
    tuh salah pa bener bro ,knp kok g ada perubahan? Ttp aja background masih putih , ane cb gnti user.css ma yg dari mz Hadi (kbtulan ane punya yg classic),tetep g ngaruh,pdhl browser dah d set gmbar,animasi aktf mua.
    Mohon pencerahannya…sory bahasanya belepotan cz,sekali lgi cuma ngndelin hp…makasih

  16. shofnet says:

    Bro Imam, maaf baru sempat balas.
    Dari alamat file blog.html yang sampean tulisan itu kayaknya masih ada kesalahan.. karena pada alamat itu saya tidak melihat folder myopera. Seharusnya begini /card/myopera/blog.html
    Ketika browser membuka file blog.html browser tidak bisa menemukan file css dan file gambar lainnya pada file blog.html, jadinya warna putih..
    kemungkinan bro Imam hanya meng-extract file dan folder yang berada dalam folder myopera. coba etract ulang lengkap dengan folder myopera. Saat bro Imam berhasil membuka file blog.html dan semua css juga gambar bisa bisa dibaca oleh browser akan kelihatan bannernya seperti ini: screenshot nokia: sc-desain-bebas-pulsa.png.
    Jika ada yg kurang jelas silahkan ditanyakan dengan senang hati saya coba bantu.. Bisa juga chat dengan saya di ym shofnet1@yahoo.com

  17. Imam syaif says:

    Tetep g bs bro, file:///card/myopera/blog.html , tetep aja masih putih, oh ya skalian ngulang prtnyaan d atas yg ane lpa naroh script ane cba ngedit d bag:

    sehingga jdi kaya gini .;

    tuh bener apa salah …? cz ttp g ngaruh ,jdi halaman yg kebuka ,background putih,tpi napa file yg dlam fold pics bsa nampil y ,kek Bralinknet,niqn avatar etc,perlu d ketahui ane lum ngedit file cssnya .
    (Scripna fungsi g y..?) Trims pencerahannya..

  18. Imam syaif says:

    Lho ttp g nampil..

  19. Imam syaif says:

    ane edit jdinya ky gini : tuh bener pa salah ?

  20. Imam syaif says:

    Duh kok ttp g nampil y,jd g enak…? Newbie bgt y ane

  21. shofnet says:

    Cara menyisipkan file main.css seperti dibawah ini:

    <link rel="stylesheet" href="main.css" type="text/css" media="screen,projection,tv,print">

    menyisipkan file user.css seperti dibawah ini:

    <link rel="stylesheet" href="user.css" type="text/css" media="screen,projection,tv,print" charset="utf-8">

    Menyisipkan file topbar2.css seperti dibawah ini:

    <link rel="stylesheet" href="topbar2.css" type="text/css" media="screen,projection,tv,print">

    Coba disamakan nama ketiga file css diatas, bro..
    Gambar di recent visitors dapat dibaca karena url gambar ada pada file blog.html tidak pada file css.

    Untuk menampilkan script html agar tidak hilang coba gunakan <pre> atau <code>

    Contoh menggunakan <pre>

    <pre>&lt;link rel="stylesheet" href="user.css"&gt;</pre>

    Akan tampil seperti ini:

    <link rel="stylesheet" href="user.css">

    &lt; digunakan sebagai pengganti “<” dan &gt; digunakan sebagai pengganti “>“.

  22. Imam syaif says:

    Pagi bro niqn..,perasaan d file htmlnya dah ada kek gtu,brrti g sah d edit lgi y,nmbah ilmu lgi neh , yg ane tau cm pake textarea,makasih y,krn penasaran ane upload file blog.html , ma 3 file cssna ke myo dan tmpilannya kya gini ,tuh recent visitornya g ada gmbrnyaKatakanlah sy berhasil ngedit sana sini,trus kalo mo d apply k myo yg d upload yg mn aja?
    Makasih…

  23. shofnet says:

    Siang bro Imam, ::karena balas nya dah siang :D ::

    Gambar visitors tidak muncul karena difile blog.html yang sudah saya edit tidak ada link ke http:// manapun melain kan ke directory hp sampean.

    Yang perlu di upload atau di copy adalah yang sudah bro Imam edit tadi (user.css).

    Tambahan:
    Bro Imam editnya jangan di file main.css tapi di file user.css. Kalo mau ambil potongan kode dari file main.css atau dari css manapun harus dicopy ke user.css maksudnya agar bisa di ketahui apakah kode yang bro Imam copy bisa bekerja atau tidak. Setelah di test dengan mode offline kode css bisa bekerja baru di copy atau di upload ke myopera.

  24. Imam syaif says:

    Oke bro trims bgt atas sgl pencerahannya dah rda faham skrang,setidaknya ada satu yg telah sy praktekan berdasarkan artikel yg bro post yaitu design modus offline yg sblumnya g kepikiran,ex :css blog sy d myo sblumnya menggunakan kode @import file css master Hadi , kini kode cssna dah sy copy ke direktory hp menggunakan aplikasi java yg kemudian sy upload ke dir blog,alhasil , kode css yg ada dlam kolom edit css hanya berupa kode @import dri dirktri file sy sndri,tinggal nanti kalo ada wktu ngedit css dan tinggal d upload kmbli k blog,Thx ms Hadi atas cssna, makasih jg bro niqn wat design modus offlinenya …

  25. shofnet says:

    Sama-sama bpo Imam. Terimakasih juga karena sudah sering mampir di disini :)

  26. Ryu says:

    We sdh coba. Awalnya mmg agak sulit tapi atas bimbingan niqn ternyata ga susah2 amat. Ma kasih bro.

  27. moe as says:

    untuk hasil dari infut comentar atau comentar baru, code cssnya yg mana yah ?

  28. ipoel says:

    gan tutorial pemasanganya gimana,,?
    Ok thankz

Leave a Reply

Smilies