Kamis, 29 September 2016

Tutorial Tentang Blog



Dengan adanya blog, saya bisa berbagi pengalaman atau hal-hal yang bermanfaat bagi pembaca. Meskipun pembaca blog saya sedikit tetapi ndak papalah, yang penting ada yang membaca walaupun satu orang, hehehe.
Selain digunakan untuk berbagi pengalaman, banyak yang memanfaatkan blog untuk ladang penghasilan tambahan, sarana berjualan online, dan lain sebagainya.
Jika anda membaca artikel berikut ini, mungkin anda merupakan salah satu orang yang sedang mencari tutorial cara membuat blog dengan mudah dan gak pakek ribet.
Melalui artikel berikut, saya akan berbagi panduan lengkap cara membuat blog yang cocok sekali bagi pemula.
Tenang saja, meskipun tulisan saya ini seperti cakar ayam, saya akan berusaha menyajikannya sebaik dan sedetail mungkin.
Terdapat puluhan platform untuk membuat blog. Maka dari itu, terlebih dahulu anda harus memutuskan platform mana yang ingin anda gunakan, entah itu wordpress, blogger, tumblr, jimdo, webs, squidoo, atau lain sebagainya.
Kalau menurut saya, platform yang paling populer, mudah, dan cocok sekali bagi pemula adalah blogger.
Lalu bagaimana langkah-langkah cara membuat blog di blogger? Yuuk simak langkah-langkahnya sebagai berikut :

  Part 1 : Langkah-langkah cara membuat blog

1. Pertama-tama, buka situs blogger.com
2. Login menggunakan akun gmail anda. Jika tidak mempunyai akun gmail, anda bisa membaca panduan cara membuat email di gmail yang pernah saya bagikan sebelumnya.
login gmail
3. Sebelum beralih ke halaman blogger. Terlebih dahulu anda harus memilih profil mana yang anda gunakan. Silakan pilih Buat profil Google+.
buat profil G+
4. Form profil akan terisi secara otomotis. Anda juga bisa mengeditnya. Jika sudah selesai mengedit, silakan pilih Upgrade.
pilih upgrade
5. Pada langkah berikut ini, langsung pilih Continue.
pilih continue
6. Pilih Continue pada langkah ini juga. Continue-continue melulu nih, hehehe
pilih continue lagi
7. Setelah itu, pilih Continue anyway.
pilih continue anyway
8. Okey, profil blogger anda sudah jadi. Profil blogger yang anda gunakan adalah profil Google+. Kemudian silakan pilih Finish.
pilih finish
9. Baiklah, selanjutnya pilih Continue to Blogger untuk beralih ke halaman blogger.
pilih continue to blogger
10. Untuk membuat gubuk baru, eh maksudnya blog baru, silakan pilih New Blog.
pilih new blog
11. Anda akan melihat tampilan seperti berikut ini. Silakan isi sesuai putunjuk nomor dibawah ini :
tampilan membuat blog
  • Nomor 1 : Isi dengan judul blog baru anda, misal Nesaba Media.
  • Nomor 2 : Isi dengan alamat url pada blog anda, misal nesaba-media.blogspot.com
  • Nomor 3 : Jika alamat url blog baru anda tersedia, maka akan muncul status centang yang tampak seperti pada gambar.
  • Nomor 4 : Pilih template yang anda sukai untuk blog baru anda.
12. Setelah itu, pilih Create blog!
13. Selamat blog baru anda selesai dibuat. Tapi jangan keburu kabur dulu, yuuuk sekalian belajar juga mengenai menu-menu yang terdapat pada blogger, bagaimana sih cara menulis konten di blogger dan lain sebagainya.

  SUMBER : http://nesabamedia.com/cara-membuat-blog/

Part 2 : Cara Mengganti Template Blog

Template blog atau website adalah desain halaman blog / website beserta seluruh komponennya seperti gambar, stylesheet, dsb, baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.

Dulu saya pernah bikin postingan mengganti template blog, namun karena sekarang Blogger menggunakan Tampilan Baru, jadi saya bikin lagi tutorialnya yang baru.

Di blogger Sobat dapat mengganti template blog anda secara leluasa sesuai dengan selera dan keinginan sobat. Anda dapat menggunakan template buatan Anda sendiri untuk blog anda, bisa juga anda mengganti template blog dengan template dari penyedia template gratis. Namun, jika sobat masih belum bisa dalam membuat template, pihak blogger sendiri sudah menyediakan beberapa template yang bisa anda pilih.

Berikut ini cara mengganti Template dengan template yang disediakan blogger :
  1. Login ke blogger.
  2. Pada Dashboard Blogger pilih Blog yang ingin anda ganti templatenya.
  3. Klik Template.
    Cara Mengganti Template Blog
  4. Klik tombol Sesuaikan.
    Cara Mengganti Template Blog
  5. Klik pada pilihan template yang tersedia.
  6. Anda dapat melakukan pengaturan tampilan pada menu di sebelah kiri.
  7. Jika sudah cocok dengan salah satu template, klik Terapkan ke Blog.
    Cara Mengganti Template Blog
  8. Selesai.

Untuk mengganti template dengan template dari penyedia template gratis, berikut caranya :
  • Download template yang ingin di gunakan.
  • Ekstrak file yang di download tadi, karena file yang akan kita upload ke blogger hanya file yang berekstensi .xml.
  • Login ke Blogger.
  • Klik Template.
  • Klik Cadangkan/Pulihkan yang ada dibagian atas kanan.
  • Untuk jaga-jaga backup template Anda terlebih dulu, klik Unduh Template Lengkap.
  • Klik tombol Browse, pilih file template yang tadi telah diekstrak.
  • Kemudian klik tombol Unggah.
  • Tunggu sampai proses selesai. Setelah itu lihat hasilnya pada Blog Sobat.

Part 3 : Menghapus / Menghilangkan Navbar Blogger

Navbar (navigation bar) default dari blogger biasanya terletak pada bagian paling atas dari sebuah blog. Navbar ini sering kali di hapus oleh para blogger karena di anggap memiliki kode yang tidak valid atau error, di samping stylenya yang kurang memuaskan bagi para blogger.

Pada tutorial ini saya akan share cara untuk menghilangkan navbar blogger tersebut ataupun hanya sekedar menyembunyikannya saja.

Berikut salah satu caranya :
  • Masuk ke akun blogger anda
  • Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode ]]></b:skin>, lalu letakkan kode berikut diatas kode ]]></b:skin>
    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none
    }
  • Terakhir klik Simpan Template.
Pada langkah di atas sobat sudah menyembunyikan / tidak menampilkan Navbar bawaan Blogger, namun pada template blog sobat masih terdapat kode dari Navbar tersebut.

Untuk cara kedua Menghilangkan Navbar bawaan Blogger, Sobat dapat melakukan langkah di bawah ini :
  • Sama seperti cara pertama. Masuk ke akun blogger anda
  • Klik pada Template.
  • Lalu klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode <body>, lalu letakkan kode berikut diatas kode <body>
    <script type='text/javascript'>
    <![CDATA[
    <!-- /*<body>*/ -->
    ]]>
    </script>
  • Simpan Template Anda.
  • Anda akan melihat gambar konformasi seperti di bawah ini.
    Menghapus / Menghilangkan Navbar Blogger
  • Klik Delete Widget untuk menghapus Navbar.
Jika Anda melakukan cara ini Anda juga akan menghapus Link Quick Edit gambar pensil, atau gambar kunci pas ama obeng di blog Sobat, namun cara ini sangat banyak mengurangi error pada blog.

Untuk cara ketiga dalam Menghapus / Menghilangkan Navbar Blogger, sama halnya dengan cara sebelumnya, cuma kode yang kita cari seperti dibawah ini :
 <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
       bla...
       bla...
       bla...
</b:widget>
</b:section>
Jika sudah ketemu, hapus kode tersebut lalu Simpan Template Anda.

Part 4 : Sistem Moderasi Komentar di Blog 

Pada kesempatan kali ini akan kita bahas salah satu fitur di Blogger, yaitu Sistem Moderasi Komentar. Moderasi komentar adalah salah satu fitur dari sebuah blog yang fungsinya untuk menyaring dan meninjau sebuah komentar di blog untuk di setujui atau tidak sebuah komentar oleh Admin blog.

Dengan mengaktifkan sistem ini ada beberapa keuntungan yang kita dapat, antara lain kita dapat memilih mana komentar yang pantas untuk ditampilkan mana yang tidak, selain itu juga dapat mengurangi komentar spam yang masuk ke blog kita, dan juga mengurangi link keluar dari blog spammer.

Namun juga terdapat kerugian jika kita mengaktifkan fitur ini, salah satunya para pengunjung yang memberikan komentar akan merasa kurang puas karena komentar yang di tulisnya tidak langsung muncul pada kolom komentar, selain itu Admin blog juga harus bisa selalu cek komentar, agar komentar tidak menumpuk atau membuat pengunjung yang berkomentar tidak sabar dan bertanya-tanya mengapa komentarnya tidak muncul-muncul.

Berikut langkah yang dilakukan untuk mengaktifkan / menonaktifkan Sistem Moderasi Komentar.
  • Buka blogger.com, lalu login ke akun Anda
  • Silahkan pilih nama blog yang akan anda moderasi komentarnya
  • Masuk ke Setelan > Pos dan Komentar
     photo moderasikoment_zps6be75ed9.jpg
  • Untuk mengaktifkan silakan pilih Selalu
  • Untuk menonaktifkan silakan pilih Tidak pernah
  • Terakhir klik Simpan setelan
     photo moderasikoment2_zps04071359.jpg

Part 5 : Membuat Dua Kolom Widget di Blogspot

Kadang template yang kita gunakan tidak sesuai dengan keinginan kita, misalnya kolom widget yang disediakan hanya ada satu padahal kita membutuhkan yang dua kolom, Tutorial kali ini saya buat untuk para blogger yang ingin Membuat Dua Kolom Widget di Blognya.

Dua Kolom Widget / Gadget

Untuk mempercantik blog dengan susunan gadget yang sesuai dengan keinginan Sobat, dalam hal ini jumlah kolom widget, Sobat dapat membuatnya sendiri dan terserah mau meletakkannya dimana, bisa di bawah posting, di atas posting, di bawah header, di dalam sidebar, di bagian footer ataupun di lain tempat.

Berikut Cara Membuat dua Buah Elemen Gadget/Widget :
  • Login Blogger Sobat.
  • Pilih Template > Edit HTML.
  • Ceklis / Centang Expand Widget Template.
  • Cari kode ]]></b:skin> dengan menekan tombol CTRL+F pada keyboard.
  • Letakkan script berikut ini diatas ]]></b:skin> :
    #box-main-container {
    clear:both;
    }
    .box-column {
    padding:0px 10px 10px 10px;
    border:1px dotted $bordercolor;
    }
    *Anda dapat mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya adalah Jarak ( Atas, Kanan, Bawah, Kiri ).
    *Anda juga dapat merubah border ( garis tepi widget ) dengan warna, caranya hapus $bordercolor dan ganti dengan kode warna yang Anda inginkan.
  • Kemudian cari kode
    •   <div id='main-wrapper'>
    •   <div id='content-wrapper'>
    •   <div id='header'> atau <div id='header-wrapper'>
    •   <div id='sidebar-wrapper'>
    •   <div id='bottom'>
    Keterangan :
    *<div id='main-wrapper'> adalah posisi halaman utama anda. Biasanya dipakai untuk penempatan menu horizontall atau daftar isi sebuah blog.
    *<div id='content-wrapper'> adalah posisi postingan.
    *<div id='header'> adalah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog.
    *<div id='sidebar-wrapper'> adalah posisi sidebar blog.
    *<div id='bottom'> adalah posisi paling bawah. Atau Footer Blog Anda.
    Silakan pilih salah satu, mau menempatkannya dimana.
  • Jika sudah didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini
    <div id="box-main-container"> <div id="box1" style="float: left; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col1" preferred="yes" style="float: left;"> </b:section></div> <div id="box2" style="float: right; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col2" preferred="yes" style="float: right;"> </b:section></div>
    <div style="clear: both;"> </div></div>
    Silakan Anda letakkan di bagian atas atau dibawah salah satu kode tadi.
    *Sebagai contoh saya letakkan dibawah kode <div id='main-wrapper'>
    Dua Kolom Widget / Gadget
    *Hasilnya seperti gambar berikut
    Dua Kolom Widget / Gadget
  • Jika sudah selesai klik Preview / Pratinjau dulu, baru klik Save Template / Simpan Template
Sumber :  http://wadahtutorial.blogspot.co.id/2013/04/membuat-dua-kolom-widget-di-blogspot.html

TUTORIAL HTML

Belajar HTML

HTML adalah kependekan dari Hyper Text Markup Language, yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web. Si HTML inilah yang menyusun sebuah halaman web menjadi sebagaimana yang kita lihat melalui browser (penjelajah internet). So, belajar HTML dan mengerti bagaimana cara HTML bekerja akan sangat penting jika kamu ingin terjun ke dunia web development. Sebenernya ketika bekerja dalam menampilkan dan menyusun sebuah halaman web si HTML ini nggak sendiri, dia juga dibantu oleh teman-temannya yang lain yaitu si CSS dan si JavaScript. Si HTML sendiri bertugas menyusun kerangka halaman web, si CSS yang akan merapihkan dan memperindah tampilan halaman web, sedangkan si JavaScript-lah yang bertugas membuat halaman web menjadi lebih interaktif. Pada kesempatan yang lain kita akan coba membahas CSS dan JavaScript, tapi untuk kali ini marilah kita buat si HTML menjadi tokoh utama😀 Perlu diperhatikan, HTML bukanlah sebuah bahasa pemrograman. HTML merupakan bahasa markup yang berisi perintah-perintah dengan format tertentu yang terstruktur untuk menampilkan tampilan tertentu. Baik, mari kita buat menjadi lebih sederhana. Misalnya di halaman web kita sering melihat ada teks yang ditulis tebal seperti berikut: tulisan tebal Nah untuk bisa membuat sebuah tulisan tebal seperti di atas, maka kita bisa membuatnya dengan HTML dengan kode berikut:
tulisan tebal
Sederhananya adalah, jika kita menuliskan kode seperti di atas, maka nanti si browser akan menampilkan tulisan tebal. Jadi HTML adalah format penulisan kode tertetu yang mampu dimengerti oleh browser untuk menampilkan tampilan tertentu.

Oke sekarang saya paham, selanjutnya dimana saya bisa menulis kode HTML dan bagaimana caranya?

Benar, untuk dapat membuat sebuah halaman web dan dapat ditampilkan oleh browser sebagaimana yang kita inginkan tentu dong ada aturan dan formatnya. Nggak mungkin kita tulis kode-kode HTML di Photoshop kemudian kita jalankan melalui browser. Ya nggak akan jalanlah. Untuk menulis kode HTML kita bisa menggunakan software code editor seperti Notepad, Notepad++, Sublime Text, Atom, atau yang lainnya. Dan agar kode kita mampu dibaca oleh browser dengan baik kita harus menyimpannya dalam format HTML yaitu .htm atau .html. Berikut ini contoh sederhana penulisan kode HTML:
<!DOCTYPE HTML>
<html>
 <head>
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>

  <p><b>Tulisan tebal</b>, <i>tulisan miring</i>, <u>tulisan bergaris bawah</u></p>
 </body>
</html>
Kita bisa menuliskan kode tersebut pada code editor seperti Notepad, Sublime Text atau yang lainnya. Adapun code editor yang saya gunakan disini adalah Sublime Text 2. Sekali lagi kamu bebas menggunakan code editor yang lain, itu hanya masalah pilihan saja. Screen Shot 2015-12-26 at 13.10.23 Kemudian kita simpan dengan format .htm atau .html, misalnya disini untuk contoh di atas kita simpan dengan nama index.html. Maka berikut ini tampilannya jika dibuka melalui browser: Screen Shot 2015-12-20 at 11.46.35 Pada contoh kode HTML di atas kita bisa melihat bahwa untuk memulai menulis kode HTML maka kita harus memulainya dengan kode <html> dan ditutup dengan </html>. Adapun mengenai kode <!DOCTYPE HTML> itu berfungsi sebagai pengenal HTML5 (di lain kesempatan insya Allah akan kita bahas), sementara ikuti saja seperti demikian. Kode-kode yang ada di antara <head> dan </head> berfungsi untuk memberikan informasi tambahan kepada browser, untuk contoh di atas misalnya ada <title> yang artinya memberikan informasi ke browser bahwa halaman web yang dibuat ini memiliki judul Selamat Datang HTML. Apa yang ingin kita tampilkan pada browser terletak di antara kode <body> dan </body>. Yups, itulah inti dari kode kita. Disitulah kode-kode yang akan menyusun halaman web ditulis. Sebagai penutup untuk panduan belajar HTML dasar ini saya ingin memberitahukan bahwa ada dua hal lainnya terkait HTML yang harus dipahami untuk memulai belajar HTML, yaitu TAG dan Atribut.

TAG

Sebenernya dari awal kita membahas HTML kita sudah berbicara tentang TAG, hanya saja belum saya jelaskan detailnya. TAG sederhananya adalah kode-kode tertentu yang menjadi pengenal bahwa kode tersebut adalah HTML dan bisa diterjemahkan oleh browser dengan tampilan tertentu. Misalnya tadi, untuk membuat sebuah tulisan tebal, maka kita bisa menggunakan TAG STRONG, atau TAG B. Untuk membuat paragraf kita bisa menggunakan TAG P. Dan masih banyak TAG HTML lainnya, tentunya dengan fungsi yang berbeda-beda. Dikesempatan lain akan kita pelajari lebih jauh. Untuk menuliskan TAG HTML kita bisa menggunakan huruf kecil ataupun kapital, bebas-bebas saja, browser sudah mengenalinya kok.

ATRIBUT

Atribut adalah karakteristik tambahan pada suatu TAG. Misalnya seperti yang sebelumnya sudah saya informasikan bahwa untuk membuat paragraf kita bisa menggunakan TAG P. Secara default paragraf yang akan ditampilkan oleh TAG P adalah rata kiri. Tapi jika kita ingin membuatnya rata tengah, kita bisa menambahkan atribut ALIGN dengan value CENTER ke dalam TAG P tersebut. Misalnya seperti berikut:
<p align="center">Untuk menampilkan tulisan rata tengah</p>
Setiap TAG memiliki atributnya masing-masing tergantung bagaimana sifat dari TAG tersebut. Dan sama seperti halnya dengan TAG, kita juga bebas menggunakan huruf kecil atau kapital dalam menuliskan atribut di dalam HTML. Demikianlah sedikit panduan belajar HTML dasar, semoga dapat bermanfaat bagi temen-temen yang sedang dalam proses belajar untuk menjadi web developer. Tenang saja, belajar HTML itu nggak susah kok, asalkan dicoba untuk dipraktekan dan terus berlatih pasti akan mudah untuk dikuasai. Ini adalah tutorial pertama pada seri belajar html yang saya tulis, kedepannya saya akan coba melanjutkan pembahasan belajar html ini dengan tutorial-tutorial lainnya.  Sekali lagi selamat belajar. Enjoy coding!

cara membuat web dengan web page maker

  • WEB PAGE MAKER V.2 :
Merupakan program aplikasi yang dirancang untuk membuat website sederhana menjadi dinamis, dengan web page maker anda tidak perlu lagi dipusingkan dengan
berbagai macam code HTML (HyperText Mark-up Language).
Mengaktifkan WEB PAGE MAKER V.2 :
_ Klik Menu Start
_ Pilih All Program (pada classic start menu pilih Program)
_ Pilih WEB PAGE MAKER V.2


2. Mengidentifikasikan Fungsi Menu, Tool dan Icon 
3. Membuat Halaman Web
Membuat Halaman Baru
Dapat dilakukan dengan cara :
_ Klick File – New Site
 

Menambah Halaman Web
Dapat dilakukan dengan cara :
_ Pada Site Contents Klick New Page
 

Menghapus Halaman Web
Dapat dilakukan dengan cara :
_ Klick Halaman yang akan dihapus – Klick Delete pada Site Contents
 
Meng-Copy Halaman Web
Dapat dilakukan dengan cara :
_ Klick Halaman yang akan dicopy – Klick Clone Page pada Site Contents
 
  1. Mendesain Web
Memasukkan Text pada Halaman Web
Dapat dilakukan dengan 2 (dua) cara :
  1. Klick Insert – Text
  2. Klick Text Pada Toolbar
Memasukkan Gambar pada Halaman Web
Dapat dilakukan dengan cara :
  1. Klick Insert - Image
Contoh :

_ Cari File gambar Anda
_ Pilih salah satu gambar
_ Klick Open
  1. Klick Insert – Image

_ Pilih salah satu gambar
_ Double Klick (klick 2 dua kali)
Memasukkan Audio pada Halaman Web
Dapat dilakukan dengan cara :
_ Klick Insert – Object
Contoh :
_ Cari File Audio/Musik Anda
_ Pilih salah satu File Audio/Musik Anda
_ Klick Open – Audio
Memasukkan Video pada Halaman Web
Dapat dilakukan dengan cara :
_ Klick Insert - Object
  1. Windows Media Video, dengan type file (*.avi; *.asf; *.asx; *.wmv;*.wmx)
  2. Real Media Video, dengan type file (*.ra; *.rm;)
  3. Quick Time, dengan type file (*.qt; *.mov; *.movie)
Contoh :
_ Cari File Video Anda
_ Pilih salah satu File Video Anda
_ Klick Open
Memasukkan Animasi Flash pada Halaman Web
Dapat dilakukan dengan cara :
_ Klick Insert – Flash Movie
Contoh :
_ Cari File Flash Anda (.swf)
_ Pilih salah satu File flash Anda Anda
_ Klick Open
Memasukkan Text Berjalan (Marquee) pada Halaman Web
Dapat dilakukan dengan cara :
_ Klick Insert – Marquee
Memasukkan Animasi Java pada Halaman Web
Dapat dilakukan dengan cara :
_ Klick Insert – Ready-to-use Java Scripts
_ Pilih salah satu
_ Klick OK
Memasukkan Warna Background pada Halaman Web
Dapat dilakukan dengan cara :
_ Klick Page – Page Properties – Appearance
Memberikan Tombol pada Halaman Web
Dapat dilakukan dengan cara :
_ Klick Insert – Navigation Bar
_ Pilih salah satu
_ Klick OK
Memberikan Background Music pada Halaman Web
Dapat dilakukan dengan cara :
_ Klick Page – Page Properties – Background
_ Klick OK
Menyimpan File dalam bentuk Web Page Maker V.2 (.wss)
_ Klick File – Save As
_ Sebagai Contoh Penulis menyimpannya pada Folder
Document\Latihan Web
_ Dengan File Name : website saya
Menampilkan Halaman Web yang telah di Export
Setelah File Di Export dalam bentuk HTML, maka kita dapat melihat hasilnya
dengan cara :
  1. Buka Explorer (Klick Kanan pada menu Start
  2. Klick dua kali pada Folder
  3. Klick dua kali pada Folder
  4. Pada Folder Latihan Web Klick dua kali pada file
  5. Mengedit Halaman Web yang telah di Simpan
Mengedit Halaman dalam bentuk Web Page Maker V.2 (.wss)
  1. Buka Explorer (Klick Kanan pada menu Start
  2. Klick dua kali pada Folder
  3. Klick dua kali pada Folder
  4. Klick dua kali pada File  
SUMBER : http://dianasic.blogspot.co.id/2014/09/cara-membuat-web-dengan-web-page-maker.html