Cara Membuat Blog

1. Sobat diwajibkan memiliki sebuah alamat email, saran saya pakailah layanan gmail dari google. untuk membuat email dari layanan google tersebut anda bisa langsung menuju ke Gmail, untuk lebih jelasnya perhatikan gambar dibawah ini.

Klik gambar untuk memperbesar

2. Langkah selanjutnya isi data data diform yang disediakan, jangan lupa paling bawah klik Saya menyetujui persyaratan layanan dan kebijakan privacy google, setelah itu klik Langkah berikutnya lihat gambar dibawah.

Klik gambar untuk memperbesar

3. Selanjutnya, klik kirim kode Verifikasi. lihat lagi gambar dibawah ya :)

Klik gambar untuk memperbesar

4. sekarang cek ponsel anda, jika belum ada kode verifikasi dari google bisa dicoba lagi beberapa menit kemudian, gambar dibawah menggunakan modem, jadi kode verifikasinya langsung bisa di lihat dilayar laptop saya.

Klik gambar untuk memperbesar

5. Masukin deh kode verifikasinya seperti dibawah ini

Klik gambar untuk memperbesar

6. Selamat datang di akun Gmail anda, lalu klik Lanjutkan ke Gmail ya....

Klik gambar untuk memperbesar

Klik gambar untuk memperbesar

7. Sampai disini proses pembuatan akun Gmail sudah berhasil, sekarang ketahap selanjutnya ya...proses pembuatan blog. yaudah tanpa basa basi langsung buka tab baru di browser sobat ya, atau bisa langsung menekan (ctrl + T) buka blogger.com ya.... tinggal isi email dan sandi yang sama seperti di akun Gmail tadi. lalu klik Masuk

Klik gambar untuk memperbesar

8. selanjutnya pilih Opsi profil blogger sobat, jika hanya membuat blogger sebaiknya klik yg sebelah kanan. lalu klik lanjutkan ke blogger.

Klik gambar untuk memperbesar

Klik gambar untuk memperbesar

9. Sampai tahap ini sobat sudah sukses membuat akun blog, tahap selanjutnya silahkan lihat gambar dibawah ini untuk jelasnya. perhatikan baik baik tahap 1, 2, dan 3. sebelum ada tulisan This blog address is available berarti nama blog yang ingin sobat buat sudah ada yang memiliki, silahkan ganti dengan nama lain, atau untuk mudahnya bisa tambahkan angka dibelakang alamat blognya, lihat contoh yang saya lingkari pada nomer 2 dibawah. setelah itu klik create blog.

Klik gambar untuk memperbesar

10. Nah sekarang blog sobat sudah jadi, lihat keterangan dibawah ini, angka 1 adalah Judul blog yang sobat ciptakan pada tahap sebelumnya, lalu angka 2 adalah start posting. alias untuk memulai membuat artikel.

Klik gambar untuk memperbesar

11. Setelah sobat klik start posting, sekarang saatnya sobat membuat sebuah artikel... perhatikan baik baik langkah langkahnya dalam membuat sebuah artikel. tentunya dimulai dari angka 1 ya...hehehe... untuk jelasnya lihat gambar dibawah ini.

Langkah-langkah cara membuat artikel di blog :

Angka 1 : merupakan judul artikel yang nanti akan diterbitkan, boleh apa saja. silahkan berekspresi melalui artikel sobat, narsis juga ga ada yang larang koq :)

Angka 2 : merupakan isi dari artikel, silahkan mengarang bebas, mau curhat, kasih tips, trik, info, atau apa saja yang sobat ketahui, klo artikelnya bermanfaat pasti banyak yang suka dengan blog sobat deh.

Angka 3 : merupakan Label, silahkan isi apa saja. contohnya seperti ini, misalnya judul artikel yang sobat buat adalah Tips melangsingkan tubuh, nah label tersebut bisa di isi dengan Tips sehat, atau yang lainnya. kan ga nyambung seandainya label tsb di isi dengan Ilmu komputer. :p

Angka 4 : Nah tahap ini adalah melihat dulu artikel sebelum diterbitkan, jika ada yang salah bisa dibenarkan dulu sebelum artikel diterbitkan.

Angka 5 : Jika pada tahap 4 sobat sudah yakin, sekarang tinggal klik Publish (Terbitkan)

Klik gambar untuk memperbesar

12. Gambar dibawah ini merupakan contoh artikel yang sudah berhasil diterbitkan. dan untuk melihat artikelnya silahkan klik tombol view. selesai.... nah mudah bukan ?

Klik gambar untuk memperbesar

Klik gambar untuk memperbesar

Membuat Tampilan Blog Menjadi Under Construction

Tampilan Under Construction digunakan ketika blog kita sedang dalam perbaikan. Misalnya ada beberapa perbaikan yang ingin kita lakukan, Contohnya pengubahan template, penambahan skript atau mengubah skript. Tampilan ini akan berguna agar pengunjung pada saat akses blog kita, hanya akan muncul tampilan gambar yang menunjukkan blog sedang dalam perbaikkan. Sehingga selama perbaikkan sedang berlangsung, pengunjung tidak akan bisa melihat blog kita.

Jika anda ingin mengubah tampilan pada saat perbaikkan, ikuit langkah-langkah berikut:
Pertama masuklah kedalam halaman blogger anda,
Pilih Template - Edit HTML - beri tanda centang expand template widget
carilah kode 
]]></b:skin> 

gunakan ctrl + f  untuk mempercepat proses pencarian,

setelah itu copy code dibawah ini tepat diatas  ]]></b:skin> 

html {
height: 100%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cxcH4-3eUfLqgZwZDEf64sKfConaLAHqCQPZXnTTPzMGAqD5vsjKVHj39rF8xrt3Jb-HwChUIq1uLzsggi132RUy8I3kGIU-rY2qVrj5OGRXDIlbtBmaVNpwEoy5KXGqo8Gjs_2Ff2r3/s1600/under_construction.jpg) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}

Lalu klik simpan.
jika anda buka blog anda, maka akan tampil gambar seperti dibawah ini

Untuk mengembalikkannya anda cukup menghapus skript yang tadi, maka blog anda akan tampil seperti biasa lagi.

Membuat Email Keren di Google Apps

Selamat hari Natal dan Selamat Malam kawan kawan onhacker. Tepat di hari Natal ini saya akan berbagi lagi mengenai cara membuat email keren di Google Apps...Pasti kawan kawan bosan dan sudah merasa tdk asing lagi dengan email dari yahoo, windowslive, Gmail dll. Melalui Google Apps kita bisa saja membuat email dengan domain semaunya, seperti yang sudah saya buat yaitu : 

Irwan_Sakti@Baso.Onhacker.Com

Santi@Onenk.Cintaku.Net 

dan melalui tutorial ini saya membuat email khusus untuk IKAML yakni admin@IKAML.ksatria.us.

Nah pasti mau juga kan??. oke bagi yang ingin buat email keren silahkan ikuti langkah yang dilengkapi dengan gambar di bawah ini :

Pastikan anda telah memiliki domain yang didapat dari tempat hosting, baik berbayar maupun gratis. Jika belum punya silahkan registrasi dulu sebelum melanjutkan langkah selanjutnya. Bagi yang mau gratisan silahkan daftar salah satu tempat hosting dibawah ini

www.extrahosting.org

www.nazuka.net

www.ksatria.us

www.1freehosting.com

Gimana?? uda daftar??....Klo uda berarti boleh lanjut..

1. Masuk ke https://www.google.com/a/

2. Klik Mulai Uji Coba Gratis

Klik Gambar

3. Silahkan isi data yang diperlukan

4. Pilih Your Own Domain dan masukkan domain anda yang telah didaftar di tempat hosting seperti dibawah

 5. Selanjutnya membuat akun Google Apps atau email keren anda. Pada tutorial ini email yang akan dibuat adalah Admin@Ikaml.ksatria.us. Liat gambar di bawah ini

Klik Gambar

6. Klik Go To Control Panel

7. Silahkan Sign In kembali sesuai dengan username dan password yang telah dibuat tadi pada langkah 5

8. Masukkan no HP anda untuk menverifikasi kepemilikan akun anda dan pilih text massage (SMS).

9. Masukkan kode verifikasi dan klik continue

10. Nah Anda telah berhasil membuat akun Google Apps dan telah masuk pada control panel. Langkah selanjutnya adalah memverifikasi kepemilikan domain anda yang telah dibuat.Klik Confirm that you own your domain

11. Klik Alternate Methods, Pilih HTML file Upload, dan download file HTML yang akan  di upload nanti pada tempat hosting dengan mengklik this HTML verication file.

12. Silahkan upload file HTML yang sudah didownload tadi pada tempat hosting anda dengan cara masuk ke file manager > Public HTML > Pilih Upload

13. Setelah Terupload, silahkan konfirmasi dengan klik link yang berada pada ( gambar 11 langkah nomor 3).

14. Klik VERIFY dan jika berhasil akan tampak seperti gambar di bawah ini.Klik Continue

15. Pada Gmail, klik Setting

16. Klik Change URL, Liad gambar

17. Pilih yang ke 2 atau custom dan ketikkan mail. Klik Continue

18. Perintah berikutnya adalah menambah CNAME pada tempat hosting anda.

19. Silahkan kembali ke tempat hosting anda.Masuk kontrol panel kemudian pilih DNS Editor. Pada Add a New Record. Ketikan "mail" pada source, pilih CNAME, dan ketikkan "ghs.googlehosted.com." sehingga tampak seperti gambar di bawah ini. Klik Add a New Record

20. Silahkan kembali ke Google Apps dan klik I've Completed These Steps

Nah Sebenarnya email keren sudah jadi dengan nama Admin@Ikaml.ksatria.us, namun hanya bisa mengirim pesan tapi belum bisa menerima pesan, maka dari itu kita perlu settingan lanjutan pada tempat hosting.heheheh..udah lelahh???? jangan lelah dulu karena sedikit langkah lagi email akan sempurna.oke lanjut lagi.

21. Kembali ke tempat hosting anda. Masuk kontrol panel kemudian pilih DNS Editor. kali ini kita akan menambah MX editor agar mengarah ke Google Apps.

22. Pada Add a New Record, ketikkan domain anda yang sudah dibuat seperti "ikaml.ksatria.us." pada source. Pilih MX kemudian ketikkan  salah satu alamat MX editor milik google dibawah ini.

23. Kali ini saya menggunakan ASPMX.L.GOOGLE.COM. maka ketikkan "ASPMX.L.GOOGLE.COM." pada target. Pastikan Sesuai dengan gambar dibawah ini.

Selamat Email Anda telah jadi. Anda dapat mengakses email melalui Gmail..klik ajja https://mail.google.com/ ........... Nah untuk memastikan email bekerja dengan baik silahkan menunggu paling lambat 24 jam sob.

Gimana??? mudah kan??? semoga coretanku ini mudah dipahami dan jika masih ada yang bingung silahkan koment ajja atau langsung hubungi Onhacker di sini.. Insya Allah akan dibalas secepat mungkin.

Selamat mencoba dan semoga bermanfaat

Cara membuat sebuah situs Web Hosting di YouHosting

Bismillahirahmanirahim, mudah-mudahan artikel pertama yang saya buat ini bermanfaat buat kalian semua yang membacanya, AMIN.
Pada kesempatan yang berbahagia ini saya akan posting tentang Cara membuat sebuah situs Web Hosting YouHosting.
Pasti anda pernah mengenal bukan sebuah situs web hosting seperti idHostinger, Nazuka dll. Yah situs web hosting itu sudah banyak dikenal oleh pengguna internet yang menjuru di dunia wap, web dan blog tak asing lagi untuk mengenalnya.
Kali ini kita akan menggunakan reseller hosting yang telah disediakan oleh YouHosting dengan gratis.
Namun bagaimana cara membuatnya? Ok berikut saya akan tulis tutorialnya langkah demi langkah.

Langkah 1
Sediakan domain terlebih dahulu anda bisa mendaftar di dot.tk untuk yang gratisan dan jika ingin menggunakan domain premium juga bisa

SETTING DNS

NS1.MAIN-HOSTING.COM
NS2.MAIN-HOSTING.COM
NS3.MAIN-HOSTING.COM
NS4.MAIN-HOSTING.COM

Dalam membuat Web Hosting lebih baik anda menggunakan domain premium agar terlihat lebih prefesional dan jika hanya sekedar buat pembelajar menggunakan domain gratisan pun tidak jadi masalah.

Langkah 2
Setelah domain yang anda buat jadi, lalu kini anda tinggal mendaftar terlebih dahulu sebelum membuat sebuah situs web hosting.
KLIK DISINI mendaftar, isi semua kolom yang ada seperti domain, password, email dll.

Langkah 3
Pendaftaran berhasil lalu Cek Email anda, akan ada pesan dari YouHosting, buka email tersebut lalu klik link yang telah diberikan oleh YouHosting

Langkah 4
Install dulu halaman utama situsmu, yaitu dengan masuk ke menu Look and Feel – Install Main Website

Atau jika tidak berhasil, buat saja situs utamanya dengan PHP lalu install/upload-lah melalui File Manager di Control Panel hostingmu. Bagi yang tidak menguasainya ada cara mudah, yaitu mendesain situs utamanya dengan Wordpress. Maksudnya yaitu kita buat situs utama penyedia hosting gratis punya kita tersebut dengan menginstall-nya dengan CMS wordpress (install melalui Control Panel hosting). 

Caranya; 

Masih dari halaman setting atau pengaturan Youhosting, lalu kamu pilihlah menu Configuration, lalu pilih Master Domains, setelah itu akan tampil Domain utama situs kamu pada kolom sebelah kanan, selanjutnya klik saja pada pilihan Manage. (Lihat gambar dibawah ini sebagai panduan).

Klik Manage untuk masuk ke cpanel hosting

Setelah itu nanti kamu akan menuju halaman Control Panel hosting.

Kemudian, dari Cpanel hosting inilah kamu mulai buat situs/website utama untuk situs penyedia hosting gratis punya kamu. Agar proses pembuatannya cepat saya sarankan gunakan saja fasilitas AutoInstaller yang sudah disediakan, lalu nanti pilihlah Wordpress untuk platform situs kamu saat install nanti.

Setelah proses install selesai, lalu coba buka alamat situsnya, apakah sudah jadi?

Setelah situs utamanya jadi/berhasil dibuat, lalu kembali lagi ke halaman pengaturan pada Youhosting untuk melanjutkan ke proses selanjutnya.

Langkah 5Selanjutnya yaitu membuat form untuk Pendaftaran calon User. 

Jadi bagi orang/user yang ingin membuat akun di situs hostingmu nanti mereka itu harus melakukan pendaftaran terlebih dahulu, untuk itu kita harus menyiapkan form pendaftarannya.

Caranya : 

Klik saja pada menu Look and Feel – Client Sign-Up Form, lalu pada halaman sebelah kanan pilihlah pertanyaan apa saja yang akan kamu tampilkan dalam Form pendaftaran hosting di situsmu.

Membuat form untuk pendaftaran user

3. Setelah merasa cukup, lalu Copy script yang diberikan, selanjutnya Paste-kan script tersebut pada template halaman situs utama yang akan kamu gunakan sebagai situs penyedia hosting. 

Halaman posting Wordpress

Langkah 5
Sedangkan form Log In dan form “Reset Password” bisa kamu buat dengan cara Copy Script dari halaman pengaturan Client Sign Up Form diatas lalu Paste pada bagian Widget (Text) situs utama kamu (untuk yang menggunakan wordpress seperti contoh saya tadi).

Langkah 6
Setelah itu Save/Simpan, dan lalu lihat hasilnya.

Jika kamu mengikuti panduan saya ini dengan cermat saya yakin sampai langkah ke-2 poin ke-5 diatas maka berarti kamu sudah memiliki sebuah situs penyedia hosting gratis milik kamu sendiri (tentunya merupakan reseller hosting gratis dari Youhosting.Com).

Selain pengaturan utama seperti diatas, kamu bisa juga mempercantik situs penyedia hosting gratismu dengan tampilan dan logo buatan kamu sendiri agar terkesan lebih professional dan tidak begitu terlihat layaknya reseller hosting gratisan.

Saya contohkan, pada situs penyedia hosting gratis http://worldfiles.tk/ disana sudah di ubah tampilan halaman Log In Control Panel dan halaman Log In webmail dengan tampilan dan logo buatan sendiri.

Jika kamu ingin merubah tampilan situsmu silahkan coba saja edit melalui menu Look and Feel – Logo Header Footer

Modifikasi tampilan situs dan logo

Demikian panduan dan setting utama yang kamu butuhkan untuk membuat sebuah situs penyedia hosting gratis dengan memanfaatkan layanan reseller hosting gratis dari <a href="http://youhosting.com">YouHosting</a>

Cara menghubungkan blog dengan halaman facebook

Anda bingung bagaimana menghubungkan halaman facebook anda ke blog atau website.

sebenarnya ada banyak cara untuk menghubungkan halaman facebook dengan blog atau website anda.
1. bisa melalui twitter
2.bisa melalui tweetfeed.
dan banyak lagi..semua itu telah saya coba dan hasilnya menurut saya kurang memuaskan.
apa yang kurang memuaskan.?
hasil postingan kita jelek di halaman facebook.

Namun bagi anda yang sedang mencari-cari cara terbaik menghubungkan halaman facebook, group facebook ke blog atau website anda.
di sini saya berikan cara-caranya.

• Silahkan menuju app facebook berikut ini FeedFacebook
• Kemudian mereka akan meminta ijin untuk terhubung dengan facebook kita, maka kita klik Allow

• Setelah terhubung, aplikasi ini akan menampilkan akun facebook anda dan juga fan page anda di sebelah kiri. Tetapi kalau belum memiliki fan page tentu tidak akan muncul disini dan anda perlu untuk mengcreate fan page terlebih dahulu.

• Dan apabila anda sudah memiliki fan page, pastikan posisi yang aktif adalah fan page tersebut (ditandai dengan blok biru). Bila belum kita langsung klik saja fan page kita.
• Selanjutnya kita klik Add feed untuk  menambahkan feed yang ingin ditampilkan di facebook fan page. Lalu kita tinggal mensetting URL feed, Nama websitenya dan URL dari website itu sendiri. Dan jangan lupa untuk klik Save.

• Kita bisa juga mensetting pada tab schedule untuk mensetting jangka waktu proses penarikan RSS dan jumlah yang ditampilkan dalam satu kali tarikan.
• Selesai

jika anda memiliki banyak website dan blog , pada satu halaman facebook kita bisa menghubungkan ke banyak website dan blog.
begitu pula sebaliknya jika anda memiliki banyak group facebook dan halaman facebook , anda bisa mnghubungkan 1 blog ke banyak halaman dan group facebook anda.

sekian dulu, semoga bermanfaat dan selamat mencoba. 

Cara Membuat Mp3 Player Di Blog Dengan Format XML

Pernah ga... sobat melihat mp3 player disalah satu blog dan isi dari lagunya bisa banyak dalam satu media player, tampilan dari media playernya juga bisa kita pilih sesuka hati dan hebatnya dari pemutar musik yang satu ini, lagu-lagu yang akan kita masukkan kedalam media player ini bisa kita pilih sesuka hati loh... misalnya anda mempunyai koleksi lagu-lagu yang memang sangat langka dan mungkin tidak dipunyai oleh orang lain namun anda ingin mendengarkan lagu itu melalui blog anda sendiri atau juga anda ingin berbagi tentang lagu anda tersebut kepada teman/orang lain melalui blog anda, maka player inilah yang sangat cocok untuk hal tersebut.

Nah...kalau memang anda tertarik dan ingin mencobanya di blog anda sendiri silahkan anda ikuti keterangannya dibawah ini, gampang ko...yang penting "konsentrasi" he...he...he....

Dalam pembuatannya anda hanya memerlukan 6 bahan yaitu:

1. Media Playernya ( pemutar musiknya ).

2. Media Playlistnya ( daftar lagunya ).

3. Tempat hostingan untuk menyimpan pemutar musik dan playlistnya, anda boleh mencobanya di  www.ripway.com atau hostingan lainnya namun biasanya anda harus mendaftar terlebih dulu disitus tersebut.

4. Tempat Upload Mp3 anda bisa mencobanya di www.fileden.com dan anda juga harus mendaftar terlebih dahulu.

5. Notepad

6. Segelas kopi hangat, dan sebungkus rokok ( untuk apa kopi dan rokok ini...? ) ya untuk menyegarkan pikiran kita dalam mengerjakan player ini he...he..he...

Ok langsung aja  kita berangkat menuju ke cara pembuatannya...perhatikan baik-baik ya...

1. Upload Lagunya.

Upload lagu kesukaan anda di Fileden.com atau anda juga boleh mencobanya di media penyimpanan online lainnya, namun terlebih dahulu kompress file mp3 anda supaya ketika di putar lagunya tidak terputus-putus, converternya ada banyak di internet anda bisa mencarinya sendiri di Mbah Google dan setelah anda upload file mp3 tersebut silahkan Catat Link mp3nya.

2. Membuat Playernya.

Carilah template/model dari media playernya, ada banyak di internet namun anda boleh mencobanya di myspaceprodesigns pilih sesuka hati player mana yang cocok untuk anda.

Lalu pertanyaan kita adalah bagaimanakah cara mengambil playernya...? 

Silahkan anda buka alamat ini  http://www.myspaceprodesigns.com/flashtoy/mp3.php  dan pilih playernya, disini saya mengambil contoh player yang akan saya gunakan adalah model 3 flash mp3 player by RedDragon, dan setelah anda memilih jenis model playernya klik " generate mp3 playlist " di dalam adrees bar akan tertulis.

http://www.myspaceprodesigns.com/generator/playlist/xml.php?purl=http://www.myspaceprodesigns.com/RedDragon/26.swf

Buang tulisan berikut ini.

http://www.myspaceprodesigns.com/generator/playlist/xml.php?purl=

Maka tinggallah tulisan.

http://www.myspaceprodesigns.com/RedDragon/26.swf

Dan kemudian tekan Enter.

Disana akan terlihat tampilan penuh dari Player tersebut, simpanlah halaman tersebut kedalam folder komputer anda dengan cara klik " Save Page As " simpan ke dalam format SWF, nama filenya terserah anda contoh mudah anda bisa memberi nama " Player.swf " (tanpa tanda petik)  setelah itu silahkan upload  File tersebut kedalam hostingan disana anda akan mendapatkan Linknya lalu Catat Link Player tersebut.

3. Membuat Playlistnya.

Salin file di bawah ini kedalam Notepad.

<?xml version="1.0" encoding="UTF-8"?>
<player showDisplay="yes" showPlaylist="yes" autoStart="random">
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
<song path="LINK MP3 ANDA" title="JUDUL LAGUNYA" />
</player>

Dalam keterangan diatas saya hanya membuat 5 daftar jumlah lagu yang akan diputar, namun anda boleh mengurangi ataupun menambahkannya lagi karena itu bukan urusan saya...he...he...he... dan ganti tulisan "Link Mp3 Anda" yang berwarna BIRU dengan Link mp3 anda sendiri begitu juga dengan tulisan "Judul Lagunya" yang berwarna MERAH, silahkan anda tulis apa Judul Lagunya dan simpan atau " Save As "  file tersebut kedalam Format XML.

Contoh disini saya memberi nama filenya  "Daftar lagu.Xml" (tanpa tanda petik) kemudian upload file yang berformat xml tersebut kedalam  hostingan disana anda akan mendapatkan Linknya lalu Catat Link Playist tersebut.

4. Nah kini anda sudah mempunyai 2 Link yaitu Link Player yang berformat SWF dan Link Playlist yang berformat xml, sekarang anda hanya tinggal memasukkan kedua Link tersebut ke dalam script yang ada dibawah ini.

<div align="center"><embed allowScriptAccess="never" src="http://LINK PLAYER ANDA" menu="false" quality="high" width="265px" height="270px" name="index" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="playList=http://LINK PLAYLIST ANDA" wmode="transparent"/></embed><br /><a href="http://davotmarbun.blogspot.com">Catatan Pena Musik Player</a></div>

5. Sekarang silahkan anda buka blog milik anda dan copy/pastekan script di atas kedalam blog anda...mudah bukan...? apabila anda sudah berhasil membuatnya ataupun bila anda masih bingung silahkan tulis komentarnya.

Cape juga gua ngetik tulisannya nih...kebetulan kopi gua juga udah habis...he...he...he....selamat mencoba ya...sukses buat anda.

Cara Design Template Blog Untuk Mobile

Hai sahabat Hack4rt, sekian lama saya Noval Bintang tidak mengepost dengan tangan saya sendiri (tidak copas) di blog Hack4rt.us yang baru beberapa minggu ini. Tutorial malam ini yaitu bagaimana cara untuk memodifikasi template untuk sesuai dengan mobile. Nah, tutorial ini berawal dari source code template Super Faster V.3 yang dibuat oleh Mas Sugeng yang sudah tersesuai dengan versi mobile. Oke, langsung aja ke tutorialnya. 

Kita main di EDIT HTML yaaa di Template. Ingat Itu! hehe

Langkah pertama yang agan lakukan adalah mengganti tag <body> dengan

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Langkah Kedua yaitu copy code berikut tepat di bawah kode </b:skin>

<b:if cond='data:blog.isMobile'>
<style type='text/css'>

ISI TEXT CSS DESIGN ANDA DISINI


/* MEDIA QUERY */
@media (min-device-width: 100px) and (max-device-width: 2600px) {.mobile #admob{display:block;}}@media (min-device-width:100px) and (max-device-width:129px){.mobile #admob{width:114px;}.mobile img{max-width:110px !important;
}}@media (min-device-width:130px) and (max-device-width:161px){
.mobile #admob {width:144px;}.mobile img{max-width:140px !important;}}@media (min-device-width: 162px) and (max-device-width: 177px) {.mobile #admob {width:164px;}.mobile img{max-width:140px !important;}}@media (min-device-width:178px) and (max-device-width:209px) {
.mobile #admob {width:194px;}.mobile img{max-width:170px !important;}}@media (min-device-width:210px) and (max-device-width:221px) {.mobile #admob{width:206px;}.mobile img{max-width:190px !important;}}@media (min-device-width:222px) and (max-device-width:241px) {.mobile #admob{width:220px;}.mobile img{ max-width:210px !important;}}@media (min-device-width:242px) and (max-device-width:321px) {.mobile #admob{width:298px;}.mobile img{max-width:280px !important;}}@media (min-device-width:322px) and (max-device-width:361px) {.mobile img{max-width:300px !important;}}@media (min-device-width:362px) and (max-device-width:401px) {.mobile img{max-width:300px !important;}}@media (min-device-width:402px) and (max-device-width:481px) {.mobile img{max-width:300px !important;}}@media (min-device-width:482px) and (max-device-width:2500px) {
.mobile img{max-width:300px !important;}}

</style>
</b:if>

Nah, setelah itu agan bisa edit text "ISI TEXT CSS ANDA DISINI" dengan code CSS yang anda inginkan. sedikit CSS yang akan saya berikan untuk mobile CSS yaitu

1. {display:none}

Untuk menghiddenkan (menghilangkan)

Contoh:
(Menghilangkan #header-wrapper, #sidebar-wrapper)
.mobile #header-wrapper, .mobile #sidebar-wrapper {display:none}

2. {max-width:600px}

Membuat lebar maximum 600px sesuai dengan mobile

Contoh:

(Membuat post hentry lebar maximum 600px)

.mobile .post {max-width:600px}

Saya juga pernah membuat mobile versinya ProGrey Hack4rt Template dengan kode CSS mobile:

<b:if cond='data:blog.isMobile'>
<style type='text/css'>

/* CSS CUSTOM MOBILE TEMPLATE */
.mobile #kepala-kiri, .mobile #stSegmentFrame, .mobile #stwrapper, .profile-link, .mobile #aside, .mobile #menu-wrap, .footer-inner, .mobile #top-ad, .mobile #footer-inner, .socialshare, .mobile #comments{
 display:none !important;
}
.mobile #header-wrapper{
 margin:0 auto !important;
 width:auto !important;
 border:medium none !important;
 max-width:600px !important;
}
.mobile #content{
 margin:0 auto !important;
 width:auto !important;
 border:medium none !important;
 max-width:600px !important;
 font-size:13px !important;
}
.mobile .navcontainer{
 margin:0 auto !important;
 width:auto !important;
 border:medium none !important;
 max-width:600px !important;
 font-size:13px !important;
}
.mobile #container{
 margin:0 auto !important;
 width:auto !important;
 border:medium none !important;
 max-width:600px !important;
 font-size:13px !important;
}
.mobile .title-meta {
max-width:600px;
}
.mobile .post-footer {
max-width:600px;
}
..mobile #comment-post-message {
max-width:600px;
}
.mobile #comments{
 margin:0 auto !important;
 width:auto !important;
 border:medium none !important;
 max-width:600px !important;
 font-size:13px !important;
}
.mobile #header {
 height:auto !important;
 width:auto !important;
 max-width:100%;
}
.mobile #posting, .mobile #sidebar {
 margin:0 auto !important;
 float:none !important;
 width:auto !important;
 max-width:100% !important;
}
.mobile #kotak-posting {
 padding:6px !important;
 border-right:medium none !important;
}
.mobile #kotak-sidebar {
 margin:6px !important;
}
.mobile #kotak-sidebar-kanan, .mobile #kotak-sidebar-kiri, .mobile #kotak-sidebar-bawah {
 width:auto !important;
 float:none !important;
 margin:0 6px 6px 6px !important;
}
.mobile #kepala-kanan h1.title {
 text-align:left;
 padding:0px !important;
}
.mobile #kepala-kanan .description {
 text-align:left;
 padding:3px 0px 0px 6px !important;
}
.mobile .mobile-post-outer { margin:0; padding:0 0 8px; border-bottom: 1px solid #ccc;
}
.mobile .mobilethumb img {
 margin:0 !important;
}
.mobile .mobilethumb {
 -moz-box-shadow:1px 1px 5px rgba(1,1,1,.1);
 -webkit-box-shadow:1px 1px 5px rgba(1,1,1,.1);
 box-shadow:1px 1px 5px rgba(1,1,1,.1);
 float:left;
 margin:3px 6px 6px 0px;
 padding:3px;
 border:1px solid #ddd;
}
.mobile .post { margin:0; padding:0;
}
.mobile h3.post-title, .mobile h3.mobile-index-title { color:#00a3ff; font-size:15px; margin:10px 0 4px;
}
.mobile h3.post-title:hover, .mobile h3.mobile-index-title:hover {
 color:#ff0912;
}
.mobile .post-body { font-size:13px;
}
.mobile .post-footer { font-size:12px; margin:6px 0; padding:6px 0; border-top:1px dotted #ddd; border-bottom:1px solid #ddd;
}
.mobile #sidebar .item-thumbnail {
 display:none !important;
}
.profile-img { border:1px solid #ddd; padding:3px;
}
.profile-datablock {text-align:center;
}
.mobile blockquote {
 margin:0 0 13px 6px !important;
 padding:6px !important;
 border-left: 3px solid #ddd;
 text-align:left;
 font-style:italic;
 border-top:1px solid #ddd;
 border-right:1px solid #ddd;
 border-bottom:1px solid #ddd;
}
.mobile img {
 float:none !important;
 display:block;
 width:auto !important;
 max-width:50% !important;
 margin:0 auto 12px !important;
}
.mobile #mobilemenu {
 color:#fff;
 text-align:center;
 width:auto;
 max-width:100%; background:#00a3ff;
 border-top:1px solid #fff;
 border-bottom:2px solid #ff3300;
 overflow:hidden;
 margin:0;
 padding:6px;
 font-size:14px;
}
.mobile #mobilemenu span a {
 color:#333;
 padding:0;
 margin:0;
}
.mobile #mobilemenu span a:hover {
 color:#2b801c;
}
.mobile #blog-pager {
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 margin:6px 0 0;
 padding:3px 6px;
 border:1px solid #ddd;
}
.mobile #admob {
 display:none;
 max-width:100%;
 overflow:hidden;
}

/* MEDIA QUERY */
@media (min-device-width: 100px) and (max-device-width: 2600px) {.mobile #admob{display:block;}}@media (min-device-width:100px) and (max-device-width:129px){.mobile #admob{width:114px;}.mobile img{max-width:110px !important;
}}@media (min-device-width:130px) and (max-device-width:161px){
.mobile #admob {width:144px;}.mobile img{max-width:140px !important;}}@media (min-device-width: 162px) and (max-device-width: 177px) {.mobile #admob {width:164px;}.mobile img{max-width:140px !important;}}@media (min-device-width:178px) and (max-device-width:209px) {
.mobile #admob {width:194px;}.mobile img{max-width:170px !important;}}@media (min-device-width:210px) and (max-device-width:221px) {.mobile #admob{width:206px;}.mobile img{max-width:190px !important;}}@media (min-device-width:222px) and (max-device-width:241px) {.mobile #admob{width:220px;}.mobile img{ max-width:210px !important;}}@media (min-device-width:242px) and (max-device-width:321px) {.mobile #admob{width:298px;}.mobile img{max-width:280px !important;}}@media (min-device-width:322px) and (max-device-width:361px) {.mobile img{max-width:300px !important;}}@media (min-device-width:362px) and (max-device-width:401px) {.mobile img{max-width:300px !important;}}@media (min-device-width:402px) and (max-device-width:481px) {.mobile img{max-width:300px !important;}}@media (min-device-width:482px) and (max-device-width:2500px) {
.mobile img{max-width:300px !important;}}

</style>
</b:if>

Cara Menghubungkan Domain .tk Dengan Hosting Idhostinger

Assalamu'alaikum.
Kali ini saya akan membuat posting tentang bagaimana cara menghubungkan domain gratis .tk dengan hosting gratis idhostinger.com
mungkin banyak yang sudah tau. tapi ini posting untuk yang belum tau saja.
langsung saja.

1. Siapkan domain .tk dulu. bisa lihat di Cara Membuat Domain Gratis .tk Dengan Cepat
2. Daftar / registrasi di idhostinger.com

3. Setelah daftar silahkan buat akun baru. tapi ingat, sebelumnya harus Verifikasi email anda terlebih dahulu.

4. Kalau sudah pilih ORDER. kita pilih yang gratisan aja.

5. Pilih Domain dan lalu ketikkan nama domain anda beserta password untuk login ke hosting anda.

6. Pilih Detail (Untuk melihat DNS yang harus di hubungkan domain).

7. kita ambil DNSnya.

ns1.idhostinger.com	31.170.163.241
ns2.idhostinger.com	64.191.115.234
ns3.idhostinger.com	173.192.183.247
ns4.idhostinger.com	31.170.164.249

 nb : yang di ambil cuman ns1.idhostinger.com, ns2.idhostinger.com, dst.

7. Kita masuk ke domain yang sudah kita buat. lalu pilih Modify.

8. Pilih Custom DNS. lalu isikan DNS hosting tbs ke domain. kemudian Save.

9. kalau sudah. lalu kita kembali ke hosting kita. kemudian pilih file manager. untuk lebih mudah kita pilih file manager 3 saja.

10. pilih Masuk ke file managere, lalu kemudian masukkan password yang telah anda buat tadi.

11. Selesei sudah. kita masuk ke Publik HTML.

12. Kemudian HAPUS file Default.php dan lalu Upload File anda dengan nama index.html atau index.php untuk mengganti halaman utamanya.

13. Selesai sudah. sebagai contohnya ini buatan saya : http://kaliwungucyber.tk/



Sekian Tutorial jadul dari saya. semoga bermanfaat bagi semua..
Assalamu'alaikum.. :)