CINTA

Satu hal yang Aku tidak Suka dengan Cinta, adalah Semakin Aku Menyangkalnya Semakin Dia Membuatku Jatuh Cinta

HARAPAN

Jika Kamu Memfokuskan Dirimu Pada Apa yang Tertinggal di Masa Lalu, Maka Kamu Tak Akan Pernah Bisa Melihat Apa yang Ada Di Depanmu

MASALAH

Menghindari Masalah Yang Kamu Hadapi itu, Sama Seperti Kamu Menghindari Kehidupan yang Harus Dijalani

PENYESALAN

Jangan Menyalahkan Atas Keinginan Apapun yang Tak Terwujud. Daripada Menunggu, Lebih Baik Kamu Berusaha Mewujudkannya

FAHAMI

Kalian Mungkin Mengenaliku, Tapi Tidak Memahamiku Sepenuhnya

INFO ANYAR | UAS Mata Kuliah Hukum Bisnis dilaksanakan tanggal 10-06-2016 pukul 14.00 - 15.30 | RKAKL Online Klik Disini | Chek in Online Garuda Klik Disini | Cek Garuda Miles Klik Disini | Materi MK Hukum Bisnis, Lihat Pada Menu Materi Kuliah Hkm. Bisnis |

Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

17 November 2013

Merancang dan Memahami Struktur Webblog

Blog merupakan singkatan dari web log adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.

Setelah anda memiliki akun Blog dan sebelum lebih jauh mengedit atau merubah tampilan blog kita lebih baik mengenal dulu struktur Dasar template blogspot, dengan mengetahui struktur dari template itu kita akan lebih mudah mengembangkan model tampilan layout template kita bagian mana yang ingin kita olah, tapi itu saja sebenarnya belum cukup karena minimal 10% kita juga harus sedikit mengerti tentang CSS (Cascading style sheet) dan HTML (Hyper Text Markup Language) dan juga Javascripts.

Merancang struktur Webblog seharusnya dilakukan pertama kali, sebelum anda mencari disainer web. Hal ini dikarenakan banyak pertanyaan pemula yang akan diajukan mereka adalah, bagaimana memahami struktur blog dan bagaimana mengubah template bawaan blog.

Apa isi utama Webblog
Jika anda kebingungan dengan produk atau jasa yang anda jual, apalagi si pembuat Webblog yang baru pertama kalinya mengenal barang anda. Di sisi lainnya, perubahan struktur Webblog, entah itu pengurangan atau penambahan kategori produk seringkali berakibat pada perubahan layout dan disain web secara keseluruhan.

Struktur Umum Webblog

Kebanyakan Webblog, style templatenya memiliki layout seperti ini :


Mari kita pelajari dulu dari blok yang paling besar sampai pada blok terkecil:
  1. Body : block paling lebar berwarna hijau (pewarnaan bisa menggunakan kode warna pada photoshop) yang merupakan badan dari template (pada dasarnya semua yang terlihat di layar komputer).
  2. Outer-wrapper: kotak berwarna putih yang melapisi bagian template (Body lebih mirip bagian luar template). Pada umumnya, kita membangun sebuah wrapper untuk menempatkan beberapa kotak lebih kecil di dalamnya. Kotak-kotak yang paling umum di dalam outer-wrapper adalah : header, content, dan footer
  3. Header : Kotak ini adalah bagian teratas dari blog (namanya sudah memperlihatkan dengan jelas. Tapi di dalam header kita punya sub-block lain-Header title block, Header description block, dan lainnya contohnya adsense banner, menu bar, dll. Jadi, untuk menggabungkan semua sub-block ini dalam satu kotak besar, kotak paling besar di bagian header biasanya Header-wrapper yang menggabungkan semua di dalamnya.
  4. Content: Di bawah header adalah content wrapper- pada dasarnya ini bagian terpenting dari semua block. Di dalam wrapper ini ada kotak-kotak sidebar (1,2 atau lebih) dan kotak utama ( main block) yang memuat Post, comment, dan beberapa iklan.
  5. Footer : adalah kotak paling bawah dari template. Seperti bagian header, kita juga memerlukan Footer wrapper untuk memuat sub-block yang lain di bagian footer.
  6. Main : Main-wrapper adalah kotak paling lebar dalam content wrapper. Di dalam main-wrapper terdapat Post block, comment block, date header, dan widget lain yang dibuat dari add page element option.
  7. Sidebar : adalah block yang memuat semua side widget- About me, label, archieve, text, Html and Javascript, adsense, dll. Dalam blogger template standard, kita sering menemukan satu sidebar saja, oleh karena itu disebut 2-column template (Main dan sidebar). Tapi sebenarnya mudah menambahkan banyak kolom sidebar. Yang paling banyak setelah satu sidebar adalah 2 sidebar atau 3-column template. Kita akan belajar itu nanti. Setelah mempelajari rangkaian tutorial ini, pertama kita pahami dulu struktur template, nanti akan terasa mudah menambahkan maupun memindahkan sidebar ke bagian kiri atau kanan main block.
  8. Blog Post : block berwarna abu-abu ini memuat isi tulisan terpenting- Judul posting, post, Post author, label, dll.

18 Mei 2012

Menambah Sub Menu Navigasi Pada Blog


Pertanyaan Elly Ismawaty saat perkuliahan IT For Business tentang bagaimana menambah sub menu navigasi pada blog memotivasiku untuk membuat tutorialnya. Karena setelah dipikir-pikir (mumpung mau mikir sih), penambahan sub menu navigasi memang penting, selain akan mempercantik tampilan blog, juga memanfaatkan serta mengefisiensikan tampilan blog, sehingga pengunjung menjadi semakin betah berlama-lama di blog kita. Mohon untuk membaca juga Posting ini yang sangat ada kaitannya dengan posting sebelumnya tentang Membuat Tautan Link Internal Blog.


Yang perlu diperhatikan saat menambahkan script sub menu navigasi adalah tag HTML pembuka dan tag HTML penutup harus matching (sama). Jika tidak, maka akan muncul jawaban seperti ini :
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "li" must be terminated by the matching end-tag "</li>".
Error 500

Adapun langkah-langkahnya adalah sebagai berikut :

1. Login ke Blog anda
2. Pilih Rancangan > Edit HTML (jangan lupa centang Expand Template Widget)
3. Cari salah satu Menu Navigasi Blog Anda yang akan anda tempatkan script sub-menu navigasi
4. Copy script HTML di bawah ini :
<ul class='children'/>
<li><a href='http://alamatbloganda.blogspot.com'>Sub Menu Navigasi</a>
<ul class='children'>
<li><a href='#'>Sub Menu Label</a></li>
<li><a href='#'>Sub Menu Label</a></li>
<li><a href='#'>Sub Menu Label</a></li>
<li><a href='#'>Sub Menu Label</a></li>
<li><a href='#'>Sub Menu Label</a></li>
</ul>
</li>
5. Paste dan tempatkan dibawah salah satu menu navigasi Blog Anda
6. Klik PRATINJAU Terlebih dahulu untuk memastikan apakah berhasil atau tidak
7. Jika berhasil, klik SIMPAN TEMPLATE

Catatan :
  • Ganti Tulisan alamatbloganda
  • Rubah tanda # dengan tautan link sub menu sesuai label posting
  • Rubah Tulisan warna Biru Sesuai Label Posting Blog anda, jika tautannya hanya internal blog

SELAMAT MENCOBA

--------Best Regard----------


---Aghaku---

16 Mei 2012

Memasang Widget Buku Tamu Dengan Slide J-Query

Setelah membuat tutorial Membuat Buku Tamu Buka Tutup, Posting kali ini termotivasi dari kiriman/konfirmasi tugas mandiri mahasiswaku. Ada tampilan widget buku tamu yang menurutku cukup unik dan agak berbeda. Penasaran gimana cara membuatnya..., memotivasi aku untuk kemudian berselancar di pagi hari, cari sana sini, sampe akhirnya mentok di blog Shangkala Talking. Dan kemudian aku praktekin, dan akhirnya....cekedooott..., hasiilnya seperti tampilan di bawah ini...










Oke deh...penasaran pengen buat seperti widget di atas, ikuti langkahnya berikut ini. Eits...tunggu dulu, yang pasti anda udah punya script buku tamu dulu yaa...

Baiklah kalo begitu, kita mulai...OK...

1. Login Ke Blog Anda (jangan blog orang lain)
2. Klik Rancangan > Tambah Widget > Pilih Menu HTML/Javascript
3. Copy script di bawah ini
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});


});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
height: auto;
background: #f90;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmvVNQOt52TsqPD_6xE-N6dcmozTrPkrNOFR94VdCnmzCVsoSO_oNZhFDiMGSbTPr2dAXVFvi0BeGNi9maLjaX2ZFHtkyVsreC40csN7WUYE75_DkGMEgJuVQMYvXZz-kzVEOZCHnBKhc/s1600/btn-slide.png) no-repeat center top;

}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc9Zm3OiLytCbEp0dNztXJu7k6-ouRymCDl96TjKUpstpdtJKv2Ho6DUdaHzcJhBPgoCRF3fnkT1M5knkSiZnDoFyVSCSS4pvBI4ricsheiV2yjcVNAjONJeum_50uzoRU-96sqs0kkk4/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>

<div id="panel">

<!-- SIMPAN SCRIPT BUKU TAMU ANDA DISINI -->

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>


Pada tulisan warna biru, ganti dengan kode/script buku tamu anda, sedangkan pada kata yang berwarna merah ganti dengan kata kata yang anda inginkan.

4. Save dan lihat hasilnya....

--------Best Regard----------


---Aghaku---

05 Mei 2012

Membuat Form Hubungi Kami dengan EmailMeForm

Setelah menulis tutorial tentang membuat kontak formulir online, ada banyak pertanyaan yang muncul dan meminta ane (khususnya mahasiwa ane di MK IT for Business) untuk segera menulis tutorial membuat contact us form (formulit hubungi kami). Kebetulan pada blog ane menggunakan form builder dari EmailMeForm.com.

1. Bukalah website  form builder EmailMeForm
2. Klik link / tulisan "Signup Now For Free"
3. Lalu isi form dengan dari diri Anda. Yakni : Username, password dan email
4. Ceklist / centang pada kotak pernyataan "I aggre to EmailMeForm Term of Service"
5. Kemudian, klik Sign Up atau Kirim Kueri
6. Akun anda sudah jadi, sekarang cek email anda dan dapatkan email verifikasi akun. Ikuti petunjuk pada email, klik link verifikasinya di email anda (pada bagian ini, mohon untuk diperhatikan, karena dari beberapa kejadian, di email yang didaftarkan tidak muncul passwordnya, hanya user id saja. Jadi sebaiknya anda catat passwordnya)
7. Setelah selesai, silakan menuju halaman anda. Akan tertampil sebagai berikut Untuk proses selanjutnya, klik link "click" diatas

8. Selanjutnya, anda akan diminta untuk mengkostumisasi template Anda. Di bagian ini, anda dapat memodifikasi sesuka hati tampilan seperti apa yang anda inginkan.
- Klik Template untuk memilih jenis/model Formulir
- Klik Field Setting untuk merubah field bidang yang dipilih
- Klik Add Field untuk menambah bagian/bidang pada form sesuai dengan kebutuhan

Klik SAVE jika dianggap sudah cukup
9. Setelah selesai membuat template, akan muncul petunjuk seperti di bawah ini. Ikuti petunjuknya. Klik No. 4 untuk mengembalikan ke Form Manager anda.


10. Setelah itu, Klik My Form, cari tanda <>code, kemudian klik hingga muncul gambar seperti dibawah ini

Catatan :
  • Jika ingin menampilkan formulir hubungi kami pada bagian laman, klik HTML code dan copy paste script tersebut
  • Jika inging menampilkan formulir pada menu navigasi, klik HTML link dan copy kode yang ada di Use this HTML Link in a Webpage

--------Best Regard----------


---Aghaku---

02 Mei 2012

Membuat Tautan (Link) Internal Blog pada Menu Navigasi

Tautan (link) secara sederhana diartikan sebagai sebuah tautan link yang saling terhubung antar link halaman postingan artikel satu dengan halaman postingan artikel lainnya yang saling bertautan dan terhubung dalam satu blog. Dengan kata lain, bahwa yang dimaksud dengan tautan link apabila di klik akan mengarahkan kita ke suatu halaman tertentu yang telah ditentukan, namun link juga bisa dibuat dengan menggunakan gambar, Link terbagi dalam berbagai macam jenis link diantaranya Link teks, Link gambar, Link window, Link popup de el el.

Dalam postingan kali ini, untuk menjawab banyak pertanyaan mahasiswa ane nih gan, kayaknya sedikit perlu ada tutorial bagaimana membuat tautan internal link. Untuk kali ini, ane cuman bahas tautan yang berupa tulisan/teks.

Sebelum membuat tautan antar link di internal blog, yang perlu diperhatikan adalah PENULISAN LABEL pada setiap posting. Kenapa penting, karena LABEL inilah yang menjadi kunci tautan internal blog. Perhatikan gambar di bawah ini :


Dari gambar di atas, dapat dilihat ada banyak label (kategori) yang jika kita klik salah satu label (kategori), maka dia akan mengarahkan pada link dari banyak postingan dengan label tertentu. Contoh di bawah ini ane ambil label (kategori) “TUTORIAL”, seperti gambar di bawah ini.

Perhatikan alamat (link) pada address bar yaitu http://gustibogor.blogspot.com/search/label/Tutorial. Tautan link tersebut akan mengarahkan kepada menu navigasi TUTORIAL dalam blog ane.



Bagaimana Memasukkannya..?

Nah, itu dia gan. Inti postingan ada di sini. Bagaimana memasukan tautan pada address bar di atas. Yuk kita mulai :
  1. Login ke blog anda
  2. Pilih menu Rancangan > Edit HTML (Ingat, centang terlebih dahulu Expand Template Widget dan Untuk memudahkan pencarian Tekan Ctrl+F)
  3. Pilih salah satu Menu Navigasi, Misal seperti link ini : <li><a href='http://www.freetemplatesblog.com'>Downloads Theme</a>
  4. Link di atas, masih asli bawaan dari HTML template blog professional yang sudah ada menu navigasinya. Ganti Tulisan yang berwarna biru dengan link blog anda (contoh dibawah ini ane ganti dengan link blog ane.
  5. Untuk mendapatkan link pengganti menu navigasi tersebut, Klik salah satu label (kategori) pada postingan, kemudian copy link yang ada di address bar seperti contoh gambar di atas

--------Best Regard----------


---Aghaku---

14 April 2012

Memodifikasi Formulir Login/Register Untuk Blog

Sering kan anda diminta untuk register/daftar pada situs atau web tertentu. Pastinyaaa.....Yuk deh Cari Tau bagaimana membuat form pendaftaran (register) pada blog, yuukk…mare…, Contoh Form Register ini saya modifikasi kembali yang ide dasarnya saya ambil dari blog Kode Blogger. Beberapa modifikasi meliputi pembahasaan dengan lebih menggunakan bahasa Indonesia (biar dibilang bener-bener cinta Indonesia mas bro…).
Untuk contoh login, lihatlah screenshot dibawah ini….


Contoh jadi lihat di Toserba Maya.Posisi Form tersebut berada di atas header blog/navigasi bar blog, dengan efek sliding. Seperti itulah kiranya yang akan saya buat, bila sobat tertarik, langsung saja berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Lalu carilah kode: </head>
7. Kalau sudah ketemu, letakan kode berikut di atas kode </head>



8. Setelah itu cari kode: ]]></b:skin> setelah ketemu copy paste-kan kode berikut tepat di atasnya yaa…


9. Udah…?, Lanjut lagi gan, cari lagi kode: </body> kemudian letakan kode dibawah ini tepat di atasnya




Simpan TEMPLATE (ingat...klik dulu PRATINJAU jika belum yakin betul dengan tampilan hasilnya...)

29 Maret 2012

Membuat Formulir Pendaftaran Online

Pendaftaran Online, sudah bukan lagi menjadi bagian terpisah dari layanan penyedia website/blog. Banyak manfaat yang bisa kita ambil dengan dengan layanan formulir pendaftaran secara online baik untuk penjualan, penelitian/survey, polling, form pendaftaran, form kontak, bantuan, testimoni, lamaran pekerjaan, dan sebagainya.

Sistem pedaftaran online baik untuk kepentingan personal maupun instiusi, secara umum memberikan manfaat efisiensi, efektif dan tepat waktu. Bahkan juga dijadikan tolak ukur dalam melihat hasil oleh penyedia secara real time.


Keuntungan menggunakan email form
Keuntungan menggunakan contact form yakni
  1. email kita tidak diketahui pasti secara publik sehingga bisa aman dari spammer.
  2. Selain itu, penggunaannya juga memudahkan, tidak perlu masuk ke akun email pengirim, cukup melengkapi form saja.
  3. Di samping itu juga, disediakan fasilitas Captcha atau kode verifikasi untuk mendeteksi si pengirim merupakan autobot atau bukan

Ada banyak penyedia/layanan pembuatan formulir online seperti emailmeform, fordeon, google.doc, mycontactform, WordPress ContactForm dan lain-lain. Perlu diketahui, memang membahas mengenai blog atau website, tentu tidak terlepas dari bahasa HTML dan CSS, atau bahkan PHP dan SQL, serta bahasa lain dalam bidang informasi. Contoh Form klil disini, contoh formulir  bimbingan akademik klik disini dan contoh formulir pemesanan barang disini.

26 Maret 2012

Cara Mudah Menghilangkan Garis Bawah Pada Link di Blog

Beberapa hari ini, ane perhatiin kok garis bawah/underline pada blog ane agak mengganggu yaa...selain itu, keliatannya gak sedap dipandang mata. Akhirnya, ane kunjungin deh mbah google buat nanyain gimana caranya MENGHILANGKAN GARIS BAWAH/UNDERLINE pada link.

Boleh jadi, tutorial ini dah gak up to date. akan tetapi, seperti yang ane bilang nih.... yang ane tampilin, ane coba terlebih dahulu, trus...sobat gampang mraktekinnya..., kebetulan nih tutorial ane dapet dari Blogger Septi Rosyidi dan setelah ane praktekin...hehehe.. jadi deh...

Usut punya usut, ternyata menghilangkan garis bawah garis bawah pada link cukup mudah. Ada juga yang memberikan tutorial dengan cara menambahkan script style="text-decoration:none" setelah alamat link. Misal :

<a href="http://gustibogor.blogspot%20.com/">blog pencerahan</a>
hasilnya seperti ini blog pencerahan

dirubah menjadi

<a href="http://gustibogor.blogspot%20.com/" style="text-decoration:none">blog pencerahan</a>
hasilnya seperti ini blog pencerahan

Akan tetapi, kalo menggunakan cara tersebut, mungkin lama kelamaan cape juga ya kalo tiap kali ada link yang kita buat trus pake nambah script tadi. Nah…biar antum gak cape.., dan ini udah ane praktekin nih…ada cara mudah MENGHILANGKAN GARIS BAWAH/UNDERLINE pada link.

  • Masuk ke blogger antum
  • Pilih Rancangan/Design >Edit Template (jangan lupa centang tuh Expand Template Widget)
  • Cari Kode ]]></b:skin>
  • Copy script di bawah ini dan simpan persis di atas kode ]]></b:skin>
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
  • Klik Simpan Template
Silahkan Cek kembali Blog Anda

SELAMAT MENCOBA…..MUDAH KOK…